{{#> web/layout/default title="Dropdown" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Placements</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <form autocomplete="off">
        <div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 40rem;">
          <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 1">

            <label for="placement-top-start" class="Radio">
              <input type="radio" name="placement" value="top-start" id="placement-top-start" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">top-start</span>
              </span>
            </label>
            <label for="placement-top" class="Radio">
              <input type="radio" name="placement" value="top" id="placement-top" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">top</span>
              </span>
            </label>
            <label for="placement-top-end" class="Radio">
              <input type="radio" name="placement" value="top-end" id="placement-top-end" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">top-end</span>
              </span>
            </label>

          </div>
          <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 3">

            <label for="placement-bottom-start" class="Radio">
              <input type="radio" name="placement" value="bottom-start" id="placement-bottom-start" class="Radio__input" checked />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">bottom-start</span>
              </span>
            </label>
            <label for="placement-bottom" class="Radio">
              <input type="radio" name="placement" value="bottom" id="placement-bottom" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">bottom</span>
              </span>
            </label>
            <label for="placement-bottom-end" class="Radio">
              <input type="radio" name="placement" value="bottom-end" id="placement-bottom-end" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">bottom-end</span>
              </span>
            </label>

          </div>
          <div
            class="GridItem"
            style="
              --grid-item-column-start: 1;
              --grid-item-row-start: 2;
              display: flex;
              flex-direction: column;
              justify-self: start;
            "
          >

            <label for="placement-left-start" class="Radio">
              <input type="radio" name="placement" value="left-start" id="placement-left-start" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">left-start</span>
              </span>
            </label>
            <label for="placement-left" class="Radio">
              <input type="radio" name="placement" value="left" id="placement-left" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">left</span>
              </span>
            </label>
            <label for="placement-left-end" class="Radio">
              <input type="radio" name="placement" value="left-end" id="placement-left-end" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">left-end</span>
              </span>
            </label>

          </div>
          <div
            class="GridItem"
            style="
              --grid-item-column-start: 3;
              --grid-item-row-start: 2;
              display: flex;
              flex-direction: column;
              justify-self: end;
            "
          >

            <label for="placement-right-start" class="Radio">
              <input type="radio" name="placement" value="right-start" id="placement-right-start" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">right-start</span>
              </span>
            </label>
            <label for="placement-right" class="Radio">
              <input type="radio" name="placement" value="right" id="placement-right" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">right</span>
              </span>
            </label>
            <label for="placement-right-end" class="Radio">
              <input type="radio" name="placement" value="right-end" id="placement-right-end" class="Radio__input" />
              <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">right-end</span>
              </span>
            </label>

          </div>
          <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">

            <div class="Dropdown" style="margin: 8rem auto">
              <button
                type="button"
                data-spirit-toggle="dropdown"
                data-spirit-target="#dropdown-placements-example"
                data-spirit-autoclose="false"
                class="Button Button--primary Button--medium"
                aria-expanded="false"
                aria-controls="dropdown-placements-example"
              >
                <span id="dropdown-placements-example-text" style="white-space: nowrap">bottom-start</span>
              </button>
              <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-placements-example">
                <a href="#" class="Item">
                  <span class="Item__label">Action</span>
                </a>
                <a href="#" class="Item">
                  <span class="Item__label">Another action</span>
                </a>
                <a href="#" class="Item">
                  <span class="Item__label">Something else here</span>
                </a>
              </div>
            </div>

          </div>
        </div>
      </form>

      <script>
        const radios = document.querySelectorAll('input[type="radio"]');

        radios.forEach(radio => {
          radio.addEventListener('change', () => {
            const placement = radio.value;
            const dropdown = document.getElementById('dropdown-placements-example');
            const placementText = document.getElementById('dropdown-placements-example-text');

            dropdown.dataset.spiritPlacement = placement;
            placementText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
          });
        });
      </script>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Various items</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Dropdown">
        <button
          type="button"
          data-spirit-toggle="dropdown"
          data-spirit-target="#dropdown-various-items"
          class="Button Button--primary Button--medium"
          aria-expanded="false"
          aria-controls="dropdown-various-items"
          data-spirit-autoclose="true"
        >
          Button as anchor
        </button>
        <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-various-items">
          <a href="#" class="Item">
            <span class="Item__label">Plain text</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#info" />
              </svg>
            </span>
            <span class="Item__label">Item with icon</span>
          </a>
          <label for="checkbox-item" class="Checkbox Checkbox--item">
            <input type="checkbox" id="checkbox-item" name="checkbox-item" class="Checkbox__input" />
            <span class="Checkbox__text">
              <span class="Checkbox__label">Item with checkbox</span>
            </span>
          </label>
          <label for="radio-item" class="Radio Radio--item">
            <input type="radio" id="radio-item" name="radio-item" class="Radio__input" checked />
            <span class="Radio__label">Item with radio</span>
          </label>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Usage with disabled auto close</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Dropdown">
        <button
          type="button"
          data-spirit-toggle="dropdown"
          data-spirit-target="#dropdown-disabled-auto-close"
          class="Button Button--primary Button--medium"
          aria-expanded="false"
          aria-controls="dropdown-disabled-auto-close"
          data-spirit-autoclose="false"
        >
          Button as anchor
        </button>
        <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-disabled-auto-close">
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#info" />
              </svg>
            </span>
            <span class="Item__label">Information</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#link" />
              </svg>
            </span>
            <span class="Item__label">Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
              </svg>
            </span>
            <span class="Item__label">Profile</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#help" />
              </svg>
            </span>
            <span class="Item__label">Help</span>
          </a>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Longer content</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Dropdown">
        <button
          type="button"
          data-spirit-toggle="dropdown"
          data-spirit-target="#dropdown-longer"
          class="Button Button--primary Button--medium"
          aria-expanded="false"
          aria-controls="dropdown-longer"
        >
          Button as anchor
        </button>
        <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-longer">
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#info" />
              </svg>
            </span>
            <span class="Item__label">Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#link" />
              </svg>
            </span>
            <span class="Item__label">Nulla condimentum, purus commodo cursus non nulla rhoncus</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
              </svg>
            </span>
            <span class="Item__label">Mauris nunc, elementum enim in lacinia vitae quam placerat sem, euismod accumsan</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#help" />
              </svg>
            </span>
            <span class="Item__label">Donec dui, nunc dui vel varius libero molestie nibh nunc</span>
          </a>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Full-width mode 'all'</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Dropdown">
        <button
          type="button"
          data-spirit-toggle="dropdown"
          data-spirit-target="#dropdown-full-width-mode-all"
          class="Button Button--primary Button--medium"
          aria-expanded="false"
          aria-controls="dropdown-full-width-mode-all"
        >
          Finibus quis imperdiet, semper imperdiet aliquam
        </button>
        <div class="DropdownPopover" data-spirit-placement="top-start" id="dropdown-full-width-mode-all" data-spirit-fullwidthmode="all">
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#info" />
              </svg>
            </span>
            <span class="Item__label">Information</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#link" />
              </svg>
            </span>
            <span class="Item__label">Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
              </svg>
            </span>
            <span class="Item__label">Profile</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#help" />
              </svg>
            </span>
            <span class="Item__label">Help</span>
          </a>
        </div>
      </div>

    </div>

  </div>
</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Full-width mode 'mobile-only'</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="Dropdown">
        <button
          type="button"
          data-spirit-toggle="dropdown"
          data-spirit-target="#dropdown-full-width-mode-mobile"
          class="Button Button--primary Button--medium"
          aria-expanded="false"
          aria-controls="dropdown-full-width-mode-mobile"
        >
          Finibus quis imperdiet, semper imperdiet aliquam
        </button>
        <div
          class="DropdownPopover"
          id="dropdown-full-width-mode-mobile"
          data-spirit-placement="top-start"
          data-spirit-fullwidthmode="mobile-only"
        >
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#info" />
              </svg>
            </span>
            <span class="Item__label">Information</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#link" />
              </svg>
            </span>
            <span class="Item__label">Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
              </svg>
            </span>
            <span class="Item__label">Profile</span>
          </a>
          <a href="#" class="Item">
            <span class="Item__icon Item__icon--start">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#help" />
              </svg>
            </span>
            <span class="Item__label">Help</span>
          </a>
        </div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}