mirror of
https://github.com/primer/css.git
synced 2024-12-25 07:03:35 +03:00
Remove ActionList (#2405)
* Remove ActionList from src/ * Remove `ActionList` from docs/ * Create .changeset/quick-wasps-kick.md
This commit is contained in:
simurai
GitHub
parent
256affcf34
commit
85f31cc8f8
5
.changeset/quick-wasps-kick.md
Normal file
5
.changeset/quick-wasps-kick.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": major
|
||||
---
|
||||
|
||||
Remove `ActionList`
|
||||
@ -1,445 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
## Action list
|
||||
|
||||
Action list is a `ul` list designed to contain list items.
|
||||
|
||||
### Variants
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `ActionList` | Default styles |
|
||||
| `ActionList--divided` | Show dividers between items |
|
||||
| `ActionList--subGroup` | If Action List is nested as a sub-list |
|
||||
| `ActionList--tree` | Tree-view specific styles |
|
||||
|
||||
#### Default
|
||||
|
||||
```html live
|
||||
<ul class="ActionList">
|
||||
<li class="ActionList-item">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Action list item</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item">
|
||||
<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">
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Item 1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Item 2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Item 3</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Nested sub list
|
||||
|
||||
```html live
|
||||
<nav>
|
||||
<li class="ActionList-sectionDivider">
|
||||
<h3 class="ActionList-sectionDivider-title" id="group-id-1">Access</h3>
|
||||
</li>
|
||||
<ul class="ActionList" role="list" aria-labelledby="group-id-1">
|
||||
<li class="ActionList-item ActionList-item--hasSubItem">
|
||||
<button aria-expanded="true" class="ActionList-content ActionList-content--visual16 ActionList-content--hasActiveSubItem">
|
||||
<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="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>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Moderation</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>
|
||||
</button>
|
||||
<ul class="ActionList ActionList--subGroup" role="list">
|
||||
<li class="ActionList-item ActionList-item--subItem">
|
||||
<a href="#" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Interaction limits</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--navActive ActionList-item--subItem">
|
||||
<a href="#" aria-current="page" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Code review limits</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item ActionList-item--subItem">
|
||||
<a href="#" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Reported content</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
## Action list divider
|
||||
|
||||
List item `li` for separating groups of content
|
||||
|
||||
### Variants
|
||||
|
||||
| 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">
|
||||
<li
|
||||
class="ActionList-sectionDivider"
|
||||
role="separator"
|
||||
aria-hidden="true"
|
||||
></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Filled
|
||||
|
||||
```html live
|
||||
<ul class="ActionList">
|
||||
<li
|
||||
class="ActionList-sectionDivider ActionList-sectionDivider--filled"
|
||||
role="separator"
|
||||
aria-hidden="true"
|
||||
></li>
|
||||
</ul>
|
||||
```
|
||||
### Divider with label text
|
||||
|
||||
When using a section label for a group, give the `h3` an id to be referenced by the group `ul`
|
||||
#### Filled with section label
|
||||
|
||||
```html live
|
||||
<ul>
|
||||
<li class="ActionList-sectionDivider ActionList-sectionDivider--filled">
|
||||
<h3 class="ActionList-sectionDivider-title" id="group-id">
|
||||
List group title
|
||||
</h3>
|
||||
</li>
|
||||
<ul class="ActionList" aria-labelledby="group-id">
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Group Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Default with section label
|
||||
|
||||
```html live
|
||||
<ul>
|
||||
<li class="ActionList-sectionDivider">
|
||||
<h3 class="ActionList-sectionDivider-title" id="group-id">
|
||||
List group title
|
||||
</h3>
|
||||
</li>
|
||||
<ul class="ActionList" aria-labelledby="group-id">
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Group Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### Default with section label + description
|
||||
|
||||
```html live
|
||||
<ul>
|
||||
<li class="ActionList-sectionDivider">
|
||||
<h3 class="ActionList-sectionDivider-title" id="group-id">
|
||||
List group title
|
||||
</h3>
|
||||
<span class="ActionList-item-description">Group description</span>
|
||||
</li>
|
||||
<ul class="ActionList" aria-labelledby="group-id">
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Group Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Action list item
|
||||
|
||||
List item `li` handling semantics, state and interactions
|
||||
|
||||
### Variants
|
||||
|
||||
| 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 |
|
||||
|
||||
|
||||
## Action list item content
|
||||
|
||||
Contains and places all child elements within action list item. Can be either an `a href` tag for list link items, or a `button` for items that provide an event on Action List Item `li`.
|
||||
|
||||
### Variants
|
||||
|
||||
| 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-content--hasActiveSubItem` | Handles active nav state if child item is active |
|
||||
| `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">
|
||||
<li class="ActionList-item">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Basic item label</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Size (all options)
|
||||
|
||||
```html live
|
||||
<ul class="ActionList">
|
||||
<li class="ActionList-item">
|
||||
<span class="ActionList-content ActionList-content--sizeMedium">
|
||||
<span class="ActionList-item-label">Medium item</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ActionList">
|
||||
<li class="ActionList-item">
|
||||
<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">
|
||||
<li class="ActionList-item">
|
||||
<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">
|
||||
<li class="ActionList-item">
|
||||
<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">
|
||||
<li class="ActionList-item">
|
||||
<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
|
||||
<nav>
|
||||
<ul class="ActionList">
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ActionList-item">
|
||||
<a href="/" class="ActionList-content" aria-current="page">
|
||||
<span class="ActionList-item-label">Nav Item</span>
|
||||
</a>
|
||||
</li>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Danger item
|
||||
|
||||
```html live
|
||||
<ul class="ActionList">
|
||||
<li class="ActionList-item ActionList-item--danger">
|
||||
<span class="ActionList-content">
|
||||
<span class="ActionList-item-label">Danger danger</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Actions
|
||||
|
||||
### Leading action: single select listbox
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="listbox" aria-label="Select an option">
|
||||
<li class="ActionList-item" role="option" aria-selected="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>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Option label</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item" role="option" aria-selected="false">
|
||||
<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>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Option label</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="ActionList-item" role="option" aria-selected="false">
|
||||
<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>
|
||||
</span>
|
||||
<span class="ActionList-item-label">Option label</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Leading action: multi select listbox
|
||||
|
||||
```html live
|
||||
<ul class="ActionList" role="listbox" aria-label="Select multiple options"
|
||||
aria-multiselectable="true">
|
||||
<li class="ActionList-item" role="option" aria-selected="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>
|
||||
<li class="ActionList-item" role="option" aria-selected="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">
|
||||
<li class="ActionList-item">
|
||||
<button class="ActionList-content" aria-expanded="true">
|
||||
<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>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
@ -1,77 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListItemTemplate} from '../../ui-patterns/ActionList/ActionListItem.stories'
|
||||
import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionList',
|
||||
excludeStories: ['ActionListTemplate'],
|
||||
argTypes: {
|
||||
showDividers: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'Show dividers between items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
role: {
|
||||
options: ['list'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Semantic list role',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLabel: {
|
||||
name: 'ariaLabel',
|
||||
type: 'string',
|
||||
description: 'If no list ActionListDivider is provided, include an aria-label',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLabelledBy: {
|
||||
name: 'ariaLabelledBy',
|
||||
type: 'string',
|
||||
description: 'Reference ID of ActionListDivider',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
listPadding: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: [null, 'ActionList--full'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['inset', 'full-bleed']
|
||||
},
|
||||
description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
children: {
|
||||
table: {
|
||||
disable: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ActionListTemplate = ListTemplate.bind({})
|
||||
|
||||
export const Playground = ActionListTemplate.bind({})
|
||||
Playground.args = {
|
||||
showDividers: false,
|
||||
listPadding: 0,
|
||||
role: 'list',
|
||||
ariaLabel: '',
|
||||
ariaLabelledBy: '',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Action list item" />
|
||||
<ListItemTemplate text="Action list item" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
|
||||
import {DividerTemplate} from '../../ui-patterns/ActionList/ActionListDivider.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListDivider',
|
||||
excludeStories: ['ActionDividerTemplate'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-sectionDivider--filled'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
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: 'Provide label for NavigationList <ul> aria-labelledby',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ActionDividerTemplate = DividerTemplate.bind({})
|
||||
|
||||
export const Playground = ActionDividerTemplate.bind({})
|
||||
Playground.args = {
|
||||
title: 'Section title',
|
||||
description: 'Section description',
|
||||
variant: 0
|
||||
}
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
|
||||
|
||||
import {
|
||||
PatternTitle,
|
||||
PatternFilled,
|
||||
PatternWithDescription,
|
||||
PatternSeparator
|
||||
} from '../../ui-patterns/ActionList/ActionListDividerFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListDivider/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const Title = ({}) => <PatternTitle {...PatternTitle.args} />
|
||||
|
||||
export const Filled = ({}) => <PatternFilled {...PatternFilled.args} />
|
||||
|
||||
export const WithDescription = ({}) => <PatternWithDescription {...PatternWithDescription.args} />
|
||||
|
||||
export const Separator = ({}) => <PatternSeparator {...PatternSeparator.args} />
|
||||
@ -1,54 +0,0 @@
|
||||
import React from 'react'
|
||||
import {DividerTemplate} from '../../ui-patterns/ActionList/ActionListDivider.stories'
|
||||
import {ListItemTemplate} from '../../ui-patterns/ActionList/ActionListItem.stories'
|
||||
import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/Examples'
|
||||
}
|
||||
|
||||
export const List = ListTemplate.bind({})
|
||||
List.storyName = 'List of links'
|
||||
List.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<DividerTemplate title="Details" id="details-01" />
|
||||
<ListItemTemplate hasSubItem>
|
||||
<ListTemplate listType="nested" ariaLabelledBy="details-01">
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
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
|
||||
subItem
|
||||
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
|
||||
subItem
|
||||
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
|
||||
subItem
|
||||
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>`}
|
||||
/>
|
||||
</ListTemplate>
|
||||
</ListItemTemplate>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
PatternShowDividers,
|
||||
PatternInsetPadding,
|
||||
PatternFullBleed
|
||||
} from '../../ui-patterns/ActionList/ActionListFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionList/Features'
|
||||
}
|
||||
|
||||
export const ShowDividers = ({}) => <PatternShowDividers {...PatternShowDividers.args} />
|
||||
|
||||
export const InsetPadding = ({}) => <PatternInsetPadding {...PatternInsetPadding.args} />
|
||||
|
||||
export const FullBleed = ({}) => <PatternFullBleed {...PatternFullBleed.args} />
|
||||
@ -1,139 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
|
||||
import {ListItemTemplate} from '../../ui-patterns/ActionList/ActionListItem.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListItem',
|
||||
excludeStories: ['ActionListItemTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-item--danger'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'danger']
|
||||
},
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
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: 'inline-radio',
|
||||
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: 'inline-radio'},
|
||||
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: 'inline-radio',
|
||||
labels: ['block', 'inline']
|
||||
},
|
||||
description: 'block (default), inline',
|
||||
defaultValue: 'ActionList-item-blockDescription',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ActionListItemTemplate = ListItemTemplate.bind({})
|
||||
|
||||
export const Playground = ActionListItemTemplate.bind({})
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
Playground.args = {
|
||||
truncateItem: false,
|
||||
size: 0,
|
||||
variant: 0,
|
||||
descriptionVariant: 0,
|
||||
leadingVisualSize: 0
|
||||
}
|
||||
@ -1,130 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx'
|
||||
import {
|
||||
PatternTextOnly,
|
||||
PatternSizeMedium,
|
||||
PatternSizeMediumWithDescription,
|
||||
PatternSizeLarge,
|
||||
PatternSizeLargeWithDescription,
|
||||
PatternVisualLeading,
|
||||
PatternVisualTrailing,
|
||||
PatternVisualTrailingText,
|
||||
PatternVisualLeadingAndTrailing,
|
||||
PatternDescriptionBlock,
|
||||
PatternDescriptionBlockWithLeadingVisual,
|
||||
PatternDescriptionBlockWithTrailingVisual,
|
||||
PatternDescriptionBlockWithLeadingAndTrailingVisual,
|
||||
PatternDescriptionInline,
|
||||
PatternDescriptionInlineWithLeadingVisual,
|
||||
PatternDescriptionInlineWithTrailingVisual,
|
||||
PatternDescriptionInlineWithLeadingAndTrailingVisual,
|
||||
PatternNavActiveAnchor,
|
||||
PatternNavActivePage,
|
||||
PatternVariantDangerItem,
|
||||
PatternVariantDangerItemLeading,
|
||||
PatternVariantDangerItemTrailing,
|
||||
PatternVariantDangerItemLeadingTrailing,
|
||||
PatternTruncateText,
|
||||
PatternWrapText
|
||||
} from '../../ui-patterns/ActionList/ActionListItemFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListItem/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const TextOnly = ({}) => <PatternTextOnly {...PatternTextOnly.args} />
|
||||
|
||||
export const SizeMedium = ({}) => <PatternSizeMedium {...PatternSizeMedium.args} />
|
||||
|
||||
export const SizeMediumWithDescription = ({}) => (
|
||||
<PatternSizeMediumWithDescription {...PatternSizeMediumWithDescription.args} />
|
||||
)
|
||||
|
||||
export const SizeLarge = ({}) => <PatternSizeLarge {...PatternSizeLarge.args} />
|
||||
|
||||
export const SizeLargeWithDescription = ({}) => (
|
||||
<PatternSizeLargeWithDescription {...PatternSizeLargeWithDescription.args} />
|
||||
)
|
||||
|
||||
export const VisualLeading = ({}) => <PatternVisualLeading {...PatternVisualLeading.args} />
|
||||
|
||||
export const VisualTrailing = ({}) => <PatternVisualTrailing {...PatternVisualTrailing.args} />
|
||||
|
||||
export const VisualTrailingText = ({}) => <PatternVisualTrailingText {...PatternVisualTrailingText.args} />
|
||||
|
||||
export const VisualLeadingAndTrailing = ({}) => (
|
||||
<PatternVisualLeadingAndTrailing {...PatternVisualLeadingAndTrailing.args} />
|
||||
)
|
||||
|
||||
export const DescriptionBlock = ({}) => <PatternDescriptionBlock {...PatternDescriptionBlock.args} />
|
||||
|
||||
export const DescriptionBlockWithLeadingVisual = ({}) => (
|
||||
<PatternDescriptionBlockWithLeadingVisual {...PatternDescriptionBlockWithLeadingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionBlockWithTrailingVisual = ({}) => (
|
||||
<PatternDescriptionBlockWithTrailingVisual {...PatternDescriptionBlockWithTrailingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionBlockWithLeadingAndTrailingVisual = ({}) => (
|
||||
<PatternDescriptionBlockWithLeadingAndTrailingVisual {...PatternDescriptionBlockWithLeadingAndTrailingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionInline = ({}) => <PatternDescriptionInline {...PatternDescriptionInline.args} />
|
||||
|
||||
export const DescriptionInlineWithLeadingVisual = ({}) => (
|
||||
<PatternDescriptionInlineWithLeadingVisual {...PatternDescriptionInlineWithLeadingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionInlineWithTrailingVisual = ({}) => (
|
||||
<PatternDescriptionInlineWithTrailingVisual {...PatternDescriptionInlineWithTrailingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionInlineWithLeadingAndTrailingVisual = ({}) => (
|
||||
<PatternDescriptionInlineWithLeadingAndTrailingVisual
|
||||
{...PatternDescriptionInlineWithLeadingAndTrailingVisual.args}
|
||||
/>
|
||||
)
|
||||
|
||||
export const NavActiveAnchor = ({}) => <PatternNavActiveAnchor {...PatternNavActiveAnchor.args} />
|
||||
|
||||
export const NavActivePage = ({}) => <PatternNavActivePage {...PatternNavActivePage.args} />
|
||||
|
||||
export const VariantDangerItem = ({}) => <PatternVariantDangerItem {...PatternVariantDangerItem.args} />
|
||||
|
||||
export const VariantDangerItemLeading = ({}) => (
|
||||
<PatternVariantDangerItemLeading {...PatternVariantDangerItemLeading.args} />
|
||||
)
|
||||
|
||||
export const VariantDangerItemTrailing = ({}) => (
|
||||
<PatternVariantDangerItemTrailing {...PatternVariantDangerItemTrailing.args} />
|
||||
)
|
||||
|
||||
export const VariantDangerItemLeadingTrailing = ({}) => (
|
||||
<PatternVariantDangerItemLeadingTrailing {...PatternVariantDangerItemLeadingTrailing.args} />
|
||||
)
|
||||
|
||||
export const VariantDisabledItem = ({}) => <PatternVariantDisabledItem {...PatternVariantDisabledItem.args} />
|
||||
|
||||
export const VariantDisabledItemLeading = ({}) => (
|
||||
<PatternVariantDisabledItemLeading {...PatternVariantDisabledItemLeading.args} />
|
||||
)
|
||||
|
||||
export const VariantDisabledItemTrailing = ({}) => (
|
||||
<PatternVariantDisabledItemTrailing {...PatternVariantDisabledItemTrailing.args} />
|
||||
)
|
||||
|
||||
export const VariantDisabledItemLeadingTrailing = ({}) => (
|
||||
<PatternVariantDisabledItemLeadingTrailing {...PatternVariantDisabledItemLeadingTrailing.args} />
|
||||
)
|
||||
|
||||
export const TruncateText = ({}) => <PatternTruncateText {...PatternTruncateText.args} />
|
||||
|
||||
export const WrapText = ({}) => <PatternWrapText {...PatternWrapText.args} />
|
||||
@ -1,316 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {PageLayoutTemplate} from './PageLayout.stories'
|
||||
import {SplitPageLayoutTemplate} from './SplitPageLayout.stories'
|
||||
import {ActionListTreeViewTemplate} from '../../ui-patterns/ActionList/ActionListTree.stories'
|
||||
import {RepoSettings, NavDiscussionsPane} from '../NavigationList/NavigationListExamples.stories'
|
||||
import {LayoutAlphaTemplate} from './LayoutAlpha.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/Layout/Beta/Examples'
|
||||
}
|
||||
|
||||
export const Settings = SplitPageLayoutTemplate.bind({})
|
||||
Settings.storyName = 'Settings'
|
||||
Settings.parameters = {
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
Settings.args = {
|
||||
// Structure
|
||||
padding: 'normal',
|
||||
|
||||
// Responsive
|
||||
primaryRegion: 'pane',
|
||||
|
||||
// Pane
|
||||
paneWidth: 'wide',
|
||||
paneIsSticky: true,
|
||||
|
||||
// Content
|
||||
contentWidth: 'md',
|
||||
|
||||
paneChildren: (
|
||||
<>
|
||||
<h2 className="h3 ml-2 mr-2">Repository settings</h2>
|
||||
<div className="ml-n2 mr-n2">
|
||||
<RepoSettings {...RepoSettings.args} />
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
|
||||
contentChildren: (
|
||||
<>
|
||||
<h3 className="f3 text-normal">General</h3>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '200px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '400px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const Discussions = PageLayoutTemplate.bind({})
|
||||
Discussions.parameters = {
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
Discussions.storyName = 'Discussions'
|
||||
Discussions.args = {
|
||||
responsiveVariant: 'separateRegions',
|
||||
panePosition: 'start',
|
||||
paneWidth: 'narrow',
|
||||
hasHeader: true,
|
||||
headerChildren: (
|
||||
<>
|
||||
<div class="d-block d-md-none">
|
||||
<div className="d-flex flex-items-center width-full flex-wrap" style={{gap: '16px'}}>
|
||||
<h2 className="h3 ml-2 mr-2 flex-1">
|
||||
All discussions
|
||||
<span class="no-wrap">
|
||||
{/*
|
||||
I'm using a `no-wrap` class between the heading and the `triangle-down`
|
||||
octicon to make sure it won't be ever rendered as a typographic widow
|
||||
*/}
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"></path>
|
||||
</svg>
|
||||
</h2>
|
||||
<button class="btn btn-primary">New</button>
|
||||
<button
|
||||
class="btn btn-octicon"
|
||||
style={{margin: 0, border: '1px solid var(--color-border-default)', width: '32px', height: '32px'}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<input className="form-control flex-1 width-full" placeholder="Search discussions" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hide-md hide-sm">
|
||||
<div className="d-flex flex-items-center width-full flex-wrap" style={{gap: '8px'}}>
|
||||
<input className="form-control flex-1" placeholder="Search discussions" />
|
||||
|
||||
<div class="BtnGroup d-block">
|
||||
<button class="BtnGroup-item btn" type="button">
|
||||
New
|
||||
</button>
|
||||
<button class="BtnGroup-item btn" type="button">
|
||||
Top
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="btn">Labels</button>
|
||||
|
||||
<button class="btn btn-primary">New discussion</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
|
||||
paneChildren: (
|
||||
<>
|
||||
<div className="ml-n2 mr-n2 mt-n2 mb-n2">
|
||||
<NavDiscussionsPane {...NavDiscussionsPane.args} />
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
|
||||
contentChildren: (
|
||||
<>
|
||||
<LayoutAlphaTemplate
|
||||
container="xl"
|
||||
sidebarPosition="end"
|
||||
sidebarWidth="narrow"
|
||||
flowRowUntil="lg"
|
||||
mainChildren={
|
||||
<>
|
||||
<div className="Box p-3" style={{minHeight: '800px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
sidebarChildren={
|
||||
<>
|
||||
<div className="Box p-3" style={{minHeight: '200px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '200px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const IssueDetail = PageLayoutTemplate.bind({})
|
||||
IssueDetail.storyName = 'Issue detail'
|
||||
IssueDetail.parameters = {
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
IssueDetail.args = {
|
||||
panePosition: 'end',
|
||||
paneWidth: 'default',
|
||||
hasHeader: true,
|
||||
hasHeaderDivider: true,
|
||||
headerDividerWhenNarrow: 'filled',
|
||||
paneDividerWhenNarrow: 'filled',
|
||||
headerChildren: (
|
||||
<>
|
||||
<h2 className="f2">
|
||||
Traverse does not calculate scope in object deconstructor
|
||||
<span className="f2-light color-fg-muted"> #14024</span>
|
||||
</h2>
|
||||
<div className="d-flex flex-items-center flex-wrap mt-2" style={{gap: '8px'}}>
|
||||
<span title="Status: Open" class="State State--open">
|
||||
<svg
|
||||
height="16"
|
||||
class="octicon octicon-issue-opened"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
width="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
|
||||
></path>
|
||||
</svg>{' '}
|
||||
Open
|
||||
</span>
|
||||
<span className="color-fg-muted">
|
||||
<strong class="color-fg-default">monalisa</strong> opened this issue 6 days ago
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
contentChildren: (
|
||||
<>
|
||||
<div className="Box p-3" style={{minHeight: '1200px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
paneChildren: (
|
||||
<>
|
||||
<div className="Box p-3" style={{minHeight: '140px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
<div className="Box p-3 mt-3" style={{minHeight: '200px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
<div className="Box p-3 mt-3" style={{minHeight: '140px'}}>
|
||||
{' '}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const PullDetail = SplitPageLayoutTemplate.bind({});
|
||||
PullDetail.storyName = 'Pull request detail';
|
||||
PullDetail.parameters = {
|
||||
layout: 'fullscreen',
|
||||
};
|
||||
PullDetail.args = {
|
||||
padding: 'none',
|
||||
primaryRegion: 'content',
|
||||
paneWidth: 'wide',
|
||||
paneIsSticky: true,
|
||||
contentWidth: 'full',
|
||||
hasHeader: true,
|
||||
hasFooter: true,
|
||||
headerChildren: (
|
||||
<>
|
||||
<div className="mt-3 mx-3">
|
||||
<h2 className="f2">
|
||||
Traverse does not calculate scope in object deconstructor
|
||||
<span className="f2-light color-fg-muted"> #14024</span>
|
||||
</h2>
|
||||
<div className="d-flex flex-items-center flex-wrap mt-2" style={{gap: '8px'}}>
|
||||
<span title="Status: Open" class="State State--open">
|
||||
<svg height="16" class="octicon octicon-issue-opened" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg> Open
|
||||
</span>
|
||||
<span className="color-fg-muted"><strong class="color-fg-default">monalisa</strong> opened this issue 6 days ago</span>
|
||||
</div>
|
||||
<nav className="UnderlineNav ml-n2 mt-2" style={{marginBottom: '-1px'}}>
|
||||
<div className="UnderlineNav-body" role="tablist">
|
||||
<button className="UnderlineNav-item" role="tab" type="button">
|
||||
<svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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>
|
||||
Conversation
|
||||
</button>
|
||||
<button className="UnderlineNav-item" role="tab" type="button">
|
||||
<svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"></path></svg>
|
||||
Commits
|
||||
</button>
|
||||
<button className="UnderlineNav-item" role="tab" type="button">
|
||||
<svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 1.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v7.736a.75.75 0 101.5 0V1.75A1.75 1.75 0 0011.25 0h-8.5A1.75 1.75 0 001 1.75v11.5c0 .966.784 1.75 1.75 1.75h3.17a.75.75 0 000-1.5H2.75a.25.25 0 01-.25-.25V1.75zM4.75 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM4 7.75A.75.75 0 014.75 7h2a.75.75 0 010 1.5h-2A.75.75 0 014 7.75zm11.774 3.537a.75.75 0 00-1.048-1.074L10.7 14.145 9.281 12.72a.75.75 0 00-1.062 1.058l1.943 1.95a.75.75 0 001.055.008l4.557-4.45z"></path></svg>
|
||||
Checks
|
||||
</button>
|
||||
<button className="UnderlineNav-item" role="tab" type="button" aria-selected="true">
|
||||
<svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H2.75zM1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V1.75zm7 1.5a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0V7h-1.5a.75.75 0 010-1.5h1.5V4A.75.75 0 018 3.25zm-3 8a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z"></path></svg>
|
||||
Files changed
|
||||
<span class="Counter">12</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
contentChildren: (
|
||||
<>
|
||||
<div className="m-3">
|
||||
<div className="d-flex flex-row flex-justify-end" style={{gap: '16px'}}>
|
||||
<button class="btn btn-primary" type="button" style={{paddingInline: '12px'}}>
|
||||
Review changes
|
||||
<span class="dropdown-caret ml-2"></span>
|
||||
</button>
|
||||
<button class="btn px-2" type="button">
|
||||
<svg className="octicon" 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>
|
||||
</button>
|
||||
</div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
|
||||
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
paneChildren: (
|
||||
<>
|
||||
<div className="position-sticky top-0 p-3 color-bg-default" style={{zIndex: 2}}>
|
||||
<div className="d-flex flex-justify-between" style={{gap: '16px'}}>
|
||||
<button className="btn" type="button" style={{paddingInline: '12px'}}>
|
||||
<span className="text-normal color-fg-muted">Show:</span> all changes
|
||||
<span className="dropdown-caret ml-2"></span>
|
||||
</button>
|
||||
|
||||
<button className="btn btn-octicon p-2 mr-n2">
|
||||
<svg className="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.177 7.823l2.396-2.396A.25.25 0 017 5.604v4.792a.25.25 0 01-.427.177L4.177 8.177a.25.25 0 010-.354z"></path><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<input class="form-control input-block" type="text" placeholder="Filter changed files" />
|
||||
</div>
|
||||
</div>
|
||||
<ActionListTreeViewTemplate {...ActionListTreeViewTemplate.args} />
|
||||
{/* <div className="Box p-3" style={{minHeight: '140px'}}> </div>
|
||||
<div className="Box p-3 mt-3" style={{minHeight: '200px'}}> </div>
|
||||
<div className="Box p-3 mt-3" style={{minHeight: '140px'}}> </div> */}
|
||||
</>
|
||||
),
|
||||
footerChildren: (
|
||||
<>
|
||||
footer
|
||||
</>
|
||||
)
|
||||
};
|
||||
@ -1,97 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {NavigationListItemTemplate} from './NavigationListItem.stories'
|
||||
import ConditionalWrapper from '../../helpers/ConditionalWrapper'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationList',
|
||||
excludeStories: ['NavigationListTemplate'],
|
||||
argTypes: {
|
||||
showDividers: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'Show dividers between items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
ariaLabel: {
|
||||
name: 'ariaLabel',
|
||||
type: 'string',
|
||||
description: 'Required if no visible group title provided by NavigationListDivider',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLabelledBy: {
|
||||
name: 'ariaLabelledBy',
|
||||
type: 'string',
|
||||
description: 'Reference ID of NavigationListDivider',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
children: {
|
||||
table: {
|
||||
disable: true
|
||||
}
|
||||
},
|
||||
listPadding: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: [null, 'ActionList--full'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['inset', 'full-bleed']
|
||||
},
|
||||
description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
listType: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['parent', 'nested'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['parent', 'nested']
|
||||
},
|
||||
description: 'NavigationList can be a parent list with a <nav> or a nested list with just <ul>',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const NavigationListTemplate = ({showDividers, children, ariaLabel, ariaLabelledBy, listPadding, listType}) => (
|
||||
// wrap ul in <nav> if parent list
|
||||
<ConditionalWrapper condition={listType === 'parent'} wrap={children => <nav>{children}</nav>}>
|
||||
<ul
|
||||
className={clsx(
|
||||
'ActionList',
|
||||
showDividers && 'ActionList--divided',
|
||||
listType === 'nested' && 'ActionList--subGroup',
|
||||
listPadding && `${listPadding}`
|
||||
)}
|
||||
role="list"
|
||||
aria-label={ariaLabel && ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy && ariaLabelledBy}
|
||||
>
|
||||
<>{children}</>
|
||||
</ul>
|
||||
</ConditionalWrapper>
|
||||
)
|
||||
|
||||
export const Playground = NavigationListTemplate.bind({})
|
||||
Playground.args = {
|
||||
listType: 'parent',
|
||||
ariaLabel: '',
|
||||
showDividers: false,
|
||||
listPadding: 0,
|
||||
ariaLabelledBy: '',
|
||||
children: (
|
||||
<>
|
||||
<NavigationListItemTemplate text="Nav list item" />
|
||||
<NavigationListItemTemplate text="Nav list item" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,63 +0,0 @@
|
||||
import React from 'react'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {DividerTemplate} from '../../ui-patterns/ActionList/ActionListDivider.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationListDivider',
|
||||
excludeStories: ['NavigationListDividerTemplate'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-sectionDivider--filled'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
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: 'Provide label for NavigationList <ul> aria-labelledby',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const NavigationListDividerTemplate = DividerTemplate.bind({})
|
||||
|
||||
export const Playground = NavigationListDividerTemplate.bind({})
|
||||
Playground.args = {
|
||||
title: 'Section title',
|
||||
description: 'Section description'
|
||||
}
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<NavigationListTemplate>
|
||||
<Story />
|
||||
</NavigationListTemplate>
|
||||
)
|
||||
]
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {
|
||||
PatternTitle,
|
||||
PatternFilled,
|
||||
PatternWithDescription,
|
||||
PatternSeparator
|
||||
} from '../../ui-patterns/ActionList/ActionListDividerFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationListDivider/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<NavigationListTemplate>
|
||||
<Story />
|
||||
</NavigationListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const Title = ({}) => <PatternTitle {...PatternTitle.args} />
|
||||
|
||||
export const Filled = ({}) => <PatternFilled {...PatternFilled.args} />
|
||||
|
||||
export const WithDescription = ({}) => <PatternWithDescription {...PatternWithDescription.args} />
|
||||
|
||||
export const Separator = ({}) => <PatternSeparator {...PatternSeparator.args} />
|
||||
@ -1,161 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {NavigationListDividerTemplate} from './NavigationListDivider.stories'
|
||||
import {NavigationListItemTemplate} from './NavigationListItem.stories'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {NavigationListItemCollapsibleTemplate} from './NavigationListItemCollapsible.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/Examples'
|
||||
}
|
||||
|
||||
export const RepoSettings = ({}) => (
|
||||
<nav>
|
||||
<NavigationListTemplate>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="General"
|
||||
href="#content"
|
||||
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>`}
|
||||
/>
|
||||
<NavigationListDividerTemplate />
|
||||
<NavigationListDividerTemplate title="Access" id="group-id-1" />
|
||||
<NavigationListItemTemplate hasSubItem>
|
||||
<NavigationListTemplate ariaLabelledBy="group-id-1" listType="nested">
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
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>`}
|
||||
/>
|
||||
<NavigationListItemCollapsibleTemplate
|
||||
listSemantic
|
||||
text="Moderation"
|
||||
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 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>`}
|
||||
collapsePosition={1}
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
>
|
||||
<NavigationListTemplate listType="nested">
|
||||
<NavigationListItemTemplate listSemantic text="Interaction limits" href="#" subItem />
|
||||
<NavigationListItemTemplate listSemantic text="Code review limits" href="#" subItem ariaCurrent="page" />
|
||||
<NavigationListItemTemplate listSemantic text="Reported content" href="#" subItem />
|
||||
</NavigationListTemplate>
|
||||
</NavigationListItemCollapsibleTemplate>
|
||||
</NavigationListTemplate>
|
||||
</NavigationListItemTemplate>
|
||||
<NavigationListDividerTemplate />
|
||||
<NavigationListDividerTemplate title="Code and automation" id="group-id-2" />
|
||||
<NavigationListItemTemplate hasSubItem>
|
||||
<NavigationListTemplate ariaLabelledBy="group-id-2" listType="nested">
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Branches"
|
||||
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="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Actions"
|
||||
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="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 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
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>`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
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>`}
|
||||
/>
|
||||
</NavigationListTemplate>
|
||||
</NavigationListItemTemplate>
|
||||
</NavigationListTemplate>
|
||||
</nav>
|
||||
)
|
||||
|
||||
export const NavDiscussionsPane = NavigationListTemplate.bind({})
|
||||
NavDiscussionsPane.storyName = 'Discussions pane'
|
||||
NavDiscussionsPane.args = {
|
||||
...NavigationListTemplate.args,
|
||||
...NavigationListItemTemplate.args,
|
||||
ariaLabel: 'Discussion type navigation',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="All discussions"
|
||||
href="/"
|
||||
ariaCurrent={true}
|
||||
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="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>`}
|
||||
/>
|
||||
<NavigationListDividerTemplate />
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Announcements"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`🔔`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="General"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`💬`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Ideas"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`🏮`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Questions and answers"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`🌻`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Show and tell"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`👋`}
|
||||
/>
|
||||
<NavigationListItemTemplate
|
||||
listSemantic
|
||||
text="Polls"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`🍒`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavDiscussionsPane.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
@ -1,19 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
PatternShowDividers,
|
||||
PatternInsetPadding,
|
||||
PatternFullBleed,
|
||||
PatternNestedGroup
|
||||
} from '../../ui-patterns/ActionList/ActionListFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationList/Features'
|
||||
}
|
||||
|
||||
export const ShowDividers = ({}) => <PatternShowDividers {...PatternShowDividers.args} />
|
||||
|
||||
export const InsetPadding = ({}) => <PatternInsetPadding {...PatternInsetPadding.args} />
|
||||
|
||||
export const FullBleed = ({}) => <PatternFullBleed {...PatternFullBleed.args} />
|
||||
|
||||
export const NestedGroup = ({}) => <PatternNestedGroup {...PatternNestedGroup.args} />
|
||||
@ -1,167 +0,0 @@
|
||||
import React from 'react'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {ListItemTemplate} from '../../ui-patterns/ActionList/ActionListItem.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationListItem',
|
||||
excludeStories: ['NavigationListItemTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-item--danger'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'danger']
|
||||
},
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
subItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
hasSubItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
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: 'inline-radio',
|
||||
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', null],
|
||||
control: {type: 'inline-radio'},
|
||||
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: 'inline-radio',
|
||||
labels: ['block', 'inline']
|
||||
},
|
||||
description: 'block (default), inline',
|
||||
defaultValue: 'ActionList-item-blockDescription',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
fontSize: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-content--fontSmall'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'small']
|
||||
},
|
||||
description: 'Used to adjust font-size for subgroup items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const NavigationListItemTemplate = ListItemTemplate.bind({})
|
||||
|
||||
export const Playground = NavigationListItemTemplate.bind({})
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<NavigationListTemplate>
|
||||
<Story />
|
||||
</NavigationListTemplate>
|
||||
)
|
||||
]
|
||||
Playground.args = {
|
||||
truncateItem: false,
|
||||
size: 0,
|
||||
variant: 0,
|
||||
descriptionVariant: 0,
|
||||
fontSize: 0,
|
||||
ariaCurrent: null,
|
||||
leadingVisualSize: 0
|
||||
}
|
||||
@ -1,155 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import useToggle from '../../helpers/useToggle.jsx'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {ActionListItemCollapsibleTemplate} from '../../ui-patterns/ActionList/ActionListItemCollapsible.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationListItemCollapsible',
|
||||
excludeStories: ['NavigationListItemCollapsibleTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
containsSubItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
containsActiveSubItem: {
|
||||
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: 'inline-radio',
|
||||
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'
|
||||
}
|
||||
},
|
||||
description: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'description',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
descriptionVariant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-item-descriptionWrap--inline'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['block', 'inline']
|
||||
},
|
||||
description: 'block (default), inline',
|
||||
defaultValue: 'ActionList-item-blockDescription',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'id',
|
||||
description: 'Pass in ID of nested <ul> NavigationList',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaControlsId: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'id',
|
||||
description: 'Pass in ID of nested <ul> NavigationList',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
collapsePosition: {
|
||||
options: [0, 1], // iterator
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['leading', 'trailing']
|
||||
},
|
||||
description: 'Handle collapse action visual position',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const NavigationListItemCollapsibleTemplate = ActionListItemCollapsibleTemplate.bind({})
|
||||
|
||||
export const Playground = NavigationListItemCollapsibleTemplate.bind({})
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<NavigationListTemplate>
|
||||
<Story />
|
||||
</NavigationListTemplate>
|
||||
)
|
||||
]
|
||||
Playground.args = {
|
||||
truncateItem: false,
|
||||
size: 0,
|
||||
descriptionVariant: 0,
|
||||
leadingVisualSize: 0,
|
||||
collapsePosition: 0
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import React from 'react'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {
|
||||
PatternTrailingCollapsible,
|
||||
PatternTrailingCollapsibleLeadingVis,
|
||||
PatternTrailingCollapsibleLeadingTrailingVis,
|
||||
PatternTrailingCollapsibleTrailingVis,
|
||||
PatternLeadingCollapsible,
|
||||
PatternLeadingCollapsibleLeadingVis,
|
||||
PatternLeadingCollapsibleLeadingTrailingVis,
|
||||
PatternLeadingCollapsibleTrailingVis,
|
||||
PatternSizeMedium,
|
||||
PatternSizeLarge,
|
||||
PatternContainsSubItem,
|
||||
PatternContainsActiveSubItem,
|
||||
PatternTruncateText,
|
||||
PatternWrapText
|
||||
} from '../../ui-patterns/ActionList/ActionListItemCollapsibleFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationListItemCollapsible/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<NavigationListTemplate>
|
||||
<Story />
|
||||
</NavigationListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const TrailingCollapsible = ({}) => <PatternTrailingCollapsible {...PatternTrailingCollapsible.args} />
|
||||
|
||||
export const TrailingCollapsibleLeadingVis = ({}) => (
|
||||
<PatternTrailingCollapsibleLeadingVis {...PatternTrailingCollapsibleLeadingVis.args} />
|
||||
)
|
||||
|
||||
export const TrailingCollapsibleLeadingTrailingVis = ({}) => (
|
||||
<PatternTrailingCollapsibleLeadingTrailingVis {...PatternTrailingCollapsibleLeadingTrailingVis.args} />
|
||||
)
|
||||
|
||||
export const TrailingCollapsibleTrailingVis = ({}) => (
|
||||
<PatternTrailingCollapsibleTrailingVis {...PatternTrailingCollapsibleTrailingVis.args} />
|
||||
)
|
||||
|
||||
export const LeadingCollapsible = ({}) => <PatternLeadingCollapsible {...PatternLeadingCollapsible.args} />
|
||||
|
||||
export const LeadingCollapsibleLeadingVis = ({}) => (
|
||||
<PatternLeadingCollapsibleLeadingVis {...PatternLeadingCollapsibleLeadingVis.args} />
|
||||
)
|
||||
|
||||
export const LeadingCollapsibleLeadingTrailingVis = ({}) => (
|
||||
<PatternLeadingCollapsibleLeadingTrailingVis {...PatternLeadingCollapsibleLeadingTrailingVis.args} />
|
||||
)
|
||||
|
||||
export const LeadingCollapsibleTrailingVis = ({}) => (
|
||||
<PatternLeadingCollapsibleTrailingVis {...PatternLeadingCollapsibleTrailingVis.args} />
|
||||
)
|
||||
|
||||
export const SizeMedium = ({}) => <PatternSizeMedium {...PatternSizeMedium.args} />
|
||||
|
||||
export const SizeLarge = ({}) => <PatternSizeLarge {...PatternSizeLarge.args} />
|
||||
|
||||
export const ContainsSubItem = ({}) => <PatternContainsSubItem {...PatternContainsSubItem.args} />
|
||||
|
||||
export const ContainsActiveSubItem = ({}) => <PatternContainsActiveSubItem {...PatternContainsActiveSubItem.args} />
|
||||
|
||||
export const TruncateText = ({}) => <PatternTruncateText {...PatternTruncateText.args} />
|
||||
|
||||
export const WrapText = ({}) => <PatternWrapText {...PatternWrapText.args} />
|
||||
@ -1,98 +0,0 @@
|
||||
import React from 'react'
|
||||
import {NavigationListTemplate} from './NavigationList.stories'
|
||||
import {
|
||||
PatternTextOnly,
|
||||
PatternSizeMedium,
|
||||
PatternSizeMediumWithDescription,
|
||||
PatternSizeLarge,
|
||||
PatternSizeLargeWithDescription,
|
||||
PatternVisualLeading,
|
||||
PatternVisualTrailing,
|
||||
PatternVisualTrailingText,
|
||||
PatternVisualLeadingAndTrailing,
|
||||
PatternDescriptionBlock,
|
||||
PatternDescriptionBlockWithLeadingVisual,
|
||||
PatternDescriptionBlockWithTrailingVisual,
|
||||
PatternDescriptionBlockWithLeadingAndTrailingVisual,
|
||||
PatternDescriptionInline,
|
||||
PatternDescriptionInlineWithLeadingVisual,
|
||||
PatternDescriptionInlineWithTrailingVisual,
|
||||
PatternDescriptionInlineWithLeadingAndTrailingVisual,
|
||||
PatternNavActiveAnchor,
|
||||
PatternNavActivePage,
|
||||
PatternTruncateText,
|
||||
PatternWrapText
|
||||
} from '../../ui-patterns/ActionList/ActionListItemFeatures.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/NavigationList/NavigationListItem/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<NavigationListTemplate>
|
||||
<Story />
|
||||
</NavigationListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const TextOnly = ({}) => <PatternTextOnly {...PatternTextOnly.args} />
|
||||
|
||||
export const SizeMedium = ({}) => <PatternSizeMedium {...PatternSizeMedium.args} />
|
||||
|
||||
export const SizeMediumWithDescription = ({}) => (
|
||||
<PatternSizeMediumWithDescription {...PatternSizeMediumWithDescription.args} />
|
||||
)
|
||||
|
||||
export const SizeLarge = ({}) => <PatternSizeLarge {...PatternSizeLarge.args} />
|
||||
|
||||
export const SizeLargeWithDescription = ({}) => (
|
||||
<PatternSizeLargeWithDescription {...PatternSizeLargeWithDescription.args} />
|
||||
)
|
||||
|
||||
export const VisualLeading = ({}) => <PatternVisualLeading {...PatternVisualLeading.args} />
|
||||
|
||||
export const VisualTrailing = ({}) => <PatternVisualTrailing {...PatternVisualTrailing.args} />
|
||||
|
||||
export const VisualTrailingText = ({}) => <PatternVisualTrailingText {...PatternVisualTrailingText.args} />
|
||||
|
||||
export const VisualLeadingAndTrailing = ({}) => (
|
||||
<PatternVisualLeadingAndTrailing {...PatternVisualLeadingAndTrailing.args} />
|
||||
)
|
||||
|
||||
export const DescriptionBlock = ({}) => <PatternDescriptionBlock {...PatternDescriptionBlock.args} />
|
||||
|
||||
export const DescriptionBlockWithLeadingVisual = ({}) => (
|
||||
<PatternDescriptionBlockWithLeadingVisual {...PatternDescriptionBlockWithLeadingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionBlockWithTrailingVisual = ({}) => (
|
||||
<PatternDescriptionBlockWithTrailingVisual {...PatternDescriptionBlockWithTrailingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionBlockWithLeadingAndTrailingVisual = ({}) => (
|
||||
<PatternDescriptionBlockWithLeadingAndTrailingVisual {...PatternDescriptionBlockWithLeadingAndTrailingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionInline = ({}) => <PatternDescriptionInline {...PatternDescriptionInline.args} />
|
||||
|
||||
export const DescriptionInlineWithLeadingVisual = ({}) => (
|
||||
<PatternDescriptionInlineWithLeadingVisual {...PatternDescriptionInlineWithLeadingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionInlineWithTrailingVisual = ({}) => (
|
||||
<PatternDescriptionInlineWithTrailingVisual {...PatternDescriptionInlineWithTrailingVisual.args} />
|
||||
)
|
||||
|
||||
export const DescriptionInlineWithLeadingAndTrailingVisual = ({}) => (
|
||||
<PatternDescriptionInlineWithLeadingAndTrailingVisual
|
||||
{...PatternDescriptionInlineWithLeadingAndTrailingVisual.args}
|
||||
/>
|
||||
)
|
||||
|
||||
export const NavActiveAnchor = ({}) => <PatternNavActiveAnchor {...PatternNavActiveAnchor.args} />
|
||||
|
||||
export const NavActivePage = ({}) => <PatternNavActivePage {...PatternNavActivePage.args} />
|
||||
|
||||
export const TruncateText = ({}) => <PatternTruncateText {...PatternTruncateText.args} />
|
||||
|
||||
export const WrapText = ({}) => <PatternWrapText {...PatternWrapText.args} />
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ActionListTreeViewTemplate} from '../../ui-patterns/ActionList/ActionListTree.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/TreeView/TreeView',
|
||||
excludeStories: ['TreeViewTemplate'],
|
||||
layout: 'padded',
|
||||
argTypes: {
|
||||
showGroupIcon: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'show subgroup leading icon',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
showSubItemIcon: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'show subgroup item leading icon',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'title',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const TreeViewTemplate = ActionListTreeViewTemplate.bind({})
|
||||
|
||||
export const Playground = TreeViewTemplate.bind({})
|
||||
Playground.args = {
|
||||
showSubItemIcon: true,
|
||||
showGroupIcon: true,
|
||||
text: 'item'
|
||||
}
|
||||
@ -1,111 +0,0 @@
|
||||
import {Meta, Story, Canvas} from '@storybook/addon-docs'
|
||||
|
||||
<Meta title="UI Patterns/ActionList/API" />
|
||||
|
||||
### Action list
|
||||
|
||||
`ActionList` CSS is primarily used as the building blocks for compositional components, such as NavigationList. Below is an overview of how the markup may look for specific kinds of implementations and contexts.
|
||||
|
||||
An action list is a vertical list of interactive <strong>actions</strong> or <strong>options</strong>.
|
||||
|
||||
| Term | Context |
|
||||
| :------ | :------------------------------------ |
|
||||
| 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><button>Content with action</button></li>
|
||||
<li><a href="/">Content as link</a></li>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Nested list</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menu-button/menu-button-links.html)
|
||||
|
||||
The `menu` role should be reserved for menu scenarios
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :------------------------------ |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitem"` |
|
||||
| `li` | has child link `role="none"` |
|
||||
| `a` | `role="menuitem"` |
|
||||
|
||||
### Navigational list of links
|
||||
|
||||
[Navigation spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html)
|
||||
|
||||
Wrap `ActionList` in a `nav` element for site or page navigation, like a sidebar
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :------------ |
|
||||
| `ul` | `role="list"` |
|
||||
| `li` | no role |
|
||||
| `li` | no role |
|
||||
| `a` | no role |
|
||||
|
||||
### Multi select menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :-------------------------- |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | `role="menuitemcheckbox"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
### Single select menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :-------------------------- |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | `role="menuitemradio"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
### Multi select listbox
|
||||
|
||||
[Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :---------------------------- |
|
||||
| `ul` | `role="listbox"` |
|
||||
| `ul` | `aria-multiselectable="true"` |
|
||||
| `li` | `role="option"` |
|
||||
| `li` | `aria-selected="true/false"` |
|
||||
|
||||
### Single select listbox
|
||||
|
||||
[Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
|
||||
|
||||
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"` |
|
||||
|
||||
### Dividers
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :-------------------------------------- |
|
||||
| `li` | `role="separator"` `aria-hidden="true"` |
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :--- |
|
||||
| `h3` | id |
|
||||
@ -1,136 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionList',
|
||||
excludeStories: ['ListTemplate'],
|
||||
argTypes: {
|
||||
showDividers: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'Show dividers between items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
role: {
|
||||
options: [null, 'menu', 'group', 'listbox', 'menubar', 'none', 'radiogroup', 'list'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Semantic list role',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: [null, 'ActionList--tree'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'tree-view']
|
||||
},
|
||||
description: 'Specifies variants for different types of lists',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
ariaLabel: {
|
||||
name: 'ariaLabel',
|
||||
type: 'string',
|
||||
description: 'Descriptive label for menu contents',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLabelledBy: {
|
||||
name: 'ariaLabelledBy',
|
||||
type: 'string',
|
||||
description: 'Reference ID of NavigationListDivider',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
listboxMultiSelect: {
|
||||
name: 'listboxMultiSelect',
|
||||
type: 'boolean',
|
||||
description: 'If ActionList has listbox role + multiselect children',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
listPadding: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: [null, 'ActionList--full'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['inset', 'full-bleed']
|
||||
},
|
||||
description: 'ActionList includes 8px padding by default, full-bleed removes all padding',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
listType: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['parent', 'nested'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['parent', 'nested']
|
||||
},
|
||||
description: 'NavigationList can be a parent list with a <nav> or a nested list with just <ul>',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
children: {
|
||||
table: {
|
||||
disable: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ListTemplate = ({
|
||||
showDividers,
|
||||
children,
|
||||
role,
|
||||
ariaLabel,
|
||||
ariaLabelledBy,
|
||||
listboxMultiSelect,
|
||||
listPadding,
|
||||
variant,
|
||||
listType
|
||||
}) => (
|
||||
<ul
|
||||
className={clsx(
|
||||
'ActionList',
|
||||
showDividers && 'ActionList--divided',
|
||||
listType === 'nested' && 'ActionList--subGroup',
|
||||
listPadding && `${listPadding}`,
|
||||
variant && `${variant}`
|
||||
)}
|
||||
role={role}
|
||||
aria-label={ariaLabel && ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy && ariaLabelledBy}
|
||||
aria-multiselectable={listboxMultiSelect ? 'true' : undefined}
|
||||
>
|
||||
<>{children}</>
|
||||
</ul>
|
||||
)
|
||||
|
||||
export const Playground = ListTemplate.bind({})
|
||||
Playground.args = {
|
||||
listType: 'parent',
|
||||
showDividers: false,
|
||||
listboxMultiSelect: false,
|
||||
listPadding: 0,
|
||||
variant: 0,
|
||||
role: 'list',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Action list item" />
|
||||
<ListItemTemplate text="Action list item" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionListDivider',
|
||||
excludeStories: ['DividerTemplate'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-sectionDivider--filled'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
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: 'Provide label for NavigationList <ul> 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 ? undefined : 'separator'}
|
||||
aria-hidden={title ? undefined : true}
|
||||
>
|
||||
{title && (
|
||||
<h3 className="ActionList-sectionDivider-title" id={id}>
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
{description && <span className="ActionList-item-description">{description}</span>}
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
|
||||
export const Playground = DividerTemplate.bind({})
|
||||
Playground.args = {
|
||||
title: 'Section title',
|
||||
description: 'Section description',
|
||||
variant: 'subtle'
|
||||
}
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {DividerTemplate} from './ActionListDivider.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionListDivider/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const PatternTitle = DividerTemplate.bind({})
|
||||
PatternTitle.storyName = 'Title'
|
||||
PatternTitle.args = {
|
||||
title: 'List group title'
|
||||
}
|
||||
|
||||
export const PatternFilled = DividerTemplate.bind({})
|
||||
PatternFilled.storyName = 'Filled'
|
||||
PatternFilled.args = {
|
||||
variant: 'ActionList-sectionDivider--filled'
|
||||
}
|
||||
|
||||
export const PatternWithDescription = DividerTemplate.bind({})
|
||||
PatternWithDescription.storyName = 'With description'
|
||||
PatternWithDescription.args = {
|
||||
title: 'List group title',
|
||||
description: 'Group description'
|
||||
}
|
||||
|
||||
export const PatternSeparator = DividerTemplate.bind({})
|
||||
PatternSeparator.storyName = 'Separator'
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionList/Features'
|
||||
}
|
||||
|
||||
export const PatternShowDividers = ListTemplate.bind({})
|
||||
PatternShowDividers.storyName = 'Show dividers'
|
||||
PatternShowDividers.args = {
|
||||
showDividers: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const PatternInsetPadding = ListTemplate.bind({})
|
||||
PatternInsetPadding.storyName = 'Inset padding'
|
||||
PatternInsetPadding.args = {
|
||||
listPadding: null,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const PatternFullBleed = ListTemplate.bind({})
|
||||
PatternFullBleed.storyName = 'Full bleed'
|
||||
PatternFullBleed.args = {
|
||||
listPadding: 'ActionList--full',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const PatternNestedGroup = ListTemplate.bind({})
|
||||
PatternNestedGroup.storyName = 'Nested group'
|
||||
PatternNestedGroup.args = {
|
||||
listType: 'nested',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,478 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import useToggle from '../../helpers/useToggle.jsx'
|
||||
import {ListTemplate} from './ActionList.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionListItem',
|
||||
excludeStories: ['ListItemTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-item--danger'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'danger']
|
||||
},
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
subItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
hasSubItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
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: 'inline-radio',
|
||||
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: 'inline-radio'},
|
||||
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: 'inline-radio',
|
||||
labels: ['block', 'inline']
|
||||
},
|
||||
description: 'block (default), inline',
|
||||
defaultValue: 'ActionList-item-blockDescription',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
},
|
||||
treeitem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
treeItemSingleton: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
ariaDisabled: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
ariaLevel: {
|
||||
name: 'ariaLevel',
|
||||
type: 'string',
|
||||
description: 'number - nested subgroup',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaSetSize: {
|
||||
name: 'ariaSetSize',
|
||||
type: 'string',
|
||||
description:
|
||||
'Defines the number of treeitem elements in the set of treeitem elements that are in the same branch and at the same level within the hierarchy',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaPosInset: {
|
||||
name: 'ariaPosInset',
|
||||
type: 'string',
|
||||
description:
|
||||
'Defines the position of the element within the set of other treeitem elements that are in the same branch and at the same level within the hierarchy.',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
fontSize: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-content--fontSmall'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'small']
|
||||
},
|
||||
description: 'Used to adjust font-size for subgroup items',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ListItemTemplate = ({
|
||||
text,
|
||||
size,
|
||||
leadingVisual,
|
||||
leadingVisualSize,
|
||||
trailingVisual,
|
||||
description,
|
||||
descriptionVariant,
|
||||
variant,
|
||||
href,
|
||||
ariaCurrent,
|
||||
children,
|
||||
subItem,
|
||||
hasSubItem,
|
||||
trailingAction,
|
||||
leadingAction,
|
||||
singleSelect,
|
||||
multiSelect,
|
||||
listSingleSelect,
|
||||
listMultiSelect,
|
||||
listSemantic,
|
||||
ariaDisabled,
|
||||
truncateItem,
|
||||
ariaLevel,
|
||||
fontSize,
|
||||
treeitem,
|
||||
ariaSetSize,
|
||||
ariaPosInset,
|
||||
menuItem,
|
||||
treeItemSingleton
|
||||
}) => {
|
||||
const [isChecked, itemIsChecked] = useToggle()
|
||||
const itemStyle = {
|
||||
'--ActionList-tree-depth': `${ariaLevel}`
|
||||
}
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
'ActionList-item',
|
||||
ariaCurrent && 'ActionList-item--navActive',
|
||||
subItem && `ActionList-item--subItem`,
|
||||
hasSubItem && `ActionList-item--hasSubItem`,
|
||||
variant && `${variant}`,
|
||||
treeitem && treeItemSingleton && `ActionList-item--singleton`
|
||||
)}
|
||||
aria-level={ariaLevel ? `${ariaLevel}` : undefined}
|
||||
aria-setsize={ariaSetSize ? `${ariaSetSize}` : undefined}
|
||||
aria-posinset={ariaPosInset ? `${ariaPosInset}` : undefined}
|
||||
style={ariaLevel && itemStyle}
|
||||
onClick={itemIsChecked}
|
||||
role={
|
||||
singleSelect
|
||||
? 'menuitemradio'
|
||||
: multiSelect
|
||||
? 'menuitemcheckbox'
|
||||
: listSingleSelect || listMultiSelect
|
||||
? 'option'
|
||||
: listSemantic
|
||||
? 'listitem'
|
||||
: href
|
||||
? 'none'
|
||||
: treeitem
|
||||
? 'treeitem'
|
||||
: menuItem
|
||||
? 'menuitem'
|
||||
: undefined
|
||||
}
|
||||
aria-checked={singleSelect || multiSelect ? (isChecked ? 'true' : 'false') : undefined}
|
||||
aria-selected={listSingleSelect || listMultiSelect ? (isChecked ? 'true' : 'false') : undefined}
|
||||
aria-disabled={ariaDisabled ? 'true' : undefined}
|
||||
>
|
||||
{href ? (
|
||||
<>
|
||||
<a
|
||||
href={href}
|
||||
role={href && !listSemantic && !treeitem ? 'menuitem' : undefined}
|
||||
aria-current={ariaCurrent}
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
size && `${size}`,
|
||||
fontSize && `${fontSize}`,
|
||||
(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={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && (
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
{trailingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--trailing"
|
||||
dangerouslySetInnerHTML={{__html: trailingVisual}}
|
||||
/>
|
||||
)}
|
||||
{trailingAction && (
|
||||
<span className="ActionList-item-action ActionList-item-action--trailing">{trailingAction}</span>
|
||||
)}
|
||||
</a>
|
||||
{children}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{text && (
|
||||
<span
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
size && `${size}`,
|
||||
fontSize && `${fontSize}`,
|
||||
(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={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && (
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{trailingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--trailing"
|
||||
dangerouslySetInnerHTML={{__html: trailingVisual}}
|
||||
/>
|
||||
)}
|
||||
{trailingAction && (
|
||||
<span className="ActionList-item-action ActionList-item-action--trailing">{trailingAction}</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{children}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground = ListItemTemplate.bind({})
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
Playground.args = {
|
||||
truncateItem: false,
|
||||
treeItemSingleton: false
|
||||
}
|
||||
@ -1,261 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import useToggle from '../../helpers/useToggle.jsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionListItemCollapsible',
|
||||
excludeStories: ['ActionListItemCollapsibleTemplate'],
|
||||
argTypes: {
|
||||
size: {
|
||||
options: [0, 1, 2], // iterator
|
||||
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['default', 'medium', 'large']
|
||||
},
|
||||
description: 'small (default), medium, large',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
containsSubItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
containsActiveSubItem: {
|
||||
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: 'inline-radio',
|
||||
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'
|
||||
}
|
||||
},
|
||||
description: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'description',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
descriptionVariant: {
|
||||
options: [0, 1], // iterator
|
||||
mapping: ['', 'ActionList-item-descriptionWrap--inline'], // values
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['block', 'inline']
|
||||
},
|
||||
description: 'block (default), inline',
|
||||
defaultValue: 'ActionList-item-blockDescription',
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
},
|
||||
id: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'id',
|
||||
description: 'Pass in ID of nested <ul> NavigationList',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaControlsId: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'id',
|
||||
description: 'Pass in ID of nested <ul> NavigationList',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
collapsePosition: {
|
||||
options: [0, 1], // iterator
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
labels: ['leading', 'trailing']
|
||||
},
|
||||
description: 'Handle collapse action visual position',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
ariaLevel: {
|
||||
name: 'ariaLevel',
|
||||
type: 'string',
|
||||
description: 'number - nested subgroup',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ActionListItemCollapsibleTemplate = ({
|
||||
text,
|
||||
size,
|
||||
leadingVisual,
|
||||
leadingVisualSize,
|
||||
trailingVisual,
|
||||
description,
|
||||
descriptionVariant,
|
||||
children,
|
||||
containsSubItem,
|
||||
id,
|
||||
containsActiveSubItem,
|
||||
truncateItem,
|
||||
collapsePosition,
|
||||
ariaControlsId,
|
||||
ariaLevel
|
||||
}) => {
|
||||
const [isCollapsed, itemIsCollapsed] = useToggle()
|
||||
const itemStyle = {
|
||||
'--ActionList-tree-depth': `${ariaLevel}`
|
||||
}
|
||||
return (
|
||||
<li
|
||||
className={clsx('ActionList-item', containsSubItem && `ActionList-item--hasSubItem`)}
|
||||
style={ariaLevel && itemStyle}
|
||||
aria-level={ariaLevel ? `${ariaLevel}` : undefined}
|
||||
role={ariaLevel ? 'treeitem' : undefined}
|
||||
>
|
||||
<button
|
||||
onClick={itemIsCollapsed}
|
||||
aria-expanded={isCollapsed ? 'false' : 'true'}
|
||||
aria-controls={ariaControlsId}
|
||||
id={id}
|
||||
className={clsx(
|
||||
'ActionList-content',
|
||||
size && `${size}`,
|
||||
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
|
||||
leadingVisual && leadingVisualSize && `${leadingVisualSize}`,
|
||||
containsActiveSubItem && `ActionList-content--hasActiveSubItem`
|
||||
)}
|
||||
>
|
||||
{collapsePosition === 0 && (
|
||||
<span className="ActionList-item-action ActionList-item-action--leading">
|
||||
<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>
|
||||
</span>
|
||||
)}
|
||||
{leadingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--leading"
|
||||
dangerouslySetInnerHTML={{__html: leadingVisual}}
|
||||
/>
|
||||
)}
|
||||
{description && (
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && (
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
{trailingVisual && (
|
||||
<span
|
||||
className="ActionList-item-visual ActionList-item-visual--trailing"
|
||||
dangerouslySetInnerHTML={{__html: trailingVisual}}
|
||||
/>
|
||||
)}
|
||||
{collapsePosition === 1 && (
|
||||
<span className="ActionList-item-action ActionList-item-action--trailing">
|
||||
<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>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{children}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground = ActionListItemCollapsibleTemplate.bind({})
|
||||
Playground.decorators = [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
Playground.args = {
|
||||
id: null,
|
||||
truncateItem: false
|
||||
}
|
||||
@ -1,158 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ActionListItemCollapsibleTemplate} from './ActionListItemCollapsible.stories'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionListItemCollapsible/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
const 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>`
|
||||
|
||||
const 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 PatternTrailingCollapsible = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternTrailingCollapsible.storyName = '[Trailing] Text only'
|
||||
PatternTrailingCollapsible.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 1
|
||||
}
|
||||
|
||||
export const PatternTrailingCollapsibleLeadingVis = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternTrailingCollapsibleLeadingVis.storyName = '[Trailing] Leading visual'
|
||||
PatternTrailingCollapsibleLeadingVis.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 1,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternTrailingCollapsibleLeadingTrailingVis = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternTrailingCollapsibleLeadingTrailingVis.storyName = '[Trailing] Leading + trailing visual'
|
||||
PatternTrailingCollapsibleLeadingTrailingVis.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 1,
|
||||
leadingVisual: leadingVisual,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternTrailingCollapsibleTrailingVis = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternTrailingCollapsibleTrailingVis.storyName = '[Trailing] Trailing visual'
|
||||
PatternTrailingCollapsibleTrailingVis.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 1,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternLeadingCollapsible = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternLeadingCollapsible.storyName = '[Leading] Text only'
|
||||
PatternLeadingCollapsible.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 0
|
||||
}
|
||||
|
||||
export const PatternLeadingCollapsibleLeadingVis = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternLeadingCollapsibleLeadingVis.storyName = '[Leading] Leading visual'
|
||||
PatternLeadingCollapsibleLeadingVis.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 0,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternLeadingCollapsibleLeadingTrailingVis = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternLeadingCollapsibleLeadingTrailingVis.storyName = '[Leading] Leading + trailing visual'
|
||||
PatternLeadingCollapsibleLeadingTrailingVis.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 0,
|
||||
leadingVisual: leadingVisual,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternLeadingCollapsibleTrailingVis = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternLeadingCollapsibleTrailingVis.storyName = '[Leading] Trailing visual'
|
||||
PatternLeadingCollapsibleTrailingVis.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Collapsible',
|
||||
collapsePosition: 0,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternSizeMedium = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternSizeMedium.storyName = '[Size] Medium'
|
||||
PatternSizeMedium.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Medium item',
|
||||
size: 'ActionList-content--sizeMedium',
|
||||
collapsePosition: 1
|
||||
}
|
||||
|
||||
export const PatternSizeLarge = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternSizeLarge.storyName = '[Size] Large'
|
||||
PatternSizeLarge.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'Large item',
|
||||
size: 'ActionList-content--sizeLarge',
|
||||
collapsePosition: 1
|
||||
}
|
||||
|
||||
export const PatternContainsSubItem = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternContainsSubItem.storyName = 'Has sub item (render css class)'
|
||||
PatternContainsSubItem.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'I am collapsible',
|
||||
collapsePosition: 1,
|
||||
containsSubItem: true
|
||||
}
|
||||
|
||||
export const PatternContainsActiveSubItem = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternContainsActiveSubItem.storyName = 'Has active sub item'
|
||||
PatternContainsActiveSubItem.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'I have an active child',
|
||||
collapsePosition: 1,
|
||||
containsActiveSubItem: true
|
||||
}
|
||||
|
||||
export const PatternTruncateText = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternTruncateText.storyName = 'Truncate text'
|
||||
PatternTruncateText.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
truncateItem: true,
|
||||
text: 'This is a very long string of text that will wrap to another line on smaller screens',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual,
|
||||
collapsePosition: 1
|
||||
}
|
||||
|
||||
export const PatternWrapText = ActionListItemCollapsibleTemplate.bind({})
|
||||
PatternWrapText.storyName = 'Wrap text'
|
||||
PatternWrapText.args = {
|
||||
...ActionListItemCollapsibleTemplate.args,
|
||||
text: 'This is a very long string of text that will wrap to another line on smaller screens',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual,
|
||||
collapsePosition: 1
|
||||
}
|
||||
@ -1,356 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionListItem/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<ListTemplate>
|
||||
<Story />
|
||||
</ListTemplate>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
const 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>`
|
||||
|
||||
const 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 PatternTextOnly = ListItemTemplate.bind({})
|
||||
PatternTextOnly.storyName = 'Text only'
|
||||
PatternTextOnly.args = {
|
||||
text: 'Basic item label'
|
||||
}
|
||||
|
||||
export const PatternSizeMedium = ListItemTemplate.bind({})
|
||||
PatternSizeMedium.storyName = '[Size] Medium'
|
||||
PatternSizeMedium.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Medium item',
|
||||
size: 'ActionList-content--sizeMedium'
|
||||
}
|
||||
|
||||
export const PatternSizeMediumWithDescription = ListItemTemplate.bind({})
|
||||
PatternSizeMediumWithDescription.storyName = '[Size] Medium with description'
|
||||
PatternSizeMediumWithDescription.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Medium item',
|
||||
description: 'Some descriptive text',
|
||||
size: 'ActionList-content--sizeMedium'
|
||||
}
|
||||
|
||||
export const PatternSizeLarge = ListItemTemplate.bind({})
|
||||
PatternSizeLarge.storyName = '[Size] Large'
|
||||
PatternSizeLarge.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Large item',
|
||||
size: 'ActionList-content--sizeLarge'
|
||||
}
|
||||
|
||||
export const PatternSizeLargeWithDescription = ListItemTemplate.bind({})
|
||||
PatternSizeLargeWithDescription.storyName = '[Size] Large with description'
|
||||
PatternSizeLargeWithDescription.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Large item',
|
||||
description: 'Some descriptive text',
|
||||
size: 'ActionList-content--sizeLarge'
|
||||
}
|
||||
|
||||
export const PatternVisualLeading = ListItemTemplate.bind({})
|
||||
PatternVisualLeading.storyName = '[Visuals] Leading'
|
||||
PatternVisualLeading.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with leading visual',
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternVisualTrailing = ListItemTemplate.bind({})
|
||||
PatternVisualTrailing.storyName = '[Visuals] Trailing'
|
||||
PatternVisualTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with trailing visual',
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternVisualTrailingText = ListItemTemplate.bind({})
|
||||
PatternVisualTrailingText.storyName = '[Visuals] Trailing text'
|
||||
PatternVisualTrailingText.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with trailing text',
|
||||
trailingVisual: `⌘N`
|
||||
}
|
||||
|
||||
export const PatternVisualLeadingAndTrailing = ListItemTemplate.bind({})
|
||||
PatternVisualLeadingAndTrailing.storyName = '[Visuals] Leading & trailing'
|
||||
PatternVisualLeadingAndTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item with trailing visual',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternDescriptionBlock = ListItemTemplate.bind({})
|
||||
PatternDescriptionBlock.storyName = '[Description] block'
|
||||
PatternDescriptionBlock.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription'
|
||||
}
|
||||
|
||||
export const PatternDescriptionBlockWithLeadingVisual = ListItemTemplate.bind({})
|
||||
PatternDescriptionBlockWithLeadingVisual.storyName = '[Description] block + leading visual'
|
||||
PatternDescriptionBlockWithLeadingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription',
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternDescriptionBlockWithTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternDescriptionBlockWithTrailingVisual.storyName = '[Description] block + trailing visual'
|
||||
PatternDescriptionBlockWithTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription',
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternDescriptionBlockWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternDescriptionBlockWithLeadingAndTrailingVisual.storyName = '[Description] block + leading/trailing visual'
|
||||
PatternDescriptionBlockWithLeadingAndTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-blockDescription',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternDescriptionInline = ListItemTemplate.bind({})
|
||||
PatternDescriptionInline.storyName = '[Description] inline'
|
||||
PatternDescriptionInline.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline'
|
||||
}
|
||||
|
||||
export const PatternDescriptionInlineWithLeadingVisual = ListItemTemplate.bind({})
|
||||
PatternDescriptionInlineWithLeadingVisual.storyName = '[Description] inline + leading visual'
|
||||
PatternDescriptionInlineWithLeadingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline',
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternDescriptionInlineWithTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternDescriptionInlineWithTrailingVisual.storyName = '[Description] inline + trailing visual'
|
||||
PatternDescriptionInlineWithTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline',
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternDescriptionInlineWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternDescriptionInlineWithLeadingAndTrailingVisual.storyName = '[Description] inline + leading/trailing visual'
|
||||
PatternDescriptionInlineWithLeadingAndTrailingVisual.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Item label',
|
||||
description: 'This is a description',
|
||||
descriptionVariant: 'ActionList-item-descriptionWrap--inline',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternNavActiveAnchor = ListItemTemplate.bind({})
|
||||
PatternNavActiveAnchor.storyName = '[Nav] Active anchor'
|
||||
PatternNavActiveAnchor.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Im an anchor link',
|
||||
href: '#someid',
|
||||
ariaCurrent: 'location',
|
||||
activeNavItem: true
|
||||
}
|
||||
|
||||
export const PatternNavActivePage = ListItemTemplate.bind({})
|
||||
PatternNavActivePage.storyName = '[Nav] Active page'
|
||||
PatternNavActivePage.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Im a page level link',
|
||||
href: '/',
|
||||
ariaCurrent: 'page',
|
||||
activeNavItem: true
|
||||
}
|
||||
|
||||
export const PatternVariantDangerItem = ListItemTemplate.bind({})
|
||||
PatternVariantDangerItem.storyName = '[Variant] Danger'
|
||||
PatternVariantDangerItem.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger'
|
||||
}
|
||||
|
||||
export const PatternVariantDangerItemLeading = ListItemTemplate.bind({})
|
||||
PatternVariantDangerItemLeading.storyName = '[Variant] Danger + leading visual'
|
||||
PatternVariantDangerItemLeading.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger',
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternVariantDangerItemTrailing = ListItemTemplate.bind({})
|
||||
PatternVariantDangerItemTrailing.storyName = '[Variant] Danger + trailing visual'
|
||||
PatternVariantDangerItemTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger',
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternVariantDangerItemLeadingTrailing = ListItemTemplate.bind({})
|
||||
PatternVariantDangerItemLeadingTrailing.storyName = '[Variant] Danger + leading/trailing visual'
|
||||
PatternVariantDangerItemLeadingTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Danger danger',
|
||||
variant: 'ActionList-item--danger',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternVariantDisabledItem = ListItemTemplate.bind({})
|
||||
PatternVariantDisabledItem.storyName = '[Variant] Disabled'
|
||||
PatternVariantDisabledItem.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true
|
||||
}
|
||||
|
||||
export const PatternVariantDisabledItemLeading = ListItemTemplate.bind({})
|
||||
PatternVariantDisabledItemLeading.storyName = '[Variant] Disabled + leading visual'
|
||||
PatternVariantDisabledItemLeading.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternVariantDisabledItemTrailing = ListItemTemplate.bind({})
|
||||
PatternVariantDisabledItemTrailing.storyName = '[Variant] Disabled + trailing visual'
|
||||
PatternVariantDisabledItemTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternVariantDisabledItemLeadingTrailing = ListItemTemplate.bind({})
|
||||
PatternVariantDisabledItemLeadingTrailing.storyName = '[Variant] Disabled + leading/trailing visual'
|
||||
PatternVariantDisabledItemLeadingTrailing.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'Disabled',
|
||||
ariaDisabled: true,
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternSingleSelectItem = ListItemTemplate.bind({})
|
||||
PatternSingleSelectItem.storyName = '[Actions] Single select'
|
||||
PatternSingleSelectItem.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true
|
||||
}
|
||||
|
||||
export const PatternSingleSelectItemWithLeadingVisual = ListItemTemplate.bind({})
|
||||
PatternSingleSelectItemWithLeadingVisual.storyName = '[Actions] Single select + leading visual'
|
||||
PatternSingleSelectItemWithLeadingVisual.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternSingleSelectItemWithTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternSingleSelectItemWithTrailingVisual.storyName = '[Actions] Single select + trailing visual'
|
||||
PatternSingleSelectItemWithTrailingVisual.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternSingleSelectItemWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternSingleSelectItemWithLeadingAndTrailingVisual.storyName = '[Actions] Single select + leading/trailing visual'
|
||||
PatternSingleSelectItemWithLeadingAndTrailingVisual.args = {
|
||||
text: 'Single select item',
|
||||
singleSelect: true,
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternMultiSelectItem = ListItemTemplate.bind({})
|
||||
PatternMultiSelectItem.storyName = '[Actions] Multi select'
|
||||
PatternMultiSelectItem.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true
|
||||
}
|
||||
|
||||
export const PatternMultiSelectItemWithLeadingVisual = ListItemTemplate.bind({})
|
||||
PatternMultiSelectItemWithLeadingVisual.storyName = '[Actions] Multi select + leading visual'
|
||||
PatternMultiSelectItemWithLeadingVisual.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternMultiSelectItemWithTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternMultiSelectItemWithTrailingVisual.storyName = '[Actions] Multi select + trailing visual'
|
||||
PatternMultiSelectItemWithTrailingVisual.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true,
|
||||
trailingVisual: trailingVisual
|
||||
}
|
||||
|
||||
export const PatternMultiSelectItemWithLeadingAndTrailingVisual = ListItemTemplate.bind({})
|
||||
PatternMultiSelectItemWithLeadingAndTrailingVisual.storyName = '[Actions] Multi select + leading/trailing visual'
|
||||
PatternMultiSelectItemWithLeadingAndTrailingVisual.args = {
|
||||
text: 'Multi select item',
|
||||
multiSelect: true,
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternTruncateText = ListItemTemplate.bind({})
|
||||
PatternTruncateText.storyName = 'Truncate text'
|
||||
PatternTruncateText.args = {
|
||||
...ListItemTemplate.args,
|
||||
truncateItem: true,
|
||||
text: 'This is a very long string of text that will wrap to another line on smaller screens',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
|
||||
export const PatternWrapText = ListItemTemplate.bind({})
|
||||
PatternWrapText.storyName = 'Wrap text'
|
||||
PatternWrapText.args = {
|
||||
...ListItemTemplate.args,
|
||||
text: 'This is a very long string of text that will wrap to another line on smaller screens',
|
||||
trailingVisual: trailingVisual,
|
||||
leadingVisual: leadingVisual
|
||||
}
|
||||
@ -1,160 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {ActionListItemCollapsibleTemplate} from '../../ui-patterns/ActionList/ActionListItemCollapsible.stories.jsx'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionTreeView',
|
||||
excludeStories: ['ActionListTreeViewTemplate'],
|
||||
layout: 'padded',
|
||||
argTypes: {
|
||||
showGroupIcon: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'show subgroup leading icon',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
showSubItemIcon: {
|
||||
control: {type: 'boolean'},
|
||||
description: 'show subgroup item leading icon',
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'title',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const folder = `<svg aria-hidden="true" role="img" class="octicon octicon-file-directory-fill" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M2 4.75C2 3.784 2.784 3 3.75 3h4.971c.58 0 1.12.286 1.447.765l1.404 2.063a.25.25 0 00.207.11h8.471c.966 0 1.75.783 1.75 1.75V19.25A1.75 1.75 0 0120.25 21H3.75A1.75 1.75 0 012 19.25V4.75z"></path></svg>`
|
||||
|
||||
const file = `<svg aria-hidden="true" role="img" class="octicon octicon-file" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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>`
|
||||
|
||||
const trailingVisual = `<svg aria-hidden="true" role="img" class="color-fg-attention" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z"></path></svg>`
|
||||
|
||||
export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text, truncateItem}) => (
|
||||
<ListTemplate ariaLabel="Some description" role="tree" variant="ActionList--tree">
|
||||
<>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="1"
|
||||
treeitem
|
||||
text={text}
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
treeItemSingleton
|
||||
/>
|
||||
<ActionListItemCollapsibleTemplate
|
||||
text="level 1"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="1"
|
||||
collapsePosition={0}
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
>
|
||||
<ListTemplate listType="nested">
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="2"
|
||||
treeitem
|
||||
subItem
|
||||
text={text}
|
||||
ariaCurrent="page"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ActionListItemCollapsibleTemplate
|
||||
text="level 2"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="2"
|
||||
collapsePosition={0}
|
||||
containsSubItem
|
||||
>
|
||||
<ListTemplate listType="nested">
|
||||
<ActionListItemCollapsibleTemplate
|
||||
text="level 3"
|
||||
ariaLevel="3"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
truncateItem={truncateItem}
|
||||
collapsePosition={0}
|
||||
containsSubItem
|
||||
>
|
||||
<ListTemplate listType="nested">
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="4"
|
||||
treeitem
|
||||
subItem
|
||||
text={text}
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="4"
|
||||
treeitem
|
||||
subItem
|
||||
text={text}
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="4"
|
||||
treeitem
|
||||
subItem
|
||||
text={text}
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</ListTemplate>
|
||||
</ActionListItemCollapsibleTemplate>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="3"
|
||||
treeitem
|
||||
subItem
|
||||
text={text}
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</ListTemplate>
|
||||
</ActionListItemCollapsibleTemplate>
|
||||
</ListTemplate>
|
||||
</ActionListItemCollapsibleTemplate>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="1"
|
||||
treeitem
|
||||
text={text}
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
treeItemSingleton
|
||||
/>
|
||||
</>
|
||||
</ListTemplate>
|
||||
)
|
||||
|
||||
export const Playground = ActionListTreeViewTemplate.bind({})
|
||||
Playground.args = {
|
||||
showSubItemIcon: true,
|
||||
showGroupIcon: true,
|
||||
text: 'item'
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react'
|
||||
import {ActionListTreeViewTemplate} from './ActionListTree.stories'
|
||||
|
||||
export default {
|
||||
title: 'UI Patterns/ActionList/ActionTreeView/Features'
|
||||
}
|
||||
|
||||
export const TruncateText = ActionListTreeViewTemplate.bind({})
|
||||
TruncateText.args = {
|
||||
truncateItem: true,
|
||||
text: 'Super duper long text that will truncate on smaller width rows'
|
||||
}
|
||||
|
||||
export const WrapText = ActionListTreeViewTemplate.bind({})
|
||||
WrapText.args = {
|
||||
text: 'Super duper long text that will wrap on smaller width rows'
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import {Meta} from '@storybook/addon-docs'
|
||||
|
||||
<Meta title="UI Patterns/UI Patterns" />
|
||||
|
||||
## UI Patterns
|
||||
|
||||
This directory contains pattern level stories that are used to compose component level stories. In general these stories consist of all markup/css that make up an overall "pattern" while component stories are more refined and focused on their own features and intent.
|
||||
|
||||
As an example, Overlay is a pattern used by Dialog, Anchored overlay, and "dropdown" type scenarios. Overlay is a set of styles reused for those core components, and provides its own set of stories to be inherited from the UI Patterns directory.
|
||||
|
||||
Consider these stories "private API" and use the stories within the `Components` directory as an official API reference.
|
||||
@ -1,7 +1,6 @@
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
import ConditionalWrapper from '../../helpers/ConditionalWrapper'
|
||||
import {PatternFullBleed} from '../ActionList/ActionListFeatures.stories.jsx'
|
||||
const variant = {}
|
||||
export default {
|
||||
title: 'UI Patterns/Overlay',
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
// empty divider
|
||||
|
||||
.ActionList-sectionDivider {
|
||||
// has children
|
||||
&:not(:empty) {
|
||||
display: flex;
|
||||
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 {
|
||||
display: block;
|
||||
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-title {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -1,593 +0,0 @@
|
||||
// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
|
||||
|
||||
@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: $padding-left;
|
||||
width: $spacer-1;
|
||||
height: $spacer-4;
|
||||
content: '';
|
||||
background: var(--color-accent-fg);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// <li>
|
||||
.ActionList-item {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// only hover li without list as children
|
||||
&:not(.ActionList-item--hasSubItem),
|
||||
// target contents of first child li if sub-item (li wraps item label + nested ul)
|
||||
&.ActionList-item--hasSubItem > .ActionList-content {
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-action-list-item-default-hover-bg);
|
||||
|
||||
&:not(.ActionList-item--navActive):not(:focus-visible) {
|
||||
// Support for "Windows high contrast mode"
|
||||
outline: $border-style $border-width transparent;
|
||||
outline-offset: -$border-width;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-action-list-item-default-active-bg);
|
||||
|
||||
&:not(.ActionList-item--navActive) {
|
||||
// Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
|
||||
outline: $border-style $border-width transparent;
|
||||
outline-offset: -$border-width;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
|
||||
}
|
||||
}
|
||||
|
||||
// hide dividers
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
.ActionList-item-label::before,
|
||||
+ .ActionList-item .ActionList-item-label::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ActionList-item-descriptionWrap--inline::before,
|
||||
+ .ActionList-item .ActionList-item-descriptionWrap--inline::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
&:active {
|
||||
.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 {
|
||||
z-index: 1;
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-action-list-item-default-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-action-list-item-default-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure that the first visible item isn't a divider
|
||||
&[hidden] + .ActionList-sectionDivider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Autocomplete [aria-selected] items
|
||||
|
||||
&[aria-selected='true'] {
|
||||
font-weight: $font-weight-normal;
|
||||
background: var(--color-action-list-item-default-selected-bg);
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-action-list-item-default-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
+ .ActionList-item::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// blue accent line
|
||||
&::after {
|
||||
@include activeIndicatorLine(-$spacer-1);
|
||||
}
|
||||
}
|
||||
|
||||
// active state [aria-current]
|
||||
|
||||
&.ActionList-item--navActive {
|
||||
&:not(.ActionList-item--subItem) {
|
||||
.ActionList-item-label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.ActionList-item--danger) {
|
||||
background: var(--color-action-list-item-default-selected-bg);
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-action-list-item-default-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
+ .ActionList-item::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// blue accent line
|
||||
&::after {
|
||||
@include activeIndicatorLine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
// disabled
|
||||
&[aria-disabled='true'] {
|
||||
.ActionList-content {
|
||||
.ActionList-item-label,
|
||||
.ActionList-item-description {
|
||||
color: var(--color-primer-fg-disabled);
|
||||
}
|
||||
|
||||
.ActionList-item-visual {
|
||||
fill: var(--color-primer-fg-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// variants
|
||||
|
||||
// danger
|
||||
&.ActionList-item--danger {
|
||||
.ActionList-item-label {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
.ActionList-item-visual {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background: var(--color-action-list-item-danger-hover-bg);
|
||||
|
||||
.ActionList-item-label {
|
||||
color: var(--color-action-list-item-danger-hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ActionList-content {
|
||||
&:active {
|
||||
background: var(--color-action-list-item-danger-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if nested list exists, remove default padding
|
||||
.ActionList {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// button or a href
|
||||
.ActionList-content {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--color-fg-default);
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
transition: $actionList-item-bg-transition;
|
||||
touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
grid-template-rows: min-content;
|
||||
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
||||
grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
|
||||
align-items: start;
|
||||
|
||||
// column-gap persists with empty grid-areas, margin applies only when children exist
|
||||
> :not(:last-child) {
|
||||
margin-right: $spacer-2;
|
||||
}
|
||||
|
||||
// state
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focusOutline;
|
||||
|
||||
// remove fallback :focus if :focus-visible is supported
|
||||
&:not(:focus-visible) {
|
||||
outline: solid 1px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// default focus state
|
||||
&:focus-visible {
|
||||
@include focusOutline;
|
||||
}
|
||||
|
||||
// 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) {
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// collapsible item [aria-expanded]
|
||||
|
||||
// nesting (single level)
|
||||
// target items inside expanded subgroups
|
||||
&[aria-expanded] {
|
||||
+ .ActionList--subGroup {
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
// has 16px leading visual
|
||||
&.ActionList-content--visual16 + .ActionList--subGroup {
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-5;
|
||||
}
|
||||
}
|
||||
|
||||
// has 20px leading visual
|
||||
&.ActionList-content--visual20 + .ActionList--subGroup {
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-2 * 4.5; // 36px
|
||||
}
|
||||
}
|
||||
|
||||
// has 24px leading visual
|
||||
&.ActionList-content--visual24 + .ActionList--subGroup {
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded='true'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
+ .ActionList--subGroup {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.ActionList-content--hasActiveSubItem {
|
||||
> .ActionList-item-label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded='false'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
+ .ActionList--subGroup {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-$spacer-3);
|
||||
}
|
||||
|
||||
// show active indicator on parent collapse if child is active
|
||||
&.ActionList-content--hasActiveSubItem {
|
||||
background: var(--color-action-list-item-default-selected-bg);
|
||||
|
||||
.ActionList-item-label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
&::before,
|
||||
+ .ActionList-item::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// blue accent line
|
||||
&::after {
|
||||
@include activeIndicatorLine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
&.ActionList-content--fontSmall {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
position: relative;
|
||||
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
|
||||
pointer-events: none;
|
||||
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);
|
||||
}
|
||||
|
||||
.ActionList-item-label--truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// nested lists (only supports 1 level currently)
|
||||
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
||||
|
||||
// TODO: remove with PVC implementation
|
||||
.ActionList-item--subItem > .ActionList-content {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, selector-max-type, primer/spacing
|
||||
// tree-view variant
|
||||
// renders ActionList with default styling for tree-view
|
||||
// collapse/expand icons presents as leadingActions, rotate 90deg
|
||||
// connecting vertical lines between collapse groups
|
||||
// consistent font-size between nested groups
|
||||
|
||||
@mixin treeConnectingLine($left) {
|
||||
position: absolute;
|
||||
left: $left;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background: var(--color-action-list-item-inline-divider);
|
||||
}
|
||||
|
||||
.ActionList--tree {
|
||||
--ActionList-tree-depth: 1;
|
||||
// TODO: remove with PVC implementation
|
||||
.ActionList-item--subItem > .ActionList-content {
|
||||
font-size: $body-font-size;
|
||||
}
|
||||
|
||||
.ActionList-item {
|
||||
// class for single tree items not within a group
|
||||
&.ActionList-item--singleton {
|
||||
.ActionList-content {
|
||||
padding-left: $spacer-5;
|
||||
}
|
||||
}
|
||||
|
||||
// normal font-weight for any active item
|
||||
&.ActionList-item--navActive {
|
||||
&:not(.ActionList-item--subItem) {
|
||||
.ActionList-item-label {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ActionList-content {
|
||||
// nesting (infinite levels)
|
||||
// target items inside expanded subgroup
|
||||
&[aria-expanded] {
|
||||
+ .ActionList--subGroup {
|
||||
position: relative;
|
||||
|
||||
// --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
|
||||
.ActionList-content {
|
||||
padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tree-view specific collapse icon positioning/animation
|
||||
&[aria-expanded='true'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
// normal weight for parent folder containing active child
|
||||
&.ActionList-content--hasActiveSubItem {
|
||||
> .ActionList-item-label {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded='false'] {
|
||||
.ActionList-item-collapseIcon {
|
||||
transition: transform 120ms linear;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&.ActionList-content--hasActiveSubItem {
|
||||
> .ActionList-item-label {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expand/collapse group
|
||||
.ActionList-item--hasSubItem {
|
||||
.ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
|
||||
.ActionList-content {
|
||||
// increase child padding by targeting content first child span (add to ActionList-content padding, not replace)
|
||||
// creates a slight indent of child items
|
||||
> span:first-child {
|
||||
padding-left: $spacer-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// first subitem
|
||||
> [aria-level='1'].ActionList-item--hasSubItem {
|
||||
> .ActionList--subGroup {
|
||||
&::before {
|
||||
@include treeConnectingLine($left: $spacer-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// all other subitems
|
||||
// center connecting line with parent (line is 1px (8px - 1px)
|
||||
.ActionList-item--hasSubItem:not([aria-level='1']) {
|
||||
> .ActionList--subGroup {
|
||||
&::before {
|
||||
@include treeConnectingLine(
|
||||
$left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
$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;
|
||||
@ -1,67 +0,0 @@
|
||||
// <ul>
|
||||
.ActionList {
|
||||
padding: $spacer-2;
|
||||
}
|
||||
|
||||
// full bleed
|
||||
.ActionList--full {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// nested list within main ActionList
|
||||
.ActionList--subGroup {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// if descriptionWrap--inline exists, move pseudo divider to wrapper
|
||||
.ActionList-item-descriptionWrap--inline {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -$actionList-item-padding-vertical;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $border-width;
|
||||
content: '';
|
||||
background: var(--color-action-list-item-inline-divider);
|
||||
}
|
||||
|
||||
// unset the default label pseudo
|
||||
.ActionList-item-label::before {
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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-descriptionWrap--inline::before,
|
||||
.ActionList-sectionDivider + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
@import '../support/index.scss';
|
||||
@import './action-list-variables.scss';
|
||||
@import './action-list.scss';
|
||||
@import './action-list-tree.scss';
|
||||
@import './action-list-item.scss';
|
||||
@import './action-list-item-divider.scss';
|
||||
@ -11,7 +11,6 @@
|
||||
// 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