From 1effa79c9366d70d7d5392d5cb21a8831fc6d39c Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 9 Apr 2021 11:07:23 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20dialog=20cover=20c?= =?UTF-8?q?omponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/.storybook/main.js | 7 +++- .../components/rose/dialog/cover/index.hbs | 21 ++++++++++ .../rose/dialog/cover/index.stories.mdx | 42 +++++++++++++++++++ .../styles/rose/components/dialog/_cover.scss | 34 +++++++++++++++ .../rose/components/{ => dialog}/_dialog.scss | 6 +-- .../styles/rose/components/dialog/_index.scss | 2 + .../rose/app/components/rose/dialog/cover.js | 1 + addons/rose/package.json | 1 + .../rose/tests/dummy/app/templates/index.hbs | 12 ++++++ .../components/rose/dialog/cover-test.js | 29 +++++++++++++ ui/desktop/electron-app/yarn.lock | 2 +- yarn.lock | 38 +++++++++++++---- 12 files changed, 181 insertions(+), 14 deletions(-) create mode 100644 addons/rose/addon/components/rose/dialog/cover/index.hbs create mode 100644 addons/rose/addon/components/rose/dialog/cover/index.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/dialog/_cover.scss rename addons/rose/addon/styles/rose/components/{ => dialog}/_dialog.scss (97%) create mode 100644 addons/rose/addon/styles/rose/components/dialog/_index.scss create mode 100644 addons/rose/app/components/rose/dialog/cover.js create mode 100644 addons/rose/tests/integration/components/rose/dialog/cover-test.js diff --git a/addons/rose/.storybook/main.js b/addons/rose/.storybook/main.js index a1cce427b..587e98d49 100644 --- a/addons/rose/.storybook/main.js +++ b/addons/rose/.storybook/main.js @@ -1,3 +1,5 @@ +const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin'); + module.exports = { stories: [ '../addon/components/**/*.stories.(js|mdx)', @@ -7,5 +9,8 @@ module.exports = { '@storybook/addon-knobs', '@storybook/addon-actions', '@storybook/addon-docs', - ] + ], + emberOptions: { + polyfills: [namedBlockPolyfill], + }, }; 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 3a4666505..097b486bf 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 a3e605a30..8bb8b116d 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -79,3 +79,15 @@ + + + + <:header> +

Authentication Pending

+ + <:body> +

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/ui/desktop/electron-app/yarn.lock b/ui/desktop/electron-app/yarn.lock index 58a5e01a5..45dcdf0a4 100644 --- a/ui/desktop/electron-app/yarn.lock +++ b/ui/desktop/electron-app/yarn.lock @@ -3562,7 +3562,7 @@ xmlbuilder@^9.0.7: resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d" integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0= -xmldom@0.1.x, xmldom@0.5.0: +xmldom@0.1.x, xmldom@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.5.0.tgz#193cb96b84aa3486127ea6272c4596354cb4962e" integrity sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA== diff --git a/yarn.lock b/yarn.lock index 035ecf3ed..7fc74476d 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.30001205" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8" - integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og== + 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" @@ -8243,7 +8243,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0, em resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.1.tgz#5016b80cdef37036c4282eef2d863e1d73576879" integrity sha512-sKvOiPNHr5F/60NLd7SFzMpYPte/nnGkq/tMIfXejfKHIhaiIkYFqX8Z9UFTKWLLn+V7NOaby6niNPZUdvKCRw== -ember-cli-babel@7, ember-cli-babel@^7.0.0, ember-cli-babel@^7.1.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.13.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.20.5, ember-cli-babel@^7.21.0, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.26.2, ember-cli-babel@^7.26.3, ember-cli-babel@^7.4.0, ember-cli-babel@^7.5.0, ember-cli-babel@^7.7.3: +ember-cli-babel@7, ember-cli-babel@^7.0.0, ember-cli-babel@^7.1.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.13.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.20.5, ember-cli-babel@^7.21.0, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.26.2, ember-cli-babel@^7.26.3, ember-cli-babel@^7.4.0, ember-cli-babel@^7.5.0, ember-cli-babel@^7.7.3: version "7.26.3" resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.3.tgz#e93ce7ec458208894d10844cf76e41cc06fdbeb6" integrity sha512-ZCs0g99d3kYaHs1+HT33oMY7/K+nLCAAv7dCLxsMzg7cQf55O6Pq4ZKnWEr3IHVs33xbJFnEb9prt1up36QVnw== @@ -9114,6 +9114,14 @@ ember-modifier@^2.1.1: ember-destroyable-polyfill "^2.0.2" ember-modifier-manager-polyfill "^1.2.0" +ember-named-blocks-polyfill@^0.2.4: + version "0.2.4" + resolved "https://registry.yarnpkg.com/ember-named-blocks-polyfill/-/ember-named-blocks-polyfill-0.2.4.tgz#f5f30711ee89244927b55aae7fa9630edaadc974" + integrity sha512-PsohC7ejjS7V++6i/JSy0pl1hXLV3IS3Qs+O7SrjIPYcg1UEmUwqgPiDmXqNgy0p2dc5TK5bIJTtX8wofCI63Q== + dependencies: + ember-cli-babel "^7.19.0" + ember-cli-version-checker "^5.1.1" + ember-notify@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/ember-notify/-/ember-notify-6.0.0.tgz#f92978e3452934f7c9b70d76ad2ec62bf072495a" @@ -11939,9 +11947,9 @@ heimdalljs@^0.3.0: rsvp "~3.2.1" highlight.js@^10.1.1, highlight.js@^10.4.1, highlight.js@~10.7.0: - version "10.7.1" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955" - integrity sha512-S6G97tHGqJ/U8DsXcEdnACbirtbx58Bx9CzIVeYli8OuswCfYI/LsXH2EiGcoGio1KAC3x4mmUwulOllJ2ZyRA== + version "10.7.2" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360" + integrity sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg== hmac-drbg@^1.0.1: version "1.0.1" @@ -11979,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" @@ -19422,7 +19435,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==