Add 'Showcase' section (WIP)

hashicorp · Oct 21, 2022 · 9a7a6bf · 9a7a6bf
1 parent 3d22fcc
commit 9a7a6bf
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 27 deletions.
diff --git a/packages/components/tests/dummy/app/controllers/components/dialog.js b/packages/components/tests/dummy/app/controllers/components/dialog.js
@@ -1,8 +1,23 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class DialogController extends Controller {
-  // notice: this is used as "noop" function for the onClose callback of the Dialog component
+  @tracked basicDialogActive = false;
+  @tracked formDialogActive = false;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true;
+    document.body.style.overflow = 'hidden';
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+    document.body.style.overflow = 'auto';
+  }
+
   @action
   noop() {
     console.log('noop');

diff --git a/packages/components/tests/dummy/app/routes/components/dialog.js b/packages/components/tests/dummy/app/routes/components/dialog.js
@@ -1,3 +1,15 @@
 import Route from '@ember/routing/route';
 
-export default class ComponentsDialogRoute extends Route {}
+import {
+  COLORS,
+  SIZES,
+} from '@hashicorp/design-system-components/components/hds/dialog';
+
+export default class ComponentsDialogRoute extends Route {
+  model() {
+    return {
+      COLORS,
+      SIZES,
+    };
+  }
+}
diff --git a/packages/components/tests/dummy/app/styles/pages/db-dialog.scss b/packages/components/tests/dummy/app/styles/pages/db-dialog.scss
@@ -1 +1,10 @@
-// DIALOG
+// DIALOG
+
+.dummy-dialog-sample-item {
+  margin-bottom: 30px;
+
+  .hds-dialog[open] {
+    position: relative;
+    display: inline-block;
+  }
+}
diff --git a/packages/components/tests/dummy/app/templates/components/dialog.hbs b/packages/components/tests/dummy/app/templates/components/dialog.hbs
@@ -58,31 +58,95 @@
 <section data-test-percy>
   <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
 
-  {{! ADD YOUR CONTENT HERE }}
+  <h4 class="dummy-h4">Color</h4>
+  {{#each @model.COLORS as |color|}}
+    <p class="dummy-paragraph">{{capitalize color}}</p>
+    <br />
+    <div class="dummy-dialog-sample-item">
+      <Hds::Dialog open @color={{color}} id="dialog-example-{{color}}" as |D|>
+        <D.Header @icon="info">
+          {{capitalize color}}
+        </D.Header>
+        <D.Body>Dialog content</D.Body>
+        <D.Footer>
+          <form method="dialog" aria-label="Form example {{color}}">
+            <Hds::ButtonSet>
+              <Hds::Button type="submit" @text="Confirm" @color={{if (eq color "critical") "critical"}} />
+              <Hds::Button type="submit" @text="Cancel" @color="secondary" />
+            </Hds::ButtonSet>
+          </form>
+        </D.Footer>
+      </Hds::Dialog>
+    </div>
+  {{/each}}
+
+  <h4 class="dummy-h4">Size</h4>
+  {{#each @model.SIZES as |size|}}
+    <p class="dummy-paragraph">{{capitalize size}}</p>
+    <br />
+    <div class="dummy-dialog-sample-item">
+      <Hds::Dialog open @size={{size}} id="dialog-example-{{size}}" as |D|>
+        <D.Header @icon="info">
+          {{capitalize size}}
+        </D.Header>
+        <D.Body>Dialog content</D.Body>
+        <D.Footer>
+          <form method="dialog" aria-label="Form example {{size}}">
+            <Hds::ButtonSet>
+              <Hds::Button type="submit" @text="Confirm" />
+              <Hds::Button type="submit" @text="Cancel" @color="secondary" />
+            </Hds::ButtonSet>
+          </form>
+        </D.Footer>
+      </Hds::Dialog>
+    </div>
+  {{/each}}
 
   {{! This below is just an example of invocation, to get started }}
-  <Hds::Dialog as |D|>
-    <D.Header @icon="hexagon">
-      Why do you want to leave the beta?
-    </D.Header>
-    <D.Body>
-      <Hds::Form::Select::Field @width="100%" as |F|>
-        <F.Label>Select the primary reason</F.Label>
-        <F.Options>
-          <option></option>
-        </F.Options>
-      </Hds::Form::Select::Field>
-      <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
-        <F.Label>Your feedback</F.Label>
-      </Hds::Form::Textarea::Field>
-    </D.Body>
-    <D.Footer>
-      <form method="dialog">
-        <Hds::ButtonSet>
-          <Hds::Button type="submit" @text="Leave Beta" />
+  <h4 class="dummy-h4">Invocation</h4>
+  <Hds::ButtonSet>
+    <Hds::Button @text="Open basic dialog" @color="secondary" {{on 'click' (fn this.activateModal "basicDialogActive")}}/>
+    <Hds::Button @text="Open form dialog" @color="secondary" {{on 'click' (fn this.activateModal "formDialogActive")}}/>
+  </Hds::ButtonSet>
+
+  {{#if this.basicDialogActive}}
+    <Hds::Dialog id="invocation-basic-dialog" @isOpen={{true}} @onOpen={{this.noop}} @onClose={{fn this.deactivateModal "basicDialogActive"}} as |D|>
+      <D.Header @icon="info">
+        Dialog title
+      </D.Header>
+      <D.Body>Dialog content</D.Body>
+      <D.Footer>
+        <form method="dialog" aria-label="Dialog example basic invocation">
           <Hds::Button type="submit" @text="Cancel" @color="secondary" />
-        </Hds::ButtonSet>
-      </form>
-    </D.Footer>
-  </Hds::Dialog>
+        </form>
+      </D.Footer>
+    </Hds::Dialog>
+  {{/if}}
+
+  {{#if this.formDialogActive}}
+    <Hds::Dialog id="invocation-form-dialog" @isOpen={{true}} @onOpen={{this.noop}} @onClose={{fn this.deactivateModal "formDialogActive"}} as |D|>
+      <D.Header @icon="info">
+        Why do you want to leave the beta?
+      </D.Header>
+      <D.Body>
+        <Hds::Form::Select::Field @width="100%" as |F|>
+          <F.Label>Select the primary reason</F.Label>
+          <F.Options>
+            <option></option>
+          </F.Options>
+        </Hds::Form::Select::Field>
+        <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
+          <F.Label>Your feedback</F.Label>
+        </Hds::Form::Textarea::Field>
+      </D.Body>
+      <D.Footer>
+        <form method="dialog" aria-label="Dialog example form invocation">
+          <Hds::ButtonSet>
+            <Hds::Button type="submit" @text="Leave Beta" />
+            <Hds::Button type="submit" @text="Cancel" @color="secondary" />
+          </Hds::ButtonSet>
+        </form>
+      </D.Footer>
+    </Hds::Dialog>
+  {{/if}}
 </section>