mirror of
https://github.com/primer/css.git
synced 2024-11-25 18:26:14 +03:00
ActionList Component: Primer CSS Implementation (#1657)
* add storybook, start actionlist * story composition, some katie edits * auto grid test * one grid option * you win flexbox, you win * back on that grid grind * story for each item context * import stories * add CSS friendly args for controls * more conditionals * push * fix import * clean up deps * fix borders + hover state * add navigational to story * primitive-ize * break out files * a11y fix * list stories * add all theme viewer, more css edge cases * story cleanup * actionList becomes ActionList * story syntax improvements * bind stories, organize * nested nav exploration * pseudo hover to support nested lists * cleanup * organize pattern stories * finding a better way to deal with state/nesting * move state up one level * handle single level nesting * collapsible * collapse story in sub item nav * new collapse icon position, grid refactor * toggle expanded state * cleanup * rename classes, better nesting, single select * multi select support * start docs! * new animations * docs * more docs * action item features docs * a11y docs (storybook) * fix docs codeblocks * format code snippet (a little) * pull in pre-release primitives * fix danger primitive * cleanup * linting playing tricks on me * linty fresh * renaming classes fun times * add disabled variant * formatting struggles * danger visual danger color * add viewport maps to layout vars * test stylelint * finish docs * revert primitive upgrade * primitives patch take 2, sidebar story * change calc function * remove fix script * lint, docs fixes * Stylelint auto-fixes * guessing the storybook link for docs * testing scss imports * lint * default background * handle padding for sizes * remove comments * Stylelint auto-fixes * Create poor-walls-occur.md * Update poor-walls-occur.md Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Actions Auto Build <actions@github.com>
This commit is contained in:
Katie Langerman
GitHub
parent
832e99886d
commit
e754300989
5
.changeset/poor-walls-occur.md
Normal file
5
.changeset/poor-walls-occur.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
ActionList Component: Primer CSS Implementation. Adding a new component `ActionList` to learn more checkout the docs [https://primer.style/css/components/action-list](https://primer.style/css/components/action-list).
|
||||
482
docs/content/components/action-list.md
Normal file
482
docs/content/components/action-list.md
Normal file
@ -0,0 +1,482 @@
|
||||
---
|
||||
title: Action List
|
||||
path: components/action-list
|
||||
status: alpha
|
||||
source: 'https://github.com/primer/css/tree/main/src/actionlist'
|
||||
bundle: action-list
|
||||
storybook: https://primer.style/css/storybook/?path=/story/components-actionlist-actionlistitem--playground
|
||||
---
|
||||
|
||||
Reference the [Action list interface guidelines](https://primer.style/design/components/action-list) for details on where and how to use Action List.
|
||||
|
||||
## Accessibility
|
||||
### Semantic markup
|
||||
|
||||
The markup for Action List changes depending on the intended use case.
|
||||
|
||||
In all cases, the basic structure is as follows:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li><span>Content with action (onclick)</span></li>
|
||||
<li><a href="/">Content as link</a></li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Nested list</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Pay close attention to `role` attributes throughout the documentation. The `role` attribute may change depending on the context in which Action List is used. Some common use case specs:
|
||||
|
||||
[Menu](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)
|
||||
|
||||
[Multi/Single Select Menu](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
[Multi/Single Select List](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
|
||||
|
||||
Note: JS is required to make Action List accessible in most cases
|
||||
|
||||
## Action List
|
||||
|
||||
Action List is a `ul` list designed to contain Action List Items.
|
||||
|
||||
### Arguments
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `ActionList` | Default styles |
|
||||
| `ActionList--divided` | Show dividers between items |
|
||||
| `ActionList--subGroup` | If Action List is nested as a sub-list |
|
||||
|
||||
#### Default
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu" aria-label="Menu description">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Item dividers
|
||||
|
||||
```html live
|
||||
<ul class="ActionList ActionList--divided" role="menu" aria-label="Menu description">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Nested sub list
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu" aria-label="Menu description">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--hasSubItem" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Sub menu label</span>
|
||||
</span>
|
||||
<ul class="ActionList ActionList--subGroup" role="menu" aria-label="Menu description">
|
||||
<li class="ActionList-item ActionList-item--subItem" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Sub menu item</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--subItem" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Sub menu item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
## Action List Divider
|
||||
|
||||
List item `li` for separating groups of content
|
||||
|
||||
### Arguments
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `ActionList-sectionDivider` | Default subtle divider line |
|
||||
| `ActionList-sectionDivider--filled` | Thicker divider line |
|
||||
| `ActionList-item-description` | Optional section header secondary text |
|
||||
|
||||
#### Default
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-sectionDivider" role="separator"></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Filled
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-sectionDivider ActionList-sectionDivider--filled" role="separator"></li>
|
||||
</ul>
|
||||
```
|
||||
### Divider with label text
|
||||
|
||||
When using a section label for a group, give the `li` an id to be referenced by the group `ul`
|
||||
#### Filled with section label
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-sectionDivider ActionList-sectionDivider--filled" role="presentation" id="nested-group-id" aria-hidden="true">Section label</li>
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<ul class="ActionList" role="menu" aria-labelledby="nested-group-id">
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Group Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Default with section label
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-sectionDivider" role="presentation" id="nested-group-id" aria-hidden="true">Section label</li>
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<ul class="ActionList" role="menu" aria-labelledby="nested-group-id">
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Group Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Default with section label + description
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-sectionDivider" role="presentation" id="nested-group-id" aria-hidden="true">
|
||||
Section label
|
||||
<span class="ActionList-item-description">
|
||||
Section description
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<ul class="ActionList" role="menu" aria-labelledby="nested-group-id">
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Group Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Action List Item
|
||||
|
||||
List item `li` handling semantics, state and interactions
|
||||
|
||||
### Arguments
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `ActionList-item` | Default styles |
|
||||
| `ActionList-item--hasSubItem` | Item contains a sub item `ul` |
|
||||
| `ActionList-item--subItem` | Indent + small font size for sub item `li` (optional) |
|
||||
| `ActionList-item--navActive` | Nav item and `aria-current` |
|
||||
| `ActionList-item--danger` | Item is destructive |
|
||||
|
||||
Kitchen sink
|
||||
|
||||
```html live
|
||||
<nav>
|
||||
<ul class="ActionList" role="menu" aria-label="Main menu description">
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-sectionDivider" role="presentation" id="some-unique-id" aria-hidden="true">Section Divider</li>
|
||||
<li class="ActionList-item ActionList-item--hasSubItem" role="menuitem">
|
||||
<ul class="ActionList" role="menu" aria-labelledby="some-unique-id">
|
||||
<li class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li aria-disabled="true" class="ActionList-item" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Disabled Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--navActive" role="none">
|
||||
<a href="#" role="menuitem" aria-current="location" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--danger" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Danger Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ActionList-sectionDivider" role="presentation" id="some-unique-id" aria-hidden="true">Section Divider</li>
|
||||
<li class="ActionList-item ActionList-item--hasSubItem" role="menuitem">
|
||||
<ul class="ActionList ActionList--subGroup" role="menu" aria-labelledby="some-unique-id">
|
||||
<li class="ActionList-item ActionList-item--subItem" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--subItem" role="none">
|
||||
<a href="#" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--subItem" role="none">
|
||||
<a href="/" role="menuitem" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
```
|
||||
|
||||
## Action List Item Content
|
||||
|
||||
Contains and places all child content within Action List Item. Can be either an `a href` tag for list link items, or a `span` for items that provide an event on Action List Item `li`.
|
||||
|
||||
### Arguments
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `ActionList-content` | Defines the overall layout grid |
|
||||
| `ActionList-content--sizeMedium` | 40px row height |
|
||||
| `ActionList-content--sizeLarge` | 48px row height, default for touch devices |
|
||||
| `ActionList-content--visual16` | Creates left padding for sub list if leading visual exists |
|
||||
| `ActionList-content--visual20` | Creates left padding for sub list if leading visual exists |
|
||||
| `ActionList-content--visual24` | Creates left padding for sub list if leading visual exists |
|
||||
| `ActionList-item-action` | min-height + default styles for visual slot |
|
||||
| `ActionList-item-action--leading` | Slot: multi/single select |
|
||||
| `ActionList-item-action--trailing` | Slot: Button, collapse icon |
|
||||
| `ActionList-item-visual` | min-height + default styles for visual slot |
|
||||
| `ActionList-item-visual--leading` | Slot: SVG or graphic like Avatar |
|
||||
| `ActionList-item-visual--trailing` | Slot: SVG or text |
|
||||
| `ActionList-item-label` | Item text |
|
||||
| `ActionList-item-descriptionWrap` | Wraps label/description |
|
||||
| `ActionList-item-descriptionWrap--inline` | Display description inline with label |
|
||||
| `ActionList-item-description` | Item description (block by default) |
|
||||
|
||||
### Basic text only item
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Basic item label</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Size (all options)
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content ActionList-content--sizeMedium">
|
||||
<span class="ActionList-item-label">Medium item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content ActionList-content--sizeLarge">
|
||||
<span class="ActionList-item-label">Large item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Visuals (all options- leading & trailing)
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-visual ActionList-item-visual--leading">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Item with trailing visual</span>
|
||||
<span class="ActionList-item-visual ActionList-item-visual--trailing">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Trailing visual as text
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Item with trailing visual</span>
|
||||
<span class="ActionList-item-visual ActionList-item-visual--trailing">
|
||||
⌘N
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Inline description
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-descriptionWrap ActionList-item-descriptionWrap--inline">
|
||||
<span class="ActionList-item-label">Item label</span>
|
||||
<span class="ActionList-item-description">This is a description</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Active navigational item
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item ActionList-item--navActive" role="none">
|
||||
<a href="#someid" role="menuitem" aria-current="location" class="ActionList-content"
|
||||
>
|
||||
<span class="ActionList-item-label">Im an anchor link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Danger item
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item ActionList-item--danger" role="menuitem">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Danger danger</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Actions
|
||||
|
||||
### Leading action: single select
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitemradio" aria-checked="true">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-action ActionList-item-action--leading">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="ActionList-item-singleSelectCheckmark">
|
||||
<path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Single select item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Leading action: multi select
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-action ActionList-item-action--leading">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionList-item-multiSelectIcon">
|
||||
<rect x="2" y="2" width="12" height="12" rx="4" class="ActionList-item-multiSelectIconRect"
|
||||
></rect>
|
||||
<path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionList-item-multiSelectCheckmark"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Multi select item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Trailing action: collapse
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="menu">
|
||||
<li class="ActionList-item" role="menuitem" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Collapsible</span>
|
||||
<span class="ActionList-item-action ActionList-item-action--trailing">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="ActionList-item-collapseIcon">
|
||||
<path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
@ -55,6 +55,8 @@
|
||||
- title: Components
|
||||
url: /components
|
||||
children:
|
||||
- title: Action List
|
||||
url: /components/action-list
|
||||
- title: Alerts
|
||||
url: /components/alerts
|
||||
- title: Autocomplete
|
||||
|
||||
180
docs/src/stories/components/ActionList/Accessibility.stories.mdx
Normal file
180
docs/src/stories/components/ActionList/Accessibility.stories.mdx
Normal file
@ -0,0 +1,180 @@
|
||||
import {Meta, Story, Canvas} from '@storybook/addon-docs'
|
||||
|
||||
<Meta title="Components/ActionList/Accessibility" />
|
||||
|
||||
### Action List
|
||||
|
||||
An action list is a vertical list of interactive <strong>actions</strong> or <strong>options</strong>.
|
||||
|
||||
| | |
|
||||
| :------ | :------------------------------------ |
|
||||
| Actions | links `a href` or events `onclick` |
|
||||
| Options | checkbox role `checked` or `selected` |
|
||||
|
||||
### Semantic markup
|
||||
|
||||
The markup for Action List changes depending on the intended use case.
|
||||
|
||||
In all cases, the basic structure is as follows:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li><span>Content with action</span></li>
|
||||
<li><a href="/">Content as link</a></li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Nested list</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Pay close attention to `role` attributes throughout the documentation, and find the use case that best suits your needs.
|
||||
|
||||
### Menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)
|
||||
|
||||
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :------------------------------ |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitem"` |
|
||||
| `li` | has child link `role="none"` |
|
||||
| `a` | `role="menuitem"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--menu-with-section-divider" />
|
||||
</Canvas>
|
||||
|
||||
### Navigational menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)
|
||||
|
||||
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :--------------------------------------- |
|
||||
| `nav` | no role needed |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitem"` |
|
||||
| `li` | has child link `role="none"` |
|
||||
| `li` | nested menu `aria-haspopup="true"` |
|
||||
| `li` | nested menu `aria-expanded="true/false"` |
|
||||
| `a` | `role="menuitem"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--nav-with-sub-items" />
|
||||
</Canvas>
|
||||
|
||||
### Multi select menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :-------------------------------------- |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitemcheckbox"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--menu-multi-select" />
|
||||
</Canvas>
|
||||
|
||||
### Single select menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :----------------------------------- |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitemradio"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--menu-single-select" />
|
||||
</Canvas>
|
||||
|
||||
### Multi select listbox
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
|
||||
|
||||
Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wai-aria-practices-1.1/#listbox_kbd_interaction)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :---------------------------- |
|
||||
| `ul` | `role="listbox"` |
|
||||
| `ul` | `aria-multiselectable="true"` |
|
||||
| `li` | `role="option"` |
|
||||
| `li` | `aria-selected="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--list-multi-select" />
|
||||
</Canvas>
|
||||
|
||||
### Single select listbox
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
|
||||
|
||||
Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wai-aria-practices-1.1/#listbox_kbd_interaction)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :--------------------------- |
|
||||
| `ul` | `role="listbox"` |
|
||||
| `li` | `role="option"` |
|
||||
| `li` | `aria-selected="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--list-single-select" />
|
||||
</Canvas>
|
||||
|
||||
### List of links
|
||||
|
||||
No roles needed
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--list" />
|
||||
</Canvas>
|
||||
|
||||
### Dividers
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :----------------- |
|
||||
| `li` | `role="separator"` |
|
||||
|
||||
#### Empty example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-actionlistitem-features--divider-empty" />
|
||||
</Canvas>
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :------------------------------------------ |
|
||||
| `li` | `role="presentation"` |
|
||||
| `li` | id for nested group `id="group-id"` |
|
||||
| `li` | if it has id for group `aria-hidden="true"` |
|
||||
|
||||
#### With title example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-actionlistitem-features--divider-text" />
|
||||
</Canvas>
|
||||
113
docs/src/stories/components/ActionList/ActionList.stories.jsx
Normal file
113
docs/src/stories/components/ActionList/ActionList.stories.jsx
Normal file
@ -0,0 +1,113 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList',
|
||||
excludeStories: ['ListTemplate'],
|
||||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook-Docs?node-id=23%3A30843'
|
||||
}
|
||||
},
|
||||
argTypes: {
|
||||
showDividers: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'Show dividers between items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
role: {
|
||||
options: [0, 1, 2, 3, 4, 5, 6], // iterator
|
||||
mapping: ['menu', 'group', 'listbox', 'menubar', 'none', 'radiogroup', 'list'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['menu', 'group', 'listbox', 'menubar', 'none', 'radiogroup', 'list']
|
||||
},
|
||||
description: 'Semantic list role',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLabel: {
|
||||
name: 'ariaLabel',
|
||||
type: 'string',
|
||||
description: 'Descriptive label for menu contents',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLabelledBy: {
|
||||
name: 'ariaLabelledBy',
|
||||
type: 'string',
|
||||
description: 'Reference ID of section divider',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
groupId: {
|
||||
name: 'groupId',
|
||||
type: 'string',
|
||||
description: 'Menu group id',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
children: {
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
subGroup: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'If ActionList is nested within an ActionList',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
listboxMultiSelect: {
|
||||
name: 'listboxMultiSelect',
|
||||
type: 'string',
|
||||
description: 'If ActionList has listbox role + multiselect children',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ListTemplate = ({
|
||||
showDividers,
|
||||
children,
|
||||
role,
|
||||
ariaLabel,
|
||||
ariaLabelledBy,
|
||||
subGroup,
|
||||
listboxMultiSelect
|
||||
}) => (
|
||||
<ul
|
||||
className={clsx('ActionList', showDividers && 'ActionList--divided', subGroup && 'ActionList--subGroup')}
|
||||
role={role}
|
||||
aria-label={ariaLabel && ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy && ariaLabelledBy}
|
||||
aria-multiselectable={listboxMultiSelect ? 'true' : undefined}
|
||||
>
|
||||
<>{children}</>
|
||||
</ul>
|
||||
)
|
||||
|
||||
export const Playground = ListTemplate.bind({})
|
||||
Playground.args = {
|
||||
role: 'menu',
|
||||
ariaLabel: 'Menu description',
|
||||
subGroup: false,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Action list item" />
|
||||
<ListItemTemplate text="Action list item" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListDivider',
|
||||
excludeStories: ['DividerTemplate'],
|
||||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook?node-id=2%3A2'
|
||||
}
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-sectionDivider--filled'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['subtle', 'filled']
|
||||
},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'title',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
description: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'description',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'id',
|
||||
description: 'Used for aria-labelledby',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
}
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<ul className="ActionList" role="menu">
|
||||
<Story />
|
||||
</ul>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const DividerTemplate = ({title, description, variant, id}) => (
|
||||
<>
|
||||
<li
|
||||
className={clsx('ActionList-sectionDivider', variant && `${variant}`)}
|
||||
role={title ? 'presentation' : 'separator'}
|
||||
id={id}
|
||||
aria-hidden={title ? true : undefined}
|
||||
>
|
||||
{title}
|
||||
{description && <span className="ActionList-item-description">{description}</span>}
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = DividerTemplate.bind({})
|
||||
Playground.args = {
|
||||
title: 'Section title',
|
||||
description: 'Section description',
|
||||
variant: 'subtle'
|
||||
}
|
||||
@ -0,0 +1,440 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import useToggle from '../../helpers/useToggle.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListItem',
|
||||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook-Docs?node-id=23%3A30843'
|
||||
}
|
||||
},
|
||||
excludeStories: ['ListItemTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-item--danger'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['default', 'danger']
|
||||
},
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
subItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
containsSubItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
leadingVisual: {
|
||||
defaultValue: '',
|
||||
name: 'leadingVisual',
|
||||
type: 'string',
|
||||
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
leadingVisualSize: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['ActionList-content--visual16', 'ActionList-content--visual20', 'ActionList-content--visual24'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['16px', '20px', '24px']
|
||||
},
|
||||
description: 'leading visual width',
|
||||
defaultValue: 'ActionList-content--visual16',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
trailingVisual: {
|
||||
defaultValue: '',
|
||||
name: 'trailingVisual',
|
||||
type: 'string',
|
||||
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
defaultValue: 'Item label',
|
||||
type: 'string',
|
||||
name: 'text',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
href: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'href',
|
||||
description: 'Item link (href)',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaCurrent: {
|
||||
options: ['location', 'page'],
|
||||
control: {type: 'select'},
|
||||
description: 'location for anchor links, page for global page navigation',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
description: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'description',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
descriptionVariant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-item-descriptionWrap--inline'], // values
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: ['block', 'inline']
|
||||
},
|
||||
description: 'block (default), inline',
|
||||
defaultValue: 'ActionList-item-blockDescription',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'id',
|
||||
description: 'Used for aria-labelledby if nested group within item',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
collapsible: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
singleSelect: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
multiSelect: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
listSingleSelect: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
listMultiSelect: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
ariaDisabled: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ListItemTemplate = ({
|
||||
text,
|
||||
size,
|
||||
leadingVisual,
|
||||
leadingVisualSize,
|
||||
trailingVisual,
|
||||
description,
|
||||
descriptionVariant,
|
||||
variant,
|
||||
href,
|
||||
ariaCurrent,
|
||||
children,
|
||||
subItem,
|
||||
containsSubItem,
|
||||
id,
|
||||
collapsible,
|
||||
trailingAction,
|
||||
leadingAction,
|
||||
singleSelect,
|
||||
multiSelect,
|
||||
listSingleSelect,
|
||||
listMultiSelect,
|
||||
listSemantic,
|
||||
ariaDisabled
|
||||
}) => {
|
||||
const [isCollapsed, itemIsCollapsed] = useToggle()
|
||||
const [isChecked, itemIsChecked] = useToggle()
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
'ActionList-item',
|
||||
ariaCurrent && 'ActionList-item--navActive',
|
||||
subItem && `ActionList-item--subItem`,
|
||||
containsSubItem && `ActionList-item--hasSubItem`,
|
||||
variant && `${variant}`
|
||||
)}
|
||||
onClick={collapsible ? itemIsCollapsed : itemIsChecked}
|
||||
role={
|
||||
singleSelect
|
||||
? 'menuitemradio'
|
||||
: multiSelect
|
||||
? 'menuitemcheckbox'
|
||||
: listSingleSelect || listMultiSelect
|
||||
? 'option'
|
||||
: listSemantic
|
||||
? undefined
|
||||
: href
|
||||
? 'none'
|
||||
: 'menuitem'
|
||||
}
|
||||
id={id}
|
||||
aria-haspopup={collapsible ? 'true' : undefined}
|
||||
aria-expanded={collapsible ? (isCollapsed ? 'false' : 'true') : undefined}
|
||||
aria-checked={singleSelect || multiSelect ? (isChecked ? 'true' : 'false') : undefined}
|
||||
aria-selected={listSingleSelect || listMultiSelect ? (isChecked ? 'true' : 'false') : undefined}
|
||||
aria-disabled={ariaDisabled}
|
||||
>
|
||||
{href ? (
|
||||
<>
|
||||
<a
|
||||
href={href}
|
||||
role={href && !listSemantic ? 'menuitem' : undefined}
|
||||
aria-current={ariaCurrent}
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
size && `${size}`,
|
||||
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
|
||||
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
|
||||
)}
|
||||
>
|
||||
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
|
||||
<span className="ActionList-item-action ActionList-item-action--leading">
|
||||
{singleSelect ||
|
||||
(listSingleSelect && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
className="ActionList-item-singleSelectCheckmark"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
||||
></path>
|
||||
</svg>
|
||||
))}
|
||||
{multiSelect ||
|
||||
(listMultiSelect && (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
className="ActionList-item-multiSelectIcon"
|
||||
>
|
||||
<rect x="2" y="2" width="12" height="12" rx="4" className="ActionList-item-multiSelectIconRect" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
|
||||
className="ActionList-item-multiSelectCheckmark"
|
||||
/>
|
||||
</svg>
|
||||
))}
|
||||
{leadingAction}
|
||||
</span>
|
||||
)}
|
||||
{leadingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--leading"
|
||||
dangerouslySetInnerHTML={{__html: leadingVisual}}
|
||||
/>
|
||||
)}
|
||||
{description && (
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className="ActionList-item-label">{text}</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && <span className="ActionList-item-label">{text}</span>}
|
||||
{trailingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--trailing"
|
||||
dangerouslySetInnerHTML={{__html: trailingVisual}}
|
||||
/>
|
||||
)}
|
||||
{trailingAction ||
|
||||
(collapsible && (
|
||||
<span className="ActionList-item-action ActionList-item-action--trailing">
|
||||
{collapsible && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
className="ActionList-item-collapseIcon"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
{trailingAction}
|
||||
</span>
|
||||
))}
|
||||
</a>
|
||||
{children}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
size && `${size}`,
|
||||
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
|
||||
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
|
||||
)}
|
||||
>
|
||||
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
|
||||
<span className="ActionList-item-action ActionList-item-action--leading">
|
||||
{(singleSelect || listSingleSelect) && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
className="ActionList-item-singleSelectCheckmark"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
{(multiSelect || listMultiSelect) && (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
className="ActionList-item-multiSelectIcon"
|
||||
>
|
||||
<rect x="2" y="2" width="12" height="12" rx="4" className="ActionList-item-multiSelectIconRect" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
|
||||
className="ActionList-item-multiSelectCheckmark"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{leadingAction}
|
||||
</span>
|
||||
)}
|
||||
{leadingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--leading"
|
||||
dangerouslySetInnerHTML={{__html: leadingVisual}}
|
||||
/>
|
||||
)}
|
||||
{description && (
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className="ActionList-item-label">{text}</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && <span className="ActionList-item-label">{text}</span>}
|
||||
|
||||
{trailingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--trailing"
|
||||
dangerouslySetInnerHTML={{__html: trailingVisual}}
|
||||
/>
|
||||
)}
|
||||
{trailingAction ||
|
||||
(collapsible && (
|
||||
<span className="ActionList-item-action ActionList-item-action--trailing">
|
||||
{collapsible && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
className="ActionList-item-collapseIcon"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
{trailingAction}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
{children}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground = ListItemTemplate.bind({})
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<ul className="ActionList" role="menu">
|
||||
<Story />
|
||||
</ul>
|
||||
)
|
||||
]
|
||||
@ -0,0 +1,550 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {DividerTemplate} from './ActionListDivider.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListItem/Features',
|
||||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook?node-id=2%3A2'
|
||||
}
|
||||
},
|
||||
decorators: [
|
||||
Story => (
|
||||
<ul className="ActionList" role="menu">
|
||||
<Story />
|
||||
</ul>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const TextOnly = ListItemTemplate.bind({})
|
||||
TextOnly.args = {
|
||||
text: 'Basic item label'
|
||||
}
|
||||
|
||||
export const SizeMedium = ListItemTemplate.bind({})
|
||||
SizeMedium.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Medium item',
|
||||
size: 'ActionList-content--sizeMedium'
|
||||
}
|
||||
|
||||
export const SizeMediumWithDescription = ListItemTemplate.bind({})
|
||||
SizeMediumWithDescription.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Medium item',
|
||||
description: 'Some descriptive text',
|
||||
size: 'ActionList-content--sizeMedium'
|
||||
}
|
||||
|
||||
export const SizeLarge = ListItemTemplate.bind({})
|
||||
SizeLarge.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Large item',
|
||||
size: 'ActionList-content--sizeLarge'
|
||||
}
|
||||
|
||||
export const SizeLargeWithDescription = ListItemTemplate.bind({})
|
||||
SizeLargeWithDescription.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Large item',
|
||||
description: 'Some descriptive text',
|
||||
size: 'ActionList-content--sizeLarge'
|
||||
}
|
||||
|
||||
export const VisualLeading = ListItemTemplate.bind({})
|
||||
VisualLeading.storyName = '[Visuals] Leading'
|
||||
VisualLeading.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with leading visual',
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VisualTrailing = ListItemTemplate.bind({})
|
||||
VisualTrailing.storyName = '[Visuals] Trailing'
|
||||
VisualTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with trailing visual',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VisualTrailingText = ListItemTemplate.bind({})
|
||||
VisualTrailingText.storyName = '[Visuals] Trailing text'
|
||||
VisualTrailingText.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with trailing text',
|
||||
trailingVisual: `⌘N`
|
||||
}
|
||||
|
||||
export const VisualLeadingAndTrailing = ListItemTemplate.bind({})
|
||||
VisualLeadingAndTrailing.storyName = '[Visuals] Leading & trailing'
|
||||
VisualLeadingAndTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with trailing visual',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DescriptionBlock = ListItemTemplate.bind({})
|
||||
DescriptionBlock.storyName = '[Description] block'
|
||||
DescriptionBlock.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription'
|
||||
}
|
||||
|
||||
export const DescriptionBlockWithLeadingVisual = ListItemTemplate.bind({})
|
||||
DescriptionBlockWithLeadingVisual.storyName = '[Description] block + leading visual'
|
||||
DescriptionBlockWithLeadingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription',
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DescriptionBlockWithTrailingVisual = ListItemTemplate.bind({})
|
||||
DescriptionBlockWithTrailingVisual.storyName = '[Description] block + trailing visual'
|
||||
DescriptionBlockWithTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DescriptionBlockWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
DescriptionBlockWithLeadingAndTrailingVisual.storyName = '[Description] block + leading/trailing visual'
|
||||
DescriptionBlockWithLeadingAndTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription',
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DescriptionInline = ListItemTemplate.bind({})
|
||||
DescriptionInline.storyName = '[Description] inline'
|
||||
DescriptionInline.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline'
|
||||
}
|
||||
|
||||
export const DescriptionInlineWithLeadingVisual = ListItemTemplate.bind({})
|
||||
DescriptionInlineWithLeadingVisual.storyName = '[Description] inline + leading visual'
|
||||
DescriptionInlineWithLeadingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline',
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DescriptionInlineWithTrailingVisual = ListItemTemplate.bind({})
|
||||
DescriptionInlineWithTrailingVisual.storyName = '[Description] inline + trailing visual'
|
||||
DescriptionInlineWithTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DescriptionInlineWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
DescriptionInlineWithLeadingAndTrailingVisual.storyName = '[Description] inline + leading/trailing visual'
|
||||
DescriptionInlineWithLeadingAndTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const NavActiveAnchor = ListItemTemplate.bind({})
|
||||
NavActiveAnchor.storyName = '[Nav] Active anchor'
|
||||
NavActiveAnchor.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Im an anchor link',
|
||||
href: '#someid',
|
||||
ariaCurrent: 'location',
|
||||
activeNavItem: true
|
||||
}
|
||||
|
||||
export const NavActivePage = ListItemTemplate.bind({})
|
||||
NavActivePage.storyName = '[Nav] Active page'
|
||||
NavActivePage.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Im a page level link',
|
||||
href: '/',
|
||||
ariaCurrent: 'page',
|
||||
activeNavItem: true
|
||||
}
|
||||
|
||||
export const VariantDangerItem = ListItemTemplate.bind({})
|
||||
VariantDangerItem.storyName = '[Variant] Danger'
|
||||
VariantDangerItem.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger'
|
||||
}
|
||||
|
||||
export const VariantDangerItemLeading = ListItemTemplate.bind({})
|
||||
VariantDangerItemLeading.storyName = '[Variant] Danger + leading visual'
|
||||
VariantDangerItemLeading.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger',
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VariantDangerItemTrailing = ListItemTemplate.bind({})
|
||||
VariantDangerItemTrailing.storyName = '[Variant] Danger + trailing visual'
|
||||
VariantDangerItemTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger',
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VariantDangerItemLeadingTrailing = ListItemTemplate.bind({})
|
||||
VariantDangerItemLeadingTrailing.storyName = '[Variant] Danger + leading/trailing visual'
|
||||
VariantDangerItemLeadingTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger',
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VariantDisabledItem = ListItemTemplate.bind({})
|
||||
VariantDisabledItem.storyName = '[Variant] Disabled'
|
||||
VariantDisabledItem.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true
|
||||
}
|
||||
|
||||
export const VariantDisabledItemLeading = ListItemTemplate.bind({})
|
||||
VariantDisabledItemLeading.storyName = '[Variant] Disabled + leading visual'
|
||||
VariantDisabledItemLeading.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VariantDisabledItemTrailing = ListItemTemplate.bind({})
|
||||
VariantDisabledItemTrailing.storyName = '[Variant] Disabled + trailing visual'
|
||||
VariantDisabledItemTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const VariantDisabledItemLeadingTrailing = ListItemTemplate.bind({})
|
||||
VariantDisabledItemLeadingTrailing.storyName = '[Variant] Disabled + leading/trailing visual'
|
||||
VariantDisabledItemLeadingTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionSingleSelectItem = ListItemTemplate.bind({})
|
||||
ActionSingleSelectItem.storyName = '[Actions] Single select'
|
||||
ActionSingleSelectItem.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true
|
||||
}
|
||||
|
||||
export const ActionSingleSelectItemWithLeadingVisual = ListItemTemplate.bind({})
|
||||
ActionSingleSelectItemWithLeadingVisual.storyName = '[Actions] Single select + leading visual'
|
||||
ActionSingleSelectItemWithLeadingVisual.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionSingleSelectItemWithTrailingVisual = ListItemTemplate.bind({})
|
||||
ActionSingleSelectItemWithTrailingVisual.storyName = '[Actions] Single select + trailing visual'
|
||||
ActionSingleSelectItemWithTrailingVisual.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionSingleSelectItemWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
ActionSingleSelectItemWithLeadingAndTrailingVisual.storyName = '[Actions] Single select + leading/trailing visual'
|
||||
ActionSingleSelectItemWithLeadingAndTrailingVisual.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionMultiSelectItem = ListItemTemplate.bind({})
|
||||
ActionMultiSelectItem.storyName = '[Actions] Multi select'
|
||||
ActionMultiSelectItem.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true
|
||||
}
|
||||
|
||||
export const ActionMultiSelectItemWithLeadingVisual = ListItemTemplate.bind({})
|
||||
ActionMultiSelectItemWithLeadingVisual.storyName = '[Actions] Multi select + leading visual'
|
||||
ActionMultiSelectItemWithLeadingVisual.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionMultiSelectItemWithTrailingVisual = ListItemTemplate.bind({})
|
||||
ActionMultiSelectItemWithTrailingVisual.storyName = '[Actions] Multi select + trailing visual'
|
||||
ActionMultiSelectItemWithTrailingVisual.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionMultiSelectItemWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
ActionMultiSelectItemWithLeadingAndTrailingVisual.storyName = '[Actions] Multi select + leading/trailing visual'
|
||||
ActionMultiSelectItemWithLeadingAndTrailingVisual.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionCollapsible = ListItemTemplate.bind({})
|
||||
ActionCollapsible.storyName = '[Actions] Collapsible'
|
||||
ActionCollapsible.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsible: true,
|
||||
collapsed: false
|
||||
}
|
||||
|
||||
export const ActionCollapsibleWithLeadingVisual = ListItemTemplate.bind({})
|
||||
ActionCollapsibleWithLeadingVisual.storyName = '[Actions] Collapsible + leading visual'
|
||||
ActionCollapsibleWithLeadingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsible: true,
|
||||
collapsed: false,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionCollapsibleWithTrailingVisual = ListItemTemplate.bind({})
|
||||
ActionCollapsibleWithTrailingVisual.storyName = '[Actions] Collapsible + trailing visual'
|
||||
ActionCollapsibleWithTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsible: true,
|
||||
collapsed: false,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const ActionCollapsibleWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
ActionCollapsibleWithLeadingAndTrailingVisual.storyName = '[Actions] Collapsible + leading/trailing visual'
|
||||
ActionCollapsibleWithLeadingAndTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsible: true,
|
||||
collapsed: false,
|
||||
leadingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
|
||||
></path>
|
||||
</svg>`,
|
||||
trailingVisual: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"
|
||||
></path>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
export const DividerEmpty = DividerTemplate.bind({})
|
||||
DividerEmpty.storyName = '[Divider] Empty default'
|
||||
DividerEmpty.args = {}
|
||||
|
||||
export const DividerFilled = DividerTemplate.bind({})
|
||||
DividerFilled.storyName = '[Divider] Empty filled'
|
||||
DividerFilled.args = {
|
||||
variant: 'ActionList-sectionDivider--filled'
|
||||
}
|
||||
|
||||
export const DividerText = DividerTemplate.bind({})
|
||||
DividerText.storyName = '[Divider] Title'
|
||||
DividerText.args = {
|
||||
title: 'Title',
|
||||
id: 'some-id'
|
||||
}
|
||||
|
||||
export const DividerTextFilled = DividerTemplate.bind({})
|
||||
DividerTextFilled.storyName = '[Divider] Title filled'
|
||||
DividerTextFilled.args = {
|
||||
title: 'Title',
|
||||
id: 'some-id',
|
||||
variant: 'ActionList-sectionDivider--filled'
|
||||
}
|
||||
@ -0,0 +1,630 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {DividerTemplate} from './ActionListDivider.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/Patterns'
|
||||
// decorators: [
|
||||
// Story => (
|
||||
// <nav>
|
||||
// <Story />
|
||||
// </nav>
|
||||
// )
|
||||
// ]
|
||||
}
|
||||
|
||||
export const NavWithSubItems = ListTemplate.bind({})
|
||||
NavWithSubItems.storyName = '[Nav] Nested collapsible menu'
|
||||
NavWithSubItems.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: 'menu',
|
||||
ariaLabel: 'Main menu description',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate
|
||||
collapsible
|
||||
containsSubItem
|
||||
text="Nav Item"
|
||||
children={
|
||||
<ListTemplate
|
||||
role="menu"
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItems.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithSubItemsLeadingVisual16px = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual16px.storyName = '[Nav] Nested collapsible menu leadingVisual 16px'
|
||||
NavWithSubItemsLeadingVisual16px.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
collapsible
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Sub Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual16px.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithSubItemsLeadingVisual20px = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual20px.storyName = '[Nav] Nested collapsible menu leadingVisual 20px'
|
||||
NavWithSubItemsLeadingVisual20px.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual20px.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithSubItemsLeadingVisual24px = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual24px.storyName = '[Nav] Nested collapsible menu leadingVisual 24px'
|
||||
NavWithSubItemsLeadingVisual24px.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual24px.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuWithDivider = ListTemplate.bind({})
|
||||
MenuWithDivider.storyName = '[Menu] Divider'
|
||||
MenuWithDivider.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<DividerTemplate />
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const MenuWithSectionDivider = ListTemplate.bind({})
|
||||
MenuWithSectionDivider.storyName = '[Menu] Section divider'
|
||||
MenuWithSectionDivider.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<DividerTemplate title="Section DividerTemplate (subtle)" id="some-unique-id" />
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
ariaLabelledBy="some-unique-id"
|
||||
role="menu"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaCurrent="page" />
|
||||
<ListItemTemplate text="Nav Item" href="/" variant="ActionList-item--danger" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const MenuSingleSelect = ListTemplate.bind({})
|
||||
MenuSingleSelect.storyName = '[Menu] Single select'
|
||||
MenuSingleSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
<ListItemTemplate text="Option label" singleSelect />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const MenuMultiSelect = ListTemplate.bind({})
|
||||
MenuMultiSelect.storyName = '[Menu] Multi select'
|
||||
MenuMultiSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
<ListItemTemplate text="Option label" multiSelect />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const ListSingleSelect = ListTemplate.bind({})
|
||||
ListSingleSelect.storyName = '[Listbox] Single select'
|
||||
ListSingleSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Select an option',
|
||||
role: 'listbox',
|
||||
showDividers: false,
|
||||
listboxMultiSelect: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
<ListItemTemplate text="Option label" listSingleSelect />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const ListMultiSelect = ListTemplate.bind({})
|
||||
ListMultiSelect.storyName = '[Listbox] Multi select'
|
||||
ListMultiSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Select multiple options',
|
||||
role: 'listbox',
|
||||
showDividers: false,
|
||||
listboxMultiSelect: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
<ListItemTemplate text="Option label" listMultiSelect />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const List = ListTemplate.bind({})
|
||||
List.storyName = '[List] Group of links'
|
||||
List.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Details',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<DividerTemplate title="Details" />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
href="/"
|
||||
text="github.com/primer"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
href="/"
|
||||
text="MIT License"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
href="/"
|
||||
text="256 stars"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
href="/"
|
||||
text="3 forks"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const NavWithSubItemsLeadingVisual16pxSubSections = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual16pxSubSections.storyName =
|
||||
'[Nav] Nested collapsible menu leadingVisual 16px + sub sections'
|
||||
NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="General"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>`}
|
||||
/>
|
||||
<DividerTemplate title="Access" id="group-id-1" />
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
role="menu"
|
||||
ariaLabelledBy="group-id-1"
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Collaborators"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people">
|
||||
<path fill-rule="evenodd" d="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
text="Moderation options"
|
||||
// href="/"
|
||||
collapsible
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion">
|
||||
<path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"></path>
|
||||
</svg>`}
|
||||
children={
|
||||
<ListTemplate
|
||||
containsSubItem
|
||||
role="menu"
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Interaction limits"
|
||||
href="/"
|
||||
ariaCurrent="page"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-report">
|
||||
<path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h6.5a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0114.25 13H8.06l-2.573 2.573A1.457 1.457 0 013 14.543V13H1.75A1.75 1.75 0 010 11.25v-9.5zM9 9a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Repository roles"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-person">
|
||||
<path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<DividerTemplate title="Code & operations" id="group-id-2" />
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
role="menu"
|
||||
ariaLabel="Sub nav descrioption"
|
||||
ariaLabelledBy="group-id-2"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Webhooks"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-broadcast">
|
||||
<path fill-rule="evenodd" d="M3.267 1.457c.3.286.312.76.026 1.06A6.475 6.475 0 001.5 7a6.472 6.472 0 001.793 4.483.75.75 0 01-1.086 1.034 8.89 8.89 0 01-.276-.304l.569-.49-.569.49A7.971 7.971 0 010 7c0-2.139.84-4.083 2.207-5.517a.75.75 0 011.06-.026zm9.466 0a.75.75 0 011.06.026A7.975 7.975 0 0116 7c0 2.139-.84 4.083-2.207 5.517a.75.75 0 11-1.086-1.034A6.475 6.475 0 0014.5 7a6.475 6.475 0 00-1.793-4.483.75.75 0 01.026-1.06zM8.75 8.582a1.75 1.75 0 10-1.5 0v5.668a.75.75 0 001.5 0V8.582zM5.331 4.736a.75.75 0 10-1.143-.972A4.983 4.983 0 003 7c0 1.227.443 2.352 1.177 3.222a.75.75 0 001.146-.967A3.483 3.483 0 014.5 7c0-.864.312-1.654.831-2.264zm6.492-.958a.75.75 0 00-1.146.967c.514.61.823 1.395.823 2.255 0 .86-.31 1.646-.823 2.255a.75.75 0 101.146.967A4.983 4.983 0 0013 7a4.983 4.983 0 00-1.177-3.222z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Environments"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server">
|
||||
<path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v4c0 .372.116.717.314 1a1.742 1.742 0 00-.314 1v4c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0016 12.75v-4c0-.372-.116-.717-.314-1 .198-.283.314-.628.314-1v-4A1.75 1.75 0 0014.25 1H1.75zm0 7.5a.25.25 0 00-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-4a.25.25 0 00-.25-.25H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v4a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-4zm5.5 2A.75.75 0 017.75 4h4.5a.75.75 0 010 1.5h-4.5A.75.75 0 017 4.75zM7.75 10a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM3 4.75A.75.75 0 013.75 4h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 4.75zM3.75 10a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Pages"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file">
|
||||
<path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Unpublish GitHub Pages"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plug">
|
||||
<path fill-rule="evenodd" d="M10.276 3.09a.25.25 0 01.192-.09h.782a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-.782a.25.25 0 01-.192-.09l-.95-1.14a.75.75 0 00-.483-.264l-3.124-.39a.25.25 0 01-.219-.249V5.133a.25.25 0 01.219-.248l3.124-.39a.75.75 0 00.483-.265l.95-1.14zM4 8v1.867a1.75 1.75 0 001.533 1.737l2.83.354.761.912c.332.4.825.63 1.344.63h.782A1.75 1.75 0 0013 11.75V11h2.25a.75.75 0 000-1.5H13v-4h2.25a.75.75 0 000-1.5H13v-.75a1.75 1.75 0 00-1.75-1.75h-.782c-.519 0-1.012.23-1.344.63l-.76.913-2.831.353A1.75 1.75 0 004 5.133V6.5H2.5A2.5 2.5 0 000 9v5.25a.75.75 0 001.5 0V9a1 1 0 011-1H4z"></path>
|
||||
</svg>`}
|
||||
trailingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert color-icon-danger">
|
||||
<path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual16pxSubSections.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
8
docs/src/stories/helpers/useToggle.jsx
Normal file
8
docs/src/stories/helpers/useToggle.jsx
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
export default function useToggle(initialValue = false) {
|
||||
const [value, setValue] = React.useState(initialValue)
|
||||
const toggle = React.useCallback(() => {
|
||||
setValue(v => !v)
|
||||
}, [])
|
||||
return [value, toggle]
|
||||
}
|
||||
1932
docs/yarn.lock
1932
docs/yarn.lock
File diff suppressed because it is too large
Load Diff
42
src/actionlist/action-list-item-divider.scss
Normal file
42
src/actionlist/action-list-item-divider.scss
Normal file
@ -0,0 +1,42 @@
|
||||
// emtpy divider
|
||||
|
||||
.ActionList-sectionDivider {
|
||||
// has children
|
||||
&:not(:empty) {
|
||||
display: flex;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: ($spacer-1 * 1.5) $spacer-2;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-fg-muted);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// no children
|
||||
&:empty {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
|
||||
list-style: none;
|
||||
background: var(--color-action-list-item-inline-divider);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ActionList-sectionDivider--filled {
|
||||
margin: $spacer-2 ($spacer-2 * -1);
|
||||
background: var(--color-canvas-subtle);
|
||||
border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
|
||||
border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
|
||||
|
||||
// if no children, treat as divider
|
||||
&:empty {
|
||||
height: $spacer-2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
444
src/actionlist/action-list-item.scss
Normal file
444
src/actionlist/action-list-item.scss
Normal file
@ -0,0 +1,444 @@
|
||||
@mixin focusOutline {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
|
||||
}
|
||||
|
||||
// <li>
|
||||
.ActionList-item {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
|
||||
// a href
|
||||
.ActionList-content {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// only hover li without list as children
|
||||
&:not(.ActionList-item--hasSubItem) {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-action-list-item-default-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-action-list-item-default-active-bg);
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
|
||||
}
|
||||
|
||||
// stylelint-disable primer/box-shadow
|
||||
@keyframes ActionList-item-active-bg {
|
||||
// stylelint-disable-next-line max-nesting-depth
|
||||
50% {
|
||||
box-shadow: inset 0 0 0 rgba(#000, 0.04);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line max-nesting-depth
|
||||
100% {
|
||||
box-shadow: inset 0 3px 9px rgba(#000, 0.04);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
// stylelint-enable primer/box-shadow
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
// hide dividers
|
||||
// stylelint-disable-next-line selector-max-specificity
|
||||
.ActionList-item-label::before,
|
||||
+ .ActionList-item .ActionList-item-label::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// target contents of li if sub-item (li wraps item label + nested ul)
|
||||
// collapse styles here
|
||||
&.ActionList-item--hasSubItem {
|
||||
// first child
|
||||
> .ActionList-content {
|
||||
&:hover {
|
||||
background-color: var(--color-action-list-item-default-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// active state [aria-current]
|
||||
|
||||
&.ActionList-item--navActive:not(.ActionList-item--danger) {
|
||||
background: var(--color-action-list-item-default-selected-bg);
|
||||
|
||||
// stylelint-disable-next-line selector-max-specificity
|
||||
&::before,
|
||||
+ .ActionList-item::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// blue accent line
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: -$actionList-item-padding-horizontal;
|
||||
width: $spacer-1;
|
||||
height: $spacer-4;
|
||||
content: '';
|
||||
background: var(--color-accent-fg);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// collapsible item [aria-expanded]
|
||||
|
||||
&[aria-expanded='true'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.ActionList--subGroup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.ActionList-item--hasSubItem {
|
||||
// stylelint-disable-next-line selector-max-specificity
|
||||
> .ActionList-content > .ActionList-item-label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded='false'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.ActionList--subGroup {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox item [aria-checked]
|
||||
// listbox [aria-selected]
|
||||
|
||||
&[aria-checked='true'],
|
||||
&[aria-selected='true'] {
|
||||
// multiselect checkmark
|
||||
.ActionList-item-multiSelectCheckmark {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
|
||||
}
|
||||
|
||||
// singleselect checkmark
|
||||
.ActionList-item-singleSelectCheckmark {
|
||||
visibility: visible;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox
|
||||
.ActionList-item-multiSelectIcon {
|
||||
.ActionList-item-multiSelectIconRect {
|
||||
fill: var(--color-accent-fg);
|
||||
stroke: var(--color-accent-fg);
|
||||
stroke-width: $border-width;
|
||||
}
|
||||
|
||||
.ActionList-item-multiSelectCheckmark {
|
||||
fill: var(--color-fg-on-emphasis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-checked='false'],
|
||||
&[aria-selected='false'] {
|
||||
// multiselect checkmark
|
||||
.ActionList-item-multiSelectCheckmark {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
visibility 0 linear $actionList-item-checkmark-transition-timing,
|
||||
opacity $actionList-item-checkmark-transition-timing;
|
||||
}
|
||||
|
||||
// singleselect checkmark
|
||||
.ActionList-item-singleSelectCheckmark {
|
||||
visibility: hidden;
|
||||
transition: visibility 0s linear 200ms;
|
||||
clip-path: inset(16px 0 0 0);
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox
|
||||
.ActionList-item-multiSelectIcon {
|
||||
.ActionList-item-multiSelectIconRect {
|
||||
fill: var(--color-canvas-default);
|
||||
stroke: var(--color-border-default);
|
||||
stroke-width: $border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.ActionList-item-multiSelectIconRect {
|
||||
fill: var(--color-canvas-default);
|
||||
border: $border-width $border-style var(--color-border-default);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmarkIn {
|
||||
from {
|
||||
clip-path: inset(16px 0 0 0);
|
||||
}
|
||||
|
||||
to {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmarkOut {
|
||||
from {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
to {
|
||||
clip-path: inset(16px 0 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
// variants
|
||||
|
||||
// danger
|
||||
&.ActionList-item--danger {
|
||||
.ActionList-item-label {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
.ActionList-item-visual {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&:hover {
|
||||
background: var(--color-action-list-item-danger-hover-bg);
|
||||
|
||||
// stylelint-disable-next-line max-nesting-depth
|
||||
.ActionList-item-label {
|
||||
color: var(--color-action-list-item-danger-hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-action-list-item-danger-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// disabled
|
||||
&[aria-disabled='true'] {
|
||||
.ActionList-item-label,
|
||||
.ActionList-item-description {
|
||||
color: var(--color-primer-fg-disabled);
|
||||
}
|
||||
|
||||
.ActionList-item-visual {
|
||||
fill: var(--color-primer-fg-disabled);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if nested list exists, remove default padding
|
||||
.ActionList {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// span or a href
|
||||
.ActionList-content {
|
||||
position: relative;
|
||||
display: grid;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--color-fg-default);
|
||||
user-select: none;
|
||||
border-radius: $border-radius;
|
||||
transition: $actionList-item-bg-transition;
|
||||
grid-template-rows: min-content;
|
||||
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
||||
grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
|
||||
align-items: center;
|
||||
|
||||
// column-gap persists with empty grid-areas, margin applies only when children exist
|
||||
> :not(:last-child) {
|
||||
margin-right: $spacer-2;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focusOutline;
|
||||
}
|
||||
|
||||
// sizes
|
||||
|
||||
&.ActionList-content--sizeMedium {
|
||||
// 44px total height
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
|
||||
}
|
||||
|
||||
&.ActionList-content--sizeLarge {
|
||||
// 48px total height
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
|
||||
}
|
||||
|
||||
// On pointer:coarse (mobile), all list items are large
|
||||
@media (pointer: coarse) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
|
||||
}
|
||||
|
||||
&.ActionList-content--blockDescription {
|
||||
// if leading/trailing visual, align with first line of content
|
||||
.ActionList-item-visual {
|
||||
place-self: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// place children on grid
|
||||
|
||||
.ActionList-item-action--leading {
|
||||
grid-area: leadingAction;
|
||||
}
|
||||
|
||||
.ActionList-item-visual--leading {
|
||||
grid-area: leadingVisual;
|
||||
}
|
||||
|
||||
.ActionList-item-label {
|
||||
grid-area: label;
|
||||
}
|
||||
|
||||
.ActionList-item-visual--trailing {
|
||||
grid-area: trailingVisual;
|
||||
}
|
||||
|
||||
.ActionList-item-action--trailing {
|
||||
grid-area: trailingAction;
|
||||
}
|
||||
|
||||
// wrapper span
|
||||
// default block
|
||||
.ActionList-item-descriptionWrap {
|
||||
grid-area: label;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ActionList-item-description {
|
||||
margin-top: $spacer-1;
|
||||
}
|
||||
|
||||
.ActionList-item-label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
// inline
|
||||
.ActionList-item-descriptionWrap--inline {
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
|
||||
.ActionList-item-description {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: $actionList-item-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// description
|
||||
.ActionList-item-description {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $lh-default;
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
// helper for grid alignment with multi-line content
|
||||
// span wrapping svg or text
|
||||
.ActionList-item-visual,
|
||||
.ActionList-item-action {
|
||||
display: flex;
|
||||
min-height: $actionList-item-height-sm;
|
||||
color: var(--color-fg-muted); // if visual is text
|
||||
fill: var(--color-fg-muted);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// text
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
.ActionList-item-label {
|
||||
position: relative; // for pseudo dividers
|
||||
font-weight: $font-weight-normal;
|
||||
// we need a strict value here for grid alignment
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $actionList-item-label-line-height;
|
||||
color: var(--color-fg-default);
|
||||
}
|
||||
|
||||
// nested lists (only supports 1 level currently)
|
||||
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
||||
|
||||
.ActionList-item--subItem > .ActionList-content {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
// no leading visual
|
||||
.ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
// has 16px leading visual
|
||||
.ActionList-content--visual16 + .ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
// has 20px leading visual
|
||||
.ActionList-content--visual20 + .ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-3 * 1.75;
|
||||
}
|
||||
}
|
||||
|
||||
// has 24px leading visual
|
||||
.ActionList-content--visual24 + .ActionList--subGroup {
|
||||
.ActionList-item--subItem {
|
||||
padding-left: $spacer-5;
|
||||
}
|
||||
}
|
||||
8
src/actionlist/action-list-variables.scss
Normal file
8
src/actionlist/action-list-variables.scss
Normal file
@ -0,0 +1,8 @@
|
||||
$actionList-item-height-sm: $spacer-2 * 2.5 !default;
|
||||
$actionList-item-label-line-height: $spacer-2 * 2.5 !default;
|
||||
$actionList-item-padding-vertical-md: $spacer-2 * 1.25 !default;
|
||||
$actionList-item-padding-vertical-lg: $spacer-2 * 1.75 !default;
|
||||
$actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
|
||||
$actionList-item-padding-horizontal: $spacer-2 !default;
|
||||
$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor
|
||||
$actionList-item-checkmark-transition-timing: 50ms !default;
|
||||
33
src/actionlist/action-list.scss
Normal file
33
src/actionlist/action-list.scss
Normal file
@ -0,0 +1,33 @@
|
||||
// <ul>
|
||||
.ActionList {
|
||||
padding: $spacer-2;
|
||||
}
|
||||
|
||||
// dividers
|
||||
|
||||
.ActionList--divided {
|
||||
.ActionList-item-label::before {
|
||||
position: absolute;
|
||||
top: -$actionList-item-padding-vertical;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: var(--color-action-list-item-inline-divider);
|
||||
}
|
||||
|
||||
// hide divider if item is active
|
||||
.ActionList-item--navActive {
|
||||
// stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
|
||||
.ActionList-item-label::before,
|
||||
+ .ActionList-item .ActionList-item-label::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hide if item is first of type with label::before, or is the first item after a sectionDivider
|
||||
.ActionList-item:first-of-type .ActionList-item-label::before,
|
||||
.ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
5
src/actionlist/index.scss
Normal file
5
src/actionlist/index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import '../support/index.scss';
|
||||
@import './action-list-variables.scss';
|
||||
@import './action-list.scss';
|
||||
@import './action-list-item.scss';
|
||||
@import './action-list-item-divider.scss';
|
||||
@ -11,6 +11,7 @@
|
||||
// Color modes
|
||||
|
||||
// Core modules
|
||||
@import '../actionlist/index.scss';
|
||||
@import '../base/index.scss';
|
||||
@import '../box/index.scss';
|
||||
@import '../breadcrumb/index.scss';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user