mirror of
https://github.com/primer/css.git
synced 2024-12-02 07:53:06 +03:00
ActionList doc cleanup (#1879)
* refactor naming convention * upgrade sb * clarify stories for a11y testing * fix divider bug * Stylelint auto-fixes * make a11y page render (in a less cool way) * revert bug fix for new pr * lint Co-authored-by: Actions Auto Build <actions@github.com>
This commit is contained in:
Katie Langerman
GitHub
parent
499a70e644
commit
1ca80ff9a1
@ -49,16 +49,16 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.7",
|
||||
"@storybook/addon-a11y": "6.4.9",
|
||||
"@storybook/addon-actions": "^6.4.9",
|
||||
"@storybook/addon-essentials": "^6.4.9",
|
||||
"@storybook/addon-links": "^6.4.9",
|
||||
"@storybook/addon-a11y": "6.4.12",
|
||||
"@storybook/addon-actions": "^6.4.12",
|
||||
"@storybook/addon-essentials": "^6.4.12",
|
||||
"@storybook/addon-links": "^6.4.12",
|
||||
"@storybook/addon-postcss": "2.0.0",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/react": "6.4.9",
|
||||
"@storybook/react": "6.4.12",
|
||||
"@whitespace/storybook-addon-html": "^5.0.0",
|
||||
"babel-loader": "^8.2.3",
|
||||
"storybook-addon-designs": "6.2.0",
|
||||
"storybook-color-picker": "2.1.5"
|
||||
"storybook-addon-designs": "6.2.1",
|
||||
"storybook-color-picker": "2.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,12 +44,6 @@ The `menu` role should be reserved for dropdown menu scenarios
|
||||
| `li` | has child link `role="none"` |
|
||||
| `a` | `role="menuitem"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--menu-with-section-divider" />
|
||||
</Canvas>
|
||||
|
||||
### Navigational list of links
|
||||
|
||||
[Navigation spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html)
|
||||
@ -58,12 +52,6 @@ Wrap `ActionList` in a `nav` element for site or page navigation, like a sidebar
|
||||
|
||||
No roles needed
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--nav-with-sub-items" />
|
||||
</Canvas>
|
||||
|
||||
### Multi select dropdown menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
|
||||
@ -74,12 +62,6 @@ No roles needed
|
||||
| `li` | `role="menuitemcheckbox"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--menu-multi-select" />
|
||||
</Canvas>
|
||||
|
||||
### Single select dropdown menu
|
||||
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
|
||||
@ -90,12 +72,6 @@ No roles needed
|
||||
| `li` | `role="menuitemradio"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--menu-single-select" />
|
||||
</Canvas>
|
||||
|
||||
### Multi select listbox
|
||||
|
||||
[Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
|
||||
@ -107,12 +83,6 @@ No roles needed
|
||||
| `li` | `role="option"` |
|
||||
| `li` | `aria-selected="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--list-multi-select" />
|
||||
</Canvas>
|
||||
|
||||
### Single select listbox
|
||||
|
||||
[Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
|
||||
@ -125,42 +95,14 @@ Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wa
|
||||
| `li` | `role="option"` |
|
||||
| `li` | `aria-selected="true/false"` |
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--list-single-select" />
|
||||
</Canvas>
|
||||
|
||||
### List of links
|
||||
|
||||
No roles needed
|
||||
|
||||
#### Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-patterns--list" />
|
||||
</Canvas>
|
||||
|
||||
### Dividers
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :----------------- |
|
||||
| `li` | `role="separator"` |
|
||||
|
||||
#### Empty example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-actionlistitem-features--divider-empty" />
|
||||
</Canvas>
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :------------------------------------------ |
|
||||
| `li` | `role="presentation"` |
|
||||
| `li` | id for nested group `id="group-id"` |
|
||||
| `li` | if it has id for group `aria-hidden="true"` |
|
||||
|
||||
#### With title example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-actionlist-actionlistitem-features--divider-text" />
|
||||
</Canvas>
|
||||
|
||||
@ -3,7 +3,7 @@ import clsx from 'clsx'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList',
|
||||
title: 'Components/ActionList/ActionList',
|
||||
excludeStories: ['ListTemplate'],
|
||||
parameters: {
|
||||
design: {
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {DividerTemplate} from './ActionListDivider.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionListDivider/Features',
|
||||
decorators: [
|
||||
Story => (
|
||||
<ul className="ActionList" role="menu">
|
||||
<Story />
|
||||
</ul>
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
export const WithTitle = DividerTemplate.bind({})
|
||||
WithTitle.args = {
|
||||
title: 'List group title'
|
||||
}
|
||||
|
||||
export const Subtle = DividerTemplate.bind({})
|
||||
Subtle.args = {
|
||||
variant: 'subtle',
|
||||
title: 'List group title'
|
||||
}
|
||||
|
||||
export const Filled = DividerTemplate.bind({})
|
||||
Filled.args = {
|
||||
variant: 'ActionList-sectionDivider--filled',
|
||||
title: 'List group title'
|
||||
}
|
||||
|
||||
export const WithDescription = DividerTemplate.bind({})
|
||||
WithDescription.args = {
|
||||
title: 'List group title',
|
||||
description: 'Group description'
|
||||
}
|
||||
|
||||
export const RolePresentation = DividerTemplate.bind({})
|
||||
RolePresentation.storyName = '[role="presentation"]'
|
||||
RolePresentation.args = {
|
||||
title: 'List group title'
|
||||
}
|
||||
|
||||
export const RoleSeparator = DividerTemplate.bind({})
|
||||
RoleSeparator.storyName = '[role="separator"]'
|
||||
RoleSeparator.args = {}
|
||||
|
||||
export const Empty = DividerTemplate.bind({})
|
||||
@ -8,17 +8,17 @@ export default {
|
||||
title: 'Components/ActionList/Examples'
|
||||
}
|
||||
|
||||
export const RepoSettings = ListTemplate.bind({})
|
||||
RepoSettings.storyName = 'Repository settings';
|
||||
RepoSettings.args = {
|
||||
export const NavRepoSettings = ListTemplate.bind({})
|
||||
NavRepoSettings.storyName = '[nav] Repository settings'
|
||||
NavRepoSettings.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="General"
|
||||
href="#content"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -27,16 +27,17 @@ RepoSettings.args = {
|
||||
<DividerTemplate />
|
||||
<DividerTemplate title="Access" id="group-id-1" />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
containsSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
role="menu"
|
||||
ariaLabelledBy="group-id-1"
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Collaborators"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -47,7 +48,7 @@ RepoSettings.args = {
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
text="Moderation options"
|
||||
// href="/"
|
||||
listSemantic
|
||||
collapsible
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion">
|
||||
@ -56,32 +57,20 @@ RepoSettings.args = {
|
||||
children={
|
||||
<ListTemplate
|
||||
containsSubItem
|
||||
role="menu"
|
||||
subGroup
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
subItem
|
||||
text="Interaction limits"
|
||||
href="/"
|
||||
ariaCurrent="page"
|
||||
/>
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Blocked users"
|
||||
href="/"
|
||||
/>
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Code review limits"
|
||||
href="/"
|
||||
/>
|
||||
<ListItemTemplate
|
||||
subItem
|
||||
text="Reported content"
|
||||
href="/"
|
||||
/>
|
||||
<ListItemTemplate listSemantic subItem text="Blocked users" href="/" />
|
||||
<ListItemTemplate listSemantic subItem text="Code review limits" href="/" />
|
||||
<ListItemTemplate listSemantic subItem text="Reported content" href="/" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -96,28 +85,31 @@ RepoSettings.args = {
|
||||
<DividerTemplate title="Code and automation" id="group-id-2" />
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
listSemantic
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
role="menu"
|
||||
ariaLabel="Sub nav decription"
|
||||
ariaLabelledBy="group-id-2"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Branches"
|
||||
listSemantic
|
||||
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>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Actions"
|
||||
listSemantic
|
||||
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>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Webhooks"
|
||||
listSemantic
|
||||
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">
|
||||
@ -126,6 +118,7 @@ RepoSettings.args = {
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Environments"
|
||||
listSemantic
|
||||
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">
|
||||
@ -134,6 +127,7 @@ RepoSettings.args = {
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Pages"
|
||||
listSemantic
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file">
|
||||
@ -149,27 +143,30 @@ RepoSettings.args = {
|
||||
<DividerTemplate title="Security" id="group-id-3" />
|
||||
<ListItemTemplate
|
||||
containsSubItem
|
||||
listSemantic
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
role="menu"
|
||||
ariaLabel="Sub nav decription"
|
||||
ariaLabelledBy="group-id-3"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Code security and analysis"
|
||||
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="M8.533.133a1.75 1.75 0 00-1.066 0l-5.25 1.68A1.75 1.75 0 001 3.48V7c0 1.566.32 3.182 1.303 4.682.983 1.498 2.585 2.813 5.032 3.855a1.7 1.7 0 001.33 0c2.447-1.042 4.049-2.357 5.032-3.855C14.68 10.182 15 8.566 15 7V3.48a1.75 1.75 0 00-1.217-1.667L8.533.133zm-.61 1.429a.25.25 0 01.153 0l5.25 1.68a.25.25 0 01.174.238V7c0 1.358-.275 2.666-1.057 3.86-.784 1.194-2.121 2.34-4.366 3.297a.2.2 0 01-.154 0c-2.245-.956-3.582-2.104-4.366-3.298C2.775 9.666 2.5 8.36 2.5 7V3.48a.25.25 0 01.174-.237l5.25-1.68zM9.5 6.5a1.5 1.5 0 01-.75 1.3v2.45a.75.75 0 01-1.5 0V7.8A1.5 1.5 0 119.5 6.5z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Deploy keys"
|
||||
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="M6.5 5.5a4 4 0 112.731 3.795.75.75 0 00-.768.18L7.44 10.5H6.25a.75.75 0 00-.75.75v1.19l-.06.06H4.25a.75.75 0 00-.75.75v1.19l-.06.06H1.75a.25.25 0 01-.25-.25v-1.69l5.024-5.023a.75.75 0 00.181-.768A3.995 3.995 0 016.5 5.5zm4-5.5a5.5 5.5 0 00-5.348 6.788L.22 11.72a.75.75 0 00-.22.53v2C0 15.216.784 16 1.75 16h2a.75.75 0 00.53-.22l.5-.5a.75.75 0 00.22-.53V14h.75a.75.75 0 00.53-.22l.5-.5a.75.75 0 00.22-.53V12h.75a.75.75 0 00.53-.22l.932-.932A5.5 5.5 0 1010.5 0zm.5 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Secrets"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -183,7 +180,7 @@ RepoSettings.args = {
|
||||
</>
|
||||
)
|
||||
}
|
||||
RepoSettings.decorators = [
|
||||
NavRepoSettings.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
@ -191,17 +188,17 @@ RepoSettings.decorators = [
|
||||
)
|
||||
]
|
||||
|
||||
export const DiscussionsPane = ListTemplate.bind({})
|
||||
DiscussionsPane.storyName = 'Discussions pane';
|
||||
DiscussionsPane.args = {
|
||||
export const NavDiscussionsPane = ListTemplate.bind({})
|
||||
NavDiscussionsPane.storyName = '[nav] Discussions pane'
|
||||
NavDiscussionsPane.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Categories',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="All discussions"
|
||||
href="/"
|
||||
ariaCurrent={true}
|
||||
@ -210,18 +207,21 @@ DiscussionsPane.args = {
|
||||
/>
|
||||
<DividerTemplate />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Announcements"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`🔔`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="General"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`💬`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Ideas"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -232,14 +232,17 @@ DiscussionsPane.args = {
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`🌻`}
|
||||
listSemantic
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Show and tell"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`👋`}
|
||||
listSemantic
|
||||
/>
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
text="Polls"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
@ -247,11 +250,738 @@ DiscussionsPane.args = {
|
||||
/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
DiscussionsPane.decorators = [
|
||||
}
|
||||
NavDiscussionsPane.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuSingleSelect = ListTemplate.bind({})
|
||||
MenuSingleSelect.storyName = '[menu] Single select milestone'
|
||||
MenuSingleSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: 'menu',
|
||||
showDividers: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="Generators support"
|
||||
description="June 7 – July 16"
|
||||
singleSelect
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zm0 8.5h4.384a.25.25 0 00.161-.06l2.07-1.75a.25.25 0 000-.38l-2.07-1.75a.25.25 0 00-.161-.06H2.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h5z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Slot deprecation"
|
||||
description="July 15"
|
||||
singleSelect
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zm0 8.5h4.384a.25.25 0 00.161-.06l2.07-1.75a.25.25 0 000-.38l-2.07-1.75a.25.25 0 00-.161-.06H2.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h5z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Experimental overrides"
|
||||
description="Feb 15 – Feb 28"
|
||||
singleSelect
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zm0 8.5h4.384a.25.25 0 00.161-.06l2.07-1.75a.25.25 0 000-.38l-2.07-1.75a.25.25 0 00-.161-.06H2.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h5z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="Preview routes"
|
||||
description="Jan 1"
|
||||
singleSelect
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zm0 8.5h4.384a.25.25 0 00.161-.06l2.07-1.75a.25.25 0 000-.38l-2.07-1.75a.25.25 0 00-.161-.06H2.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h5z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuSingleSelect.decorators = [
|
||||
Story => (
|
||||
<div>
|
||||
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Milestone
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuMultiSelect = ListTemplate.bind({})
|
||||
MenuMultiSelect.storyName = '[menu] Multi select assignee'
|
||||
MenuMultiSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: 'menu',
|
||||
showDividers: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
text="simuri"
|
||||
description="Simon Luthi"
|
||||
descriptionVariant="ActionList-item-descriptionWrap--inline"
|
||||
multiSelect
|
||||
leadingVisual={`
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/378023?s=60&v=4"
|
||||
class="avatar avatar-user"
|
||||
alt="simurai"
|
||||
width="20"
|
||||
height="20"
|
||||
style="border-radius: 50%;"
|
||||
></img>
|
||||
`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="jonrohan"
|
||||
description="Jon Rohan"
|
||||
descriptionVariant="ActionList-item-descriptionWrap--inline"
|
||||
multiSelect
|
||||
leadingVisual={`
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/54012?s=60&v=4"
|
||||
class="avatar avatar-user"
|
||||
alt="simurai"
|
||||
width="20"
|
||||
height="20"
|
||||
style="border-radius: 50%;"
|
||||
></img>
|
||||
`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="vdepizzol"
|
||||
description="Vinicius Depizzol"
|
||||
descriptionVariant="ActionList-item-descriptionWrap--inline"
|
||||
multiSelect
|
||||
leadingVisual={`
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/293280?s=60&v=4"
|
||||
class="avatar avatar-user"
|
||||
alt="vdepizzol"
|
||||
width="20"
|
||||
height="20"
|
||||
style="border-radius: 50%;"
|
||||
></img>
|
||||
`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="colebemis"
|
||||
description="Cole Bemis"
|
||||
descriptionVariant="ActionList-item-descriptionWrap--inline"
|
||||
multiSelect
|
||||
leadingVisual={`
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/4608155?s=60&v=4"
|
||||
class="avatar avatar-user"
|
||||
alt="colebemis"
|
||||
width="20"
|
||||
height="20"
|
||||
style="border-radius: 50%;"
|
||||
></img>
|
||||
`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
text="emilybrick"
|
||||
description="Emily Brick"
|
||||
descriptionVariant="ActionList-item-descriptionWrap--inline"
|
||||
multiSelect
|
||||
leadingVisual={`
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/586552?s=60&v=4"
|
||||
class="avatar avatar-user"
|
||||
alt="emilybrick"
|
||||
width="20"
|
||||
height="20"
|
||||
style="border-radius: 50%;"
|
||||
></img>
|
||||
`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuMultiSelect.decorators = [
|
||||
Story => (
|
||||
<div>
|
||||
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Assignees
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
|
||||
export const List = ListTemplate.bind({})
|
||||
List.storyName = '[list] Repo links'
|
||||
List.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Details',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<DividerTemplate title="Details" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
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
|
||||
ariaLevel="1"
|
||||
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
|
||||
ariaLevel="1"
|
||||
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
|
||||
ariaLevel="1"
|
||||
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>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
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 = ListTemplate.bind({})
|
||||
ActionListTreeViewTemplate.storyName = '[tree] Action Tree View'
|
||||
ActionListTreeViewTemplate.args = {
|
||||
role: 'tree',
|
||||
ariaLabel: 'Main menu description',
|
||||
showDividers: false,
|
||||
variant: 'ActionList--tree',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="pages"
|
||||
collapsibleLeading
|
||||
leadingVisual={folder}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
truncateItem
|
||||
subItem
|
||||
text="filewithreallylongnamewhoaaaaaaohmy.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="public"
|
||||
collapsibleLeading
|
||||
leadingVisual={folder}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="3"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="4"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="filex.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
treeitem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file3.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
treeitemtreeitem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitemtreeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="3"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const MenuContextMenu = ListTemplate.bind({})
|
||||
MenuContextMenu.storyName = '[menu] Context menu'
|
||||
MenuContextMenu.args = {
|
||||
role: 'menu',
|
||||
ariaLabel: 'Main menu description',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate onClick={() => alert('Hello!')} text="Copy link" trailingVisual={`⌘⇧C`} menuItem />
|
||||
<ListItemTemplate onClick={() => alert('Hello!')} text="Quote reply" trailingVisual={`⌘⇧R`} menuItem />
|
||||
<ListItemTemplate onClick={() => alert('Hello!')} text="Edit comment" menuItem />
|
||||
<DividerTemplate menuItem />
|
||||
<ListItemTemplate
|
||||
onClick={() => alert('Hello!')}
|
||||
text="Delete comment"
|
||||
variant="ActionList-item--danger"
|
||||
menuItem
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuContextMenu.decorators = [
|
||||
Story => (
|
||||
<details class="details-overlay details-reset position-relative d-inline-block" open="">
|
||||
<summary class="timeline-comment-action Link--secondary btn-link" aria-haspopup="menu" role="button">
|
||||
<svg
|
||||
aria-label="Show options"
|
||||
role="img"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
width="16"
|
||||
data-view-component="true"
|
||||
class="octicon octicon-kebab-horizontal"
|
||||
>
|
||||
<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>
|
||||
</summary>
|
||||
<span className="dropdown-menu dropdown-menu-se">
|
||||
<Story />
|
||||
</span>
|
||||
</details>
|
||||
)
|
||||
]
|
||||
|
||||
@ -0,0 +1,148 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/ActionList/Features'
|
||||
}
|
||||
|
||||
export const ShowDividers = ListTemplate.bind({})
|
||||
ShowDividers.args = {
|
||||
showDividers: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const InsetPadding = ListTemplate.bind({})
|
||||
InsetPadding.args = {
|
||||
listPadding: 'inset',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const FullBleed = ListTemplate.bind({})
|
||||
FullBleed.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 AsSubGroup = ListTemplate.bind({})
|
||||
AsSubGroup.args = {
|
||||
subGroup: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const RoleMenu = ListTemplate.bind({})
|
||||
RoleMenu.storyName = '[role="menu"] menu list'
|
||||
RoleMenu.args = {
|
||||
role: 'menu',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" />
|
||||
<ListItemTemplate text="Item 2" href="/" />
|
||||
<ListItemTemplate text="Item 3" href="/" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const RoleNav = ListTemplate.bind({})
|
||||
RoleNav.storyName = '[nav] nav wrapper'
|
||||
RoleNav.args = {
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Item 1" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 2" href="/" listSemantic />
|
||||
<ListItemTemplate text="Item 3" href="/" listSemantic />
|
||||
</>
|
||||
)
|
||||
}
|
||||
RoleNav.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const RoleTreeView = ListTemplate.bind({})
|
||||
RoleTreeView.storyName = '[role="tree"] tree view list'
|
||||
RoleTreeView.args = {
|
||||
role: 'tree',
|
||||
variant: 'ActionList--tree',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="Tree group"
|
||||
collapsibleLeading
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Group description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="Tree item 1"
|
||||
href="/"
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
text="Tree item 2"
|
||||
href="/"
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
truncateItem
|
||||
subItem
|
||||
text="Tree item 3"
|
||||
href="/"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -281,7 +281,8 @@ export const ListItemTemplate = ({
|
||||
fontSize,
|
||||
treeitem,
|
||||
ariaSetSize,
|
||||
ariaPosInset
|
||||
ariaPosInset,
|
||||
menuItem
|
||||
}) => {
|
||||
const [isCollapsed, itemIsCollapsed] = useToggle()
|
||||
const [isChecked, itemIsChecked] = useToggle()
|
||||
@ -301,7 +302,7 @@ export const ListItemTemplate = ({
|
||||
aria-level={ariaLevel ? `${ariaLevel}` : undefined}
|
||||
aria-setsize={ariaSetSize ? `${ariaSetSize}` : undefined}
|
||||
aria-posinset={ariaPosInset ? `${ariaPosInset}` : undefined}
|
||||
style={itemStyle}
|
||||
style={ariaLevel && itemStyle}
|
||||
onClick={collapsible || collapsibleLeading ? itemIsCollapsed : itemIsChecked}
|
||||
role={
|
||||
singleSelect
|
||||
@ -316,6 +317,8 @@ export const ListItemTemplate = ({
|
||||
? 'none'
|
||||
: treeitem
|
||||
? 'treeitem'
|
||||
: menuItem
|
||||
? 'menuitem'
|
||||
: undefined
|
||||
}
|
||||
id={id}
|
||||
@ -409,8 +412,8 @@ export const ListItemTemplate = ({
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && (
|
||||
@ -525,8 +528,9 @@ export const ListItemTemplate = ({
|
||||
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
|
||||
<span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
|
||||
{text}
|
||||
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
<span className="ActionList-item-description">{description}</span>
|
||||
</span>
|
||||
)}
|
||||
{!description && text && (
|
||||
|
||||
@ -1,844 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {DividerTemplate} from './ActionListDivider.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/Patterns'
|
||||
// decorators: [
|
||||
// Story => (
|
||||
// <nav>
|
||||
// <Story />
|
||||
// </nav>
|
||||
// )
|
||||
// ]
|
||||
}
|
||||
|
||||
export const NavWithSubItems = ListTemplate.bind({})
|
||||
NavWithSubItems.storyName = '[Nav] Links + nested collapsible group'
|
||||
NavWithSubItems.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: undefined,
|
||||
ariaLabel: 'Main menu description',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
collapsible
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
text="Nav Item"
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemanticariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItems.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithNoActiveSubItems = ListTemplate.bind({})
|
||||
NavWithNoActiveSubItems.storyName = '[Nav] Links + nested collapsible group w/ no active children'
|
||||
NavWithNoActiveSubItems.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: undefined,
|
||||
ariaLabel: 'Main menu description',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate
|
||||
listSemantic
|
||||
collapsible
|
||||
containsSubItem
|
||||
text="Nav Item"
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithNoActiveSubItems.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithSubItemsLeadingVisual16px = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual16px.storyName = '[Nav] Links + nested collapsible group leadingVisual 16px'
|
||||
NavWithSubItemsLeadingVisual16px.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
collapsible
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate listSemantic ariaLevel="2" subItem text="Sub Nav Item" href="/" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual16px.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithSubItemsLeadingVisual20px = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual20px.storyName = '[Nav] Links + nested collapsible group leadingVisual 20px'
|
||||
NavWithSubItemsLeadingVisual20px.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
subItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual20"
|
||||
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual20px.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const NavWithSubItemsLeadingVisual24px = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual24px.storyName = '[Nav] Links + nested collapsible group leadingVisual 24px'
|
||||
NavWithSubItemsLeadingVisual24px.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate ariaLevel="2" listSemantic subItem text="Nav Item" href="/" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual24"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual24px.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuWithDivider = ListTemplate.bind({})
|
||||
MenuWithDivider.storyName = '[DropdownMenu] Divider'
|
||||
MenuWithDivider.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<DividerTemplate />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
text="Nav Item"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuWithDivider.decorators = [
|
||||
Story => (
|
||||
<div>
|
||||
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuWithSectionDivider = ListTemplate.bind({})
|
||||
MenuWithSectionDivider.storyName = '[DropdownMenu] Section divider'
|
||||
MenuWithSectionDivider.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="1" />
|
||||
<DividerTemplate title="Section DividerTemplate (subtle)" id="some-unique-id" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
ariaLabelledBy="some-unique-id"
|
||||
role="menu"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="2" />
|
||||
<ListItemTemplate text="Nav Item" href="/" ariaLevel="2" />
|
||||
<ListItemTemplate text="Nav Item" href="/" variant="ActionList-item--danger" ariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuWithSectionDivider.decorators = [
|
||||
Story => (
|
||||
<div>
|
||||
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuSingleSelect = ListTemplate.bind({})
|
||||
MenuSingleSelect.storyName = '[DropdownMenu] Single select'
|
||||
MenuSingleSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" singleSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuSingleSelect.decorators = [
|
||||
Story => (
|
||||
<div>
|
||||
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
|
||||
export const MenuMultiSelect = ListTemplate.bind({})
|
||||
MenuMultiSelect.storyName = '[DropdownMenu] Multi select'
|
||||
MenuMultiSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: 'menu',
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" multiSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
MenuMultiSelect.decorators = [
|
||||
Story => (
|
||||
<div>
|
||||
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
|
||||
export const ListSingleSelect = ListTemplate.bind({})
|
||||
ListSingleSelect.storyName = '[Listbox] Single select'
|
||||
ListSingleSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Select an option',
|
||||
role: 'listbox',
|
||||
showDividers: false,
|
||||
listboxMultiSelect: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listSingleSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const ListMultiSelect = ListTemplate.bind({})
|
||||
ListMultiSelect.storyName = '[Listbox] Multi select'
|
||||
ListMultiSelect.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Select multiple options',
|
||||
role: 'listbox',
|
||||
showDividers: false,
|
||||
listboxMultiSelect: true,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
<ListItemTemplate text="Option label" listMultiSelect ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const leadingVisualSvg = `<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>`
|
||||
|
||||
export const List = ListTemplate.bind({})
|
||||
List.storyName = '[List] Group of links'
|
||||
List.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Details',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<DividerTemplate title="Details" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
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
|
||||
ariaLevel="1"
|
||||
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
|
||||
ariaLevel="1"
|
||||
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
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
href="/"
|
||||
text="3 forks"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>`}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const NavWithSubItemsLeadingVisual16pxSubSections = ListTemplate.bind({})
|
||||
NavWithSubItemsLeadingVisual16pxSubSections.storyName =
|
||||
'[Nav] Links + nested collapsible group leadingVisual 16px + sub sections'
|
||||
NavWithSubItemsLeadingVisual16pxSubSections.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
ariaLabel: 'Main menu description',
|
||||
role: undefined,
|
||||
showDividers: false,
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
text="General"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>`}
|
||||
/>
|
||||
<DividerTemplate title="Access" id="group-id-1" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabelledBy="group-id-1"
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
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>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
text="Moderation options"
|
||||
// href="/"
|
||||
collapsible
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion">
|
||||
<path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"></path>
|
||||
</svg>`}
|
||||
children={
|
||||
<ListTemplate
|
||||
containsSubItem
|
||||
containsActiveSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav decription"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="3"
|
||||
listSemantic
|
||||
subItem
|
||||
text="Interaction limits"
|
||||
href="/"
|
||||
ariaCurrent="page"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
text="Repository roles"
|
||||
listSemantic
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-person">
|
||||
<path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<DividerTemplate title="Code & operations" id="group-id-2" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
containsSubItem
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav decription"
|
||||
ariaLabelledBy="group-id-2"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
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>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
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>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Pages"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file">
|
||||
<path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
listSemantic
|
||||
text="Unpublish GitHub Pages"
|
||||
href="/"
|
||||
leadingVisualSize="ActionList-content--visual16"
|
||||
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plug">
|
||||
<path fill-rule="evenodd" d="M10.276 3.09a.25.25 0 01.192-.09h.782a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-.782a.25.25 0 01-.192-.09l-.95-1.14a.75.75 0 00-.483-.264l-3.124-.39a.25.25 0 01-.219-.249V5.133a.25.25 0 01.219-.248l3.124-.39a.75.75 0 00.483-.265l.95-1.14zM4 8v1.867a1.75 1.75 0 001.533 1.737l2.83.354.761.912c.332.4.825.63 1.344.63h.782A1.75 1.75 0 0013 11.75V11h2.25a.75.75 0 000-1.5H13v-4h2.25a.75.75 0 000-1.5H13v-.75a1.75 1.75 0 00-1.75-1.75h-.782c-.519 0-1.012.23-1.344.63l-.76.913-2.831.353A1.75 1.75 0 004 5.133V6.5H2.5A2.5 2.5 0 000 9v5.25a.75.75 0 001.5 0V9a1 1 0 011-1H4z"></path>
|
||||
</svg>`}
|
||||
trailingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert color-icon-danger">
|
||||
<path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
|
||||
</svg>`}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
NavWithSubItemsLeadingVisual16pxSubSections.decorators = [
|
||||
Story => (
|
||||
<nav>
|
||||
<Story />
|
||||
</nav>
|
||||
)
|
||||
]
|
||||
|
||||
export const ActionListFullBleed = ListTemplate.bind({})
|
||||
ActionListFullBleed.storyName = '[List] Full bleed Action List inside box'
|
||||
ActionListFullBleed.args = {
|
||||
...ListTemplate.args,
|
||||
...ListItemTemplate.args,
|
||||
role: undefined,
|
||||
ariaLabel: 'Main menu description',
|
||||
showDividers: false,
|
||||
listPadding: 'ActionList--full',
|
||||
children: (
|
||||
<>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
listSemantic
|
||||
collapsible
|
||||
containsSubItem
|
||||
text="Nav Item"
|
||||
children={
|
||||
<ListTemplate
|
||||
subGroup
|
||||
ariaLabel="Sub nav description"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaCurrent="page" ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic ariaLevel="2" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
<ListItemTemplate text="Nav Item" href="/" listSemantic ariaLevel="1" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -4,7 +4,7 @@ import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/ActionList/TreeView',
|
||||
title: 'Components/ActionList/ActionTreeView',
|
||||
excludeStories: ['ActionListTreeViewTemplate'],
|
||||
layout: 'padded',
|
||||
argTypes: {
|
||||
@ -21,6 +21,22 @@ export default {
|
||||
table: {
|
||||
category: 'Interactive'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
defaultValue: '',
|
||||
type: 'string',
|
||||
name: 'title',
|
||||
description: 'string',
|
||||
table: {
|
||||
category: 'HTML'
|
||||
}
|
||||
},
|
||||
truncateItem: {
|
||||
defaultValue: false,
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'CSS'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -31,74 +47,20 @@ const file = `<svg aria-hidden="true" role="img" class="octicon octicon-file" vi
|
||||
|
||||
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}) => (
|
||||
export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon, text, truncateItem}) => (
|
||||
<ListTemplate ariaLabel="Some description" role="tree" variant="ActionList--tree">
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="pages"
|
||||
collapsibleLeading
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
treeitem
|
||||
ariaLevel="2"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
truncateItem
|
||||
subItem
|
||||
text="filewithreallylongnamewhoaaaaaaohmy.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="1"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
containsSubItem
|
||||
text="public"
|
||||
text="level 1"
|
||||
collapsibleLeading
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
href=""
|
||||
truncateItem={truncateItem}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
@ -108,17 +70,19 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) =>
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="2"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
treeitem
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
text={text}
|
||||
href=""
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="2"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
@ -126,8 +90,8 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) =>
|
||||
subItem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
text="level 2"
|
||||
href=""
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
@ -139,6 +103,7 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) =>
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="3"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
@ -146,8 +111,8 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) =>
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
text="level 3"
|
||||
href=""
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
@ -159,324 +124,55 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) =>
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
text={text}
|
||||
href=""
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
text={text}
|
||||
href=""
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
text={text}
|
||||
href=""
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="4"
|
||||
ariaSetSize="4"
|
||||
ariaPosInset="4"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="filex.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="5"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
treeitem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file3.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="6"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
treeitem
|
||||
subItem
|
||||
containsSubItem
|
||||
treeitemtreeitem
|
||||
collapsibleLeading
|
||||
text="fonts"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="7"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
containsSubItem
|
||||
collapsibleLeading
|
||||
text="Inter"
|
||||
href="/"
|
||||
leadingVisual={showGroupIcon && folder}
|
||||
trailingVisual={trailingVisual}
|
||||
children={
|
||||
<ListTemplate
|
||||
role="group"
|
||||
containsSubItem
|
||||
subGroup
|
||||
ariaLabel="Sub nav descrioption"
|
||||
children={
|
||||
<>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="1"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="2"
|
||||
subItem
|
||||
treeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
ariaLevel="8"
|
||||
ariaSetSize="3"
|
||||
ariaPosInset="3"
|
||||
subItem
|
||||
treeitemtreeitem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ListItemTemplate
|
||||
truncateItem={truncateItem}
|
||||
ariaLevel="3"
|
||||
ariaSetSize="2"
|
||||
ariaPosInset="2"
|
||||
treeitem
|
||||
subItem
|
||||
text="file.tsx"
|
||||
href="/"
|
||||
text={text}
|
||||
href=""
|
||||
leadingVisual={showSubItemIcon && file}
|
||||
trailingVisual={trailingVisual}
|
||||
/>
|
||||
@ -498,5 +194,6 @@ export const ActionListTreeViewTemplate = ({showGroupIcon, showSubItemIcon}) =>
|
||||
export const Playground = ActionListTreeViewTemplate.bind({})
|
||||
Playground.args = {
|
||||
showSubItemIcon: true,
|
||||
showGroupIcon: true
|
||||
showGroupIcon: true,
|
||||
text: 'item'
|
||||
}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {ListTemplate} from './ActionList.stories'
|
||||
import {ListItemTemplate} from './ActionListItem.stories'
|
||||
import {DividerTemplate} from './ActionListDivider.stories'
|
||||
import {ActionListTreeViewTemplate} from './ActionListTree.stories'
|
||||
|
||||
export default {
|
||||
title: 'Components/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,18 +1,16 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {NavWithSubItems} from '../ActionList/ActionListPatterns.stories'
|
||||
import PageLayoutBehavior from '../../helpers/pageLayoutBehavior.jsx'
|
||||
|
||||
export default {
|
||||
title: 'Components/Layout/Beta',
|
||||
excludeStories: ['LayoutTemplate'],
|
||||
argTypes: {
|
||||
|
||||
// Debug
|
||||
|
||||
_debug: {
|
||||
control: 'boolean',
|
||||
description: 'Show background colors in regions for debugging',
|
||||
description: 'Show background colors in regions for debugging'
|
||||
},
|
||||
|
||||
// Structure
|
||||
@ -23,7 +21,8 @@ export default {
|
||||
type: 'inline-radio',
|
||||
labels: ['fluid', 'md', 'lg', 'xl']
|
||||
},
|
||||
description: 'Define the maximum width of the component. `fluid` sets it to full-width. Other values center `Layout` horizontally. Refer to [container utilities](https://primer.style/css/objects/grid#containers) for reference.',
|
||||
description:
|
||||
'Define the maximum width of the component. `fluid` sets it to full-width. Other values center `Layout` horizontally. Refer to [container utilities](https://primer.style/css/objects/grid#containers) for reference.',
|
||||
table: {
|
||||
category: 'Structure'
|
||||
}
|
||||
@ -33,7 +32,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Sets wrapper margins surrounding the component to distance itself from the viewport edges. `normal` sets the margin to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the margin at 16px. `none` sets the margin to 0.',
|
||||
description:
|
||||
'Sets wrapper margins surrounding the component to distance itself from the viewport edges. `normal` sets the margin to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the margin at 16px. `none` sets the margin to 0.',
|
||||
table: {
|
||||
category: 'Structure'
|
||||
}
|
||||
@ -43,7 +43,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Sets padding to regions individually. `normal` sets padding to 16px, with the `content` region getting 24px horizontal padding on `lg` breakpoints and above. `condensed` keeps the padding always at `16px`. `none` sets the padding to 0.',
|
||||
description:
|
||||
'Sets padding to regions individually. `normal` sets padding to 16px, with the `content` region getting 24px horizontal padding on `lg` breakpoints and above. `condensed` keeps the padding always at `16px`. `none` sets the padding to 0.',
|
||||
table: {
|
||||
category: 'Structure'
|
||||
}
|
||||
@ -53,7 +54,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Sets the gap between columns to distance them from each other. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px. `none` sets the gap to 0.',
|
||||
description:
|
||||
'Sets the gap between columns to distance them from each other. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px. `none` sets the gap to 0.',
|
||||
table: {
|
||||
category: 'Structure'
|
||||
}
|
||||
@ -63,7 +65,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Sets the gap below the header and above the footer. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px. `none` sets the gap to 0.',
|
||||
description:
|
||||
'Sets the gap below the header and above the footer. `normal` sets the gap to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the gap always at 16px. `none` sets the gap to 0.',
|
||||
table: {
|
||||
category: 'Structure'
|
||||
}
|
||||
@ -76,7 +79,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: '`responsiveVariant` defines how the layout component adapts to smaller viewports. `stackRegions` presents the content in a vertical flow, with `pane` and `content` vertically arranged. `separateRegions` presents `pane` and `content` as different pages on smaller viewports. Change the preview size from the toolbar to test it.',
|
||||
description:
|
||||
'`responsiveVariant` defines how the layout component adapts to smaller viewports. `stackRegions` presents the content in a vertical flow, with `pane` and `content` vertically arranged. `separateRegions` presents `pane` and `content` as different pages on smaller viewports. Change the preview size from the toolbar to test it.',
|
||||
table: {
|
||||
category: 'Responsive'
|
||||
}
|
||||
@ -86,7 +90,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'When `responsiveVariant` is set to `separateRegions`, defines which region appears first on small viewports. `content` is default.',
|
||||
description:
|
||||
'When `responsiveVariant` is set to `separateRegions`, defines which region appears first on small viewports. `content` is default.',
|
||||
table: {
|
||||
category: 'Responsive'
|
||||
}
|
||||
@ -97,7 +102,7 @@ export default {
|
||||
paneWidth: {
|
||||
options: ['default', 'narrow', 'wide'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Defines the width of the pane',
|
||||
table: {
|
||||
@ -109,23 +114,25 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Defines the position of the pane. `start` renders the pane on the left, and `end` renders it on the right.',
|
||||
description:
|
||||
'Defines the position of the pane. `start` renders the pane on the left, and `end` renders it on the right.',
|
||||
table: {
|
||||
category: 'Pane',
|
||||
category: 'Pane'
|
||||
}
|
||||
},
|
||||
panePositionNarrow: {
|
||||
options: ['inherit', 'start', 'end'],
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'If `responsiveVariant` is set to `stackRegions`, defines the position of the pane in narrow viewports. `start` puts the pane above `content`, and `end` puts it below `content`. `inherit` uses the same value from `panePosition`.',
|
||||
description:
|
||||
'If `responsiveVariant` is set to `stackRegions`, defines the position of the pane in narrow viewports. `start` puts the pane above `content`, and `end` puts it below `content`. `inherit` uses the same value from `panePosition`.',
|
||||
table: {
|
||||
category: 'Pane'
|
||||
}
|
||||
},
|
||||
hasPaneDivider: {
|
||||
control: { type: 'boolean' },
|
||||
control: {type: 'boolean'},
|
||||
description: 'Whether to show a pane line divider.',
|
||||
table: {
|
||||
category: 'Pane'
|
||||
@ -136,13 +143,14 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
|
||||
description:
|
||||
'Whether to show a divider between `pane` and `content` regions if `responsiveVariant` is set to `stackRegions`. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
|
||||
table: {
|
||||
category: 'Pane'
|
||||
}
|
||||
},
|
||||
paneIsSticky: {
|
||||
control: { type: 'boolean' },
|
||||
control: {type: 'boolean'},
|
||||
description: 'Whether to make the pane sticky.',
|
||||
table: {
|
||||
category: 'Pane'
|
||||
@ -156,24 +164,24 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Defines the maximum width of the content region. `fluid` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.',
|
||||
description:
|
||||
'Defines the maximum width of the content region. `fluid` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.',
|
||||
table: {
|
||||
category: 'Content'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Header
|
||||
|
||||
hasHeader: {
|
||||
control: { type: 'boolean' },
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Header'
|
||||
}
|
||||
},
|
||||
|
||||
hasHeaderDivider: {
|
||||
control: { type: 'boolean' },
|
||||
control: {type: 'boolean'},
|
||||
description: 'Whether to show a header divider.',
|
||||
table: {
|
||||
category: 'Header'
|
||||
@ -181,28 +189,28 @@ export default {
|
||||
},
|
||||
|
||||
headerDividerNarrow: {
|
||||
options: ['inherit', 'none', 'line', 'filled'],
|
||||
options: ['inherit', 'none', 'line', 'filled'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Defines how the `header` divider should look on narrow viewports. `inherit` renders a `line` if `hasHeaderDivider` is true. `filled` shows a thicker mobile-friendly divider.',
|
||||
description:
|
||||
'Defines how the `header` divider should look on narrow viewports. `inherit` renders a `line` if `hasHeaderDivider` is true. `filled` shows a thicker mobile-friendly divider.',
|
||||
table: {
|
||||
category: 'Header'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Footer
|
||||
|
||||
hasFooter: {
|
||||
control: { type: 'boolean' },
|
||||
control: {type: 'boolean'},
|
||||
table: {
|
||||
category: 'Footer'
|
||||
}
|
||||
},
|
||||
|
||||
hasFooterDivider: {
|
||||
control: { type: 'boolean' },
|
||||
control: {type: 'boolean'},
|
||||
description: 'Whether to show a footer divider.',
|
||||
table: {
|
||||
category: 'Footer'
|
||||
@ -214,7 +222,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
|
||||
description:
|
||||
'Whether to show a divider above the `footer` region on narrow viewports. `line` shows a single line. `filled` shows a thicker mobile-frienldy divider.',
|
||||
table: {
|
||||
category: 'Footer'
|
||||
}
|
||||
@ -249,11 +258,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
const layoutClassName = 'PageLayout';
|
||||
const layoutClassName = 'PageLayout'
|
||||
|
||||
// build every component case here in the template (private api)
|
||||
export const LayoutTemplate = ({
|
||||
|
||||
// Debug
|
||||
_debug,
|
||||
|
||||
@ -297,152 +305,160 @@ export const LayoutTemplate = ({
|
||||
paneChildren,
|
||||
footerChildren
|
||||
}) => {
|
||||
|
||||
const containerClass = {
|
||||
'full': '',
|
||||
'md': 'container-md',
|
||||
'lg': 'container-lg',
|
||||
'xl': 'container-xl'
|
||||
};
|
||||
full: '',
|
||||
md: 'container-md',
|
||||
lg: 'container-lg',
|
||||
xl: 'container-xl'
|
||||
}
|
||||
|
||||
// Default values
|
||||
wrapperSizing = wrapperSizing ?? 'xl';
|
||||
outerSpacing = outerSpacing ?? 'normal';
|
||||
innerSpacing = innerSpacing ?? 'none';
|
||||
columnGap = columnGap ?? 'normal';
|
||||
rowGap = rowGap ?? 'normal';
|
||||
panePosition = panePosition ?? 'end';
|
||||
panePositionNarrow = panePositionNarrow ?? 'inherit';
|
||||
responsiveVariant = responsiveVariant ?? 'stackRegions';
|
||||
primaryRegion = primaryRegion ?? 'content';
|
||||
wrapperSizing = wrapperSizing ?? 'xl'
|
||||
outerSpacing = outerSpacing ?? 'normal'
|
||||
innerSpacing = innerSpacing ?? 'none'
|
||||
columnGap = columnGap ?? 'normal'
|
||||
rowGap = rowGap ?? 'normal'
|
||||
panePosition = panePosition ?? 'end'
|
||||
panePositionNarrow = panePositionNarrow ?? 'inherit'
|
||||
responsiveVariant = responsiveVariant ?? 'stackRegions'
|
||||
primaryRegion = primaryRegion ?? 'content'
|
||||
|
||||
// Leave `null` values for states that don't require a modifier class
|
||||
outerSpacing = (outerSpacing === 'none') ? null : outerSpacing;
|
||||
innerSpacing = (innerSpacing === 'none') ? null : innerSpacing;
|
||||
paneWidth = (paneWidth === 'default') ? null : paneWidth;
|
||||
contentWidth = (contentWidth === 'fluid') ? null : contentWidth;
|
||||
headerDividerNarrow = (headerDividerNarrow === 'none') ? null : headerDividerNarrow;
|
||||
footerDividerNarrow = (footerDividerNarrow === 'none') ? null : footerDividerNarrow;
|
||||
outerSpacing = outerSpacing === 'none' ? null : outerSpacing
|
||||
innerSpacing = innerSpacing === 'none' ? null : innerSpacing
|
||||
paneWidth = paneWidth === 'default' ? null : paneWidth
|
||||
contentWidth = contentWidth === 'fluid' ? null : contentWidth
|
||||
headerDividerNarrow = headerDividerNarrow === 'none' ? null : headerDividerNarrow
|
||||
footerDividerNarrow = footerDividerNarrow === 'none' ? null : footerDividerNarrow
|
||||
|
||||
// Inherit value for responsive props
|
||||
panePositionNarrow = (panePositionNarrow === 'inherit') ? panePosition : panePositionNarrow;
|
||||
panePositionNarrow = panePositionNarrow === 'inherit' ? panePosition : panePositionNarrow
|
||||
|
||||
if (hasPaneDivider) {
|
||||
paneDividerNarrow = (paneDividerNarrow === 'inherit') ? 'line' : paneDividerNarrow;
|
||||
paneDividerNarrow = paneDividerNarrow === 'inherit' ? 'line' : paneDividerNarrow
|
||||
} else {
|
||||
paneDividerNarrow = null;
|
||||
paneDividerNarrow = null
|
||||
}
|
||||
|
||||
if (hasHeaderDivider) {
|
||||
headerDividerNarrow = (headerDividerNarrow === 'inherit') ? 'line' : headerDividerNarrow;
|
||||
headerDividerNarrow = headerDividerNarrow === 'inherit' ? 'line' : headerDividerNarrow
|
||||
} else {
|
||||
headerDividerNarrow = null;
|
||||
headerDividerNarrow = null
|
||||
}
|
||||
|
||||
if (hasFooterDivider) {
|
||||
footerDividerNarrow = (footerDividerNarrow === 'inherit') ? 'line' : footerDividerNarrow;
|
||||
footerDividerNarrow = footerDividerNarrow === 'inherit' ? 'line' : footerDividerNarrow
|
||||
} else {
|
||||
footerDividerNarrow = null;
|
||||
footerDividerNarrow = null
|
||||
}
|
||||
|
||||
PageLayoutBehavior();
|
||||
PageLayoutBehavior()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
layoutClassName,
|
||||
className={clsx(
|
||||
layoutClassName,
|
||||
|
||||
outerSpacing && layoutClassName + '--outerSpacing-' + `${outerSpacing}`,
|
||||
innerSpacing && layoutClassName + '--innerSpacing-' + `${innerSpacing}`,
|
||||
columnGap && layoutClassName + '--columnGap-' + `${columnGap}`,
|
||||
rowGap && layoutClassName + '--rowGap-' + `${rowGap}`,
|
||||
outerSpacing && layoutClassName + '--outerSpacing-' + `${outerSpacing}`,
|
||||
innerSpacing && layoutClassName + '--innerSpacing-' + `${innerSpacing}`,
|
||||
columnGap && layoutClassName + '--columnGap-' + `${columnGap}`,
|
||||
rowGap && layoutClassName + '--rowGap-' + `${rowGap}`,
|
||||
|
||||
paneWidth && layoutClassName + '--paneWidth-' + `${paneWidth}`,
|
||||
panePosition && layoutClassName + '--panePos-' + `${panePosition}`,
|
||||
hasPaneDivider && layoutClassName + '--hasPaneDivider',
|
||||
paneIsSticky && layoutClassName + '--isPaneSticky',
|
||||
paneWidth && layoutClassName + '--paneWidth-' + `${paneWidth}`,
|
||||
panePosition && layoutClassName + '--panePos-' + `${panePosition}`,
|
||||
hasPaneDivider && layoutClassName + '--hasPaneDivider',
|
||||
paneIsSticky && layoutClassName + '--isPaneSticky',
|
||||
|
||||
layoutClassName + '--responsive-' + `${responsiveVariant}`,
|
||||
responsiveVariant === 'separateRegions' && layoutClassName + '--responsive-primary-' + `${primaryRegion}`,
|
||||
responsiveVariant === 'stackRegions' && panePositionNarrow && layoutClassName + '--responsive-panePos-' + `${panePositionNarrow}`,
|
||||
)}
|
||||
layoutClassName + '--responsive-' + `${responsiveVariant}`,
|
||||
responsiveVariant === 'separateRegions' && layoutClassName + '--responsive-primary-' + `${primaryRegion}`,
|
||||
responsiveVariant === 'stackRegions' &&
|
||||
panePositionNarrow &&
|
||||
layoutClassName + '--responsive-panePos-' + `${panePositionNarrow}`
|
||||
)}
|
||||
>
|
||||
<div className={clsx(
|
||||
layoutClassName + '-wrapper',
|
||||
wrapperSizing && containerClass[wrapperSizing]
|
||||
)}>
|
||||
|
||||
<div className={clsx(layoutClassName + '-wrapper', wrapperSizing && containerClass[wrapperSizing])}>
|
||||
{/* Header */}
|
||||
{hasHeader &&
|
||||
<div className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-header',
|
||||
hasHeaderDivider && layoutClassName + '-header--hasDivider',
|
||||
headerDividerNarrow && layoutClassName + '-region--dividerNarrow-' + headerDividerNarrow + '-after'
|
||||
)}>
|
||||
{hasHeader && (
|
||||
<div
|
||||
className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-header',
|
||||
hasHeaderDivider && layoutClassName + '-header--hasDivider',
|
||||
headerDividerNarrow && layoutClassName + '-region--dividerNarrow-' + headerDividerNarrow + '-after'
|
||||
)}
|
||||
>
|
||||
{headerChildren}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={clsx(
|
||||
layoutClassName + '-columns'
|
||||
)}>
|
||||
)}
|
||||
|
||||
<div className={clsx(layoutClassName + '-columns')}>
|
||||
{/* pane if rendered first */}
|
||||
{panePosition === 'start' &&
|
||||
<div className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-pane',
|
||||
paneDividerNarrow && layoutClassName + '-region--dividerNarrow-' + paneDividerNarrow + (panePositionNarrow === 'start' ? '-after' : '-before')
|
||||
)}>
|
||||
{panePosition === 'start' && (
|
||||
<div
|
||||
className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-pane',
|
||||
paneDividerNarrow &&
|
||||
layoutClassName +
|
||||
'-region--dividerNarrow-' +
|
||||
paneDividerNarrow +
|
||||
(panePositionNarrow === 'start' ? '-after' : '-before')
|
||||
)}
|
||||
>
|
||||
{paneChildren}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
|
||||
{/* content */}
|
||||
<div className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-content'
|
||||
)}>
|
||||
<div className={clsx(layoutClassName + '-region', layoutClassName + '-content')}>
|
||||
{contentWidth ? (
|
||||
<>
|
||||
<div className={layoutClassName + '-content-centered-' + contentWidth}>
|
||||
<div className={'container-' + contentWidth}>
|
||||
{contentChildren}
|
||||
<>
|
||||
<div className={layoutClassName + '-content-centered-' + contentWidth}>
|
||||
<div className={'container-' + contentWidth}>{contentChildren}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{contentChildren}
|
||||
</>
|
||||
<>{contentChildren}</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* pane if rendered last */}
|
||||
{panePosition === 'end' &&
|
||||
<div className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-pane',
|
||||
paneDividerNarrow && layoutClassName + '-region--dividerNarrow-' + paneDividerNarrow + (panePositionNarrow === 'start' ? '-after' : '-before')
|
||||
)}>
|
||||
{paneChildren}
|
||||
</div>}
|
||||
{panePosition === 'end' && (
|
||||
<div
|
||||
className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-pane',
|
||||
paneDividerNarrow &&
|
||||
layoutClassName +
|
||||
'-region--dividerNarrow-' +
|
||||
paneDividerNarrow +
|
||||
(panePositionNarrow === 'start' ? '-after' : '-before')
|
||||
)}
|
||||
>
|
||||
{paneChildren}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* footer */}
|
||||
{hasFooter && <div className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-footer',
|
||||
hasFooterDivider && layoutClassName + '-footer--hasDivider',
|
||||
footerDividerNarrow && layoutClassName + '-region--dividerNarrow-' + footerDividerNarrow + '-before'
|
||||
)}>{footerChildren}</div>}
|
||||
</div>
|
||||
{hasFooter && (
|
||||
<div
|
||||
className={clsx(
|
||||
layoutClassName + '-region',
|
||||
layoutClassName + '-footer',
|
||||
hasFooterDivider && layoutClassName + '-footer--hasDivider',
|
||||
footerDividerNarrow && layoutClassName + '-region--dividerNarrow-' + footerDividerNarrow + '-before'
|
||||
)}
|
||||
>
|
||||
{footerChildren}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* debug */}
|
||||
{_debug &&
|
||||
<style type='text/css'>{`
|
||||
{/* debug */}
|
||||
{_debug && (
|
||||
<style type="text/css">{`
|
||||
.PageLayout-header {
|
||||
background: lightpink;
|
||||
}
|
||||
@ -456,17 +472,17 @@ export const LayoutTemplate = ({
|
||||
background: lightyellow;
|
||||
}
|
||||
`}</style>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground = LayoutTemplate.bind({});
|
||||
Playground.storyName = 'Playground';
|
||||
export const Playground = LayoutTemplate.bind({})
|
||||
Playground.storyName = 'Playground'
|
||||
Playground.parameters = {
|
||||
layout: 'fullscreen',
|
||||
};
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
Playground.args = {
|
||||
_debug: true,
|
||||
wrapperSizing: 'xl',
|
||||
|
||||
@ -2,14 +2,11 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {LayoutTemplate} from './LayoutBeta.stories'
|
||||
import {NavWithSubItems} from '../ActionList/ActionListPatterns.stories'
|
||||
|
||||
|
||||
export default {
|
||||
title: 'Components/Layout/Beta/SplitPageLayout',
|
||||
excludeStories: ['SplitPageLayoutTemplate'],
|
||||
argTypes: {
|
||||
|
||||
// Structure
|
||||
|
||||
innerSpacing: {
|
||||
@ -17,7 +14,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Sets padding to regions individually. `normal` sets padding to 16px, with the `content` region getting 24px horizontal padding on `lg` breakpoints and above. `condensed` keeps the padding always at `16px`.',
|
||||
description:
|
||||
'Sets padding to regions individually. `normal` sets padding to 16px, with the `content` region getting 24px horizontal padding on `lg` breakpoints and above. `condensed` keeps the padding always at `16px`.',
|
||||
table: {
|
||||
category: 'Structure'
|
||||
}
|
||||
@ -39,7 +37,7 @@ export default {
|
||||
paneWidth: {
|
||||
options: ['default', 'narrow', 'wide'],
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Defines the width of the pane.',
|
||||
table: {
|
||||
@ -54,7 +52,8 @@ export default {
|
||||
control: {
|
||||
type: 'inline-radio'
|
||||
},
|
||||
description: 'Defines the maximum width of the content region. `fluid` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.',
|
||||
description:
|
||||
'Defines the maximum width of the content region. `fluid` sets it to full-width. Other values follow container widths from `sm` to `xl`. With smaller widths, the content region will try to stay centered to the viewport area.',
|
||||
table: {
|
||||
category: 'Content'
|
||||
}
|
||||
@ -75,7 +74,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const SplitPageLayoutTemplate = ({
|
||||
_debug,
|
||||
@ -91,37 +90,32 @@ export const SplitPageLayoutTemplate = ({
|
||||
<>
|
||||
<LayoutTemplate
|
||||
_debug={_debug}
|
||||
wrapperSizing='full'
|
||||
outerSpacing='none'
|
||||
wrapperSizing="full"
|
||||
outerSpacing="none"
|
||||
innerSpacing={innerSpacing}
|
||||
columnGap='none'
|
||||
rowGap='none'
|
||||
|
||||
responsiveVariant='separateRegions'
|
||||
columnGap="none"
|
||||
rowGap="none"
|
||||
responsiveVariant="separateRegions"
|
||||
primaryRegion={primaryRegion}
|
||||
|
||||
paneWidth={paneWidth}
|
||||
paneIsSticky={paneIsSticky}
|
||||
panePosition='start'
|
||||
panePosition="start"
|
||||
hasPaneDivider={true}
|
||||
contentWidth={contentWidth}
|
||||
|
||||
hasHeader={false}
|
||||
|
||||
hasFooter={false}
|
||||
|
||||
contentChildren={contentChildren}
|
||||
paneChildren={paneChildren}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground = SplitPageLayoutTemplate.bind({});
|
||||
Playground.storyName = 'Playground';
|
||||
export const Playground = SplitPageLayoutTemplate.bind({})
|
||||
Playground.storyName = 'Playground'
|
||||
Playground.parameters = {
|
||||
layout: 'fullscreen',
|
||||
};
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
Playground.args = {
|
||||
_debug: true,
|
||||
|
||||
@ -140,4 +134,4 @@ Playground.args = {
|
||||
// Children
|
||||
contentChildren: 'content',
|
||||
paneChildren: 'pane'
|
||||
};
|
||||
}
|
||||
|
||||
696
docs/yarn.lock
696
docs/yarn.lock
@ -2368,19 +2368,19 @@
|
||||
escape-string-regexp "^2.0.0"
|
||||
lodash.deburr "^4.1.0"
|
||||
|
||||
"@storybook/addon-a11y@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.4.9.tgz#95cd51ad7a71e4c0a39259df2eb10c382bf324db"
|
||||
integrity sha512-9LwFprh7A3KWmQRTqnyh/wvQ1SX/BewzhBPWqJzq0fGnx9fG35zt0VFtXV13i157wTRDqSO1g92Dgxw9l3S8/A==
|
||||
"@storybook/addon-a11y@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.4.12.tgz#85e19f544ba6f03e65c527678cd96c2044f3da08"
|
||||
integrity sha512-Vq0PS4k7g0LXhV69uLep9cUA+0u78zH3ouLy6Y1KBHp6GV0n5te5UT2n/HsVuskWzOfSubqF1asMmY7onGJkQA==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/theming" "6.4.12"
|
||||
axe-core "^4.2.0"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
@ -2390,17 +2390,17 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/addon-actions@6.4.9", "@storybook/addon-actions@^6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.4.9.tgz#1d4e8c00ad304efe6722043dac759f4716b515ee"
|
||||
integrity sha512-L1N66p/vr+wPUBfrH3qffjNAcWSS/wvuL370T7cWxALA9LLA8yY9U2EpITc5btuCC5QOxApCeyHkFnrBhNa94g==
|
||||
"@storybook/addon-actions@6.4.12", "@storybook/addon-actions@^6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.4.12.tgz#0b25b67e4f0bf1fdcb2812d053efda5832b26889"
|
||||
integrity sha512-R3Ia2dvaPiwJmXcPra8e/gmpU84YovROBdpDttUzZEXMNEbfwHj00aRjZvH9nTKqHUSzrx8ZzGEDDqCMTqVcTg==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/theming" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
fast-deep-equal "^3.1.3"
|
||||
global "^4.4.0"
|
||||
@ -2414,18 +2414,18 @@
|
||||
util-deprecate "^1.0.2"
|
||||
uuid-browser "^3.1.0"
|
||||
|
||||
"@storybook/addon-backgrounds@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.4.9.tgz#89033aed6f01d6a2dc134cbdb1ce0c46afd130ec"
|
||||
integrity sha512-/jqUZvk+x8TpDedyFnJamSYC91w/e8prj42xtgLG4+yBlb0UmewX7BAq9i/lhowhUjuLKaOX9E8E0AHftg8L6A==
|
||||
"@storybook/addon-backgrounds@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.4.12.tgz#1153df16823861158f8e9c8d83aab91b3dc9aaf3"
|
||||
integrity sha512-w26A41spqJJoPdWz3eZgoGzg7NYkVh0/per6eQmurqRzc2v4qEUptWSZglGrMjo44gS/38tUEhJ1kYeTSHPdyA==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/theming" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
memoizerific "^1.11.3"
|
||||
@ -2433,28 +2433,28 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/addon-controls@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.4.9.tgz#286a184336a80981fdd805f44a68f60fb6e38e73"
|
||||
integrity sha512-2eqtiYugCAOw8MCv0HOfjaZRQ4lHydMYoKIFy/QOv6/mjcJeG9dF01dA30n3miErQ18BaVyAB5+7rrmuqMwXVA==
|
||||
"@storybook/addon-controls@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.4.12.tgz#7dce5ad2c6b061f255cf40a6a97edc14bfd5866d"
|
||||
integrity sha512-rLCPdk4MykUlbvA68kmLLOBL59Fy+wF3qt3cvTnSvyasRmtXl9VBpBQ0/rQeoFkGlFQj4Ss4IO4mj6+jUHRS4Q==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-common" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-common" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
lodash "^4.17.21"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/addon-docs@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.4.9.tgz#dc34c6152085043a771623b2de344bc9d91f0563"
|
||||
integrity sha512-sJvnbp6Z+e7B1+vDE8gZVhCg1eNotIa7bx9LYd1Y2QwJ4PEv9hE2YxnzmWt3NZJGtrn4gdGaMCk7pmksugHi7g==
|
||||
"@storybook/addon-docs@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.4.12.tgz#ba7c317bb76306268e2696f338ca5f23cde7d473"
|
||||
integrity sha512-xeaxa2mtuoy6KA3NSoKEHEzVK8WAwTmxo2o0o5A7gISkdIzp7cxBACcTWoYdVJkqLlWG+OBmQWL1bmWRIDXr0Q==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/generator" "^7.12.11"
|
||||
@ -2465,21 +2465,21 @@
|
||||
"@mdx-js/loader" "^1.6.22"
|
||||
"@mdx-js/mdx" "^1.6.22"
|
||||
"@mdx-js/react" "^1.6.22"
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/builder-webpack4" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/builder-webpack4" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/csf-tools" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/postinstall" "6.4.9"
|
||||
"@storybook/preview-web" "6.4.9"
|
||||
"@storybook/source-loader" "6.4.9"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/csf-tools" "6.4.12"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/postinstall" "6.4.12"
|
||||
"@storybook/preview-web" "6.4.12"
|
||||
"@storybook/source-loader" "6.4.12"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
acorn "^7.4.1"
|
||||
acorn-jsx "^5.3.1"
|
||||
acorn-walk "^7.2.0"
|
||||
@ -2503,36 +2503,36 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/addon-essentials@^6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.4.9.tgz#e761a61a9ac9809b8a5d8b6f7c5a1b50f0e2cd91"
|
||||
integrity sha512-3YOtGJsmS7A4aIaclnEqTgO+fUEX63pHq2CvqIKPGLVPgLmn6MnEhkkV2j30MfAkoe3oynLqFBvkCdYwzwJxNQ==
|
||||
"@storybook/addon-essentials@^6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.4.12.tgz#fb4a2053a1d828655555024af3e07c811421c650"
|
||||
integrity sha512-UvHiW7Lz730ATdd2AVCbShiJ459AefGebvp1E2fRfgIJksMgFtYFYRC8E4gmuKtqEfUVCbCm/5oNh5XPhR70+g==
|
||||
dependencies:
|
||||
"@storybook/addon-actions" "6.4.9"
|
||||
"@storybook/addon-backgrounds" "6.4.9"
|
||||
"@storybook/addon-controls" "6.4.9"
|
||||
"@storybook/addon-docs" "6.4.9"
|
||||
"@storybook/addon-measure" "6.4.9"
|
||||
"@storybook/addon-outline" "6.4.9"
|
||||
"@storybook/addon-toolbars" "6.4.9"
|
||||
"@storybook/addon-viewport" "6.4.9"
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/addon-actions" "6.4.12"
|
||||
"@storybook/addon-backgrounds" "6.4.12"
|
||||
"@storybook/addon-controls" "6.4.12"
|
||||
"@storybook/addon-docs" "6.4.12"
|
||||
"@storybook/addon-measure" "6.4.12"
|
||||
"@storybook/addon-outline" "6.4.12"
|
||||
"@storybook/addon-toolbars" "6.4.12"
|
||||
"@storybook/addon-viewport" "6.4.12"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
regenerator-runtime "^0.13.7"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/addon-links@^6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.4.9.tgz#2d0a7f813dcef160feb357f6548bb1a7ba425d7d"
|
||||
integrity sha512-xXFz/bmw67u4+zPVqJdiJkCtGrO2wAhcsLc4QSTc2+Xgkvkk7ulcRguiujAy5bfinhPa6U1vpJrrg5GFGV+trA==
|
||||
"@storybook/addon-links@^6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.4.12.tgz#7781e6d29ba72623dc6cf8e7aeeb23af16a17af1"
|
||||
integrity sha512-4azfzgcI/3FuVG5jdatCZ2uAHwT8Ic1NIshqhTw1OI4SGATgKvaF/bY6TnRPAZfp6dikgachViIlgcO7mQSl0g==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/router" "6.4.9"
|
||||
"@storybook/router" "6.4.12"
|
||||
"@types/qs" "^6.9.5"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
@ -2541,30 +2541,30 @@
|
||||
regenerator-runtime "^0.13.7"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/addon-measure@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.4.9.tgz#d4446e0b0686f4f25bbd7eee8c4cf296d8bea216"
|
||||
integrity sha512-c7r98kZM0i7ZrNf0BZe/12BwTYGDLUnmyNcLhugquvezkm32R1SaqXF8K1bGkWkSuzBvt49lAXXPPGUh+ByWEQ==
|
||||
"@storybook/addon-measure@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.4.12.tgz#f045ae1fe979d77d20b9c28678ed1ef6beba550f"
|
||||
integrity sha512-2wpkFsH6f53JouE6NwmEiwQGq0p4jJUFMx2pdEIeo9ax1iEZ1Y0b9cxscnT/1l+f8pyTE2ABBQLSpRWpL2eyoQ==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
|
||||
"@storybook/addon-outline@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.4.9.tgz#0f6b20eb41580686cca4b9f12937932dd5f51c64"
|
||||
integrity sha512-pXXfqisYfdoxyJuSogNBOUiqIugv0sZGYDJXuwEgEDZ27bZD6fCQmsK3mqSmRzAfXwDqTKvWuu2SRbEk/cRRGA==
|
||||
"@storybook/addon-outline@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.4.12.tgz#23925d41e5d89f7693ba2a3f87ca774fa26db19c"
|
||||
integrity sha512-wZNWpLb5nInhUOxsAwIzY/TSTQGxHf33Z3JHCnFE20GPBdOIN6RYprCqaPzjWT6qkrnvRHXwHPXXjQdKj07pBg==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
@ -2582,53 +2582,76 @@
|
||||
postcss-loader "^4.2.0"
|
||||
style-loader "^1.3.0"
|
||||
|
||||
"@storybook/addon-toolbars@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.4.9.tgz#147534d0b185a1782f3381a47c627b4a4193297d"
|
||||
integrity sha512-fep1lLDcyaQJdR8rC/lJTamiiJ8Ilio580d9aXDM651b7uHqhxM0dJvM9hObBU8dOj/R3hIAszgTvdTzYlL2cQ==
|
||||
"@storybook/addon-toolbars@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.4.12.tgz#e598fe0a7b639d6a943c0c4a779fb2960619b68e"
|
||||
integrity sha512-FB908gujC4XB3Gf5KepaWyKiTR3NSGs2Nltcf2LpkC7RDgdeegucuPBnZLFsVkzpt8aOuMgNO/YciBhc4JH2Qg==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
regenerator-runtime "^0.13.7"
|
||||
|
||||
"@storybook/addon-viewport@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.4.9.tgz#73753ff62043d3d6e6d845590ed70caf775af960"
|
||||
integrity sha512-iqDcfbOG3TClybDEIi+hOKq8PDKNldyAiqBeak4AfGp+lIZ4NvhHgS5RCNylMVKpOUMbGIeWiSFxQ/oglEN1zA==
|
||||
"@storybook/addon-viewport@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.4.12.tgz#1aa75f9c4f043ec82ba2c03397373c8e558ae255"
|
||||
integrity sha512-tCwVanwONQssQAMtMIOcVghmPgZN28xfUmTkGYtlmFNoDQp0G2vO/173Ynz9oe0nDwlDsqgtil12FCKulbrS7w==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
memoizerific "^1.11.3"
|
||||
prop-types "^15.7.2"
|
||||
regenerator-runtime "^0.13.7"
|
||||
|
||||
"@storybook/addons@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.4.9.tgz#43b5dabf6781d863fcec0a0b293c236b4d5d4433"
|
||||
integrity sha512-y+oiN2zd+pbRWwkf6aQj4tPDFn+rQkrv7fiVoMxsYub+kKyZ3CNOuTSJH+A1A+eBL6DmzocChUyO6jvZFuh6Dg==
|
||||
"@storybook/addons@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.4.12.tgz#87e5d37d54478582708b2b4cce57b4cf0abb952f"
|
||||
integrity sha512-oxRE9cKq104sCPmII9xCZwZb7WevzoXnW7o4/v/a+uhzRCDNSGimh5GDCWQtMViRgw8JuFWKwCxGDSvlhueLOg==
|
||||
dependencies:
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/router" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/router" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
"@types/webpack-env" "^1.16.0"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
regenerator-runtime "^0.13.7"
|
||||
|
||||
"@storybook/api@6.4.9", "@storybook/api@^6.1.21":
|
||||
"@storybook/api@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.4.12.tgz#47bf0085c681acdae2f35d3c314745c591b0ddf6"
|
||||
integrity sha512-xdip9JXC7+0JUvsZ07YMS3ktQYJ24/nYNp8Y7OEhHyh/6S/WfIN+gJZ5kCDTtIv94VXw2Ur6QdvzX9OJNzKDdQ==
|
||||
dependencies:
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/router" "6.4.12"
|
||||
"@storybook/semver" "^7.3.2"
|
||||
"@storybook/theming" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
fast-deep-equal "^3.1.3"
|
||||
global "^4.4.0"
|
||||
lodash "^4.17.21"
|
||||
memoizerific "^1.11.3"
|
||||
regenerator-runtime "^0.13.7"
|
||||
store2 "^2.12.0"
|
||||
telejson "^5.3.2"
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/api@^6.1.21":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.4.9.tgz#6187d08658629580f0a583f2069d55b34964b34a"
|
||||
integrity sha512-U+YKcDQg8xal9sE5eSMXB9vcqk8fD1pSyewyAjjbsW5hV0B3L3i4u7z/EAD9Ujbnor+Cvxq+XGvp+Qnc5Gd40A==
|
||||
@ -2651,10 +2674,10 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/builder-webpack4@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.4.9.tgz#86cd691c856eeb7a6a7bcafa57e9a66c1e0b9906"
|
||||
integrity sha512-nDbXDd3A8dvalCiuBZuUT6/GQP14+fuxTj5g+AppCgV1gLO45lXWtX75Hc0IbZrIQte6tDg5xeFQamZSLPMcGg==
|
||||
"@storybook/builder-webpack4@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.4.12.tgz#bb500f7c89c4063710b520493d17a3217ee097c6"
|
||||
integrity sha512-TS9rZdykeaURiLRA6JaP9AtrT9VF7O+UTMBZbSlKk3L/v67/WqfpsXsjB9DYHd8xlAlQJ/EBrWqPCIjORpwMAQ==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/plugin-proposal-class-properties" "^7.12.1"
|
||||
@ -2677,22 +2700,22 @@
|
||||
"@babel/preset-env" "^7.12.11"
|
||||
"@babel/preset-react" "^7.12.10"
|
||||
"@babel/preset-typescript" "^7.12.7"
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/channel-postmessage" "6.4.9"
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-common" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/preview-web" "6.4.9"
|
||||
"@storybook/router" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/channel-postmessage" "6.4.12"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-common" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/preview-web" "6.4.12"
|
||||
"@storybook/router" "6.4.12"
|
||||
"@storybook/semver" "^7.3.2"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/ui" "6.4.9"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
"@storybook/ui" "6.4.12"
|
||||
"@types/node" "^14.0.10"
|
||||
"@types/webpack" "^4.41.26"
|
||||
autoprefixer "^9.8.6"
|
||||
@ -2727,30 +2750,39 @@
|
||||
webpack-hot-middleware "^2.25.1"
|
||||
webpack-virtual-modules "^0.2.2"
|
||||
|
||||
"@storybook/channel-postmessage@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.4.9.tgz#b20b7d66f0f2a8ba39fe9002f3a3dc16d9e1f681"
|
||||
integrity sha512-0Oif4e6/oORv4oc2tHhIRts9faE/ID9BETn4uqIUWSl2CX1wYpKYDm04rEg3M6WvSzsi+6fzoSFvkr9xC5Ns2w==
|
||||
"@storybook/channel-postmessage@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.4.12.tgz#5da3758c238ca3878cec3cad012cc52ba7cc3ade"
|
||||
integrity sha512-zVHOa++JmcBYb8kNvaqkwLtNXWyaJ2jFZpZ/VJpe+q+pzMoM199DqRfahZ0xasPJC3gMlRxFNYCWZCqIIYFPoQ==
|
||||
dependencies:
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
qs "^6.10.0"
|
||||
telejson "^5.3.2"
|
||||
|
||||
"@storybook/channel-websocket@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.4.9.tgz#f012840894f73bac289ddcdc57efb385c4a0b7ef"
|
||||
integrity sha512-R1O5yrNtN+dIAghqMXUqoaH7XWBcrKi5miVRn7QelKG3qZwPL8HQa7gIPc/b6S2D6hD3kQdSuv/zTIjjMg7wyw==
|
||||
"@storybook/channel-websocket@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.4.12.tgz#752a64a61640c0b78096752abcc8ca7f13152343"
|
||||
integrity sha512-uwO7KOR2EMdnDRneWTEIOMbIXNDDTAPpy3hJOO8JGTbGtVbimQBvlQG2ZkbZxxTl0bALQTvi8BvePMEcWlu8sw==
|
||||
dependencies:
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
telejson "^5.3.2"
|
||||
|
||||
"@storybook/channels@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.4.12.tgz#f415fee7c30de2df858118bd7587f60f3f7b75e4"
|
||||
integrity sha512-7vAsG4QG8+yLzqps9eI6QCYN03Jc2oeJINfsVdUFB9VOfEGRZ3JFBdC5MSaaMnUPSLUYZraAZ4FxM6nIKgJ1IA==
|
||||
dependencies:
|
||||
core-js "^3.8.2"
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/channels@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.4.9.tgz#132c574d3fb2e6aaa9c52312c592794699b9d8ec"
|
||||
@ -2760,18 +2792,18 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/client-api@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.4.9.tgz#e3d90c66356d6f53f8ceb4f31753f670f704fde0"
|
||||
integrity sha512-1IljlTr+ea2pIr6oiPhygORtccOdEb7SqaVzWDfLCHOhUnJ2Ka5UY9ADqDa35jvSSdRdynfk9Yl5/msY0yY1yg==
|
||||
"@storybook/client-api@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.4.12.tgz#61a7b33c2ccce2cd0da150127d2c67c944650639"
|
||||
integrity sha512-WLHkXnIOJzzmaTHAeOR94LIUMbgpQnQGokFOuda/tJ5HwhDFXVFUKgoK45eAfOyYVTcDaXSEFjpCF++qB/txFA==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/channel-postmessage" "6.4.9"
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/channel-postmessage" "6.4.12"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@types/qs" "^6.9.5"
|
||||
"@types/webpack-env" "^1.16.0"
|
||||
core-js "^3.8.2"
|
||||
@ -2786,6 +2818,14 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/client-logger@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.4.12.tgz#e3841029df44ae3a71991720e2f4b7033422befd"
|
||||
integrity sha512-OxGfjjJkfIHAGgtRalUIkTG5ECGgZIU8jxvtfnB6SQKKR7cO6ldYsf+UatqkY7+CtraoqGU9TMcv9BkXsdFnAw==
|
||||
dependencies:
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
|
||||
"@storybook/client-logger@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.4.9.tgz#ef6af30fac861fea69c8917120ed06b4c2f0b54e"
|
||||
@ -2794,7 +2834,37 @@
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
|
||||
"@storybook/components@6.4.9", "@storybook/components@^6.1.21":
|
||||
"@storybook/components@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.4.12.tgz#3eac6466c02d80810156d9644db79195e810b206"
|
||||
integrity sha512-k/br1xG3DsltqO8EE2MEmCTwXe3MjUhfw4aSCmfmvsRpuFYgfMxEBEUKeNWD3CtDow61BLYtGcKRBv4Y/OAlUQ==
|
||||
dependencies:
|
||||
"@popperjs/core" "^2.6.0"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/theming" "6.4.12"
|
||||
"@types/color-convert" "^2.0.0"
|
||||
"@types/overlayscrollbars" "^1.12.0"
|
||||
"@types/react-syntax-highlighter" "11.0.5"
|
||||
color-convert "^2.0.1"
|
||||
core-js "^3.8.2"
|
||||
fast-deep-equal "^3.1.3"
|
||||
global "^4.4.0"
|
||||
lodash "^4.17.21"
|
||||
markdown-to-jsx "^7.1.3"
|
||||
memoizerific "^1.11.3"
|
||||
overlayscrollbars "^1.13.1"
|
||||
polished "^4.0.5"
|
||||
prop-types "^15.7.2"
|
||||
react-colorful "^5.1.2"
|
||||
react-popper-tooltip "^3.1.1"
|
||||
react-syntax-highlighter "^13.5.3"
|
||||
react-textarea-autosize "^8.3.0"
|
||||
regenerator-runtime "^0.13.7"
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/components@^6.1.21":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.4.9.tgz#caed59eb3f09d1646da748186f718a0e54fb8fd7"
|
||||
integrity sha512-uOUR97S6kjptkMCh15pYNM1vAqFXtpyneuonmBco5vADJb3ds0n2a8NeVd+myIbhIXn55x0OHKiSwBH/u7swCQ==
|
||||
@ -2824,21 +2894,21 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/core-client@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.4.9.tgz#324119a67609f758e244a7d58bac00e62020a21f"
|
||||
integrity sha512-LZSpTtvBlpcn+Ifh0jQXlm/8wva2zZ2v13yxYIxX6tAwQvmB54U0N4VdGVmtkiszEp7TQUAzA8Pcyp4GWE+UMA==
|
||||
"@storybook/core-client@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.4.12.tgz#b27b67dcd222b2ef45e3f3995650a514c16d8b33"
|
||||
integrity sha512-xKD3u/Taw2NafO6QQyl0q7jJ+C/8H8XQj6C5POVd5LUju/pT1K4Udg1wsAJpc1BtJU8Gtzj+8hxC0s9Zi+y0WQ==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/channel-postmessage" "6.4.9"
|
||||
"@storybook/channel-websocket" "6.4.9"
|
||||
"@storybook/client-api" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/channel-postmessage" "6.4.12"
|
||||
"@storybook/channel-websocket" "6.4.12"
|
||||
"@storybook/client-api" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/preview-web" "6.4.9"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/ui" "6.4.9"
|
||||
"@storybook/preview-web" "6.4.12"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@storybook/ui" "6.4.12"
|
||||
airbnb-js-shims "^2.2.1"
|
||||
ansi-to-html "^0.6.11"
|
||||
core-js "^3.8.2"
|
||||
@ -2850,10 +2920,10 @@
|
||||
unfetch "^4.2.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/core-common@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.4.9.tgz#1a892903061f927b8f7b9fa8d25273a2f5c9e227"
|
||||
integrity sha512-wVHRfUGnj/Tv8nGjv128NDQ5Zp6c63rSXd1lYLzfZPTJmGOz4rpPPez2IZSnnDwbAWeqUSMekFVZPj4v6yuujQ==
|
||||
"@storybook/core-common@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.4.12.tgz#cdc0e8e2b3bb9ea9cac104d6159eb8eae757f9c4"
|
||||
integrity sha512-4xxFCZChMB23xeq3xARtccUyQQQwYgKkzasWKuUaC4E9Zj1h04IxBa92rYMey5HNlGUvAvQ2I/kRo5mg2GRmZw==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/plugin-proposal-class-properties" "^7.12.1"
|
||||
@ -2876,7 +2946,7 @@
|
||||
"@babel/preset-react" "^7.12.10"
|
||||
"@babel/preset-typescript" "^7.12.7"
|
||||
"@babel/register" "^7.12.1"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/semver" "^7.3.2"
|
||||
"@types/node" "^14.0.10"
|
||||
"@types/pretty-hrtime" "^1.0.0"
|
||||
@ -2905,6 +2975,13 @@
|
||||
util-deprecate "^1.0.2"
|
||||
webpack "4"
|
||||
|
||||
"@storybook/core-events@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.12.tgz#1e0080769f68b9fe36af0ca687b32a13cb48ae67"
|
||||
integrity sha512-sulwOkyoIXN2QrbOxOTnnZ+yuOK1IChhzPZ5silHv5PJApo1nMFhiR5A9UOr6lTtk+cpNipuL6W2l8qMOSqG+Q==
|
||||
dependencies:
|
||||
core-js "^3.8.2"
|
||||
|
||||
"@storybook/core-events@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.9.tgz#7febedb8d263fbd6e4a69badbfcdce0101e6f782"
|
||||
@ -2912,22 +2989,22 @@
|
||||
dependencies:
|
||||
core-js "^3.8.2"
|
||||
|
||||
"@storybook/core-server@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.4.9.tgz#593fd4cc21a05c908e0eed20767eb6c9cddad428"
|
||||
integrity sha512-Ht/e17/SNW9BgdvBsnKmqNrlZ6CpHeVsClEUnauMov8I5rxjvKBVmI/UsbJJIy6H6VLiL/RwrA3RvLoAoZE8dA==
|
||||
"@storybook/core-server@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.4.12.tgz#d5daa9312f0c62d11bc8ff02fec726cc91a33ef4"
|
||||
integrity sha512-mn/gk6nuBvzb9opcPdDG37cnPoMuwIuyn1eaU4ew2oFjrveLHmgJwh6LZ1A/kfJXvcNE9Z/YI4N1Ctvfxqm7/A==
|
||||
dependencies:
|
||||
"@discoveryjs/json-ext" "^0.5.3"
|
||||
"@storybook/builder-webpack4" "6.4.9"
|
||||
"@storybook/core-client" "6.4.9"
|
||||
"@storybook/core-common" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/builder-webpack4" "6.4.12"
|
||||
"@storybook/core-client" "6.4.12"
|
||||
"@storybook/core-common" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/csf-tools" "6.4.9"
|
||||
"@storybook/manager-webpack4" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/csf-tools" "6.4.12"
|
||||
"@storybook/manager-webpack4" "6.4.12"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/semver" "^7.3.2"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@types/node" "^14.0.10"
|
||||
"@types/node-fetch" "^2.5.7"
|
||||
"@types/pretty-hrtime" "^1.0.0"
|
||||
@ -2935,7 +3012,7 @@
|
||||
better-opn "^2.1.1"
|
||||
boxen "^5.1.2"
|
||||
chalk "^4.1.0"
|
||||
cli-table3 "0.6.0"
|
||||
cli-table3 "^0.6.1"
|
||||
commander "^6.2.1"
|
||||
compression "^1.7.4"
|
||||
core-js "^3.8.2"
|
||||
@ -2960,18 +3037,18 @@
|
||||
webpack "4"
|
||||
ws "^8.2.3"
|
||||
|
||||
"@storybook/core@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.4.9.tgz#4bf910d7322b524f8166c97c28875e1e3775f391"
|
||||
integrity sha512-Mzhiy13loMSd3PCygK3t7HIT3X3L35iZmbe6+2xVbVmc/3ypCmq4PQALCUoDOGk37Ifrhop6bo6sl4s9YQ6UFw==
|
||||
"@storybook/core@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.4.12.tgz#2b7ddf79f8dd6837086ca9c2a91ff6f26fffef87"
|
||||
integrity sha512-R9mtesIhQQw258QjfWYnTSGWKChwdyrWUku/9oDUswsJ18nDYRBQ588pEb2QSpVa5eD3+evVC6fYCDVnaE8PcA==
|
||||
dependencies:
|
||||
"@storybook/core-client" "6.4.9"
|
||||
"@storybook/core-server" "6.4.9"
|
||||
"@storybook/core-client" "6.4.12"
|
||||
"@storybook/core-server" "6.4.12"
|
||||
|
||||
"@storybook/csf-tools@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.4.9.tgz#7cccb905875ba5962dda83825f763a111932464b"
|
||||
integrity sha512-zbgsx9vY5XOA9bBmyw+KyuRspFXAjEJ6I3d/6Z3G1kNBeOEj9i3DT7O99Rd/THfL/3mWl8DJ/7CJVPk1ZYxunA==
|
||||
"@storybook/csf-tools@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.4.12.tgz#6b37a94e7b3dbfa50d0adea0103a2bc544e29e1e"
|
||||
integrity sha512-8fAqNSxNvEpO03ynjGDHY8rQbpJzs0aejWMFzHp9bqvtCWgYMNX+gcjFeVvJXjpi91+XmNtE0cS4UZGCy8AbhQ==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/generator" "^7.12.11"
|
||||
@ -2998,20 +3075,20 @@
|
||||
dependencies:
|
||||
lodash "^4.17.15"
|
||||
|
||||
"@storybook/manager-webpack4@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.4.9.tgz#76edd6f2c627dc64d3362a265c2fe6ae7ee22507"
|
||||
integrity sha512-828x3rqMuzBNSb13MSDo2nchY7fuywh+8+Vk+fn00MvBYJjogd5RQFx5ocwhHzmwXbnESIerlGwe81AzMck8ng==
|
||||
"@storybook/manager-webpack4@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.4.12.tgz#eb0ef11d294d49a63df8bd090bf1ddcf695bd872"
|
||||
integrity sha512-S1mCURQ+dV6a9qNrnzudrV5N4cQCgxNnw+MICGVSD275WfCiZQb3Wl3Vnet5Gmhb/4Y/ElUYGLY0d6bHqibTGA==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.10"
|
||||
"@babel/plugin-transform-template-literals" "^7.12.1"
|
||||
"@babel/preset-react" "^7.12.10"
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/core-client" "6.4.9"
|
||||
"@storybook/core-common" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/ui" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/core-client" "6.4.12"
|
||||
"@storybook/core-common" "6.4.12"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/theming" "6.4.12"
|
||||
"@storybook/ui" "6.4.12"
|
||||
"@types/node" "^14.0.10"
|
||||
"@types/webpack" "^4.41.26"
|
||||
babel-loader "^8.0.0"
|
||||
@ -3040,7 +3117,18 @@
|
||||
webpack-dev-middleware "^3.7.3"
|
||||
webpack-virtual-modules "^0.2.2"
|
||||
|
||||
"@storybook/node-logger@6.4.9", "@storybook/node-logger@^6.1.14":
|
||||
"@storybook/node-logger@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.4.12.tgz#fd91be1de469361a713f018c0ddb58af14ff0abc"
|
||||
integrity sha512-oVWmafSzTEmqsb9lbhoDtKXslDC9pZcSvpKc1aK+8C0apUdirit1eH0sb5oT8roc9EPu9uFWO2HEgyMOdkHwnQ==
|
||||
dependencies:
|
||||
"@types/npmlog" "^4.1.2"
|
||||
chalk "^4.1.0"
|
||||
core-js "^3.8.2"
|
||||
npmlog "^5.0.1"
|
||||
pretty-hrtime "^1.0.3"
|
||||
|
||||
"@storybook/node-logger@^6.1.14":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.4.9.tgz#7c28f16f5c61feda8f45fa2c06000ebb87b57df7"
|
||||
integrity sha512-giil8dA85poH+nslKHIS9tSxp4MP4ensOec7el6GwKiqzAQXITrm3b7gw61ETj39jAQeLIcQYGHLq1oqQo4/YQ==
|
||||
@ -3051,10 +3139,10 @@
|
||||
npmlog "^5.0.1"
|
||||
pretty-hrtime "^1.0.3"
|
||||
|
||||
"@storybook/postinstall@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.4.9.tgz#7b011a2e188bcc54180b16d06f21c9d52a5324ac"
|
||||
integrity sha512-LNI5ku+Q4DI7DD3Y8liYVgGPasp8r/5gzNLSJZ1ad03OW/mASjhSsOKp2eD8Jxud2T5JDe3/yKH9u/LP6SepBQ==
|
||||
"@storybook/postinstall@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.4.12.tgz#d57c6fd9d25af12d7e46b2481d94eb22ca494fe2"
|
||||
integrity sha512-zEnYXcxgH94PsKlQccpuU7Dmgx/UVt0fUzzbJ+NzdRDj3pokP3tuIsJw5lgsC8R/8LCq6ivVSJRODeY9cFPhaQ==
|
||||
dependencies:
|
||||
core-js "^3.8.2"
|
||||
|
||||
@ -3063,17 +3151,17 @@
|
||||
resolved "https://registry.yarnpkg.com/@storybook/preset-scss/-/preset-scss-1.0.3.tgz#8ac834545c642dada0f64f510ef08dfb882e9737"
|
||||
integrity sha512-o9Iz6wxPeNENrQa2mKlsDKynBfqU2uWaRP80HeWp4TkGgf7/x3DVF2O7yi9N0x/PI1qzzTTpxlQ90D62XmpiTw==
|
||||
|
||||
"@storybook/preview-web@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.4.9.tgz#21f7d251af0de64ae796834ead08ae4ed67e6456"
|
||||
integrity sha512-fMB/akK14oc+4FBkeVJBtZQdxikOraXQSVn6zoVR93WVDR7JVeV+oz8rxjuK3n6ZEWN87iKH946k4jLoZ95tdw==
|
||||
"@storybook/preview-web@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.4.12.tgz#3a16d6b2e2514babd23f8666b0127d4009c18ba7"
|
||||
integrity sha512-7m9d6Tk7mPsvJUiIE9p1/rmJhh97ba1vdPxR4Z1l9Z9b/UQgE4W5n4MtgtqIGGt7RXdmhTAjgEI/J8BBFDpCuA==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/channel-postmessage" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/channel-postmessage" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/store" "6.4.12"
|
||||
ansi-to-html "^0.6.11"
|
||||
core-js "^3.8.2"
|
||||
global "^4.4.0"
|
||||
@ -3098,22 +3186,22 @@
|
||||
react-docgen-typescript "^2.0.0"
|
||||
tslib "^2.0.0"
|
||||
|
||||
"@storybook/react@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.4.9.tgz#0b5effb07cf98bc73302b5486b9355ed545ee9fa"
|
||||
integrity sha512-GVbCeii2dIKSD66pAdn9bY7mRoOzBE6ll+vRDW1n00FIvGfckmoIZtQHpurca7iNTAoufv8+t0L9i7IItdrUuw==
|
||||
"@storybook/react@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.4.12.tgz#6451dd8f553f09b1f71d901663030da0a47ffb8a"
|
||||
integrity sha512-+o/Gb6QvQlMs6pPSElW86ebIB1maditHEXADNvm3VwKfz7SrLKB7rbZuE2WmhxzlW6NI11xGVImUv19QG3SH7g==
|
||||
dependencies:
|
||||
"@babel/preset-flow" "^7.12.1"
|
||||
"@babel/preset-react" "^7.12.10"
|
||||
"@pmmmwh/react-refresh-webpack-plugin" "^0.5.1"
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/core" "6.4.9"
|
||||
"@storybook/core-common" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/core" "6.4.12"
|
||||
"@storybook/core-common" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
"@storybook/node-logger" "6.4.9"
|
||||
"@storybook/node-logger" "6.4.12"
|
||||
"@storybook/react-docgen-typescript-plugin" "1.0.2-canary.253f8c1.0"
|
||||
"@storybook/semver" "^7.3.2"
|
||||
"@storybook/store" "6.4.9"
|
||||
"@storybook/store" "6.4.12"
|
||||
"@types/webpack-env" "^1.16.0"
|
||||
babel-plugin-add-react-displayname "^0.0.5"
|
||||
babel-plugin-named-asset-import "^0.3.1"
|
||||
@ -3129,6 +3217,23 @@
|
||||
ts-dedent "^2.0.0"
|
||||
webpack "4"
|
||||
|
||||
"@storybook/router@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.4.12.tgz#24a2c898fab8a2b98225b9abcae821284b10ad14"
|
||||
integrity sha512-genly+1DOQ5O6MSa1RY5cY23FmvREXQGB5nxssR5XUZlZO2DL6kQwUgp+Aj/7P2QvYuiVfs7xeItspuONlhvnQ==
|
||||
dependencies:
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
fast-deep-equal "^3.1.3"
|
||||
global "^4.4.0"
|
||||
history "5.0.0"
|
||||
lodash "^4.17.21"
|
||||
memoizerific "^1.11.3"
|
||||
qs "^6.10.0"
|
||||
react-router "^6.0.0"
|
||||
react-router-dom "^6.0.0"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/router@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.4.9.tgz#7cc3f85494f4e14d38925e2802145df69a071201"
|
||||
@ -3154,13 +3259,13 @@
|
||||
core-js "^3.6.5"
|
||||
find-up "^4.1.0"
|
||||
|
||||
"@storybook/source-loader@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.4.9.tgz#918fe93e4bd52622a664398db79d5f71b384ce0b"
|
||||
integrity sha512-J/Jpcc15hnWa2DB/EZ4gVJvdsY3b3CDIGW/NahuNXk36neS+g4lF3qqVNAEqQ1pPZ0O8gMgazyZPGm0MHwUWlw==
|
||||
"@storybook/source-loader@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.4.12.tgz#5cd828f02a50d09b7b46566583af47afca0b5083"
|
||||
integrity sha512-K3gVGYjjZ3Azvy2SpwjyB7cQ3bZrBgTvdlRijXxLExjpgy7E9p4BzwpyaIBkUCSLBKTZLmhcUP3VJewoQuoUKA==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
core-js "^3.8.2"
|
||||
estraverse "^5.2.0"
|
||||
@ -3170,14 +3275,14 @@
|
||||
prettier "^2.2.1"
|
||||
regenerator-runtime "^0.13.7"
|
||||
|
||||
"@storybook/store@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.4.9.tgz#613c6f13271276837c6a603a16199d2abf90153e"
|
||||
integrity sha512-H30KfiM2XyGMJcLaOepCEUsU7S3C/f7t46s6Nhw0lc5w/6HTQc2jGV3GgG3lUAUAzEQoxmmu61w3N2a6eyRzmg==
|
||||
"@storybook/store@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.4.12.tgz#ab4b694f63c6ea50fd0b22e3994fed8ba6c7b7aa"
|
||||
integrity sha512-Sgjo8i6pqeaEWaD5jMVo6Z2fhpDX9lmhnq6UFKpzXlni7qBNjgQPyETH95nTDoApOd5VLsgdvkGMWiKBLdFbUQ==
|
||||
dependencies:
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/csf" "0.0.2--canary.87bc651.0"
|
||||
core-js "^3.8.2"
|
||||
fast-deep-equal "^3.1.3"
|
||||
@ -3191,6 +3296,24 @@
|
||||
ts-dedent "^2.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
"@storybook/theming@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.4.12.tgz#a6f15284ffe9c03d91335203903c38883855c8f3"
|
||||
integrity sha512-f40OgKpI0ymnCiXaY2KeDqYUrHBVxxYYww1WfyQXMv8tv5Mx64nqD8IL/Vyf6t/Wdl5jLdgbgLITwqIij9WJPg==
|
||||
dependencies:
|
||||
"@emotion/core" "^10.1.1"
|
||||
"@emotion/is-prop-valid" "^0.8.6"
|
||||
"@emotion/styled" "^10.0.27"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
core-js "^3.8.2"
|
||||
deep-object-diff "^1.1.0"
|
||||
emotion-theming "^10.0.27"
|
||||
global "^4.4.0"
|
||||
memoizerific "^1.11.3"
|
||||
polished "^4.0.5"
|
||||
resolve-from "^5.0.0"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/theming@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.4.9.tgz#8ece44007500b9a592e71eca693fbeac90803b0d"
|
||||
@ -3209,21 +3332,21 @@
|
||||
resolve-from "^5.0.0"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/ui@6.4.9":
|
||||
version "6.4.9"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.4.9.tgz#c01413ca919ede20f84d19e556bf93dd2e7c5110"
|
||||
integrity sha512-lJbsaMTH4SyhqUTmt+msSYI6fKSSfOnrzZVu6bQ73+MfRyGKh1ki2Nyhh+w8BiGEIOz02WlEpZC0y11FfgEgXw==
|
||||
"@storybook/ui@6.4.12":
|
||||
version "6.4.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.4.12.tgz#7b460e4128b750d79a39f097356cef5a5f370318"
|
||||
integrity sha512-POkMFc0pTH6u/EiRpZpLCD1iRUektWhuWnF2cQEgP00ZY8rveOS6lfLZSnmrFKfkmVW9OARH4fcnlzNpwu1y6A==
|
||||
dependencies:
|
||||
"@emotion/core" "^10.1.1"
|
||||
"@storybook/addons" "6.4.9"
|
||||
"@storybook/api" "6.4.9"
|
||||
"@storybook/channels" "6.4.9"
|
||||
"@storybook/client-logger" "6.4.9"
|
||||
"@storybook/components" "6.4.9"
|
||||
"@storybook/core-events" "6.4.9"
|
||||
"@storybook/router" "6.4.9"
|
||||
"@storybook/addons" "6.4.12"
|
||||
"@storybook/api" "6.4.12"
|
||||
"@storybook/channels" "6.4.12"
|
||||
"@storybook/client-logger" "6.4.12"
|
||||
"@storybook/components" "6.4.12"
|
||||
"@storybook/core-events" "6.4.12"
|
||||
"@storybook/router" "6.4.12"
|
||||
"@storybook/semver" "^7.3.2"
|
||||
"@storybook/theming" "6.4.9"
|
||||
"@storybook/theming" "6.4.12"
|
||||
copy-to-clipboard "^3.3.1"
|
||||
core-js "^3.8.2"
|
||||
core-js-pure "^3.8.2"
|
||||
@ -6090,15 +6213,14 @@ cli-cursor@^3.1.0:
|
||||
dependencies:
|
||||
restore-cursor "^3.1.0"
|
||||
|
||||
cli-table3@0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
|
||||
integrity sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==
|
||||
cli-table3@^0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.1.tgz#36ce9b7af4847f288d3cdd081fbd09bf7bd237b8"
|
||||
integrity sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==
|
||||
dependencies:
|
||||
object-assign "^4.1.0"
|
||||
string-width "^4.2.0"
|
||||
optionalDependencies:
|
||||
colors "^1.1.2"
|
||||
colors "1.4.0"
|
||||
|
||||
cli-width@^2.0.0:
|
||||
version "2.2.1"
|
||||
@ -6249,7 +6371,7 @@ color@^3.0.0, color@^3.1.3:
|
||||
color-convert "^1.9.3"
|
||||
color-string "^1.6.0"
|
||||
|
||||
colors@^1.1.2:
|
||||
colors@1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
|
||||
integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
|
||||
@ -17735,17 +17857,17 @@ store2@^2.12.0:
|
||||
resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
|
||||
integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
|
||||
|
||||
storybook-addon-designs@6.2.0:
|
||||
version "6.2.0"
|
||||
resolved "https://registry.yarnpkg.com/storybook-addon-designs/-/storybook-addon-designs-6.2.0.tgz#d297d3aa053b99c4d3591310e6f2a041bf6aa46a"
|
||||
integrity sha512-cZbfhbLPnEquTF7MU+NXRdKdxjisKseQiSvfGFizXBJtc2kBHGgg8tUHjLVq75uaaP1p/iNPb4SPDow3pM4bfQ==
|
||||
storybook-addon-designs@6.2.1:
|
||||
version "6.2.1"
|
||||
resolved "https://registry.yarnpkg.com/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz#47fd1a7a098cad027b3891bd72a7f9c1837d94a0"
|
||||
integrity sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==
|
||||
dependencies:
|
||||
"@figspec/react" "^1.0.0"
|
||||
|
||||
storybook-color-picker@2.1.5:
|
||||
version "2.1.5"
|
||||
resolved "https://registry.yarnpkg.com/storybook-color-picker/-/storybook-color-picker-2.1.5.tgz#74acb2a137a26494369df91e9eea7a12bb0ea8fc"
|
||||
integrity sha512-LlWBS2v+EFs9gnavNQdjQMcsn18DXPxokU5hRNQWpeHA8CaZitmY2s6MNFtzJskvpu2CaKpy8i0qqlh+y3gxJg==
|
||||
storybook-color-picker@2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/storybook-color-picker/-/storybook-color-picker-2.3.0.tgz#3af1525658b2e04acbfabe6de457af99cb8ee9dc"
|
||||
integrity sha512-JPYKNmMLwFQ3iIa82se3Vo+66wxtB/pdLYwa5QvISJShVkse42uHc76sq7vnnYt3G10qmSMPb1eJnLA5RMqqug==
|
||||
dependencies:
|
||||
"@babel/cli" "^7.14.5"
|
||||
"@emotion/react" "^11.4.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user