fix(new working example for drawer): surf1971

HelixDesignSystem · Apr 27, 2020 · 3d2c56a · 3d2c56a
1 parent 5808364
commit 3d2c56a
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/docs/components/drawer/index.html b/docs/components/drawer/index.html
@@ -124,4 +124,78 @@ <h3 v-text="title"></h3>
         </footer>
       </div>
     </section>
+
+    <section>
+        <header>
+          <h2 id="basic-drawer">Positionable Descendants</h2>
+        </header>
+
+        <div class="example" id="vue-slottedDrawerDemo" >
+          <header>
+            <form class="beta-hxForm">
+              <hx-text-control>
+                <input
+                  id="txtSlottedDrawerTitle"
+                  type="text"
+                  v-model="drawerTitle"
+                />
+                <label for="txtSlottedDrawerTitle">
+                  Title
+                </label>
+              </hx-text-control>
+              <p><code>hx-drawer &gt; [slot="fixed"]</code></p>
+            </form>
+          </header>
+
+          <div>
+              <hx-disclosure aria-controls="drawer-with-slotted-positionable-children" class="hxBtn">
+                  Drawer with Slotted Positionable Children
+                </hx-disclosure>
+
+                <hx-drawer id="drawer-with-slotted-positionable-children">
+                  <header>
+                    <h4 v-text="drawerTitle"></h4>
+                  </header>
+
+                  <hx-div class="hxMd">
+                    <p>Drawer Body</p>
+                    <p>
+                      <hx-icon type="info-circle" id="info1"></hx-icon>
+                      <hx-disclosure aria-controls="popover1" class="hxBtn">
+                        Toggle Popover #1
+                      </hx-disclosure>
+                    </p>
+                  </hx-div>
+
+                  <footer>
+                    <p>Drawer Foot</p>
+                  </footer>
+
+                  <!-- slotted positionable children -->
+
+                  <hx-tooltip slot="fixed" for="info1" position="left-middle">
+                    <header>Tooltip #1</header>
+                    <p>
+                      <code>hx-drawer &gt; hx-tooltip[slot="fixed"]</code>
+                    </p>
+                  </hx-tooltip>
+
+                  <hx-popover slot="fixed" id="popover1" position="left-middle">
+                    <header>
+                      Popover #1
+                    </header>
+
+                    <hx-div>
+                      <p>This popover is a slotted child of hx-drawer.</p>
+                      <p><code>hx-drawer &gt; hx-popover[slot="fixed"]</code></p>
+                    </hx-div>
+                  </hx-popover>
+                </hx-drawer>
+          </div>
+
+          <footer>
+            <pre><code v-text="snippet"></code></pre>
+          </footer>
+        </div>
+      </section>
 {% endblock %}
diff --git a/docs/components/drawer/slotted-drawer-demo.js b/docs/components/drawer/slotted-drawer-demo.js
@@ -0,0 +1,38 @@
+import Util from '../../_util';
+
+if (document.getElementById('vue-slottedDrawerDemo')) {
+    new Vue({
+        el: '#vue-slottedDrawerDemo',
+        data: {
+            hasPadding: true,
+            hasLengthyContent: false,
+            drawerTitle: 'Drawer with Slotted Positionable Children',
+        },
+        computed: {
+            snippet: function () {
+                return Util.snippet(`
+                    <hx-disclosure
+                      aria-controls="drawer-with-slotted-positionable-children"
+                      class="hxBtn"
+                    >
+                    Drawer with Slotted Positionable Children
+                    </hx-disclosure>
+
+                    <hx-drawer
+                      id="drawer-with-slotted-positionable-children"
+                    >
+                      <header></header>
+
+                      <hx-div>
+                        ...
+                      </hx-div>
+
+                      <footer>
+                        ...
+                      </footer>
+                    </hx-drawer>
+                `);
+            },
+        },
+    });
+}
diff --git a/docs/docs.js b/docs/docs.js
@@ -11,6 +11,7 @@ import './components/button/button-demo';
 import './components/checkbox/checkbox-demo';
 import './components/choice-tile/choice-tile-demo';
 import './components/drawer/drawer-demo';
+import './components/drawer/slotted-drawer-demo';
 import './components/dropdown-select/select-demo';
 import './components/email/email-control-demo';
 import './components/file/drop-zone-demo';