docs: shuffle the sidebar around to be easier to digest

.storybook/preview.js

@@ -27,6 +27,19 @@ export const parameters = {
     },
     defaultTheme: 'Default',
   },
+  options: {
+    storySort: {
+      order: [
+        'Geting Started',
+        'Migration',
+        'Support',
+        'Showroom',
+        'Foundations',
+        'Components',
+        'Recipes',
+      ],
+    },
+  },
   docs: {
     page: ({ of }) => {
       const resolvedOf = useOf(of || 'story', ['story', 'meta']);

src/components/canvas/Alert/Alert.stories.tsx

@@ -9,7 +9,7 @@ import Spacing from 'components/composition/Spacing/Spacing';
 import Button from 'components/controls/Button/Button';
 
 export default {
-  title: 'Canvas/Alert',
+  title: 'Components/Canvas/Alert',
   component: Alert,
 } as Meta;
 

src/components/canvas/Card/Card.stories.tsx

@@ -7,7 +7,7 @@ import Grid from 'components/composition/Grid/Grid';
 import Skin, { skins } from 'components/composition/Skin/Skin';
 
 export default {
-  title: 'Canvas/Card',
+  title: 'Components/Canvas/Card',
   component: Card,
 } as ComponentMeta<typeof Card>;
 

src/components/canvas/Section/Section.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0';
+import { Meta } from '@storybook/react';
 import React from 'react';
 
 import Section from './Section';
@@ -10,7 +10,7 @@ import Wrap from 'components/composition/Wrap/Wrap';
 import Button from 'components/controls/Button/Button';
 
 export default {
-  title: 'Canvas/Section',
+  title: 'Components/Canvas/Section',
   component: Section,
   parameters: {
     layout: 'fullscreen',

src/components/composition/Enter/Enter.stories.tsx

@@ -9,7 +9,7 @@ import Spacing from 'components/composition/Spacing/Spacing';
 import Button from 'components/controls/Button/Button';
 
 export default {
-  title: 'Composition/Enter',
+  title: 'Components/Composition/Enter',
   component: Enter,
   parameters: {
     a11y: {

src/components/composition/FormGroup/FormGroup.stories.tsx

@@ -16,7 +16,7 @@ import Radio from 'components/controls/Radio/Radio';
 import TextButton from 'components/controls/TextButton/TextButton';
 
 export default {
-  title: 'Composition/Form group',
+  title: 'Components/Composition/Form group',
   component: FormGroup,
 } as Meta;
 

src/components/composition/Grid/Grid.stories.tsx

@@ -6,7 +6,7 @@ import Grid from './Grid';
 import Card from 'components/canvas/Card/Card';
 
 export default {
-  title: 'Composition/Grid',
+  title: 'Components/Composition/Grid',
   component: Grid,
   subcomponents: {
     GridItem: Grid.Item,

src/components/composition/List/List.stories.tsx

@@ -10,7 +10,7 @@ import Button from 'components/controls/Button/Button';
 import Checkbox from 'components/controls/Checkbox/Checkbox';
 
 export default {
-  title: 'Composition/List',
+  title: 'Components/Composition/List',
   component: List,
   subcomponents: {
     ListItem: List.Item,

src/components/composition/Modal/Modal.stories.tsx

@@ -9,7 +9,7 @@ import Card from 'components/canvas/Card/Card';
 import Button from 'components/controls/Button/Button';
 
 export default {
-  title: 'Composition/Modal',
+  title: 'Components/Composition/Modal',
   component: Modal,
   subcomponents: {
     ModalInner: Modal.Inner,

src/components/composition/Skin/Skin.stories.tsx

@@ -10,7 +10,7 @@ import Spacing from 'components/composition/Spacing/Spacing';
 import Button from 'components/controls/Button/Button';
 
 export default {
-  title: 'Composition/Skin',
+  title: 'Components/Composition/Skin',
   component: Skin,
   parameters: {
     layout: 'fullscreen',

src/components/composition/Spacing/Spacing.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Spacing from './Spacing';
 
 export default {
-  title: 'Composition/Spacing',
+  title: 'Components/Composition/Spacing',
   component: Spacing,
 } as Meta;
 

src/components/composition/Sticky/Sticky.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Sticky from './Sticky';
 
 export default {
-  title: 'Composition/Sticky',
+  title: 'Components/Composition/Sticky',
   component: Sticky,
 } as Meta;
 

src/components/composition/Wrap/Wrap.stories.tsx

@@ -7,7 +7,7 @@ import Card from 'components/canvas/Card/Card';
 import Spacing from 'components/composition/Spacing/Spacing';
 
 export default {
-  title: 'Composition/Wrap',
+  title: 'Components/Composition/Wrap',
   component: Wrap,
 } as Meta;
 

src/components/content/Badge/Badge.stories.tsx

@@ -7,7 +7,7 @@ import Grid from 'components/composition/Grid/Grid';
 import Skin, { emphasisSkins, skins } from 'components/composition/Skin/Skin';
 
 export default {
-  title: 'Content/Badge',
+  title: 'Components/Content/Badge',
   component: Badge,
 } as Meta;
 

src/components/content/BarStack/BarStack.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import BarStack from './BarStack';
 
 export default {
-  title: 'Content/Bar Stack',
+  title: 'Components/Content/Bar Stack',
   component: BarStack,
   subcomponents: {
     BarStackItem: BarStack.Item,

src/components/content/Container/Container.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Container from './Container';
 
 export default {
-  title: 'Content/Container',
+  title: 'Components/Content/Container',
   component: Container,
 } as Meta;
 

src/components/content/ContainerSvg/ContainerSvg.stories.tsx

@@ -6,7 +6,7 @@ import ContainerSvg from './ContainerSvg';
 import Grid from 'components/composition/Grid/Grid';
 
 export default {
-  title: 'Content/ContainerSvg',
+  title: 'Components/Content/ContainerSvg',
   component: ContainerSvg,
 } as Meta;
 

src/components/content/Eyebrow/Eyebrow.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Eyebrow from './Eyebrow';
 
 export default {
-  title: 'Content/Eyebrow',
+  title: 'Components/Content/Eyebrow',
   component: Eyebrow,
 } as Meta;
 

src/components/content/Faq/Faq.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Faq from './Faq';
 
 export default {
-  title: 'Content/Faq',
+  title: 'Components/Content/Faq',
   component: Faq,
   parameters: {
     docs: {

src/components/content/HelpText/HelpText.stories.tsx

@@ -8,7 +8,7 @@ import Input from 'components/controls/Input/Input';
 import Label from 'components/controls/Label/Label';
 
 export default {
-  title: 'Content/Help text',
+  title: 'Components/Content/Help text',
   component: HelpText,
   parameters: {
     a11y: {

src/components/content/Icon/Icon.stories.tsx

@@ -7,7 +7,7 @@ import Card from 'components/canvas/Card/Card';
 import Grid from 'components/composition/Grid/Grid';
 
 export default {
-  title: 'Content/Icon',
+  title: 'Components/Content/Icon',
   component: Icon,
 } as Meta;
 

src/components/content/LoadingButton/LoadingButton.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import LoadingButton from './LoadingButton';
 
 export default {
-  title: 'Content/Loading Button',
+  title: 'Components/Content/Loading Button',
   component: LoadingButton,
 } as Meta;
 

src/components/content/LoadingFormGroup/LoadingFormGroup.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import LoadingFormGroup from './LoadingFormGroup';
 
 export default {
-  title: 'Content/Loading Form Group',
+  title: 'Components/Content/Loading Form Group',
   component: LoadingFormGroup,
 } as Meta;
 

src/components/content/LoadingImage/LoadingImage.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import LoadingImage from './LoadingImage';
 
 export default {
-  title: 'Content/Loading Image',
+  title: 'Components/Content/Loading Image',
   component: LoadingImage,
 } as Meta;
 

src/components/content/LoadingSpinner/LoadingSpinner.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import LoadingSpinner from './LoadingSpinner';
 
 export default {
-  title: 'Content/Loading Spinner',
+  title: 'Components/Content/Loading Spinner',
   component: LoadingSpinner,
 } as Meta;
 

src/components/content/LoadingText/LoadingText.stories.tsx

@@ -6,7 +6,7 @@ import LoadingText from './LoadingText';
 import Spacing from 'components/composition/Spacing/Spacing';
 
 export default {
-  title: 'Content/Loading Text',
+  title: 'Components/Content/Loading Text',
   component: LoadingText,
   parameters: {
     a11y: {

src/components/content/LoadingTitle/LoadingTitle.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import LoadingTitle from './LoadingTitle';
 
 export default {
-  title: 'Content/Loading Title',
+  title: 'Components/Content/Loading Title',
   component: LoadingTitle,
   parameters: {
     a11y: {

src/components/content/Longform/Longform.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Longform from './Longform';
 
 export default {
-  title: 'Content/Longform',
+  title: 'Components/Content/Longform',
   component: Longform,
 } as Meta;
 

src/components/content/PieChart/PieChart.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import PieChart from './PieChart';
 
 export default {
-  title: 'Content/PieChart',
+  title: 'Components/Content/PieChart',
   component: PieChart,
 } as Meta;
 

src/components/content/StreamDot/StreamDot.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import StreamDot from './StreamDot';
 
 export default {
-  title: 'Content/Stream Dot',
+  title: 'Components/Content/Stream Dot',
   component: StreamDot,
 } as Meta;
 

src/components/content/Text/Text.stories.tsx

@@ -76,7 +76,7 @@ const transforms = ['uppercase', 'lowercase', 'capitalize'];
 const weights = ['base', 'light', 'bold', 'black'];
 
 export default {
-  title: 'Content/Text',
+  title: 'Components/Content/Text',
   argTypes: {
     as: {
       control: {

src/components/content/VehicleSvg/VehicleSvg.stories.tsx

@@ -6,7 +6,7 @@ import VehicleSvg from './VehicleSvg';
 import Grid from 'components/composition/Grid/Grid';
 
 export default {
-  title: 'Content/VehicleSvg',
+  title: 'Components/Content/VehicleSvg',
   component: VehicleSvg,
 } as Meta;
 

src/components/controls/Button/Button.stories.tsx

@@ -9,7 +9,7 @@ import Spacing from 'components/composition/Spacing/Spacing';
 import Icon from 'components/content/Icon/Icon';
 
 export default {
-  title: 'Controls/Button',
+  title: 'Components/Controls/Button',
   component: Button,
 } as Meta;
 

src/components/controls/Checkbox/Checkbox.stories.tsx

@@ -9,7 +9,7 @@ import FormGroup from 'components/composition/FormGroup/FormGroup';
 import Grid from 'components/composition/Grid/Grid';
 
 export default {
-  title: 'Controls/Checkbox',
+  title: 'Components/Controls/Checkbox',
   component: Checkbox,
   parameters: {
     a11y: {

src/components/controls/Collapse/Collapse.stories.tsx

@@ -6,7 +6,7 @@ import Collapse, { CollapseProps } from './Collapse';
 import Card from 'components/canvas/Card/Card';
 
 export default {
-  title: 'Controls/Collapse',
+  title: 'Components/Controls/Collapse',
   component: Collapse,
 } as Meta;
 

src/components/controls/Datepicker/Datepicker.stories.tsx

@@ -7,7 +7,7 @@ import Label from '../Label/Label';
 import Datepicker from './Datepicker';
 
 export default {
-  title: 'Controls/Datepicker',
+  title: 'Components/Controls/Datepicker',
   component: Datepicker,
 } as Meta;
 

src/components/controls/Dropdown/Dropdown.stories.tsx

@@ -7,7 +7,7 @@ import Icon from 'components/content/Icon/Icon';
 import Button from 'components/controls/Button/Button';
 
 export default {
-  title: 'Controls/Dropdown',
+  title: 'Components/Controls/Dropdown',
   component: Dropdown,
 } as Meta;
 

src/components/controls/Fieldset/Fieldset.stories.tsx

@@ -5,7 +5,7 @@ import Fieldset from './Fieldset';
 import Legend from './Legend';
 
 export default {
-  title: 'Controls/Fieldset',
+  title: 'Components/Controls/Fieldset',
   component: Fieldset,
   subcomponents: {
     Legend,

src/components/controls/Input/Input.stories.tsx

@@ -6,7 +6,7 @@ import Icon from '../../content/Icon/Icon';
 import Input from './Input';
 
 export default {
-  title: 'Controls/Input',
+  title: 'Components/Controls/Input',
   component: Input,
   parameters: {
     a11y: {

src/components/controls/Label/Label.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Label from './Label';
 
 export default {
-  title: 'Controls/Label',
+  title: 'Components/Controls/Label',
   component: Label,
 } as Meta;
 

src/components/controls/Menubar/Menubar.stories.tsx

@@ -7,7 +7,7 @@ import Menubar from './Menubar';
 import Icon from 'components/content/Icon/Icon';
 
 export default {
-  title: 'Controls/Menubar',
+  title: 'Components/Controls/Menubar',
   component: Menubar,
   subcomponents: {
     MenubarTabs: Menubar.Tabs,

src/components/controls/Radio/Radio.stories.tsx

@@ -9,7 +9,7 @@ import FormGroup from 'components/composition/FormGroup/FormGroup';
 import Grid from 'components/composition/Grid/Grid';
 
 export default {
-  title: 'Controls/Radio',
+  title: 'Components/Controls/Radio',
   component: Radio,
 } as Meta;