From 5dfcb79fb7c50ed4ab9a3d6d38422a4d12714c8e Mon Sep 17 00:00:00 2001 From: langermank Date: Tue, 25 Jan 2022 19:26:33 -0800 Subject: [PATCH 01/21] here we go! --- .../ActionListDividerFeatures.stories.jsx | 51 ++ .../ActionListFeatures.stories.jsx | 148 +++++ .../ActionListItemFeatures.stories.jsx | 589 ++++++++++++++++++ .../NavigationList/NavigationList.stories.jsx | 117 ++++ .../NavigationListDivider.stories.jsx | 81 +++ .../NavigationListExamples.stories.jsx | 283 +++++++++ .../NavigationListItem.stories.jsx | 409 ++++++++++++ .../NavigationListItemCollapsible.stories.jsx | 277 ++++++++ src/actionlist/action-list-item-divider.scss | 7 + src/actionlist/action-list-item.scss | 191 +++--- src/actionlist/action-list-tree.scss | 103 +++ 11 files changed, 2162 insertions(+), 94 deletions(-) create mode 100644 docs/src/stories/components/NavigationList/ActionListDividerFeatures.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/ActionListFeatures.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/ActionListItemFeatures.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/NavigationList.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/NavigationListDivider.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/NavigationListExamples.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/NavigationListItem.stories.jsx create mode 100644 docs/src/stories/components/NavigationList/NavigationListItemCollapsible.stories.jsx diff --git a/docs/src/stories/components/NavigationList/ActionListDividerFeatures.stories.jsx b/docs/src/stories/components/NavigationList/ActionListDividerFeatures.stories.jsx new file mode 100644 index 0000000000..86b3f660bc --- /dev/null +++ b/docs/src/stories/components/NavigationList/ActionListDividerFeatures.stories.jsx @@ -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 => ( +// +// ) +// ] +// } + +// 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({}) diff --git a/docs/src/stories/components/NavigationList/ActionListFeatures.stories.jsx b/docs/src/stories/components/NavigationList/ActionListFeatures.stories.jsx new file mode 100644 index 0000000000..754600cf37 --- /dev/null +++ b/docs/src/stories/components/NavigationList/ActionListFeatures.stories.jsx @@ -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: ( +// <> +// +// +// +// +// ) +// } + +// export const InsetPadding = ListTemplate.bind({}) +// InsetPadding.args = { +// listPadding: 'inset', +// children: ( +// <> +// +// +// +// +// ) +// } + +// export const FullBleed = ListTemplate.bind({}) +// FullBleed.args = { +// listPadding: 'ActionList--full', +// children: ( +// <> +// +// +// +// +// ) +// } + +// export const AsSubGroup = ListTemplate.bind({}) +// AsSubGroup.args = { +// subGroup: true, +// children: ( +// <> +// +// +// +// +// ) +// } + +// export const RoleMenu = ListTemplate.bind({}) +// RoleMenu.storyName = '[role="menu"] menu list' +// RoleMenu.args = { +// role: 'menu', +// children: ( +// <> +// +// +// +// +// ) +// } + +// export const RoleNav = ListTemplate.bind({}) +// RoleNav.storyName = '[nav] nav wrapper' +// RoleNav.args = { +// children: ( +// <> +// +// +// +// +// ) +// } +// RoleNav.decorators = [ +// Story => ( +// +// ) +// ] + +// export const RoleTreeView = ListTemplate.bind({}) +// RoleTreeView.storyName = '[role="tree"] tree view list' +// RoleTreeView.args = { +// role: 'tree', +// variant: 'ActionList--tree', +// children: ( +// <> +// +// +// +// +// +// } +// /> +// } +// /> +// +// ) +// } diff --git a/docs/src/stories/components/NavigationList/ActionListItemFeatures.stories.jsx b/docs/src/stories/components/NavigationList/ActionListItemFeatures.stories.jsx new file mode 100644 index 0000000000..5a0774ef6d --- /dev/null +++ b/docs/src/stories/components/NavigationList/ActionListItemFeatures.stories.jsx @@ -0,0 +1,589 @@ +// import React from 'react' +// import clsx from 'clsx' +// import {ListItemTemplate} from './NavigationListItem.stories' +// import {DividerTemplate} from './NavigationListDivider.stories' + +// export default { +// title: 'Components/ActionList/ActionListItem/Features', +// parameters: { +// design: { +// type: 'figma', +// url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook?node-id=2%3A2' +// } +// }, +// decorators: [ +// Story => ( +//
    +// +//
+// ) +// ] +// } + +// export const TextOnly = ListItemTemplate.bind({}) +// TextOnly.args = { +// text: 'Basic item label' +// } + +// export const SizeMedium = ListItemTemplate.bind({}) +// SizeMedium.args = { +// ...ListItemTemplate.args, +// text: 'Medium item', +// size: 'ActionList-content--sizeMedium' +// } + +// export const SizeMediumWithDescription = ListItemTemplate.bind({}) +// SizeMediumWithDescription.args = { +// ...ListItemTemplate.args, +// text: 'Medium item', +// description: 'Some descriptive text', +// size: 'ActionList-content--sizeMedium' +// } + +// export const SizeLarge = ListItemTemplate.bind({}) +// SizeLarge.args = { +// ...ListItemTemplate.args, +// text: 'Large item', +// size: 'ActionList-content--sizeLarge' +// } + +// export const SizeLargeWithDescription = ListItemTemplate.bind({}) +// SizeLargeWithDescription.args = { +// ...ListItemTemplate.args, +// text: 'Large item', +// description: 'Some descriptive text', +// size: 'ActionList-content--sizeLarge' +// } + +// export const VisualLeading = ListItemTemplate.bind({}) +// VisualLeading.storyName = '[Visuals] Leading' +// VisualLeading.args = { +// ...ListItemTemplate.args, +// text: 'Item with leading visual', +// leadingVisual: ` +// +// ` +// } + +// export const VisualTrailing = ListItemTemplate.bind({}) +// VisualTrailing.storyName = '[Visuals] Trailing' +// VisualTrailing.args = { +// ...ListItemTemplate.args, +// text: 'Item with trailing visual', +// trailingVisual: ` +// +// ` +// } + +// export const VisualTrailingText = ListItemTemplate.bind({}) +// VisualTrailingText.storyName = '[Visuals] Trailing text' +// VisualTrailingText.args = { +// ...ListItemTemplate.args, +// text: 'Item with trailing text', +// trailingVisual: `⌘N` +// } + +// export const VisualLeadingAndTrailing = ListItemTemplate.bind({}) +// VisualLeadingAndTrailing.storyName = '[Visuals] Leading & trailing' +// VisualLeadingAndTrailing.args = { +// ...ListItemTemplate.args, +// text: 'Item with trailing visual', +// trailingVisual: ` +// +// `, +// leadingVisual: ` +// +// ` +// } + +// export const DescriptionBlock = ListItemTemplate.bind({}) +// DescriptionBlock.storyName = '[Description] block' +// DescriptionBlock.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-blockDescription' +// } + +// export const DescriptionBlockWithLeadingVisual = ListItemTemplate.bind({}) +// DescriptionBlockWithLeadingVisual.storyName = '[Description] block + leading visual' +// DescriptionBlockWithLeadingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-blockDescription', +// leadingVisual: ` +// +// ` +// } + +// export const DescriptionBlockWithTrailingVisual = ListItemTemplate.bind({}) +// DescriptionBlockWithTrailingVisual.storyName = '[Description] block + trailing visual' +// DescriptionBlockWithTrailingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-blockDescription', +// trailingVisual: ` +// +// ` +// } + +// export const DescriptionBlockWithLeadingAndTrailingVisual = ListItemTemplate.bind({}) +// DescriptionBlockWithLeadingAndTrailingVisual.storyName = '[Description] block + leading/trailing visual' +// DescriptionBlockWithLeadingAndTrailingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-blockDescription', +// leadingVisual: ` +// +// `, +// trailingVisual: ` +// +// ` +// } + +// export const DescriptionInline = ListItemTemplate.bind({}) +// DescriptionInline.storyName = '[Description] inline' +// DescriptionInline.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-descriptionWrap--inline' +// } + +// export const DescriptionInlineWithLeadingVisual = ListItemTemplate.bind({}) +// DescriptionInlineWithLeadingVisual.storyName = '[Description] inline + leading visual' +// DescriptionInlineWithLeadingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-descriptionWrap--inline', +// leadingVisual: ` +// +// ` +// } + +// export const DescriptionInlineWithTrailingVisual = ListItemTemplate.bind({}) +// DescriptionInlineWithTrailingVisual.storyName = '[Description] inline + trailing visual' +// DescriptionInlineWithTrailingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-descriptionWrap--inline', +// trailingVisual: ` +// +// ` +// } + +// export const DescriptionInlineWithLeadingAndTrailingVisual = ListItemTemplate.bind({}) +// DescriptionInlineWithLeadingAndTrailingVisual.storyName = '[Description] inline + leading/trailing visual' +// DescriptionInlineWithLeadingAndTrailingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Item label', +// description: 'This is a description', +// descriptionVariant: 'ActionList-item-descriptionWrap--inline', +// trailingVisual: ` +// +// `, +// leadingVisual: ` +// +// ` +// } + +// export const NavActiveAnchor = ListItemTemplate.bind({}) +// NavActiveAnchor.storyName = '[Nav] Active anchor' +// NavActiveAnchor.args = { +// ...ListItemTemplate.args, +// text: 'Im an anchor link', +// href: '#someid', +// ariaCurrent: 'location', +// activeNavItem: true +// } + +// export const NavActivePage = ListItemTemplate.bind({}) +// NavActivePage.storyName = '[Nav] Active page' +// NavActivePage.args = { +// ...ListItemTemplate.args, +// text: 'Im a page level link', +// href: '/', +// ariaCurrent: 'page', +// activeNavItem: true +// } + +// export const VariantDangerItem = ListItemTemplate.bind({}) +// VariantDangerItem.storyName = '[Variant] Danger' +// VariantDangerItem.args = { +// ...ListItemTemplate.args, +// text: 'Danger danger', +// variant: 'ActionList-item--danger' +// } + +// export const VariantDangerItemLeading = ListItemTemplate.bind({}) +// VariantDangerItemLeading.storyName = '[Variant] Danger + leading visual' +// VariantDangerItemLeading.args = { +// ...ListItemTemplate.args, +// text: 'Danger danger', +// variant: 'ActionList-item--danger', +// leadingVisual: ` +// +// ` +// } + +// export const VariantDangerItemTrailing = ListItemTemplate.bind({}) +// VariantDangerItemTrailing.storyName = '[Variant] Danger + trailing visual' +// VariantDangerItemTrailing.args = { +// ...ListItemTemplate.args, +// text: 'Danger danger', +// variant: 'ActionList-item--danger', +// trailingVisual: ` +// +// ` +// } + +// export const VariantDangerItemLeadingTrailing = ListItemTemplate.bind({}) +// VariantDangerItemLeadingTrailing.storyName = '[Variant] Danger + leading/trailing visual' +// VariantDangerItemLeadingTrailing.args = { +// ...ListItemTemplate.args, +// text: 'Danger danger', +// variant: 'ActionList-item--danger', +// leadingVisual: ` +// +// `, +// trailingVisual: ` +// +// ` +// } + +// export const VariantDisabledItem = ListItemTemplate.bind({}) +// VariantDisabledItem.storyName = '[Variant] Disabled' +// VariantDisabledItem.args = { +// ...ListItemTemplate.args, +// text: 'Disabled', +// ariaDisabled: true +// } + +// export const VariantDisabledItemLeading = ListItemTemplate.bind({}) +// VariantDisabledItemLeading.storyName = '[Variant] Disabled + leading visual' +// VariantDisabledItemLeading.args = { +// ...ListItemTemplate.args, +// text: 'Disabled', +// ariaDisabled: true, +// leadingVisual: ` +// +// ` +// } + +// export const VariantDisabledItemTrailing = ListItemTemplate.bind({}) +// VariantDisabledItemTrailing.storyName = '[Variant] Disabled + trailing visual' +// VariantDisabledItemTrailing.args = { +// ...ListItemTemplate.args, +// text: 'Disabled', +// ariaDisabled: true, +// trailingVisual: ` +// +// ` +// } + +// export const VariantDisabledItemLeadingTrailing = ListItemTemplate.bind({}) +// VariantDisabledItemLeadingTrailing.storyName = '[Variant] Disabled + leading/trailing visual' +// VariantDisabledItemLeadingTrailing.args = { +// ...ListItemTemplate.args, +// text: 'Disabled', +// ariaDisabled: true, +// leadingVisual: ` +// +// `, +// trailingVisual: ` +// +// ` +// } + +// export const ActionSingleSelectItem = ListItemTemplate.bind({}) +// ActionSingleSelectItem.storyName = '[Actions] Single select' +// ActionSingleSelectItem.args = { +// text: 'Single select item', +// singleSelect: true +// } + +// export const ActionSingleSelectItemWithLeadingVisual = ListItemTemplate.bind({}) +// ActionSingleSelectItemWithLeadingVisual.storyName = '[Actions] Single select + leading visual' +// ActionSingleSelectItemWithLeadingVisual.args = { +// text: 'Single select item', +// singleSelect: true, +// leadingVisual: ` +// +// ` +// } + +// export const ActionSingleSelectItemWithTrailingVisual = ListItemTemplate.bind({}) +// ActionSingleSelectItemWithTrailingVisual.storyName = '[Actions] Single select + trailing visual' +// ActionSingleSelectItemWithTrailingVisual.args = { +// text: 'Single select item', +// singleSelect: true, +// trailingVisual: ` +// +// ` +// } + +// export const ActionSingleSelectItemWithLeadingAndTrailingVisual = ListItemTemplate.bind({}) +// ActionSingleSelectItemWithLeadingAndTrailingVisual.storyName = '[Actions] Single select + leading/trailing visual' +// ActionSingleSelectItemWithLeadingAndTrailingVisual.args = { +// text: 'Single select item', +// singleSelect: true, +// leadingVisual: ` +// +// `, +// trailingVisual: ` +// +// ` +// } + +// export const ActionMultiSelectItem = ListItemTemplate.bind({}) +// ActionMultiSelectItem.storyName = '[Actions] Multi select' +// ActionMultiSelectItem.args = { +// text: 'Multi select item', +// multiSelect: true +// } + +// export const ActionMultiSelectItemWithLeadingVisual = ListItemTemplate.bind({}) +// ActionMultiSelectItemWithLeadingVisual.storyName = '[Actions] Multi select + leading visual' +// ActionMultiSelectItemWithLeadingVisual.args = { +// text: 'Multi select item', +// multiSelect: true, +// leadingVisual: ` +// +// ` +// } + +// export const ActionMultiSelectItemWithTrailingVisual = ListItemTemplate.bind({}) +// ActionMultiSelectItemWithTrailingVisual.storyName = '[Actions] Multi select + trailing visual' +// ActionMultiSelectItemWithTrailingVisual.args = { +// text: 'Multi select item', +// multiSelect: true, +// trailingVisual: ` +// +// ` +// } + +// export const ActionMultiSelectItemWithLeadingAndTrailingVisual = ListItemTemplate.bind({}) +// ActionMultiSelectItemWithLeadingAndTrailingVisual.storyName = '[Actions] Multi select + leading/trailing visual' +// ActionMultiSelectItemWithLeadingAndTrailingVisual.args = { +// text: 'Multi select item', +// multiSelect: true, +// trailingVisual: ` +// +// `, +// leadingVisual: ` +// +// ` +// } + +// export const ActionCollapsible = ListItemTemplate.bind({}) +// ActionCollapsible.storyName = '[Actions] Collapsible' +// ActionCollapsible.args = { +// ...ListItemTemplate.args, +// text: 'Collapsible', +// collapsible: true, +// collapsed: false +// } + +// export const ActionCollapsibleWithLeadingVisual = ListItemTemplate.bind({}) +// ActionCollapsibleWithLeadingVisual.storyName = '[Actions] Collapsible + leading visual' +// ActionCollapsibleWithLeadingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Collapsible', +// collapsible: true, +// collapsed: false, +// leadingVisual: ` +// +// ` +// } + +// export const ActionCollapsibleWithTrailingVisual = ListItemTemplate.bind({}) +// ActionCollapsibleWithTrailingVisual.storyName = '[Actions] Collapsible + trailing visual' +// ActionCollapsibleWithTrailingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Collapsible', +// collapsible: true, +// collapsed: false, +// trailingVisual: ` +// +// ` +// } + +// export const ActionCollapsibleWithLeadingAndTrailingVisual = ListItemTemplate.bind({}) +// ActionCollapsibleWithLeadingAndTrailingVisual.storyName = '[Actions] Collapsible + leading/trailing visual' +// ActionCollapsibleWithLeadingAndTrailingVisual.args = { +// ...ListItemTemplate.args, +// text: 'Collapsible', +// collapsible: true, +// collapsed: false, +// leadingVisual: ` +// +// `, +// trailingVisual: ` +// +// ` +// } + +// export const DividerEmpty = DividerTemplate.bind({}) +// DividerEmpty.storyName = '[Divider] Empty default' +// DividerEmpty.args = {} + +// export const DividerFilled = DividerTemplate.bind({}) +// DividerFilled.storyName = '[Divider] Empty filled' +// DividerFilled.args = { +// variant: 'ActionList-sectionDivider--filled' +// } + +// export const DividerText = DividerTemplate.bind({}) +// DividerText.storyName = '[Divider] Title' +// DividerText.args = { +// title: 'Title', +// id: 'some-id' +// } + +// export const DividerTextFilled = DividerTemplate.bind({}) +// DividerTextFilled.storyName = '[Divider] Title filled' +// DividerTextFilled.args = { +// title: 'Title', +// id: 'some-id', +// variant: 'ActionList-sectionDivider--filled' +// } + +// export const TruncateText = ListItemTemplate.bind({}) +// TruncateText.storyName = 'Truncate text' +// TruncateText.args = { +// ...ListItemTemplate.args, +// truncateItem: true, +// text: 'Item with trailing visual', +// trailingVisual: ` +// +// `, +// leadingVisual: ` +// +// ` +// } + +// export const WrapText = ListItemTemplate.bind({}) +// WrapText.storyName = 'Wrap text' +// WrapText.args = { +// ...ListItemTemplate.args, +// text: 'This is a very long string of text that will wrap to another line on smaller screens', +// trailingVisual: ` +// +// `, +// leadingVisual: ` +// +// ` +// } diff --git a/docs/src/stories/components/NavigationList/NavigationList.stories.jsx b/docs/src/stories/components/NavigationList/NavigationList.stories.jsx new file mode 100644 index 0000000000..afeed90185 --- /dev/null +++ b/docs/src/stories/components/NavigationList/NavigationList.stories.jsx @@ -0,0 +1,117 @@ +import React from 'react' +import clsx from 'clsx' +import {ListItemTemplate} from './NavigationListItem.stories' + +export default { + title: 'Components/NavigationList/NavigationList', + excludeStories: ['ListTemplate'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook-Docs?node-id=23%3A30843' + } + }, + argTypes: { + showDividers: { + control: {type: 'boolean'}, + description: 'Show dividers between items', + table: { + category: 'CSS' + } + }, + variant: { + options: [0, 1], // iterator + mapping: [null, 'ActionList--tree'], // values + control: { + type: 'inline-radio', + labels: ['default', 'tree-view'] + }, + description: 'Specifies variants for different types of lists', + table: { + category: 'CSS' + } + }, + ariaLabel: { + name: 'ariaLabel', + type: 'string', + description: 'Descriptive label for menu contents', + table: { + category: 'HTML' + } + }, + ariaLabelledBy: { + name: 'ariaLabelledBy', + type: 'string', + description: 'Reference ID of section divider', + table: { + category: 'HTML' + } + }, + groupId: { + name: 'groupId', + type: 'string', + description: 'Menu group id', + table: { + category: 'HTML' + } + }, + children: { + table: { + category: 'HTML' + } + }, + subGroup: { + control: {type: 'boolean'}, + description: 'If ActionList is nested within an ActionList', + table: { + category: 'CSS' + } + }, + listPadding: { + options: [0, 1], // iterator + mapping: ['', 'ActionList--full'], // values + control: { + type: 'inline-radio', + labels: ['inset', 'full-bleed'] + }, + description: 'ActionList includes 8px padding by default, full-bleed removes all padding', + table: { + category: 'CSS' + } + } + } +} + +export const ListTemplate = ({showDividers, children, ariaLabel, ariaLabelledBy, subGroup, listPadding, variant}) => ( +
    + <>{children} +
+) + +export const Playground = ListTemplate.bind({}) +Playground.args = { + ariaLabel: 'Menu description', + subGroup: false, + showDividers: false, + listPadding: 0, + ariaLabelledBy: '', + groupId: '', + variant: 0, + children: ( + <> + + + + ) +} diff --git a/docs/src/stories/components/NavigationList/NavigationListDivider.stories.jsx b/docs/src/stories/components/NavigationList/NavigationListDivider.stories.jsx new file mode 100644 index 0000000000..00e8736fae --- /dev/null +++ b/docs/src/stories/components/NavigationList/NavigationListDivider.stories.jsx @@ -0,0 +1,81 @@ +import React from 'react' +import clsx from 'clsx' + +export default { + title: 'Components/NavigationList/NavigationListDivider', + excludeStories: ['DividerTemplate'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/oMiRuexZW6gqVbMhQd6lwP/Storybook?node-id=2%3A2' + } + }, + argTypes: { + variant: { + options: [0, 1], // iterator + mapping: ['', 'ActionList-sectionDivider--filled'], // values + control: { + type: 'inline-radio', + labels: ['subtle', 'filled'] + }, + table: { + category: 'CSS' + } + }, + title: { + defaultValue: '', + type: 'string', + name: 'title', + description: 'string', + table: { + category: 'HTML' + } + }, + description: { + defaultValue: '', + type: 'string', + name: 'description', + description: 'string', + table: { + category: 'HTML' + } + }, + id: { + defaultValue: '', + type: 'string', + name: 'id', + description: 'Used for aria-labelledby', + table: { + category: 'HTML' + } + } + }, + decorators: [ + Story => ( +
    + +
+ ) + ] +} + +export const DividerTemplate = ({title, description, variant, id}) => ( + <> + + {title &&

{title}

} + {description && {description}} + + +) + +export const Playground = DividerTemplate.bind({}) +Playground.args = { + title: 'Section title', + description: 'Section description', + variant: 'subtle' +} diff --git a/docs/src/stories/components/NavigationList/NavigationListExamples.stories.jsx b/docs/src/stories/components/NavigationList/NavigationListExamples.stories.jsx new file mode 100644 index 0000000000..59b9d2b4f1 --- /dev/null +++ b/docs/src/stories/components/NavigationList/NavigationListExamples.stories.jsx @@ -0,0 +1,283 @@ +import React from 'react' +import clsx from 'clsx' +import {DividerTemplate} from './NavigationListDivider.stories' +import {ListItemTemplate} from './NavigationListItem.stories' +import {ListTemplate} from './NavigationList.stories' +import {ListItemCollapsibleTemplate} from './NavigationListItemCollapsible.stories' + +export default { + title: 'Components/NavigationList/Examples' +} + +const leadingVisual = ` + + ` + +export const RepoSettings = ({}) => ( + +) + +export const NavRepoSettings = ListTemplate.bind({}) +NavRepoSettings.storyName = '[nav] Repository settings' +NavRepoSettings.args = { + ...ListTemplate.args, + ...ListItemTemplate.args, + ariaLabel: 'Main menu description', + showDividers: false, + children: ( + <> + `} + /> + + + +