docs: use getDocsId for LinkTo instances (#1113)

carbon-design-system · Oct 12, 2021 · 9589396 · 9589396
1 parent 87204dd
commit 9589396
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 61 deletions.
diff --git a/src/components/LayoutModules/ActionBarModule/index.mdx b/src/components/LayoutModules/ActionBarModule/index.mdx
@@ -48,10 +48,9 @@ be forwarded along to their underlying containers.
    a ghost button, alternatively a title can be supplemented, see
    [variants](#variants). Both the ghost button text and the title variant text
    should left-align with the text above and below.
-2. **Icon button bar:** The icon buttons are contained inside the
-   <LinkTo kind="patterns-iconbuttonbar" story="default">
-     icon button bar
-   </LinkTo> and are 16px in height.
+2. **Icon button bar:** The icon buttons are contained inside the <LinkTo
+   kind={getDocsId('patterns-iconbuttonbar')} story="default">icon button
+   bar</LinkTo> and are 16px in height.
 3. **Bottom spacer:** The 8px spacer `$spacing-03`, included inside the action
    bar, means that the module can be placed flush to the top edge of the
    components below.
@@ -103,7 +102,7 @@ implementation.
 ### References
 
 - [Button](https://react.carbondesignsystem.com/?path=/docs/button)
-- <LinkTo kind="patterns-iconbuttonbar" story="default">
+- <LinkTo kind={getDocsId('patterns-iconbuttonbar')} story="default">
     IconButtonBar
   </LinkTo>
 - [Grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow)

diff --git a/src/components/LayoutModules/CardAreaModule/index.mdx b/src/components/LayoutModules/CardAreaModule/index.mdx
@@ -26,12 +26,11 @@ information using summary, navigational, or widget cards as the basis.
 
 The card area module can be built using a combination of the `CardAreaModule`,
 [grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow), and
-either the <LinkTo kind="components-card" story="default">`Card`</LinkTo>,
-
-<LinkTo kind="patterns-summarycard" story="with-primary-label">
-  `SummaryCard`
-</LinkTo>
-, or [`Tile`](https://react.carbondesignsystem.com/?path=/docs/tile) components.
+either the <LinkTo kind={getDocsId("components-card")}
+story="default">`Card`</LinkTo>, <LinkTo
+kind={getDocsId('patterns-summarycard')}
+story="with-primary-label">`SummaryCard`</LinkTo>, or
+[`Tile`](https://react.carbondesignsystem.com/?path=/docs/tile) components.
 
 Everything passed in as a
 [render prop](https://reactjs.org/docs/render-props.html) child of
@@ -129,21 +128,21 @@ with the labels within the card area module.
 ### References
 
 - [Grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow)
-- <LinkTo kind="components-card" story="default">
+- <LinkTo kind={getDocsId('components-card')} story="default">
     Card
   </LinkTo>
-- <LinkTo kind="patterns-summarycard" story="with-primary-label">
+- <LinkTo kind={getDocsId('patterns-summarycard')} story="with-primary-label">
     SummaryCard
   </LinkTo>
 - [Tile](https://react.carbondesignsystem.com/?path=/docs/tile)
 - [Render Props](https://reactjs.org/docs/render-props.html)
-- <LinkTo kind="layout-modules-titlebarmodule" story="default">
+- <LinkTo kind={getDocsId('layout-modules-titlebarmodule')} story="default">
     TitleBarModule
   </LinkTo>
-- <LinkTo kind="layout-modules-actionbarmodule" story="default">
+- <LinkTo kind={getDocsId('layout-modules-actionbarmodule')} story="default">
     ActionBarModule
   </LinkTo>
-- <LinkTo kind="patterns-iconbuttonbar" story="default">
+- <LinkTo kind={getDocsId('patterns-iconbuttonbar')} story="default">
     IconButtonBar
   </LinkTo>
 

diff --git a/src/components/LayoutModules/DescriptionListModule/index.mdx b/src/components/LayoutModules/DescriptionListModule/index.mdx
@@ -29,10 +29,10 @@ definitions.
 
 ### Overview
 
-The description list module can be built using a combination of the
-<LinkTo kind="components-typelayout" story="default">`TypeLayout`</LinkTo> and
-<LinkTo kind="layout-modules-titlebarmodule" story="default">`TitleBarModule`</LinkTo>
-components.
+The description list module can be built using a combination of the <LinkTo
+kind={getDocsId('components-typelayout')} story="default">`TypeLayout`</LinkTo>
+and <LinkTo kind={getDocsId('layout-modules-titlebarmodule')}
+story="default">`TitleBarModule`</LinkTo> components.
 
 Everything passed in as a child of `DescriptionListModule` will be rendered.
 
@@ -70,9 +70,9 @@ the underlying description list module container.
 ### Variants
 
 A description list can have a title, both section and subsection title bars can
-precede the type layout. Learn more by reviewing the
-<LinkTo kind="layout-modules-titlebarmodule" story="default" > TitleBarModule.
-</LinkTo>
+precede the type layout. Learn more by reviewing the <LinkTo
+kind={getDocsId('layout-modules-titlebarmodule')}
+story="default">TitleBarModule.</LinkTo>
 
 <img alt="`DescriptionListModule` title variants" src={variants} />
 <Source id="layout-modules-descriptionlistmodule--variant" />
@@ -131,10 +131,10 @@ starting point for placement.
 
 ### References
 
-- <LinkTo kind="components-typelayout" story="default">
+- <LinkTo kind={getDocsId('components-typelayout')} story="default">
     TypeLayout
   </LinkTo>
-- <LinkTo kind="layout-modules-titlebarmodule" story="default">
+- <LinkTo kind={getDocsId('layout-modules-titlebarmodule')} story="default">
     TitleBarModule
   </LinkTo>
 - [Grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow)

diff --git a/src/components/LayoutModules/DescriptionModule/index.mdx b/src/components/LayoutModules/DescriptionModule/index.mdx
@@ -26,12 +26,10 @@ Description modules provide a means to orderly layout short-form content.
 
 ### Overview
 
-The description module can be built using a combination of the
-
-<LinkTo kind="layout-modules-titlebarmodule" story="default">
-  `TitleBarModule`
-</LinkTo>
-component and [paragraph elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
+The description module can be built using a combination of the <LinkTo
+kind={getDocsId('layout-modules-titlebarmodule')}
+story="default">`TitleBarModule`</LinkTo> component and
+[paragraph elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
 
 Everything passed in as a
 [render prop](https://reactjs.org/docs/render-props.html) child of
@@ -66,11 +64,8 @@ getter. For example, to add a `className`:
 ### Anatomy
 
 1. **Title:** This is the title, achieved by using the `TitleBarModule`. Learn
-   more about the
-   <LinkTo kind="layout-modules-titlebarmodule" story="default">
-     TitleBarModule
-   </LinkTo>
-   and potential variants.
+   more about the <LinkTo kind={getDocsId('layout-modules-titlebarmodule')}
+   story="default">TitleBarModule</LinkTo> and potential variants.
 2. **Description:** This is the description itself, the type style is defined so
    you shouldn’t supplement your own values.
 3. **Bottom spacer:** There is a 32-pixel `$spacing-07` spacer included below
@@ -82,12 +77,9 @@ getter. For example, to add a `className`:
 
 If necessary, subsection titles can be substituted or used below section titles.
 There are values already supplied for the title type styles so you shouldn’t
-supplement your own. Learn more by reviewing the
-
-<LinkTo kind="layout-modules-titlebarmodule" story="default">
-  {' '}
-  TitleBarModule.
-</LinkTo>
+supplement your own. Learn more by reviewing the <LinkTo
+kind={getDocsId('layout-modules-titlebarmodule')}
+story="default">TitleBarModule.</LinkTo>
 
 The description module can also be created without any title.
 
@@ -139,7 +131,7 @@ starting point for placement.
 
 ### References
 
-- <LinkTo kind="layout-modules-titlebarmodule" story="default">
+- <LinkTo kind={getDocsId('layout-modules-titlebarmodule')} story="default">
     TitleBarModule
   </LinkTo>
 - [The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)

diff --git a/src/components/LayoutModules/ICAModule/index.mdx b/src/components/LayoutModules/ICAModule/index.mdx
@@ -29,10 +29,8 @@ The ICA module provides a means to orderly layout at-a-glance statistics.
 
 The ICA module can be built using a combination of the `ICAModule`,
 [grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow), and
-
-<LinkTo kind="components-ica" story="default">
-  `ICA`
-</LinkTo> components.
+<LinkTo kind={getDocsId("components-ica")} story="default">`ICA`</LinkTo>
+components.
 
 Everything passed in as a
 [render prop](https://reactjs.org/docs/render-props.html) child of `ICAModule`
@@ -150,11 +148,11 @@ illustrated in the [Anatomy](#anatomy) section, ICAs can also be stacked.
 ### References
 
 - [Grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow)
-- <LinkTo kind="components-ica" story="default">
+- <LinkTo kind={getDocsId('components-ica')} story="default">
     ICA
   </LinkTo>
 - [Render Props](https://reactjs.org/docs/render-props.html)
-- <LinkTo kind="layout-modules-titlebarmodule" story="default">
+- <LinkTo kind={getDocsId('layout-modules-titlebarmodule')} story="default">
     TitleBarModule
   </LinkTo>
 

diff --git a/src/components/LayoutModules/TitleBarModule/index.mdx b/src/components/LayoutModules/TitleBarModule/index.mdx
@@ -189,7 +189,7 @@ implementation.
 
 ### References
 
-- <LinkTo kind="patterns-iconbuttonbar" story="default">
+- <LinkTo kind={getDocsId("patterns-iconbuttonbar")} story="default">
     IconButtonBar
   </LinkTo>
 - [Grid](https://react.carbondesignsystem.com/?path=/docs/grid--narrow)

diff --git a/src/components/LayoutModules/docs/examples/Detail/index.mdx b/src/components/LayoutModules/docs/examples/Detail/index.mdx
@@ -1,7 +1,10 @@
+import { getDocsId } from '../../../../../../.storybook';
 import detail from './images/detail.png';
 
 <Column lg={8}>
-  <LinkTo className="storybook__link--image" kind="page-layouts-canary-detail">
+  <LinkTo
+    className="storybook__link--image"
+    kind={getDocsId('page-layouts-canary-detail')}>
     <img alt="Detail page layout example" src={detail} />
   </LinkTo>
 </Column>
diff --git a/src/components/LayoutModules/docs/examples/Overview/index.mdx b/src/components/LayoutModules/docs/examples/Overview/index.mdx
@@ -1,10 +1,10 @@
+import { getDocsId } from '../../../../../../.storybook';
 import overview from './images/overview.png';
 
 <Column lg={8}>
   <LinkTo
     className="storybook__link--image"
-    kind="page-layouts-canary-overview"
-  >
+    kind={getDocsId('page-layouts-canary-overview')}>
     <img alt="Overview page layout example" src={overview} />
   </LinkTo>
 </Column>
diff --git a/src/components/LayoutModules/stories/Library.stories.mdx b/src/components/LayoutModules/stories/Library.stories.mdx
@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 
+import { getDocsId } from '../../../../.storybook';
+
 import descriptionModule from './images/description-module.png';
 import descriptionListModule from './images/description-list-module.png';
 import titleBarModule from './images/title-bar-module.png';
@@ -32,7 +34,7 @@ our other pages.
 <Column lg={4}>
   <LinkTo
     className="storybook__link--image"
-    kind="layout-modules-actionbarmodule"
+    kind={getDocsId('layout-modules-actionbarmodule')}
     story="default"
   >
     <img alt="Link to action bar module" src={actionBarModule} />
@@ -42,7 +44,7 @@ our other pages.
 <Column lg={4}>
   <LinkTo
     className="storybook__link--image"
-    kind="layout-modules-buttonclustermodule"
+    kind={getDocsId('layout-modules-buttonclustermodule')}
     story="default"
   >
     <img alt="Link to button cluster module" src={buttonClusterModule} />
@@ -52,7 +54,7 @@ our other pages.
 <Column lg={4}>
   <LinkTo
     className="storybook__link--image"
-    kind="layout-modules-cardareamodule"
+    kind={getDocsId('layout-modules-cardareamodule')}
     story="default"
   >
     <img alt="Link to card area module" src={cardAreaModule} />
@@ -65,7 +67,7 @@ our other pages.
    <Column lg={4}>
     <LinkTo
       className="storybook__link--image"
-      kind="layout-modules-descriptionmodule"
+      kind={getDocsId("layout-modules-descriptionmodule")}
       story="default"
     >
       <img alt="Link to description module" src={descriptionModule} />
@@ -75,7 +77,7 @@ our other pages.
 <Column lg={4}>
   <LinkTo
     className="storybook__link--image"
-    kind="layout-modules-descriptionlistmodule"
+    kind={getDocsId('layout-modules-descriptionlistmodule')}
     story="default"
   >
     <img alt="Link to description list module" src={descriptionListModule} />
@@ -85,7 +87,7 @@ our other pages.
 <Column lg={4}>
   <LinkTo
     className="storybook__link--image"
-    kind="layout-modules-icamodule"
+    kind={getDocsId('layout-modules-icamodule')}
     story="default"
   >
     <img alt="Link to ICA module" src={icaModule} />
@@ -98,7 +100,7 @@ our other pages.
   <Column lg={4}>
     <LinkTo
       className="storybook__link--image"
-      kind="layout-modules-titlebarmodule"
+      kind={getDocsId('layout-modules-titlebarmodule')}
       story="default"
     >
       <img alt="Link to title bar module" src={titleBarModule} />
@@ -107,7 +109,7 @@ our other pages.
   <Column lg={4}>
     <LinkTo
       className="storybook__link--image"
-      kind="layout-modules-listitemmodule"
+      kind={getDocsId('layout-modules-listitemmodule')}
       story="default"
     >
       <img alt="Link to list item module" src={listItemModule} />