diff --git a/addons/rose/addon/components/rose/dialog/cover/index.hbs b/addons/rose/addon/components/rose/dialog/cover/index.hbs new file mode 100644 index 000000000..4d56b0d2d --- /dev/null +++ b/addons/rose/addon/components/rose/dialog/cover/index.hbs @@ -0,0 +1,21 @@ +
+ + diff --git a/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx b/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx new file mode 100644 index 000000000..825bd4d80 --- /dev/null +++ b/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx @@ -0,0 +1,42 @@ + +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; + + + +# Dialog Cover + +A template-only dialog component that covers the viewport and accepts arbitrary +content. Note that this component is unique to Boundary and is not part of the +Structure design system. + +Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's +`dependencies` rather than `devDependencies`. + + + {{ + template: hbs` + + <:header> +

Cover Header

+ + <:body> +

Cover body

+ +
+ ` + }}
+
+ + +```htmlbars + + <:header> +

Cover Header

+ + <:body> +

Cover body

+ +
+``` diff --git a/addons/rose/addon/styles/rose/components/dialog/_cover.scss b/addons/rose/addon/styles/rose/components/dialog/_cover.scss new file mode 100644 index 000000000..04ea3d566 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/dialog/_cover.scss @@ -0,0 +1,34 @@ +.rose-dialog-cover { + position: fixed; + top: 0; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--white); + text-align: center; + + a { + color: var(--white); + } + + .rose-dialog-cover-header, + .rose-dialog-cover-body { + max-width: 650px; + } +} +// overlay +.rose-dialog-cover-modal-overlay { + content: ' '; + background-color: var(--black); + width: 100vw; + height: 100vh; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + opacity: 0.85; +} diff --git a/addons/rose/addon/styles/rose/components/_dialog.scss b/addons/rose/addon/styles/rose/components/dialog/_dialog.scss similarity index 97% rename from addons/rose/addon/styles/rose/components/_dialog.scss rename to addons/rose/addon/styles/rose/components/dialog/_dialog.scss index 677af2bfc..be87d0b07 100644 --- a/addons/rose/addon/styles/rose/components/_dialog.scss +++ b/addons/rose/addon/styles/rose/components/dialog/_dialog.scss @@ -1,6 +1,6 @@ -@use '../variables/sizing'; -@use '../utilities/type'; -@use '../variables/media'; +@use '../../variables/sizing'; +@use '../../utilities/type'; +@use '../../variables/media'; $m: sizing.rems(m); // 16 $s: sizing.rems(s); // 12 diff --git a/addons/rose/addon/styles/rose/components/dialog/_index.scss b/addons/rose/addon/styles/rose/components/dialog/_index.scss new file mode 100644 index 000000000..6b25fcfce --- /dev/null +++ b/addons/rose/addon/styles/rose/components/dialog/_index.scss @@ -0,0 +1,2 @@ +@import 'cover'; +@import 'dialog'; diff --git a/addons/rose/app/components/rose/dialog/cover.js b/addons/rose/app/components/rose/dialog/cover.js new file mode 100644 index 000000000..f4b33fe7f --- /dev/null +++ b/addons/rose/app/components/rose/dialog/cover.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/dialog/cover'; diff --git a/addons/rose/package.json b/addons/rose/package.json index 14930a8fb..c26480a79 100644 --- a/addons/rose/package.json +++ b/addons/rose/package.json @@ -33,6 +33,7 @@ "ember-cli-babel": "^7.23.0", "ember-cli-htmlbars": "^5.3.1", "ember-focus-trap": "^0.4.0", + "ember-named-blocks-polyfill": "^0.2.4", "ember-radio-button": "^2.0.1", "ember-uuid": "^2.1.0", "emberx-select": "github:adopted-ember-addons/emberx-select#bc5f774", diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index be1b76d79..8bb8b116d 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -28,17 +28,66 @@ - + + Menu item + Menu item - danger + + + Button menu item + Button - danger + + + + Menu item + + + + + Menu item + Button menu item + + + + + +
    +
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
+
+
+
+ + + <:header> -

Rose Frame Header

+

Authentication Pending

<:body> - Rose Frame Body - - - Text - Text - Text - +

Complete authentication in the newly-opened window.

+

Don't see the new window? Try again.

+

Cancel

-
+ diff --git a/addons/rose/tests/integration/components/rose/dialog/cover-test.js b/addons/rose/tests/integration/components/rose/dialog/cover-test.js new file mode 100644 index 000000000..ea9a44f76 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/dialog/cover-test.js @@ -0,0 +1,29 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | rose/dialog/cover', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + assert.expect(3); + + await render(hbs` + + <:header> +

Authentication Pending

+ + <:body> +

Complete authentication in the newly-opened window.

+

Don't see the new window? Try again.

+

Cancel

+ +
+ `); + + assert.ok(find('.rose-dialog-cover')); + assert.ok(find('.rose-dialog-cover-header')); + assert.ok(find('.rose-dialog-cover-body')); + }); +}); diff --git a/yarn.lock b/yarn.lock index 4b6994ddd..227033b3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6295,9 +6295,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001181: - version "1.0.30001207" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001207.tgz#364d47d35a3007e528f69adb6fecb07c2bb2cc50" - integrity sha512-UPQZdmAsyp2qfCTiMU/zqGSWOYaY9F9LL61V8f+8MrubsaDGpaHD9HRV/EWZGULZn0Hxu48SKzI5DgFwTvHuYw== + version "1.0.30001208" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz#a999014a35cebd4f98c405930a057a0d75352eb9" + integrity sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA== capture-exit@^2.0.0: version "2.0.0" @@ -11987,11 +11987,16 @@ homedir-polyfill@^1.0.1: dependencies: parse-passwd "^1.0.0" -hosted-git-info@^2.1.4, hosted-git-info@^2.7.1, hosted-git-info@^2.8.8: +hosted-git-info@^2.1.4, hosted-git-info@^2.7.1: version "2.8.8" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== +hosted-git-info@^2.8.8: + version "2.8.9" + resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" + integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== + hosted-git-info@^3.0.2: version "3.0.8" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d" @@ -19413,7 +19418,14 @@ sshpk@^1.7.0: safer-buffer "^2.0.2" tweetnacl "~0.14.0" -ssri@^6.0.0, ssri@^6.0.1: +ssri@^6.0.0: + version "6.0.2" + resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5" + integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q== + dependencies: + figgy-pudding "^3.5.1" + +ssri@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8" integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==