final batch

LinKCoding · LinKCoding · commit 0207c6a280d3 · 2025-07-30T13:44:05.000-04:00
diff --git a/packages/styleguide/src/lib/Molecules/Modals/About.mdx b/packages/styleguide/src/lib/Molecules/Modals/About.mdx
@@ -2,6 +2,11 @@ import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 
+import { parameters as dialogParameters } from './Dialog/Dialog.mdx';
+import { parameters as modalParameters } from './Modal/Modal.mdx';
+import { parameters as modalDeprecatedParameters } from './ModalDeprecated/ModalDeprecated.mdx';
+import { parameters as overlayParameters } from './Overlay/Overlay.mdx';
+
 export const parameters = {
   id: 'Molecules/Modals',
   title: 'Modals',
@@ -18,29 +23,28 @@ Use a modal to focus a user’s attention on an important piece of information o
 <TableOfContents
   links={[
     {
-      id: 'Molecules/Modals/Dialog',
-      subtitle: 'Structured dialog modals with binary options.',
-      title: 'Dialog',
-      status: 'updating',
+      id: `Molecules/${parameters.title}/${dialogParameters.title}`,
+      subtitle: dialogParameters.subtitle,
+      title: dialogParameters.title,
+      status: dialogParameters.status,
     },
     {
-      id: 'Molecules/Modals/Modal',
-      subtitle: 'A simple Modal portal to escape current DOM Context.',
-      title: 'Modal',
-      status: 'updating',
+      id: `Molecules/${parameters.title}/${modalParameters.title}`,
+      subtitle: modalParameters.subtitle,
+      title: modalParameters.title,
+      status: modalParameters.status,
     },
     {
-      id: 'Molecules/Modals/ModalDeprecated',
-      subtitle: 'Please see the Modal page for all new Modals.',
-      title: 'ModalDeprecated',
-      status: 'deprecated',
+      id: `Molecules/${parameters.title}/${modalDeprecatedParameters.title}`,
+      subtitle: modalDeprecatedParameters.subtitle,
+      title: modalDeprecatedParameters.title,
+      status: modalDeprecatedParameters.status,
     },
     {
-      id: 'Molecules/Modals/Overlay',
-      subtitle:
-        "Overlay primitives are controlled components that are told whether they're open by their parent. They're very basic and don't have animations defined.",
-      title: 'Overlay',
-      status: 'current',
+      id: `Molecules/${parameters.title}/${overlayParameters.title}`,
+      subtitle: overlayParameters.subtitle,
+      title: overlayParameters.title,
+      status: overlayParameters.status,
     },
   ]}
 />
diff --git a/packages/styleguide/src/lib/Molecules/Modals/Dialog/Dialog.mdx b/packages/styleguide/src/lib/Molecules/Modals/Dialog/Dialog.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as DialogStories from './Dialog.stories';
 
 export const parameters = {
+  title: 'Dialog',
   subtitle: `Structured dialog modals with binary options.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as ModalStories from './Modal.stories';
 
 export const parameters = {
+  title: 'Modal',
   subtitle: `A simple Modal portal to escape current DOM Context.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Modals/ModalDeprecated/ModalDeprecated.mdx b/packages/styleguide/src/lib/Molecules/Modals/ModalDeprecated/ModalDeprecated.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as ModalDeprecatedStories from './ModalDeprecated.stories';
 
 export const parameters = {
+  title: 'ModalDeprecated',
   subtitle: `Please see the Modal page for all new Modals.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Modals/Overlay/Overlay.mdx b/packages/styleguide/src/lib/Molecules/Modals/Overlay/Overlay.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as OverlayStories from './Overlay.stories';
 
 export const parameters = {
+  title: 'Overlay',
   subtitle: `Overlay primitives are controlled components that are told whether they're open by their parent. They're very basic and don't have animations defined.`,
   status: 'current',
   source: {
diff --git a/packages/styleguide/src/lib/Molecules/Tips/About.mdx b/packages/styleguide/src/lib/Molecules/Tips/About.mdx
@@ -2,7 +2,10 @@ import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 
+import { parameters as InfoTipParameters } from './InfoTip/InfoTip.mdx';
+import { parameters as PreviewTipParameters } from './PreviewTip/PreviewTip.mdx';
 import { TipsTable } from './TipsTable';
+import { parameters as ToolTipParameters } from './ToolTip/ToolTip.mdx';
 
 export const parameters = {
   id: 'Molecules/Tips',
@@ -22,25 +25,22 @@ Tips come in the form of ToolTip or InfoTips (and eventually link PreviewTip). T
 <TableOfContents
   links={[
     {
-      id: 'Molecules/Tips/InfoTip',
-      subtitle:
-        'A tip triggered by clicking on an information icon button. Use an infotip to provide additional info about a nearby element or content.',
-      title: 'InfoTip',
-      status: 'current',
+      id: `Molecules/${parameters.title}/${InfoTipParameters.title}`,
+      subtitle: InfoTipParameters.subtitle,
+      title: InfoTipParameters.title,
+      status: InfoTipParameters.status,
     },
     {
-      id: 'Molecules/Tips/PreviewTip',
-      subtitle:
-        'An Anchor that provides a snippet of relevant information from the link destination.',
-      title: 'PreviewTip',
-      status: 'current',
+      id: `Molecules/${parameters.title}/${PreviewTipParameters.title}`,
+      subtitle: PreviewTipParameters.subtitle,
+      title: PreviewTipParameters.title,
+      status: PreviewTipParameters.status,
     },
     {
-      id: 'Molecules/Tips/ToolTip',
-      subtitle:
-        'A short tip triggered on hover and focus of an interactive element. Use a tooltip to further explain an element’s primary action, a disabled button state, or to display a label for an icon-only button.',
-      title: 'ToolTip',
-      status: 'current',
+      id: `Molecules/${parameters.title}/${ToolTipParameters.title}`,
+      subtitle: ToolTipParameters.subtitle,
+      title: ToolTipParameters.title,
+      status: ToolTipParameters.status,
     },
   ]}
 />
diff --git a/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx b/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as InfoTipStories from './InfoTip.stories';
 
 export const parameters = {
+  title: 'InfoTip',
   subtitle: `A tip triggered by clicking on an information icon button. Use an infotip to provide additional info about a nearby element or content.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Tips/PreviewTip/PreviewTip.mdx b/packages/styleguide/src/lib/Molecules/Tips/PreviewTip/PreviewTip.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as PreviewTipStories from './PreviewTip.stories';
 
 export const parameters = {
+  title: 'PreviewTip',
   subtitle: `An Anchor that provides a snippet of relevant information from the link destination.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Tips/TipsTable.tsx b/packages/styleguide/src/lib/Molecules/Tips/TipsTable.tsx
@@ -14,23 +14,6 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 const components = {
-  ToolTip: {
-    component: (
-      <IconButton
-        icon={MiniStarIcon}
-        size="small"
-        tip="ToolTip"
-        tipProps={{
-          placement: 'floating',
-        }}
-      />
-    ),
-    status: 'None',
-    useCase: 'Clarify function of a UI element',
-    contents: 'Icon labels, shortcuts, quick tips',
-    triggers: 'On hover and focus',
-    skipTitle: false,
-  },
   InfoTip: {
     component: <InfoTip info="I am an infotip." placement="floating" />,
     status: 'None',
@@ -56,6 +39,23 @@ const components = {
     triggers: 'On hover and focus',
     skipTitle: true,
   },
+  ToolTip: {
+    component: (
+      <IconButton
+        icon={MiniStarIcon}
+        size="small"
+        tip="ToolTip"
+        tipProps={{
+          placement: 'floating',
+        }}
+      />
+    ),
+    status: 'None',
+    useCase: 'Clarify function of a UI element',
+    contents: 'Icon labels, shortcuts, quick tips',
+    triggers: 'On hover and focus',
+    skipTitle: false,
+  },
 };
 
 const colTitles = Object.keys(components) as (keyof typeof components)[];
diff --git a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.mdx b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as ToolTipStories from './ToolTip.stories';
 
 export const parameters = {
+  title: 'ToolTip',
   subtitle: `A short tip triggered on hover and focus of an interactive element. Use a tooltip to further explain an element’s primary action, a disabled button state, or to display a label for an icon-only button.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Toasts/About.mdx b/packages/styleguide/src/lib/Molecules/Toasts/About.mdx
@@ -2,6 +2,9 @@ import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 
+import { parameters as ToastParameters } from './Toast/Toast.mdx';
+import { parameters as ToasterParameters } from './Toaster/Toaster.mdx';
+
 export const parameters = {
   id: 'Molecules/Toasts',
   title: 'Toasts',
@@ -17,17 +20,16 @@ A Toast and Toaster component for lower priority, decorative and celebratory use
 <TableOfContents
   links={[
     {
-      id: 'Molecules/Toasts/Toast',
-      subtitle:
-        'A toast component for asynchronous user feedback containing lower priority, decorative and celebratory user feedback.',
-      title: 'Toast',
-      status: 'updating',
+      id: `Molecules/${parameters.title}/${ToastParameters.title}`,
+      subtitle: ToastParameters.subtitle,
+      title: ToastParameters.title,
+      status: ToastParameters.status,
     },
     {
-      id: 'Molecules/Toasts/Toaster',
-      subtitle: 'A toaster component that applies motion and renders toasts.',
-      title: 'Toaster',
-      status: 'updating',
+      id: `Molecules/${parameters.title}/${ToasterParameters.title}`,
+      subtitle: ToasterParameters.subtitle,
+      title: ToasterParameters.title,
+      status: ToasterParameters.status,
     },
   ]}
 />
diff --git a/packages/styleguide/src/lib/Molecules/Toasts/Toast/Toast.mdx b/packages/styleguide/src/lib/Molecules/Toasts/Toast/Toast.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as ToastStories from './Toast.stories';
 
 export const parameters = {
+  title: 'Toast',
   subtitle: `A toast component for asynchronous user feedback containing lower priority, decorative and celebratory user feedback.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Molecules/Toasts/Toaster/Toaster.mdx b/packages/styleguide/src/lib/Molecules/Toasts/Toaster/Toaster.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as ToasterStories from './Toaster.stories';
 
 export const parameters = {
+  title: 'Toaster',
   subtitle: `A toaster component that applies motion and renders toasts.`,
   design: {
     type: 'figma',
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/About.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/About.mdx
@@ -2,6 +2,11 @@ import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TableOfContents } from '~styleguide/blocks';
 
+import { parameters as ConnectedFormParameters } from './ConnectedForm/ConnectedForm.mdx';
+import { parameters as ConnectedFormGroupParameters } from './ConnectedFormGroup/ConnectedFormGroup.mdx';
+import { parameters as ConnectedFormInputsParameters } from './ConnectedFormInputs/ConnectedFormInputs.mdx';
+import { parameters as SubmitButtonParameters } from './SubmitButton/SubmitButton.mdx';
+
 export const parameters = {
   id: 'Organisms/ConnectedForm',
   title: 'ConnectedForm',
@@ -17,28 +22,28 @@ Our Connected- and GridForm organisms provide a easy way to implement forms. Whi
 <TableOfContents
   links={[
     {
-      id: 'Organisms/ConnectedForm/ConnectedForm',
-      subtitle: 'A flexible way to build forms.',
-      title: 'ConnectedForm',
-      status: 'current',
+      id: `Organisms/${parameters.title}/${ConnectedFormParameters.title}`,
+      subtitle: ConnectedFormParameters.subtitle,
+      title: ConnectedFormParameters.title,
+      status: ConnectedFormParameters.status,
     },
     {
-      id: 'Organisms/ConnectedForm/ConnectedFormGroup',
-      subtitle: 'A form group for the ConnectedForm component.',
-      title: 'ConnectedFormGroup',
-      status: 'updating',
+      id: `Organisms/${parameters.title}/${ConnectedFormGroupParameters.title}`,
+      subtitle: ConnectedFormGroupParameters.subtitle,
+      title: ConnectedFormGroupParameters.title,
+      status: ConnectedFormGroupParameters.status,
     },
     {
-      id: 'Organisms/ConnectedForm/ConnectedFormInputs',
-      subtitle: 'Different form inputs for the ConnectedForm component.',
-      title: 'ConnectedFormInputs',
-      status: 'updating',
+      id: `Organisms/${parameters.title}/${ConnectedFormInputsParameters.title}`,
+      subtitle: ConnectedFormInputsParameters.subtitle,
+      title: ConnectedFormInputsParameters.title,
+      status: ConnectedFormInputsParameters.status,
     },
     {
-      id: 'Organisms/ConnectedForm/SubmitButton',
-      subtitle: 'A submit type button for ConnectedForm.',
-      title: 'SubmitButton',
-      status: 'current',
+      id: `Organisms/${parameters.title}/${SubmitButtonParameters.title}`,
+      subtitle: SubmitButtonParameters.subtitle,
+      title: SubmitButtonParameters.title,
+      status: SubmitButtonParameters.status,
     },
   ]}
 />
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as ConnectedFormStories from './ConnectedForm.stories';
 
 export const parameters = {
+  title: 'ConnectedForm',
   subtitle: `A flexible way to build forms.`,
   status: 'current',
   source: {
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as ConnectedFormGroupStories from './ConnectedFormGroup.stories';
 
 export const parameters = {
+  title: 'ConnectedFormGroup',
   subtitle: `A form group for the ConnectedForm component.`,
   status: 'updating',
   source: {
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx
@@ -6,6 +6,7 @@ import * as ConnectedFormInputsStories from './ConnectedFormInputs.stories';
 import { ConnectedFormInputsTable } from './ConnectedFormInputsTable';
 
 export const parameters = {
+  title: 'ConnectedFormInputs',
   subtitle: `Different form inputs for the ConnectedForm component.`,
   status: 'updating',
   source: {
diff --git a/packages/styleguide/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.mdx b/packages/styleguide/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.mdx
@@ -5,6 +5,7 @@ import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 import * as SubmitButtonStories from './SubmitButton.stories';
 
 export const parameters = {
+  title: 'SubmitButton',
   subtitle: `A submit type button for ConnectedForm.`,
   status: 'current',
   source: {
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/About.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/About.mdx
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.mdx
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx
diff --git a/packages/styleguide/src/lib/UX Writing/Component guidelines/About.mdx b/packages/styleguide/src/lib/UX Writing/Component guidelines/About.mdx
