next batch of updates

Author: LinKCoding

packages/styleguide/src/lib/Atoms/Animations/About.mdx

@@ -2,6 +2,9 @@ import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 
+import { parameters as expandInCollapseOutParameters } from './ExpandInCollapseOut/ExpandInCollapseOut.mdx';
+import { parameters as rotationParameters } from './Rotation/Rotation.mdx';
+
 export const parameters = {
   id: 'Atoms/Animations',
   title: 'Animations',
@@ -17,17 +20,16 @@ Animations should not be the click target of actions, but rather the container f
 <TableOfContents
   links={[
     {
-      id: '/Atoms/Animations/Rotation',
-      subtitle: 'A container that can rotate its children.',
-      title: 'Rotation',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${rotationParameters.title}`,
+      subtitle: rotationParameters.subtitle,
+      title: rotationParameters.title,
+      status: rotationParameters.status,
     },
     {
-      id: '/Atoms/Animations/ExpandInCollapseOut',
-      subtitle:
-        'A container that applies an expand and collapse animation to its children.',
-      title: 'ExpandInCollapseOut',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${expandInCollapseOutParameters.title}`,
+      subtitle: expandInCollapseOutParameters.subtitle,
+      title: expandInCollapseOutParameters.title,
+      status: expandInCollapseOutParameters.status,
     },
   ]}
 />

packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as ExpandInCollapseOut from './ExpandInCollapseOut.stories';
 
 export const parameters = {
+  title: 'ExpandInCollapseOut',
   subtitle: `A container that applies an expand and collapse animation to its children.`,
   status: 'current',
   source: {

packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as RotationStories from './Rotation.stories';
 
 export const parameters = {
+  title: 'Rotation',
   subtitle: 'A container that can rotate its children.',
   status: 'current',
   source: {

packages/styleguide/src/lib/Atoms/Buttons/About.mdx

@@ -2,6 +2,13 @@ import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 
+import { parameters as buttonParameters } from './Button/Button.mdx';
+import { parameters as ctaButtonParameters } from './CTAButton/CTAButton.mdx';
+import { parameters as fillButtonParameters } from './FillButton/FillButton.mdx';
+import { parameters as iconButtonParameters } from './IconButton/IconButton.mdx';
+import { parameters as strokeButtonParameters } from './StrokeButton/StrokeButton.mdx';
+import { parameters as textButtonParameters } from './TextButton/TextButton.mdx';
+
 export const parameters = {
   id: 'Atoms/Buttons',
   title: 'Buttons',
@@ -15,44 +22,40 @@ export const parameters = {
 <TableOfContents
   links={[
     {
-      id: 'Atoms/Buttons/Button',
-      subtitle: 'Button atoms for specfic use cases.',
-      title: 'Button',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${buttonParameters.title}`,
+      subtitle: buttonParameters.subtitle,
+      title: buttonParameters.title,
+      status: buttonParameters.status,
     },
     {
-      id: 'Atoms/Buttons/CTAButton',
-      subtitle:
-        'A "Call to Action" button that is used to prompt users to take a specific action.',
-      title: 'CTAButton',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${ctaButtonParameters.title}`,
+      subtitle: ctaButtonParameters.subtitle,
+      title: ctaButtonParameters.title,
+      status: ctaButtonParameters.status,
     },
     {
-      id: 'Atoms/Buttons/FillButton',
-      subtitle:
-        'A button that has a solid background color and is used for primary actions.',
-      title: 'FillButton',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${fillButtonParameters.title}`,
+      subtitle: fillButtonParameters.subtitle,
+      title: fillButtonParameters.title,
+      status: fillButtonParameters.status,
     },
     {
-      id: 'Atoms/Buttons/StrokeButton',
-      subtitle:
-        'A button that has a outline around its text and is used for secondary actions.',
-      title: 'StrokeButton',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${strokeButtonParameters.title}`,
+      subtitle: strokeButtonParameters.subtitle,
+      title: strokeButtonParameters.title,
+      status: strokeButtonParameters.status,
     },
     {
-      id: 'Atoms/Buttons/TextButton',
-      subtitle:
-        'A button that usually only has text and is used for tertiary actions.',
-      title: 'TextButton',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${textButtonParameters.title}`,
+      subtitle: textButtonParameters.subtitle,
+      title: textButtonParameters.title,
+      status: textButtonParameters.status,
     },
     {
-      id: 'Atoms/Buttons/IconButton',
-      subtitle: 'A button that displays a clickable icon.',
-      title: 'IconButton',
-      status: 'current',
+      id: `Atoms/${parameters.title}/${iconButtonParameters.title}`,
+      subtitle: iconButtonParameters.subtitle,
+      title: iconButtonParameters.title,
+      status: iconButtonParameters.status,
     },
   ]}
 />

packages/styleguide/src/lib/Atoms/Buttons/Button/Button.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as ButtonStories from './Button.stories';
 
 export const parameters = {
+  title: 'Button',
   subtitle: `Button atoms for specfic use cases.`,
   design: {
     type: 'figma',

packages/styleguide/src/lib/Atoms/Buttons/CTAButton/CTAButton.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as CTAButtonStories from './CTAButton.stories';
 
 export const parameters = {
+  title: 'CTAButton',
   subtitle: `A "Call to Action" button that is used to prompt users to take a specific action.`,
   design: {
     type: 'figma',

packages/styleguide/src/lib/Atoms/Buttons/FillButton/FillButton.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as FillButtonStories from './FillButton.stories';
 
 export const parameters = {
+  title: 'FillButton',
   subtitle: `A button that has a solid background color and is used for primary actions.`,
   design: {
     type: 'figma',

packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as IconButtonStories from './IconButton.stories';
 
 export const parameters = {
+  title: 'IconButton',
   subtitle: `A button that displays a clickable icon.`,
   design: {
     type: 'figma',

packages/styleguide/src/lib/Atoms/Buttons/StrokeButton/StrokeButton.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as StrokeButtonStories from './StrokeButton.stories';
 
 export const parameters = {
+  title: 'StrokeButton',
   subtitle: `A button that has a outline around its text and is used for secondary actions.`,
   design: {
     type: 'figma',

packages/styleguide/src/lib/Atoms/Buttons/TextButton/TextButton.mdx

@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as TextButtonStories from './TextButton.stories';
 
 export const parameters = {
+  title: 'TextButton',
   subtitle: `A button that usually only has text and is used for tertiary actions.`,
   design: {
     type: 'figma',