Skip to content

Commit

Permalink
Deploying to gh-pages from @ 28ef059 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamkudrna
adamkudrna committed Feb 20, 2024
1 parent 33e045f commit 9f1af5e
Showing 1 changed file with 59 additions and 58 deletions.
117 changes: 59 additions & 58 deletions docs/src/scss/components/Dropdown/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,44 +40,44 @@ <h2 class="docs-Heading">Placements</h2>
<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_left" class="Radio">
<input type="radio" name="placement" value="topLeft" id="placement_top_left" class="Radio__input" />
<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-left</span>
<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" />
<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_right" class="Radio">
<input type="radio" name="placement" value="topRight" id="placement_top_right" class="Radio__input" />
<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-right</span>
<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_left" class="Radio">
<input type="radio" name="placement" value="bottomLeft" id="placement_bottom_left" class="Radio__input" checked />
<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-left</span>
<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" />
<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_right" class="Radio">
<input type="radio" name="placement" value="bottomRight" id="placement_bottom_right" class="Radio__input" />
<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-right</span>
<span class="Radio__label Radio__label--hidden">bottom-end</span>
</span>
</label>

Expand All @@ -93,22 +93,22 @@ <h2 class="docs-Heading">Placements</h2>
"
>

<label for="placement_left_top" class="Radio">
<input type="radio" name="placement" value="leftTop" id="placement_left_top" class="Radio__input" />
<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-top</span>
<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" />
<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_bottom" class="Radio">
<input type="radio" name="placement" value="leftBottom" id="placement_left_bottom" class="Radio__input" />
<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-bottom</span>
<span class="Radio__label Radio__label--hidden">left-end</span>
</span>
</label>

Expand All @@ -124,22 +124,22 @@ <h2 class="docs-Heading">Placements</h2>
"
>

<label for="placement_right_top" class="Radio">
<input type="radio" name="placement" value="rightTop" id="placement_right_top" class="Radio__input" />
<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-top</span>
<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" />
<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_bottom" class="Radio">
<input type="radio" name="placement" value="rightBottom" id="placement_right_bottom" class="Radio__input" />
<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-bottom</span>
<span class="Radio__label Radio__label--hidden">right-end</span>
</span>
</label>

Expand All @@ -150,15 +150,15 @@ <h2 class="docs-Heading">Placements</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdown_placements_example"
data-spirit-target="#dropdown-placements-example"
data-spirit-autoclose="false"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdown_placements_example"
aria-controls="dropdown-placements-example"
>
<span id="dropdown_placements_example_text" style="white-space: nowrap">bottom-left</span>
<span id="dropdown-placements-example-text" style="white-space: nowrap">bottom-start</span>
</button>
<div class="Dropdown Dropdown--bottomLeft" id="dropdown_placements_example">
<div class="Dropdown" data-spirit-placement="bottom-start" id="dropdown-placements-example">
<a href="#" class="Item">
<span class="Item__label">Action</span>
</a>
Expand All @@ -181,10 +181,10 @@ <h2 class="docs-Heading">Placements</h2>
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');
const dropdown = document.getElementById('dropdown-placements-example');
const placementText = document.getElementById('dropdown-placements-example-text');

dropdown.classList.replace(dropdown.classList[1], `Dropdown--${placement}`);
dropdown.dataset.spiritPlacement = placement;
placementText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
});
});
Expand All @@ -202,15 +202,15 @@ <h2 class="docs-Heading">Various items</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdownVariousItems"
data-spirit-target="#dropdown-various-items"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownVariousItems"
aria-controls="dropdown-various-items"
data-spirit-autoclose="true"
>
Button as anchor
</button>
<div class="Dropdown Dropdown--bottomLeft" id="dropdownVariousItems">
<div class="Dropdown" data-spirit-placement="bottom-start" id="dropdown-various-items">
<a href="#" class="Item">
<span class="Item__label">Plain text</span>
</a>
Expand Down Expand Up @@ -247,15 +247,15 @@ <h2 class="docs-Heading">Usage with disabled auto close</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdownDisabledAutoClose"
data-spirit-target="#dropdown-disabled-auto-close"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownDisabledAutoClose"
aria-controls="dropdown-disabled-auto-close"
data-spirit-autoclose="true"
>
Button as anchor
</button>
<div class="Dropdown Dropdown--bottomLeft" id="dropdownDisabledAutoClose">
<div class="Dropdown" 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">
Expand Down Expand Up @@ -303,14 +303,14 @@ <h2 class="docs-Heading">Longer content</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdownLonger"
data-spirit-target="#dropdown-longer"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownLonger"
aria-controls="dropdown-longer"
>
Button as anchor
</button>
<div class="Dropdown Dropdown--bottomLeft" id="dropdownLonger">
<div class="Dropdown" 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">
Expand Down Expand Up @@ -358,14 +358,14 @@ <h2 class="docs-Heading">Full-width mode 'all'</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdownFullWidthModeAll"
data-spirit-target="#dropdown-full-width-mode-all"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownFullWidthModeAll"
aria-controls="dropdown-full-width-mode-all"
>
Finibus quis imperdiet, semper imperdiet aliquam
</button>
<div class="Dropdown Dropdown--top Dropdown--left" id="dropdownFullWidthModeAll" data-spirit-fullwidthmode="all">
<div class="Dropdown" 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">
Expand Down Expand Up @@ -413,16 +413,17 @@ <h2 class="docs-Heading">Full-width mode 'mobile-only'</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdownFullWidthModeMobile"
data-spirit-target="#dropdown-full-width-mode-mobile"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownFullWidthModeMobile"
aria-controls="dropdown-full-width-mode-mobile"
>
Finibus quis imperdiet, semper imperdiet aliquam
</button>
<div
class="Dropdown Dropdown--top Dropdown--left"
id="dropdownFullWidthModeMobile"
class="Dropdown"
id="dropdown-full-width-mode-mobile"
data-spirit-placement="top-start"
data-spirit-fullwidthmode="mobile-only"
>
<a href="#" class="Item">
Expand Down Expand Up @@ -473,14 +474,14 @@ <h2 class="docs-Heading">Feature Flag: Enhanced Shadow</h2>
<button
type="button"
data-spirit-toggle="dropdown"
data-spirit-target="#dropdownEnhancedShadow"
data-spirit-target="#dropdown-enhanced-shadow"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownEnhancedShadow"
aria-controls="dropdown-enhanced-shadow"
>
Finibus quis imperdiet, semper imperdiet aliquam
</button>
<div class="Dropdown Dropdown--top Dropdown--left" id="dropdownEnhancedShadow">
<div class="Dropdown" data-spirit-placement="top-start" id="dropdown-enhanced-shadow">
<a href="#" class="Item">
<span class="Item__icon Item__icon--start">
<svg width="24" height="24" aria-hidden="true">
Expand Down

0 comments on commit 9f1af5e

Please sign in to comment.