Merge pull request #521 from hashicorp/feature-dialog-cover

feat: 🎸 add dialog cover component

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

@@ -28,17 +28,66 @@
   </header.utilities>
 </Rose::Header>
 
-<Rose::Frame>
+<Rose::Dropdown @text="Dropdown" as |dropdown|>
+  <dropdown.link @route="index">Menu item</dropdown.link>
+  <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
+  <dropdown.separator></dropdown.separator>
+
+  <dropdown.button>Button menu item</dropdown.button>
+  <dropdown.button @style="danger">Button - danger</dropdown.button>
+  <dropdown.separator />
+
+  <dropdown.section @title="Dropdown Section Title">
+    <dropdown.link @route="index">Menu item</dropdown.link>
+  </dropdown.section>
+</Rose::Dropdown>
+
+<Rose::Dropdown @showCaret={{false}} @icon="more-horizontal" as |dropdown|>
+  <dropdown.link @route="index">Menu item</dropdown.link>
+  <dropdown.button>Button menu item</dropdown.button>
+</Rose::Dropdown>
+
+<Rose::Form as |form|>
+  <form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
+    <Rose::Dropdown @text="Color" as |dropdown|>
+      <ul>
+        <li>
+          <dropdown.item>
+            <radioGroup.radio
+              @label="Red"
+              @value="red"
+              @icon="user-organization" />
+          </dropdown.item>
+        </li>
+        <li>
+          <dropdown.item>
+            <radioGroup.radio
+              @label="Green"
+              @value="green"
+            />
+          </dropdown.item>
+        </li>
+        <li>
+          <dropdown.item>
+            <radioGroup.radio
+              @label="Blue"
+              @value="blue"
+            />
+          </dropdown.item>
+        </li>
+      </ul>
+    </Rose::Dropdown>
+  </form.radioGroup>
+</Rose::Form>
+
+
+<Rose::Dialog::Cover>
   <:header>
-    <h2>Rose Frame Header</h2>
+    <h1>Authentication Pending</h1>
   </:header>
   <:body>
-    Rose Frame Body
-    <Rose::Separator />
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='index'>Text</nav.link>
-      <nav.link @route='playground'>Text</nav.link>
-      <nav.link @route='playground'>Text</nav.link>
-    </Rose::Nav::Tabs>
+    <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::Frame>
+</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'));
+  });
+});

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