Feat(web): Showcase Header with Dropdowns

lmc-eu · Dec 17, 2024 · 6739bd4 · 6739bd4
1 parent 84cfc26
commit 6739bd4
Showing 1 changed file with 87 additions and 0 deletions.
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.html b/packages/web/src/scss/components/UNSTABLE_Header/index.html
@@ -95,6 +95,46 @@ <h2 class="docs-Heading">With Navigation</h2>
               <li>
                 <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Selected</a>
               </li>
+              <li class="Dropdown">
+                <button
+                  type="button"
+                  class="NavigationLink"
+                  data-spirit-toggle="dropdown"
+                  data-spirit-target="#dropdown-navigation"
+                  aria-expanded="false"
+                  aria-controls="dropdown-navigation"
+                  data-spirit-autoclose="true"
+                >
+                  <span class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter" style="--flex-spacing-x: var(--spirit-space-500)">
+                      Dropdown
+                      <svg width="20" height="20" aria-hidden="true" class="accessibility-open">
+                        <use xlink:href="/assets/icons/svg/sprite.svg#chevron-up" />
+                      </svg>
+                      <svg width="20" height="20" aria-hidden="true" class="accessibility-closed">
+                        <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
+                      </svg>
+                    </span>
+                </button>
+                <div class="DropdownPopover" data-spirit-placement="bottom-end" id="dropdown-navigation">
+                  <ul class="list-unstyled">
+                    <li>
+                      <a href="https://www.example.com" class="Item">
+                        <span class="Item__label">My Account</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.example.com" class="Item">
+                        <span class="Item__label">Settings</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.example.com" class="Item">
+                        <span class="Item__label">Log Out</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
               <li>
                 <span class="NavigationLink NavigationLink--disabled">Disabled</span>
               </li>
@@ -110,6 +150,53 @@ <h2 class="docs-Heading">With Navigation</h2>
                   </svg>
                 </button>
               </li>
+              <li>
+                <div class="Dropdown">
+                  <button
+                    type="button"
+                    class="button-unstyled"
+                    data-spirit-toggle="dropdown"
+                    data-spirit-target="#dropdown-avatar"
+                    aria-expanded="false"
+                    aria-controls="dropdown-avatar"
+                    data-spirit-autoclose="true"
+                  >
+                    <span class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter" style="--flex-spacing-x: var(--spirit-space-500)">
+                      <span class="UNSTABLE_Avatar UNSTABLE_Avatar--medium UNSTABLE_Avatar--square" aria-label="Profile of Jiří Bárta">
+                        <svg width="20" height="20" aria-hidden="true">
+                          <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
+                        </svg>
+                      </span>
+                      <span class="typography-body-small-semibold text-primary">My Account</span>
+                      <svg width="20" height="20" aria-hidden="true" class="accessibility-open">
+                        <use xlink:href="/assets/icons/svg/sprite.svg#chevron-up" />
+                      </svg>
+                      <svg width="20" height="20" aria-hidden="true" class="accessibility-closed">
+                        <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
+                      </svg>
+                    </span>
+                  </button>
+                  <div class="DropdownPopover" data-spirit-placement="bottom-end" id="dropdown-avatar">
+                    <ul class="list-unstyled">
+                      <li>
+                        <a href="https://www.example.com" class="Item">
+                          <span class="Item__label">My Account</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="https://www.example.com" class="Item">
+                          <span class="Item__label">Settings</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="https://www.example.com" class="Item">
+                          <span class="Item__label">Log Out</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
               <li>
                 <a href="#" class="Button Button--secondary Button--medium">Sign up</a>
               </li>