From e7607d4c4563b11d38713b6ccc3edbeea1ee7c5f Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 13 Jan 2021 16:22:47 -0600
Subject: [PATCH 1/2] Reorganize component story titles to reflect USWDS org

---
 .storybook/preview.ts                                      | 7 ++++++-
 src/components/Accordion/Accordion.stories.tsx             | 2 +-
 src/components/Alert/Alert.stories.tsx                     | 2 +-
 src/components/Button/Button.stories.tsx                   | 2 +-
 src/components/ButtonGroup/ButtonGroup.stories.tsx         | 2 +-
 src/components/Footer/Address/Address.stories.tsx          | 2 +-
 src/components/Footer/Footer/Footer.stories.tsx            | 2 +-
 src/components/Footer/FooterNav/FooterNav.stories.tsx      | 2 +-
 src/components/Footer/Logo/Logo.stories.tsx                | 2 +-
 src/components/Footer/SocialLinks/SocialLinks.stories.tsx  | 2 +-
 src/components/GovBanner/GovBanner.stories.tsx             | 2 +-
 src/components/Link/Link.stories.tsx                       | 2 +-
 src/components/Modal/Modal.stories.tsx                     | 2 +-
 src/components/Search/Search.stories.tsx                   | 2 +-
 src/components/SideNav/SideNav.stories.tsx                 | 2 +-
 src/components/Table/Table.stories.tsx                     | 2 +-
 src/components/Tag/Tag.stories.tsx                         | 2 +-
 src/components/card/Card.stories.tsx                       | 2 +-
 .../forms/CharacterCount/CharacterCount.stories.tsx        | 2 +-
 src/components/forms/Checkbox/Checkbox.stories.tsx         | 2 +-
 src/components/forms/ComboBox/ComboBox.stories.tsx         | 2 +-
 src/components/forms/DateInput/DateInput.stories.tsx       | 2 +-
 src/components/forms/Dropdown/Dropdown.stories.tsx         | 2 +-
 src/components/forms/ErrorMessage/ErrorMessage.stories.tsx | 2 +-
 src/components/forms/Fieldset/Fieldset.stories.tsx         | 2 +-
 src/components/forms/Form/Form.stories.tsx                 | 2 +-
 src/components/forms/FormGroup/FormGroup.stories.tsx       | 2 +-
 src/components/forms/Label/Label.stories.tsx               | 2 +-
 src/components/forms/Radio/Radio.stories.tsx               | 2 +-
 src/components/forms/RangeInput/RangeInput.stories.tsx     | 2 +-
 src/components/forms/TextInput/TextInput.stories.tsx       | 2 +-
 src/components/forms/Textarea/Textarea.stories.tsx         | 2 +-
 src/components/forms/Validation/Validation.stories.tsx     | 2 +-
 src/components/grid/Grid.stories.tsx                       | 2 +-
 src/components/header/ExtendedNav/ExtendedNav.stories.tsx  | 2 +-
 src/components/header/Header/Header.stories.tsx            | 2 +-
 src/components/header/MegaMenu/MegaMenu.stories.tsx        | 2 +-
 src/components/header/Menu/Menu.stories.tsx                | 2 +-
 .../header/NavCloseButton/NavCloseButton.stories.tsx       | 2 +-
 .../header/NavDropDownButton/NavDropDownButton.stories.tsx | 2 +-
 src/components/header/NavList/NavList.stories.tsx          | 2 +-
 .../header/NavMenuButton/NavMenuButton.stories.tsx         | 2 +-
 src/components/header/PrimaryNav/PrimaryNav.stories.tsx    | 2 +-
 src/components/header/Title/Title.stories.tsx              | 2 +-
 src/stories/swatches.stories.tsx                           | 2 +-
 src/stories/type.stories.tsx                               | 4 ++--
 46 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 97d2a7b381..8ed07cbbe0 100644
