feat: 🎸 add dialog cover component

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],
+  },
 };

addons/rose/addon/components/rose/dialog/cover/index.hbs

@@ -0,0 +1,21 @@
+<div class="rose-dialog-cover-modal-overlay"></div>
+
+<section
+  ...attributes
+  role="dialog"
+  class="rose-dialog-cover"
+  id={{this.id}}
+  aria-describedby={{concat "dialog-cover-header-" this.id}}
+  tabindex="0"
+  {{focus-trap}}
+>
+  <header
+    class="rose-dialog-cover-header"
+    id={{concat "dialog-cover-header-" this.id}}
+  >
+    {{yield to="header"}}
+  </header>
+  <div class="rose-dialog-cover-body">
+    {{yield to="body"}}
+  </div>
+</section>

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';
+
+<Meta title="Rose|Dialog|Cover" component="Cover" />
+
+# 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`.
+
+<Preview>
+  <Story name="Cover" height="15rem">{{
+    template: hbs`
+    <Rose::Dialog::Cover>
+      <:header>
+        <h1>Cover Header</h1>
+      </:header>
+      <:body>
+        <p>Cover body</p>
+      </:body>
+    </Rose::Dialog::Cover>
+    `
+  }}</Story>
+</Preview>
+
+
+```htmlbars
+<Rose::Dialog::Cover>
+  <:header>
+    <h2>Cover Header</h2>
+  </:header>
+  <:body>
+    <p>Cover body</p>
+  </:body>
+</Rose::Dialog::Cover>
+```

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;
+}

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

addons/rose/addon/styles/rose/components/dialog/_index.scss

@@ -0,0 +1,2 @@
+@import 'cover';
+@import 'dialog';

addons/rose/app/components/rose/dialog/cover.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/dialog/cover';

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"

addons/rose/tests/dummy/app/templates/index.hbs

@@ -79,3 +79,15 @@
     </Rose::Dropdown>
   </form.radioGroup>
 </Rose::Form>
+
+
+<Rose::Dialog::Cover>
+  <:header>
+    <h1>Authentication Pending</h1>
+  </:header>
+  <:body>
+    <p>Complete authentication in the newly-opened window.</p>
+    <p>Don't see the new window?  <a href="#">Try again.</a></p>
+    <p><a href="#">Cancel</a></p>
+  </:body>
+</Rose::Dialog::Cover>

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`
+      <Rose::Dialog::Cover>
+        <:header>
+          <h1>Authentication Pending</h1>
+        </:header>
+        <:body>
+          <p>Complete authentication in the newly-opened window.</p>
+          <p>Don't see the new window?  <a href="#">Try again.</a></p>
+          <p><a href="#">Cancel</a></p>
+        </:body>
+      </Rose::Dialog::Cover>
+    `);
+
+    assert.ok(find('.rose-dialog-cover'));
+    assert.ok(find('.rose-dialog-cover-header'));
+    assert.ok(find('.rose-dialog-cover-body'));
+  });
+});

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==

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==