docs: Reorganize Storybook sidebar nav to better reflect USWDS docs

.storybook/preview.ts

@@ -4,11 +4,16 @@ import 'uswds/dist/css/uswds.css'
 import '../src/styles/index.scss'
 import './custom-styles.scss'
 
-import { addParameters } from '@storybook/client-api'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 export const parameters = {
   viewport: {
     viewports: INITIAL_VIEWPORTS,
   },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Components', 'Design tokens', 'Page templates', 'Other'],
+    },
+  },
 }

src/components/Accordion/Accordion.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Accordion } from './Accordion'
 
 export default {
-  title: 'Accordion',
+  title: 'Components/Accordion',
   component: Accordion,
   parameters: {
     info: `

src/components/Alert/Alert.stories.tsx

@@ -4,7 +4,7 @@ import { Alert } from './Alert'
 import { Button } from '../Button/Button'
 
 export default {
-  title: 'Alert',
+  title: 'Components/Alert',
   component: Alert,
   parameters: {
     info: `

src/components/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button } from './Button'
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button,
   parameters: {
     info: `

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '../Button/Button'
 import { Link } from '../Link/Link'
 
 export default {
-  title: 'ButtonGroup',
+  title: 'Components/Button groups',
   component: ButtonGroup,
   parameters: {
     info: `

src/components/Footer/Address/Address.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Address } from './Address'
 
 export default {
-  title: 'Footer/Address',
+  title: 'Components/Footer/Address',
   component: Address,
   parameters: {
     info: `

src/components/Footer/Footer/Footer.stories.tsx

@@ -15,7 +15,7 @@ import { TextInput } from '../../forms/TextInput/TextInput'
 import logoImg from 'uswds/dist/img/logo-img.png'
 
 export default {
-  title: 'Footer/Footer',
+  title: 'Components/Footer',
   component: Footer,
   parameters: {
     info: `

src/components/Footer/FooterNav/FooterNav.stories.tsx

@@ -5,7 +5,7 @@ import { Footer } from '../Footer/Footer'
 import { FooterNav } from './FooterNav'
 
 export default {
-  title: 'Footer/FooterNav',
+  title: 'Components/Footer/FooterNav',
   component: FooterNav,
   parameters: {
     info: `

src/components/Footer/Logo/Logo.stories.tsx

@@ -6,7 +6,7 @@ import { Logo } from './Logo'
 import logoImg from 'uswds/src/img/logo-img.png'
 
 export default {
-  title: 'Footer/Logo',
+  title: 'Components/Footer/Logo',
   component: Logo,
   parameters: {
     info: `

src/components/Footer/SocialLinks/SocialLinks.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { SocialLinks } from './SocialLinks'
 
 export default {
-  title: 'Footer/SocialLinks',
+  title: 'Components/Footer/SocialLinks',
   component: SocialLinks,
   parameters: {
     info: `

src/components/GovBanner/GovBanner.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { GovBanner } from './GovBanner'
 
-export default { title: 'GovBanner', component: GovBanner }
+export default { title: 'Components/Banner', component: GovBanner }
 
 export const govBannerDefault = (): React.ReactElement => (
   <GovBanner aria-label="Official government website" />

src/components/Link/Link.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from './Link'
 
 export default {
-  title: 'Link',
+  title: 'Components/Typography/Link',
   component: Link,
   parameters: {
     info: `Link component

src/components/Modal/Modal.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '../Button/Button'
 import { Modal, Overlay, ModalContainer, connectModal, useModal } from './Modal'
 
 export default {
-  title: 'Modal',
+  title: 'Other/Modal',
   component: Modal,
   parameters: {
     info: `Truss-designed component`,

src/components/Search/Search.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Search } from './Search'
 
 export default {
-  title: 'Search',
+  title: 'Components/Search',
   component: Search,
   parameters: {
     info: `

src/components/SideNav/SideNav.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SideNav } from './SideNav'
 
 export default {
-  title: 'SideNav',
+  title: 'Components/Side navigation',
   component: SideNav,
 }
 

src/components/Table/Table.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Table } from './Table'
 
 export default {
-  title: 'Table',
+  title: 'Components/Table',
   component: Table,
   parameters: {
     info: `

src/components/Tag/Tag.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Tag } from './Tag'
 
 export default {
-  title: 'Tag',
+  title: 'Components/Tag',
   component: Tag,
   parameters: {
     info: `

src/components/card/Card.stories.tsx

@@ -9,7 +9,7 @@ import { CardMedia } from './CardMedia/CardMedia'
 import { Button } from '../Button/Button'
 
 export default {
-  title: 'Card',
+  title: 'Components/Card',
   component: Card,
   parameters: {
     info: `

src/components/forms/CharacterCount/CharacterCount.stories.tsx

@@ -5,7 +5,7 @@ import { FormGroup } from '../FormGroup/FormGroup'
 import { Label } from '../Label/Label'
 
 export default {
-  title: 'Forms/CharacterCount',
+  title: 'Components/Form controls/CharacterCount',
   parameters: {
     info: `
 USWDS 2.0 Character count component

src/components/forms/Checkbox/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Checkbox } from './Checkbox'
 
 export default {
-  title: 'Forms/Checkbox',
+  title: 'Components/Form controls/Checkbox',
   component: Checkbox,
   parameters: {
     info: `

src/components/forms/ComboBox/ComboBox.stories.tsx

@@ -7,7 +7,7 @@ import { Label } from '../Label/Label'
 import { fruits } from './fruits'
 
 export default {
-  title: 'Forms/ComboBox',
+  title: 'Components/Form controls/Combo box',
   component: ComboBox,
   parameters: {
     info: `

src/components/forms/DateInput/DateInput.stories.tsx

@@ -4,7 +4,7 @@ import { DateInputGroup } from '../DateInputGroup/DateInputGroup'
 import { Fieldset } from '../Fieldset/Fieldset'
 
 export default {
-  title: 'Forms/DateInput',
+  title: 'Components/Form controls/Date input',
   component: DateInput,
   parameters: {
     info: `

src/components/forms/Dropdown/Dropdown.stories.tsx

@@ -4,7 +4,7 @@ import { Dropdown } from './Dropdown'
 import { Label } from '../Label/Label'
 
 export default {
-  title: 'Forms/Dropdown',
+  title: 'Components/Form controls/Dropdown',
   component: Dropdown,
   parameters: {
     info: `

src/components/forms/ErrorMessage/ErrorMessage.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ErrorMessage } from './ErrorMessage'
 
 export default {
-  title: 'Forms/ErrorMessage',
+  title: 'Components/Form elements/ErrorMessage',
   component: ErrorMessage,
   parameters: {
     info: `

src/components/forms/Fieldset/Fieldset.stories.tsx

@@ -7,7 +7,7 @@ import { Checkbox } from '../Checkbox/Checkbox'
 import { Radio } from '../Radio/Radio'
 
 export default {
-  title: 'Forms/Fieldset',
+  title: 'Components/Form elements/Fieldset',
   component: Fieldset,
   parameters: {
     info: `

src/components/forms/Form/Form.stories.tsx

@@ -13,7 +13,7 @@ import { TextInput } from '../TextInput/TextInput'
 import { Textarea } from '../Textarea/Textarea'
 
 export default {
-  title: 'Forms/Form',
+  title: 'Components/Form templates',
   component: Form,
   parameters: {
     info: `

src/components/forms/FormGroup/FormGroup.stories.tsx

@@ -6,7 +6,7 @@ import { TextInput } from '../TextInput/TextInput'
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
 
 export default {
-  title: 'Forms/FormGroup',
+  title: 'Components/Form elements/FormGroup',
   component: FormGroup,
   parameters: {
     info: `

src/components/forms/Label/Label.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Label } from './Label'
 
 export default {
-  title: 'Forms/Label',
+  title: 'Components/Form elements/Label',
   component: Label,
   parameters: {
     info: `

src/components/forms/Radio/Radio.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Radio } from './Radio'
 
 export default {
-  title: 'Forms/Radio',
+  title: 'Components/Form controls/Radio buttons',
   component: Radio,
   parameters: {
     info: `

src/components/forms/RangeInput/RangeInput.stories.tsx

@@ -3,7 +3,7 @@ import { RangeInput } from './RangeInput'
 import { Label } from '../Label/Label'
 
 export default {
-  title: 'Forms/RangeInput',
+  title: 'Components/Form controls/Range slider',
   component: RangeInput,
   parameters: {
     info: `

src/components/forms/TextInput/TextInput.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { TextInput } from './TextInput'
 
 export default {
-  title: 'Forms/TextInput',
+  title: 'Components/Form controls/Text input',
   component: TextInput,
   parameters: {
     info: `

src/components/forms/Textarea/Textarea.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Textarea } from './Textarea'
 
 export default {
-  title: 'Forms/Textarea',
+  title: 'Components/Form controls/Textarea',
   component: Textarea,
   parameters: {
     info: `

src/components/forms/Validation/Validation.stories.tsx

@@ -9,7 +9,7 @@ import { ValidationChecklist } from './ValidationChecklist'
 import { ValidationItem } from './ValidationItem'
 
 export default {
-  title: 'Forms/Validation',
+  title: 'Components/Form controls/Validation',
   component: ValidationChecklist,
   subcomponents: { ValidationItem },
   parameters: {

src/components/grid/Grid.stories.tsx

@@ -4,7 +4,7 @@ import { GridContainer } from './GridContainer/GridContainer'
 import { Grid } from './Grid/Grid'
 
 export default {
-  title: 'Grid',
+  title: 'Components/Grid',
   component: Grid,
   parameters: {
     info: `

src/components/header/ExtendedNav/ExtendedNav.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ExtendedNav } from './ExtendedNav'
 
 export default {
-  title: 'Header/ExtendedNav',
+  title: 'Components/Header/ExtendedNav',
   component: ExtendedNav,
   parameters: {
     info: `

src/components/header/Header/Header.stories.tsx

@@ -11,7 +11,7 @@ import { NavDropDownButton } from '../NavDropDownButton/NavDropDownButton'
 import { ExtendedNav } from '../ExtendedNav/ExtendedNav'
 
 export default {
-  title: 'Header/Header',
+  title: 'Components/Header',
   component: Header,
   parameters: {
     info: `

src/components/header/MegaMenu/MegaMenu.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { MegaMenu } from './MegaMenu'
 
 export default {
-  title: 'Header/MegaMenu',
+  title: 'Components/Header/MegaMenu',
   component: MegaMenu,
   parameters: {
     info: `

src/components/header/Menu/Menu.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Menu } from './Menu'
 
 export default {
-  title: 'Header/Menu',
+  title: 'Components/Header/Menu',
   component: Menu,
   parameters: {
     info: `

src/components/header/NavCloseButton/NavCloseButton.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { NavCloseButton } from './NavCloseButton'
 
 export default {
-  title: 'Header/NavCloseButton',
+  title: 'Components/Header/NavCloseButton',
   component: NavCloseButton,
   parameters: {
     info: `

src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx

@@ -4,7 +4,7 @@ import { Header } from '../Header/Header'
 import { PrimaryNav } from '../PrimaryNav/PrimaryNav'
 
 export default {
-  title: 'Header/NavDropDownButton',
+  title: 'Components/Header/NavDropDownButton',
   component: NavDropDownButton,
   parameters: {
     info: `

src/components/header/NavList/NavList.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { NavList } from './NavList'
 
 export default {
-  title: 'Header/NavList',
+  title: 'Components/Header/NavList',
   component: NavList,
   parameters: {
     info: `

src/components/header/NavMenuButton/NavMenuButton.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { NavMenuButton } from './NavMenuButton'
 
 export default {
-  title: 'Header/NavMenuButton',
+  title: 'Components/Header/NavMenuButton',
   component: NavMenuButton,
   parameters: {
     info: `

src/components/header/PrimaryNav/PrimaryNav.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { PrimaryNav } from './PrimaryNav'
 
 export default {
-  title: 'Header/PrimaryNav',
+  title: 'Components/Header/PrimaryNav',
   component: PrimaryNav,
   parameters: {
     info: `