[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

@@ -33,6 +33,10 @@ const preview = {
           ],
           'Tokens',
           'Utilities',
+          'Navigation Components',
+          'Content Components',
+          'Popup Content Components',
+          'Visual Components',
           'Components',
           'Recipes',
         ],

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 })
   },

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 })
   },

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 })
   },

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
 

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 })
   },

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).
 
 <Canvas of={BreadcrumbsStories.SeparatorIcon} />
 

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 })
   },

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 })
   },

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
 

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 })

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 })
   },

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 })
   },

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 })
   },

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 })
   },

src/stories/Components/Form/Form.mdx

@@ -8,7 +8,7 @@ import * as TextareaStories from './Textarea.stories'
 
 import { createAlert } from '../Alert/Alert.js'
 
-<Meta title="Components/Form" />
+<Meta title="Content Components/Form" />
 
 # Form
 

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 })
   },

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 })
   },

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 })
   },

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 })
   },

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 })
   },

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 })
   },

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 })
   },

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
 

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 })
   },

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.
 

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 })
   },

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 })
   },

src/stories/Components/Sidebar/Sidebar.mdx

@@ -21,7 +21,7 @@ For instructions on how to integrate a sidebar into your applications layout, se
 <div class="sidebar sidebar--drawer sidebar--responsive">...</div>
 ```
 
-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

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 })
   },

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 })
   },

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 })
   },

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 })
   },

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.
 

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 })
   },

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.
 

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 })
   },

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 })
   },

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 })
   },

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:
 

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