From 39ac9d47790e3530874a8d6bba7c48ff82c8b526 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Wed, 7 Feb 2024 15:41:07 -0500 Subject: [PATCH] [OP-151] Component Documentation Structure (#216) This PR updates the documentation to organize the components into a few categories. This helps readability and knowing where to find things. --- .storybook/preview.js | 4 ++++ src/stories/Components/Accordion/Accordion.stories.js | 2 +- src/stories/Components/Alert/Alert.stories.js | 2 +- src/stories/Components/Avatar/Avatar.stories.js | 2 +- src/stories/Components/Badge/Badge.mdx | 2 +- src/stories/Components/Badge/Badge.stories.js | 2 +- src/stories/Components/Breadcrumbs/Breadcrumbs.mdx | 2 +- src/stories/Components/Breadcrumbs/Breadcrumbs.stories.js | 2 +- src/stories/Components/Button/Button.stories.js | 2 +- src/stories/Components/ButtonGroup/ButtonGroup.mdx | 2 +- src/stories/Components/ButtonGroup/ButtonGroup.stories.js | 2 +- src/stories/Components/Card/Card.stories.js | 2 +- .../Components/ConfirmDialog/ConfirmDialog.stories.js | 2 +- src/stories/Components/Divider/Divider.stories.js | 2 +- src/stories/Components/Form/ErrorSummary.stories.js | 2 +- src/stories/Components/Form/Form.mdx | 2 +- src/stories/Components/Form/FormGroup.stories.js | 2 +- src/stories/Components/Form/Input.stories.js | 2 +- src/stories/Components/Form/Label.stories.js | 2 +- src/stories/Components/Form/Select.stories.js | 2 +- src/stories/Components/Form/Textarea.stories.js | 2 +- src/stories/Components/Icon/Icon.stories.js | 2 +- src/stories/Components/Modal/Modal.stories.js | 2 +- src/stories/Components/Navbar/Navbar.mdx | 2 +- src/stories/Components/Navbar/Navbar.stories.js | 2 +- src/stories/Components/Pagination/Pagination.mdx | 4 ++-- src/stories/Components/Pagination/Pagination.stories.js | 2 +- src/stories/Components/SidePanel/SidePanel.stories.js | 2 +- src/stories/Components/Sidebar/Sidebar.mdx | 2 +- src/stories/Components/Sidebar/Sidebar.stories.js | 2 +- src/stories/Components/Spinner/Spinner.stories.js | 2 +- src/stories/Components/Switch/Switch.stories.js | 2 +- src/stories/Components/Tab/Tab.stories.js | 2 +- src/stories/Components/Table/Table.mdx | 2 +- src/stories/Components/Table/Table.stories.js | 2 +- src/stories/Components/Tag/Tag.mdx | 2 +- src/stories/Components/Tag/Tag.stories.js | 2 +- src/stories/Components/TextPair/TextPair.stories.js | 2 +- src/stories/Components/Tooltip/Tooltip.stories.js | 2 +- src/stories/Recipes/Layout/Layout.mdx | 6 +++--- src/stories/Tokens/Shadow.mdx | 2 +- 41 files changed, 47 insertions(+), 43 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 655fb39d..ff8f25f5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -33,6 +33,10 @@ const preview = { ], 'Tokens', 'Utilities', + 'Navigation Components', + 'Content Components', + 'Popup Content Components', + 'Visual Components', 'Components', 'Recipes', ], diff --git a/src/stories/Components/Accordion/Accordion.stories.js b/src/stories/Components/Accordion/Accordion.stories.js index a02f1e08..c1115f9d 100644 --- a/src/stories/Components/Accordion/Accordion.stories.js +++ b/src/stories/Components/Accordion/Accordion.stories.js @@ -2,7 +2,7 @@ import { createAccordion } from './Accordion.js' import { createButton } from '../Button/Button.js' export default { - title: 'Components/Accordion', + title: 'Content Components/Accordion', render: ({ option1, ...args }) => { return createAccordion({ option1, ...args }) }, diff --git a/src/stories/Components/Alert/Alert.stories.js b/src/stories/Components/Alert/Alert.stories.js index ed5ca461..a736a06c 100644 --- a/src/stories/Components/Alert/Alert.stories.js +++ b/src/stories/Components/Alert/Alert.stories.js @@ -1,7 +1,7 @@ import { createAlert } from './Alert.js' export default { - title: 'Components/Alert', + title: 'Content Components/Alert', render: ({ title, ...args }) => { return createAlert({ title, ...args }) }, diff --git a/src/stories/Components/Avatar/Avatar.stories.js b/src/stories/Components/Avatar/Avatar.stories.js index 672aef7f..0fcc6a2f 100644 --- a/src/stories/Components/Avatar/Avatar.stories.js +++ b/src/stories/Components/Avatar/Avatar.stories.js @@ -1,7 +1,7 @@ import { createAvatar } from './Avatar.js' export default { - title: 'Components/Avatar', + title: 'Content Components/Avatar', render: ({ size, ...args }) => { return createAvatar({ size, ...args }) }, diff --git a/src/stories/Components/Badge/Badge.mdx b/src/stories/Components/Badge/Badge.mdx index c4559bf7..b68ebb66 100644 --- a/src/stories/Components/Badge/Badge.mdx +++ b/src/stories/Components/Badge/Badge.mdx @@ -7,7 +7,7 @@ import { createAlert } from '../Alert/Alert.js' # Badge -The Badge component is similar to the Tag component, however it has a different semantic purpose. Badge is intended to be used for notification and information where Tag is intended to be used for interaction and input. See [Tag](?path=/docs/components-tag--docs) for details on its usage. +The Badge component is similar to the Tag component, however it has a different semantic purpose. Badge is intended to be used for notification and information where Tag is intended to be used for interaction and input. See [Tag](?path=/docs/content-components-tag--docs) for details on its usage. ## Playground diff --git a/src/stories/Components/Badge/Badge.stories.js b/src/stories/Components/Badge/Badge.stories.js index 54c572ba..8d2cdb27 100644 --- a/src/stories/Components/Badge/Badge.stories.js +++ b/src/stories/Components/Badge/Badge.stories.js @@ -1,7 +1,7 @@ import { createBadge } from './Badge.js' export default { - title: 'Components/Badge', + title: 'Content Components/Badge', render: ({ label, ...args }) => { return createBadge({ label, ...args }) }, diff --git a/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx b/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx index fb5c7f00..0c0329d1 100644 --- a/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx +++ b/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx @@ -45,7 +45,7 @@ Breadcrumbs can be used as a standalone component, however, it does have a few d ### Separator -`.breadcrumbs__separator` is used to separate the links in the breadcrumbs. It is a div that anything can be put within, however typically would be used with an [Icon](?path=/docs/content-components-icon--docs). +`.breadcrumbs__separator` is used to separate the links in the breadcrumbs. It is a div that anything can be put within, however typically would be used with an [Icon](?path=/docs/visual-components-icon--docs). diff --git a/src/stories/Components/Breadcrumbs/Breadcrumbs.stories.js b/src/stories/Components/Breadcrumbs/Breadcrumbs.stories.js index f4a8b874..4e88df7d 100644 --- a/src/stories/Components/Breadcrumbs/Breadcrumbs.stories.js +++ b/src/stories/Components/Breadcrumbs/Breadcrumbs.stories.js @@ -1,7 +1,7 @@ import { createBreadcrumbs } from './Breadcrumbs.js' export default { - title: 'Components/Breadcrumbs', + title: 'Navigation Components/Breadcrumbs', render: ({ size, ...args }) => { return createBreadcrumbs({ size, ...args }) }, diff --git a/src/stories/Components/Button/Button.stories.js b/src/stories/Components/Button/Button.stories.js index 27dcea11..48a34ef5 100644 --- a/src/stories/Components/Button/Button.stories.js +++ b/src/stories/Components/Button/Button.stories.js @@ -1,7 +1,7 @@ import { createButton } from './Button.js' export default { - title: 'Components/Button', + title: 'Navigation Components/Button', render: ({ label, ...args }) => { return createButton({ label, ...args }) }, diff --git a/src/stories/Components/ButtonGroup/ButtonGroup.mdx b/src/stories/Components/ButtonGroup/ButtonGroup.mdx index 97501e9a..f89fc08e 100644 --- a/src/stories/Components/ButtonGroup/ButtonGroup.mdx +++ b/src/stories/Components/ButtonGroup/ButtonGroup.mdx @@ -5,7 +5,7 @@ import * as ButtonGroupStories from './ButtonGroup.stories' # Button Group -`.btn-group` is a class that can be added on a container around a collection of buttons. It provides grouping styles for any button conbination and variation that exists in the [Button Component](?path=/docs/components-button--docs) +`.btn-group` is a class that can be added on a container around a collection of buttons. It provides grouping styles for any button conbination and variation that exists in the [Button Component](?path=/docs/navigation-components-button--docs) ## Playground diff --git a/src/stories/Components/ButtonGroup/ButtonGroup.stories.js b/src/stories/Components/ButtonGroup/ButtonGroup.stories.js index 9f6be4fc..0e5f2532 100644 --- a/src/stories/Components/ButtonGroup/ButtonGroup.stories.js +++ b/src/stories/Components/ButtonGroup/ButtonGroup.stories.js @@ -1,7 +1,7 @@ import { createButtonGroup, createButtonGroupToolbar } from './ButtonGroup.js' export default { - title: 'Components/ButtonGroup', + title: 'Navigation Components/ButtonGroup', render: ({ toolbar = false, ...args }) => { if (toolbar) { return createButtonGroupToolbar({ ...args }) diff --git a/src/stories/Components/Card/Card.stories.js b/src/stories/Components/Card/Card.stories.js index e2d09533..cec3c5f4 100644 --- a/src/stories/Components/Card/Card.stories.js +++ b/src/stories/Components/Card/Card.stories.js @@ -1,7 +1,7 @@ import { createCard } from './Card.js' export default { - title: 'Components/Card', + title: 'Content Components/Card', render: ({ label, ...args }) => { return createCard({ label, ...args }) }, diff --git a/src/stories/Components/ConfirmDialog/ConfirmDialog.stories.js b/src/stories/Components/ConfirmDialog/ConfirmDialog.stories.js index 70fa53bf..ca9a263a 100644 --- a/src/stories/Components/ConfirmDialog/ConfirmDialog.stories.js +++ b/src/stories/Components/ConfirmDialog/ConfirmDialog.stories.js @@ -1,7 +1,7 @@ import { createConfirmDialog } from './ConfirmDialog.js' export default { - title: 'Components/Confirm Dialog', + title: 'Popup Content Components/Confirm Dialog', render: ({ title, ...args }) => { return createConfirmDialog({ title, ...args }) }, diff --git a/src/stories/Components/Divider/Divider.stories.js b/src/stories/Components/Divider/Divider.stories.js index 0b5bf4f0..79d29003 100644 --- a/src/stories/Components/Divider/Divider.stories.js +++ b/src/stories/Components/Divider/Divider.stories.js @@ -1,7 +1,7 @@ import { createDivider } from './Divider.js' export default { - title: 'Components/Divider', + title: 'Visual Components/Divider', render: ({ option1, ...args }) => { return createDivider({ option1, ...args }) }, diff --git a/src/stories/Components/Form/ErrorSummary.stories.js b/src/stories/Components/Form/ErrorSummary.stories.js index 2f9ace54..c7696bb7 100644 --- a/src/stories/Components/Form/ErrorSummary.stories.js +++ b/src/stories/Components/Form/ErrorSummary.stories.js @@ -1,7 +1,7 @@ import { createErrorSummary } from './Form.js' export default { - title: 'Components/Form/ErrorSummary', + title: 'Content Components/Form/ErrorSummary', render: ({ label, ...args }) => { return createErrorSummary({ label, ...args }) }, diff --git a/src/stories/Components/Form/Form.mdx b/src/stories/Components/Form/Form.mdx index 784da124..cf9a75d8 100644 --- a/src/stories/Components/Form/Form.mdx +++ b/src/stories/Components/Form/Form.mdx @@ -8,7 +8,7 @@ import * as TextareaStories from './Textarea.stories' import { createAlert } from '../Alert/Alert.js' - + # Form diff --git a/src/stories/Components/Form/FormGroup.stories.js b/src/stories/Components/Form/FormGroup.stories.js index 7e1ef68c..d138d818 100644 --- a/src/stories/Components/Form/FormGroup.stories.js +++ b/src/stories/Components/Form/FormGroup.stories.js @@ -4,7 +4,7 @@ import * as LabelStories from './Label.stories' import * as InputStories from './Input.stories' export default { - title: 'Components/Form/FormGroup', + title: 'Content Components/Form/FormGroup', render: ({ ...args }) => { return createFormGroup({ ...args }) }, diff --git a/src/stories/Components/Form/Input.stories.js b/src/stories/Components/Form/Input.stories.js index c9bbc8b8..15e88674 100644 --- a/src/stories/Components/Form/Input.stories.js +++ b/src/stories/Components/Form/Input.stories.js @@ -1,7 +1,7 @@ import { createInput } from './Form.js' export default { - title: 'Components/Form/Input', + title: 'Content Components/Form/Input', render: ({ type, ...args }) => { return createInput({ type, ...args }) }, diff --git a/src/stories/Components/Form/Label.stories.js b/src/stories/Components/Form/Label.stories.js index bd0e1923..3145e688 100644 --- a/src/stories/Components/Form/Label.stories.js +++ b/src/stories/Components/Form/Label.stories.js @@ -1,7 +1,7 @@ import { createLabel } from './Form.js' export default { - title: 'Components/Form/Label', + title: 'Content Components/Form/Label', render: ({ label, ...args }) => { return createLabel({ label, ...args }) }, diff --git a/src/stories/Components/Form/Select.stories.js b/src/stories/Components/Form/Select.stories.js index ee8d8cb7..06842a92 100644 --- a/src/stories/Components/Form/Select.stories.js +++ b/src/stories/Components/Form/Select.stories.js @@ -1,7 +1,7 @@ import { createSelect } from './Form.js' export default { - title: 'Components/Form/Select', + title: 'Content Components/Form/Select', render: ({ options, ...args }) => { return createSelect({ options, ...args }) }, diff --git a/src/stories/Components/Form/Textarea.stories.js b/src/stories/Components/Form/Textarea.stories.js index 3ec0da9b..a9fcfef2 100644 --- a/src/stories/Components/Form/Textarea.stories.js +++ b/src/stories/Components/Form/Textarea.stories.js @@ -1,7 +1,7 @@ import { createTextarea } from './Form.js' export default { - title: 'Components/Form/Textarea', + title: 'Content Components/Form/Textarea', render: ({ ...args }) => { return createTextarea({ ...args }) }, diff --git a/src/stories/Components/Icon/Icon.stories.js b/src/stories/Components/Icon/Icon.stories.js index 3504ddbf..228c4c56 100644 --- a/src/stories/Components/Icon/Icon.stories.js +++ b/src/stories/Components/Icon/Icon.stories.js @@ -1,7 +1,7 @@ import { createIcon } from './Icon.js' export default { - title: 'Components/Icon', + title: 'Visual Components/Icon', render: ({ name, ...args }) => { return createIcon({ name, ...args }) }, diff --git a/src/stories/Components/Modal/Modal.stories.js b/src/stories/Components/Modal/Modal.stories.js index 1abfc17e..4db678f4 100644 --- a/src/stories/Components/Modal/Modal.stories.js +++ b/src/stories/Components/Modal/Modal.stories.js @@ -1,7 +1,7 @@ import { createModal } from './Modal.js' export default { - title: 'Components/Modal', + title: 'Popup Content Components/Modal', render: ({ header, ...args }) => { return createModal({ header, ...args }) }, diff --git a/src/stories/Components/Navbar/Navbar.mdx b/src/stories/Components/Navbar/Navbar.mdx index 0aba627c..d7b9d83a 100644 --- a/src/stories/Components/Navbar/Navbar.mdx +++ b/src/stories/Components/Navbar/Navbar.mdx @@ -13,7 +13,7 @@ For instructions on how to integrate a navbar into your applications layout, see `.navbar` is the main component that everything is contained within. -Any [Button](?path=/docs/components-button--docs#default) style can be used for the links. +Any [Button](?path=/docs/navigation-components-button--docs#default) style can be used for the links. ## Playground diff --git a/src/stories/Components/Navbar/Navbar.stories.js b/src/stories/Components/Navbar/Navbar.stories.js index 8e297170..13e5ad40 100644 --- a/src/stories/Components/Navbar/Navbar.stories.js +++ b/src/stories/Components/Navbar/Navbar.stories.js @@ -1,7 +1,7 @@ import { createNavbar } from './Navbar.js' export default { - title: 'Components/Navbar', + title: 'Navigation Components/Navbar', render: ({ ...args }) => { return createNavbar({ ...args }) }, diff --git a/src/stories/Components/Pagination/Pagination.mdx b/src/stories/Components/Pagination/Pagination.mdx index 844ce256..4ee83cb8 100644 --- a/src/stories/Components/Pagination/Pagination.mdx +++ b/src/stories/Components/Pagination/Pagination.mdx @@ -10,7 +10,7 @@ import { createAlert } from '../Alert/Alert.js' Pagination is used to navigate through a series of pages, typically when dealing with tabular data. A few classes are used in combination with the button component to achieve this. -An example of using this component with the Table component can be found in [Table With Pagination](?path=/docs/components-table--docs#with-pagination). +An example of using this component with the Table component can be found in [Table With Pagination](?path=/docs/content-components-table--docs#with-pagination). ## Note on Implementation @@ -44,7 +44,7 @@ Pagination can be used as a standalone component, however, it does have a few de ### Default -`.pagination` Is the main class. It can be placed on a `nav` element and wraps a collection of [buttons](?path=/docs/components-button--docs) to create a pagination component. +`.pagination` Is the main class. It can be placed on a `nav` element and wraps a collection of [buttons](?path=/docs/navigation-components-button--docs) to create a pagination component. The buttons within can use any of the button classes, but form a default look, use the `.btn .btn--no-border .btn--small` classes. diff --git a/src/stories/Components/Pagination/Pagination.stories.js b/src/stories/Components/Pagination/Pagination.stories.js index 1e36789f..c51fb611 100644 --- a/src/stories/Components/Pagination/Pagination.stories.js +++ b/src/stories/Components/Pagination/Pagination.stories.js @@ -1,7 +1,7 @@ import { createPagination } from './Pagination.js' export default { - title: 'Components/Pagination', + title: 'Navigation Components/Pagination', render: ({ option1, ...args }) => { return createPagination({ option1, ...args }) }, diff --git a/src/stories/Components/SidePanel/SidePanel.stories.js b/src/stories/Components/SidePanel/SidePanel.stories.js index b9a91c30..435d3e4f 100644 --- a/src/stories/Components/SidePanel/SidePanel.stories.js +++ b/src/stories/Components/SidePanel/SidePanel.stories.js @@ -1,7 +1,7 @@ import { createSidePanel } from './SidePanel.js' export default { - title: 'Components/SidePanel', + title: 'Content Components/SidePanel', render: ({ option1, ...args }) => { return createSidePanel({ option1, ...args }) }, diff --git a/src/stories/Components/Sidebar/Sidebar.mdx b/src/stories/Components/Sidebar/Sidebar.mdx index a0178a45..427806ff 100644 --- a/src/stories/Components/Sidebar/Sidebar.mdx +++ b/src/stories/Components/Sidebar/Sidebar.mdx @@ -21,7 +21,7 @@ For instructions on how to integrate a sidebar into your applications layout, se
...
``` -Any [Button](?path=/docs/components-button--docs#default) style can be used for the links. +Any [Button](?path=/docs/navigation-components-button--docs#default) style can be used for the links. - Drawer will use the normal button style, but left aligned - Compact will use the `.icon-with-label` style diff --git a/src/stories/Components/Sidebar/Sidebar.stories.js b/src/stories/Components/Sidebar/Sidebar.stories.js index 36654e03..c707e89b 100644 --- a/src/stories/Components/Sidebar/Sidebar.stories.js +++ b/src/stories/Components/Sidebar/Sidebar.stories.js @@ -1,7 +1,7 @@ import { createSidebar } from './Sidebar.js' export default { - title: 'Components/Sidebar', + title: 'Navigation Components/Sidebar', render: ({ ...args }) => { return createSidebar({ ...args }) }, diff --git a/src/stories/Components/Spinner/Spinner.stories.js b/src/stories/Components/Spinner/Spinner.stories.js index 8be1ae82..121f0b43 100644 --- a/src/stories/Components/Spinner/Spinner.stories.js +++ b/src/stories/Components/Spinner/Spinner.stories.js @@ -1,7 +1,7 @@ import { createSpinner } from './Spinner.js' export default { - title: 'Components/Spinner', + title: 'Visual Components/Spinner', render: ({ size, ...args }) => { return createSpinner({ size, ...args }) }, diff --git a/src/stories/Components/Switch/Switch.stories.js b/src/stories/Components/Switch/Switch.stories.js index 72d55e06..bf63fcb0 100644 --- a/src/stories/Components/Switch/Switch.stories.js +++ b/src/stories/Components/Switch/Switch.stories.js @@ -1,7 +1,7 @@ import { createSwitch } from './Switch.js' export default { - title: 'Components/Switch', + title: 'Content Components/Switch', render: ({ ...args }) => { return createSwitch({ ...args }) }, diff --git a/src/stories/Components/Tab/Tab.stories.js b/src/stories/Components/Tab/Tab.stories.js index 8927e55c..c5554903 100644 --- a/src/stories/Components/Tab/Tab.stories.js +++ b/src/stories/Components/Tab/Tab.stories.js @@ -1,7 +1,7 @@ import { createTab } from './Tab.js' export default { - title: 'Components/Tab', + title: 'Navigation Components/Tab', render: ({ option1, ...args }) => { return createTab({ option1, ...args }) }, diff --git a/src/stories/Components/Table/Table.mdx b/src/stories/Components/Table/Table.mdx index b1fa0a17..f97dff99 100644 --- a/src/stories/Components/Table/Table.mdx +++ b/src/stories/Components/Table/Table.mdx @@ -92,7 +92,7 @@ These are best used in conjunction with a wrapping container fixed table height, ### With Pagination -The [Pagination](?path=/docs/components-pagination--docs) component can be used with the table to provide a way to navigate through a large dataset. +The [Pagination](?path=/docs/navigation-components-pagination--docs) component can be used with the table to provide a way to navigate through a large dataset. Here is an example of using it in the table footer. diff --git a/src/stories/Components/Table/Table.stories.js b/src/stories/Components/Table/Table.stories.js index 5d79f2bf..2863d2d1 100644 --- a/src/stories/Components/Table/Table.stories.js +++ b/src/stories/Components/Table/Table.stories.js @@ -1,7 +1,7 @@ import { createTable } from './Table.js' export default { - title: 'Components/Table', + title: 'Content Components/Table', render: ({ ...args }) => { return createTable({ ...args }) }, diff --git a/src/stories/Components/Tag/Tag.mdx b/src/stories/Components/Tag/Tag.mdx index b83d271f..94a6beea 100644 --- a/src/stories/Components/Tag/Tag.mdx +++ b/src/stories/Components/Tag/Tag.mdx @@ -7,7 +7,7 @@ import { createAlert } from '../Alert/Alert.js' # Tag -The tag component can be applied to an element with a button within it. The Tag component is similar to the Badge component, however it has a different semantic purpose. Tag is intended to be used for interaction and input where Badge is intended to be used for Notification and Information. See [Badge](?path=/docs/components-badge--docs) for details on its usage. +The tag component can be applied to an element with a button within it. The Tag component is similar to the Badge component, however it has a different semantic purpose. Tag is intended to be used for interaction and input where Badge is intended to be used for Notification and Information. See [Badge](?path=/docs/content-components-badge--docs) for details on its usage. The tag will typically have a button within it. The button can be used to remove the tag from the UI. For Example, managing catgories or metadata tags on a data record. diff --git a/src/stories/Components/Tag/Tag.stories.js b/src/stories/Components/Tag/Tag.stories.js index b4840602..8b7ca9a4 100644 --- a/src/stories/Components/Tag/Tag.stories.js +++ b/src/stories/Components/Tag/Tag.stories.js @@ -1,7 +1,7 @@ import { createTag } from './Tag.js' export default { - title: 'Components/Tag', + title: 'Content Components/Tag', render: ({ label, ...args }) => { return createTag({ label, ...args }) }, diff --git a/src/stories/Components/TextPair/TextPair.stories.js b/src/stories/Components/TextPair/TextPair.stories.js index bc5eff0a..3c892114 100644 --- a/src/stories/Components/TextPair/TextPair.stories.js +++ b/src/stories/Components/TextPair/TextPair.stories.js @@ -1,7 +1,7 @@ import { createTextPair } from './TextPair.js' export default { - title: 'Components/Text Pair', + title: 'Content Components/Text Pair', render: ({ direction, ...args }) => { return createTextPair({ direction, ...args }) }, diff --git a/src/stories/Components/Tooltip/Tooltip.stories.js b/src/stories/Components/Tooltip/Tooltip.stories.js index 29f80858..c8d46733 100644 --- a/src/stories/Components/Tooltip/Tooltip.stories.js +++ b/src/stories/Components/Tooltip/Tooltip.stories.js @@ -1,7 +1,7 @@ import { createTooltip } from './Tooltip.js' export default { - title: 'Components/Tooltip', + title: 'Popup Content Components/Tooltip', render: ({ option1, ...args }) => { return createTooltip({ option1, ...args }) }, diff --git a/src/stories/Recipes/Layout/Layout.mdx b/src/stories/Recipes/Layout/Layout.mdx index ea490c27..1d219075 100644 --- a/src/stories/Recipes/Layout/Layout.mdx +++ b/src/stories/Recipes/Layout/Layout.mdx @@ -92,7 +92,7 @@ If you need a fullscreen spinner, use a layout like this: ## With Sidebar -For instructions on the sidebar itself, see [Sidebar Component](?path=/docs/components-sidebar--default-drawer) +For instructions on the sidebar itself, see [Sidebar Component](?path=/docs/navigation-components-sidebar--default-drawer) A layout with a sidebar looks like the following: @@ -129,7 +129,7 @@ A layout with a sidebar looks like the following: ## With Navbar -For instructions on the navbar itself, see [Navbar Component](?path=/docs/components-navbar--default-navbar) +For instructions on the navbar itself, see [Navbar Component](?path=/docs/navigation-components-navbar--default-navbar) A layout with a navbar looks like the following: @@ -158,7 +158,7 @@ A layout with a navbar looks like the following: ## Sidebar with Navbar and Side Panel -For instructions on the side panel itself, see [Side Panel Component](?path=/docs/components-sidepanel--docs) +For instructions on the side panel itself, see [Side Panel Component](?path=/docs/content-components-sidepanel--docs) A layout with a side panel looks like the following: diff --git a/src/stories/Tokens/Shadow.mdx b/src/stories/Tokens/Shadow.mdx index ed393767..5831fd6f 100644 --- a/src/stories/Tokens/Shadow.mdx +++ b/src/stories/Tokens/Shadow.mdx @@ -5,7 +5,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token' # Shadow -Shadow tokens can be used to create an elevation effect on any element. There are also [Card classes](?path=/docs/components-card--docs#shadow) to create an elevated card effect. +Shadow tokens can be used to create an elevation effect on any element. There are also [Card classes](?path=/docs/content-components-card--docs#shadow) to create an elevated card effect. ## Usage