--- a/.storybook/preview.ts
+++ b/.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: ['Design tokens', 'Components', 'Page templates', 'Other'],
+    },
+  },
 }
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 5bc7849276..a17f4d783a 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/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: `
diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
index 2df8b34ea5..7fdadfd636 100644
--- a/src/components/Alert/Alert.stories.tsx
+++ b/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: `
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index b2ad0a7ca2..28a9c0aeb0 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/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: `
diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
index a07a5aaae3..217322f021 100644
--- a/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/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: `
diff --git a/src/components/Footer/Address/Address.stories.tsx b/src/components/Footer/Address/Address.stories.tsx
index 2296900ba5..329fb8dabe 100644
--- a/src/components/Footer/Address/Address.stories.tsx
+++ b/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: `
diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx
index 8bfd0f8527..e61f67ebe3 100644
--- a/src/components/Footer/Footer/Footer.stories.tsx
+++ b/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: `
diff --git a/src/components/Footer/FooterNav/FooterNav.stories.tsx b/src/components/Footer/FooterNav/FooterNav.stories.tsx
index 6521529d8f..9c29f6f93d 100644
--- a/src/components/Footer/FooterNav/FooterNav.stories.tsx
+++ b/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: `
diff --git a/src/components/Footer/Logo/Logo.stories.tsx b/src/components/Footer/Logo/Logo.stories.tsx
index 285110a23e..17b31ab4c7 100644
--- a/src/components/Footer/Logo/Logo.stories.tsx
+++ b/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: `
diff --git a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx b/src/components/Footer/SocialLinks/SocialLinks.stories.tsx
index c1f8c4b759..5176d1fe7f 100644
--- a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx
+++ b/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: `
diff --git a/src/components/GovBanner/GovBanner.stories.tsx b/src/components/GovBanner/GovBanner.stories.tsx
index a9ee77e847..a57c4ab6ff 100644
--- a/src/components/GovBanner/GovBanner.stories.tsx
+++ b/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 govBanner = (): React.ReactElement => (
   <GovBanner aria-label="Official government website" />
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index 5968294052..2dd55c5591 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/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
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index e57ab9a359..4ff3d54017 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/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`,
diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx
index c5a860698d..43646881db 100644
--- a/src/components/Search/Search.stories.tsx
+++ b/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: `
diff --git a/src/components/SideNav/SideNav.stories.tsx b/src/components/SideNav/SideNav.stories.tsx
index a45539bf50..3d20c39717 100644
--- a/src/components/SideNav/SideNav.stories.tsx
+++ b/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,
 }
 
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 507a3d5429..a8273666a9 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/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: `
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index 4541400a3c..dd1fd74343 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/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: `
diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx
index d09e8661c0..70637d472a 100644
--- a/src/components/card/Card.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/CharacterCount/CharacterCount.stories.tsx b/src/components/forms/CharacterCount/CharacterCount.stories.tsx
index 0cc19db3c6..0bb27d1764 100644
--- a/src/components/forms/CharacterCount/CharacterCount.stories.tsx
+++ b/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
diff --git a/src/components/forms/Checkbox/Checkbox.stories.tsx b/src/components/forms/Checkbox/Checkbox.stories.tsx
index 9947ade2d7..458dce70ee 100644
--- a/src/components/forms/Checkbox/Checkbox.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/ComboBox/ComboBox.stories.tsx b/src/components/forms/ComboBox/ComboBox.stories.tsx
index 16db0b635c..5d37c27cbc 100644
--- a/src/components/forms/ComboBox/ComboBox.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx
index c02a5faf94..57e732ae5c 100644
--- a/src/components/forms/DateInput/DateInput.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Dropdown/Dropdown.stories.tsx b/src/components/forms/Dropdown/Dropdown.stories.tsx
index 1fdf9d22b3..5ee874957f 100644
--- a/src/components/forms/Dropdown/Dropdown.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx b/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx
index 2f2178253f..8ae9e511f1 100644
--- a/src/components/forms/ErrorMessage/ErrorMessage.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Fieldset/Fieldset.stories.tsx b/src/components/forms/Fieldset/Fieldset.stories.tsx
index 1ce1bb31a6..43f477a35b 100644
--- a/src/components/forms/Fieldset/Fieldset.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx
index 2785d61725..f89e4b5493 100644
--- a/src/components/forms/Form/Form.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/FormGroup/FormGroup.stories.tsx b/src/components/forms/FormGroup/FormGroup.stories.tsx
index a29ff93fd8..92a8829975 100644
--- a/src/components/forms/FormGroup/FormGroup.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Label/Label.stories.tsx b/src/components/forms/Label/Label.stories.tsx
index de8aaaab38..07de65b0e8 100644
--- a/src/components/forms/Label/Label.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Radio/Radio.stories.tsx b/src/components/forms/Radio/Radio.stories.tsx
index 2fa17d5631..fcfb5af583 100644
--- a/src/components/forms/Radio/Radio.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/RangeInput/RangeInput.stories.tsx b/src/components/forms/RangeInput/RangeInput.stories.tsx
index e172891e8f..03f1a5597d 100644
--- a/src/components/forms/RangeInput/RangeInput.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/TextInput/TextInput.stories.tsx b/src/components/forms/TextInput/TextInput.stories.tsx
index 84726be65d..dc117def1e 100644
--- a/src/components/forms/TextInput/TextInput.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Textarea/Textarea.stories.tsx b/src/components/forms/Textarea/Textarea.stories.tsx
index 2fdcce8abc..78a1c3d278 100644
--- a/src/components/forms/Textarea/Textarea.stories.tsx
+++ b/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: `
diff --git a/src/components/forms/Validation/Validation.stories.tsx b/src/components/forms/Validation/Validation.stories.tsx
index 45ecdb1080..6c0a3148d4 100644
--- a/src/components/forms/Validation/Validation.stories.tsx
+++ b/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: {
diff --git a/src/components/grid/Grid.stories.tsx b/src/components/grid/Grid.stories.tsx
index c4c46b20d3..1fd27e0125 100644
--- a/src/components/grid/Grid.stories.tsx
+++ b/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: `
diff --git a/src/components/header/ExtendedNav/ExtendedNav.stories.tsx b/src/components/header/ExtendedNav/ExtendedNav.stories.tsx
index 26d32eba86..7c945f9112 100644
--- a/src/components/header/ExtendedNav/ExtendedNav.stories.tsx
+++ b/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: `
diff --git a/src/components/header/Header/Header.stories.tsx b/src/components/header/Header/Header.stories.tsx
index 33407b776a..643ea095e6 100644
--- a/src/components/header/Header/Header.stories.tsx
+++ b/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: `
diff --git a/src/components/header/MegaMenu/MegaMenu.stories.tsx b/src/components/header/MegaMenu/MegaMenu.stories.tsx
index c0b7faf4f0..f19696776e 100644
--- a/src/components/header/MegaMenu/MegaMenu.stories.tsx
+++ b/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: `
diff --git a/src/components/header/Menu/Menu.stories.tsx b/src/components/header/Menu/Menu.stories.tsx
index 74ccc8508c..f230a25d63 100644
--- a/src/components/header/Menu/Menu.stories.tsx
+++ b/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: `
diff --git a/src/components/header/NavCloseButton/NavCloseButton.stories.tsx b/src/components/header/NavCloseButton/NavCloseButton.stories.tsx
index 0e712be541..5e34efc7ce 100644
--- a/src/components/header/NavCloseButton/NavCloseButton.stories.tsx
+++ b/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: `
diff --git a/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx b/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx
index 617aaa2343..ecedf95fa7 100644
--- a/src/components/header/NavDropDownButton/NavDropDownButton.stories.tsx
+++ b/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: `
diff --git a/src/components/header/NavList/NavList.stories.tsx b/src/components/header/NavList/NavList.stories.tsx
index 59d51428ac..a489603cad 100644
--- a/src/components/header/NavList/NavList.stories.tsx
+++ b/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: `
diff --git a/src/components/header/NavMenuButton/NavMenuButton.stories.tsx b/src/components/header/NavMenuButton/NavMenuButton.stories.tsx
index 120785ee45..957051f793 100644
--- a/src/components/header/NavMenuButton/NavMenuButton.stories.tsx
+++ b/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: `
diff --git a/src/components/header/PrimaryNav/PrimaryNav.stories.tsx b/src/components/header/PrimaryNav/PrimaryNav.stories.tsx
index 53f524b8dd..0f9624b142 100644
--- a/src/components/header/PrimaryNav/PrimaryNav.stories.tsx
+++ b/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: `
diff --git a/src/components/header/Title/Title.stories.tsx b/src/components/header/Title/Title.stories.tsx
index cbe3700f5c..d31fa6a275 100644
--- a/src/components/header/Title/Title.stories.tsx
+++ b/src/components/header/Title/Title.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Title } from './Title'
 
 export default {
-  title: 'Header/Title',
+  title: 'Components/Header/Title',
   component: Title,
   parameters: {
     info: `
diff --git a/src/stories/swatches.stories.tsx b/src/stories/swatches.stories.tsx
index 687bf7a9d5..e25c2708e1 100644
--- a/src/stories/swatches.stories.tsx
+++ b/src/stories/swatches.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default {
-  title: 'Swatches',
+  title: 'Design tokens/Swatches',
 }
 
 export const BackgroundColors = (): React.ReactElement => (
diff --git a/src/stories/type.stories.tsx b/src/stories/type.stories.tsx
index 0c2a490293..90c1dc4d1d 100644
--- a/src/stories/type.stories.tsx
+++ b/src/stories/type.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 
 export default {
-  title: 'Type',
+  title: 'Components/Typography/Type Styles',
 }
 
-export const Typography = (): React.ReactElement => (
+export const TypeStyles = (): React.ReactElement => (
   <div className="grid-container">
     <h1>Typography</h1>
     <h2>Headers</h2>

From ad5798722ded4a8eb520b0a0e96acb06d71f0502 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 26 Jan 2021 11:24:46 -0600
Subject: [PATCH 2/2] Put Components section first

---
 .storybook/preview.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 8ed07cbbe0..cf8f016924 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -13,7 +13,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Design tokens', 'Components', 'Page templates', 'Other'],
+      order: ['Components', 'Design tokens', 'Page templates', 'Other'],
     },
   },
 }