@nypl/design-system-react-components 0.25.8 → 0.25.11

package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap

@@ -0,0 +1,283 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StructuredContent renders the UI snapshot 1`] = `
+<div
+  className="css-0"
+  id="withHTMLStringContent"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="withHTMLStringContent-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-0"
+    id="withHTMLStringContent-callout"
+  >
+    This is the callout text
+  </h3>
+  <figure
+    className="css-0"
+  >
+    <img
+      alt="Image alt text"
+      className="css-0"
+      src="https://placeimg.com/400/300/animals"
+    />
+    <figcaption
+      className="css-0"
+    >
+      <div
+        className="css-0"
+      >
+        Image caption
+      </div>
+      <div
+        className="css-0"
+      >
+        Image credit
+      </div>
+    </figcaption>
+  </figure>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. <a href='#'>Porttitor eget dolor</a> morbi non arcu risus quis varius.Faucibus in ornare quam viverra orci sagittis.</p><p>Nisl vel pretium lectusquam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum.Diam maecenas sed enim ut sem viverra. <b>Diam quam nulla porttitor massaid neque. Sed faucibus turpis in eu mi.</b></p><p>Ornare lectus sit amet est placeratin. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudintempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi crasfermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiatnisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.</p><ul><li>one</li><li>two</li><li>three</li><li>four</li></ul><p><i>Mauris nunc congue nisi vitae suscipittellus mauris a diam. Purus gravida quis blandit turpis cursus in hac.Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam utvenenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamusarcu felis bibendum ut tristique. Cras semper auctor neque vitae tempusquam pellentesque. Placerat orci nulla pellentesque dignissim enim sitamet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesquedignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisiest sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risusviverra adipiscing at. Eu augue ut lectus arcu bibendum at varius velpharetra.</i></p>",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`StructuredContent renders the UI snapshot 2`] = `
+<div
+  className="css-0"
+  id="withHTMLDOMContent"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="withHTMLDOMContent-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-0"
+    id="withHTMLDOMContent-callout"
+  >
+    This is the callout text
+  </h3>
+  <figure
+    className="css-0"
+  >
+    <img
+      alt="Image alt text"
+      className="css-0"
+      src="https://placeimg.com/400/300/animals"
+    />
+    <figcaption
+      className="css-0"
+    >
+      <div
+        className="css-0"
+      >
+        Image caption
+      </div>
+      <div
+        className="css-0"
+      >
+        Image credit
+      </div>
+    </figcaption>
+  </figure>
+  <div
+    className="css-0"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt.
+      <a
+        href="http://nypl.org"
+      >
+        Porttitor eget dolor
+      </a>
+       morbi non arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
+    </p>
+    <p>
+      Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem viverra.
+       
+      <b>
+        Diam quam nulla porttitor massa id neque. Sed faucibus turpis in eu mi.
+      </b>
+    </p>
+    <p>
+      Ornare lectus sit amet est placerat in. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.
+    </p>
+    <ul>
+      <li>
+        one
+      </li>
+      <li>
+        two
+      </li>
+      <li>
+        three
+      </li>
+      <li>
+        four
+      </li>
+    </ul>
+    <p>
+      <i>
+        Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus gravida quis blandit turpis cursus in hac. Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam ut venenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus arcu felis bibendum ut tristique. Cras semper auctor neque vitae tempus quam pellentesque. Placerat orci nulla pellentesque dignissim enim sit amet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesque dignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisi est sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risus 'viverra adipiscing at. Eu augue ut lectus arcu bibendum at varius vel' pharetra.
+      </i>
+    </p>
+  </div>
+</div>
+`;
+
+exports[`StructuredContent renders the UI snapshot 3`] = `
+<div
+  className="css-0"
+  id="withoutAnImage"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="withoutAnImage-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-0"
+    id="withoutAnImage-callout"
+  >
+    This is the callout text
+  </h3>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. <a href='#'>Porttitor eget dolor</a> morbi non arcu risus quis varius.Faucibus in ornare quam viverra orci sagittis.</p><p>Nisl vel pretium lectusquam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum.Diam maecenas sed enim ut sem viverra. <b>Diam quam nulla porttitor massaid neque. Sed faucibus turpis in eu mi.</b></p><p>Ornare lectus sit amet est placeratin. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudintempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi crasfermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiatnisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.</p><ul><li>one</li><li>two</li><li>three</li><li>four</li></ul><p><i>Mauris nunc congue nisi vitae suscipittellus mauris a diam. Purus gravida quis blandit turpis cursus in hac.Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam utvenenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamusarcu felis bibendum ut tristique. Cras semper auctor neque vitae tempusquam pellentesque. Placerat orci nulla pellentesque dignissim enim sitamet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesquedignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisiest sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risusviverra adipiscing at. Eu augue ut lectus arcu bibendum at varius velpharetra.</i></p>",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`StructuredContent renders the UI snapshot 4`] = `
+<div
+  className="css-0"
+  id="withImageWithoutCaptionOrCredit"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="withImageWithoutCaptionOrCredit-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-0"
+    id="withImageWithoutCaptionOrCredit-callout"
+  >
+    This is the callout text
+  </h3>
+  <img
+    alt="Image alt text"
+    className="css-0"
+    src="https://placeimg.com/400/300/animals"
+  />
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. <a href='#'>Porttitor eget dolor</a> morbi non arcu risus quis varius.Faucibus in ornare quam viverra orci sagittis.</p><p>Nisl vel pretium lectusquam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum.Diam maecenas sed enim ut sem viverra. <b>Diam quam nulla porttitor massaid neque. Sed faucibus turpis in eu mi.</b></p><p>Ornare lectus sit amet est placeratin. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudintempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi crasfermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiatnisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.</p><ul><li>one</li><li>two</li><li>three</li><li>four</li></ul><p><i>Mauris nunc congue nisi vitae suscipittellus mauris a diam. Purus gravida quis blandit turpis cursus in hac.Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam utvenenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamusarcu felis bibendum ut tristique. Cras semper auctor neque vitae tempusquam pellentesque. Placerat orci nulla pellentesque dignissim enim sitamet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesquedignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisiest sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risusviverra adipiscing at. Eu augue ut lectus arcu bibendum at varius velpharetra.</i></p>",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`StructuredContent renders the UI snapshot 5`] = `
+<div
+  className="css-0"
+  id="withoutHeading"
+>
+  <h3
+    className="chakra-heading css-0"
+    id="withoutHeading-callout"
+  >
+    This is the callout text
+  </h3>
+  <figure
+    className="css-0"
+  >
+    <img
+      alt="Image alt text"
+      className="css-0"
+      src="https://placeimg.com/400/300/animals"
+    />
+    <figcaption
+      className="css-0"
+    >
+      <div
+        className="css-0"
+      >
+        Image caption
+      </div>
+      <div
+        className="css-0"
+      >
+        Image credit
+      </div>
+    </figcaption>
+  </figure>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. <a href='#'>Porttitor eget dolor</a> morbi non arcu risus quis varius.Faucibus in ornare quam viverra orci sagittis.</p><p>Nisl vel pretium lectusquam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum.Diam maecenas sed enim ut sem viverra. <b>Diam quam nulla porttitor massaid neque. Sed faucibus turpis in eu mi.</b></p><p>Ornare lectus sit amet est placeratin. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudintempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi crasfermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiatnisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.</p><ul><li>one</li><li>two</li><li>three</li><li>four</li></ul><p><i>Mauris nunc congue nisi vitae suscipittellus mauris a diam. Purus gravida quis blandit turpis cursus in hac.Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam utvenenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamusarcu felis bibendum ut tristique. Cras semper auctor neque vitae tempusquam pellentesque. Placerat orci nulla pellentesque dignissim enim sitamet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesquedignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisiest sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risusviverra adipiscing at. Eu augue ut lectus arcu bibendum at varius velpharetra.</i></p>",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`StructuredContent renders the UI snapshot 6`] = `
+<div
+  className="css-0"
+  id="withoutCalloutText"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="withoutCalloutText-heading"
+  >
+    Heading text
+  </h2>
+  <figure
+    className="css-0"
+  >
+    <img
+      alt="Image alt text"
+      className="css-0"
+      src="https://placeimg.com/400/300/animals"
+    />
+    <figcaption
+      className="css-0"
+    >
+      <div
+        className="css-0"
+      >
+        Image caption
+      </div>
+      <div
+        className="css-0"
+      >
+        Image credit
+      </div>
+    </figcaption>
+  </figure>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. <a href='#'>Porttitor eget dolor</a> morbi non arcu risus quis varius.Faucibus in ornare quam viverra orci sagittis.</p><p>Nisl vel pretium lectusquam id leo in. Etiam dignissim diam quis enim lobortis scelerisque fermentum.Diam maecenas sed enim ut sem viverra. <b>Diam quam nulla porttitor massaid neque. Sed faucibus turpis in eu mi.</b></p><p>Ornare lectus sit amet est placeratin. Quis blandit turpis cursus in. Aliquam ut porttitor leo a diam sollicitudintempor id eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi crasfermentum. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Feugiatnisl pretium fusce id velit ut tortor. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.</p><ul><li>one</li><li>two</li><li>three</li><li>four</li></ul><p><i>Mauris nunc congue nisi vitae suscipittellus mauris a diam. Purus gravida quis blandit turpis cursus in hac.Morbi tempus iaculis urna id volutpat. Lectus nulla at volutpat diam utvenenatis. Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamusarcu felis bibendum ut tristique. Cras semper auctor neque vitae tempusquam pellentesque. Placerat orci nulla pellentesque dignissim enim sitamet. Feugiat pretium nibh ipsum consequat. Placerat orci nulla pellentesquedignissim. Suspendisse faucibus interdum posuere lorem. Nullam non nisiest sit. Turpis egestas integer eget aliquet nibh praesent. Tortor at risusviverra adipiscing at. Eu augue ut lectus arcu bibendum at varius velpharetra.</i></p>",
+      }
+    }
+  />
+</div>
+`;

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -1,8 +1,6 @@
-import { Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs";
 
 import SearchBar from "../SearchBar/SearchBar";
-import Input from "../Input/Input";
-import { InputTypes } from "../Input/InputTypes";
 import Icon from "../Icons/Icon";
 import { IconNames, IconSizes, IconAlign } from "../Icons/IconTypes";
 import Button from "../Button/Button";
@@ -119,29 +117,16 @@ won't hurt.
 <Canvas>
   <DSProvider>
     <div style={{ width: "400px" }}>
-      <SearchBar>
-        <Input
-          ariaLabelledBy="button-ex1"
-          id="input-ex1"
-          placeholder="Item Search"
-          required={true}
-          type={InputTypes.text}
-          attributes={{
-            ["aria-describedby"]: "error-helperText-ex1",
-          }}
-        />
-        <Button buttonType={ButtonTypes.Primary} id="button-ex1" type="submit">
-          <Icon
-            name={IconNames.Search}
-            size={IconSizes.Small}
-            align={IconAlign.Left}
-          />
-          Search
-        </Button>
-      </SearchBar>
-      <HelperErrorText id="error-helperText-ex1">
-        Use a keyword or phrase to search!
-      </HelperErrorText>
+      <SearchBar
+        helperText="Use a keyword or phrase to search!"
+        id="example1"
+        isRequired
+        textInputProps={{
+          labelText: "Item Search",
+          name: "textInputName",
+          placeholder: "Item Search",
+        }}
+      />
     </div>
   </DSProvider>
 </Canvas>
@@ -153,33 +138,16 @@ block to see its code implementation.
   <DSProvider>
     <div dir="rtl">
       <div style={{ width: "400px" }}>
-        <SearchBar>
-          <Input
-            ariaLabelledBy="button-ex2"
-            id="input-ex2"
-            placeholder="البحث عن عنصر"
-            required={true}
-            type={InputTypes.text}
-            attributes={{
-              ["aria-describedby"]: "error-helperText-ex2",
-            }}
-          />
-          <Button
-            buttonType={ButtonTypes.Primary}
-            id="button-ex2"
-            type="submit"
-          >
-            <Icon
-              name={IconNames.Search}
-              size={IconSizes.Small}
-              align={IconAlign.Left}
-            />
-            يبحث
-          </Button>
-        </SearchBar>
-        <HelperErrorText id="error-helperText-ex2">
-          استخدم كلمة رئيسية أو عبارة للبحث!
-        </HelperErrorText>
+        <SearchBar
+          helperText="استخدم كلمة رئيسية أو عبارة للبحث!"
+          id="example2"
+          isRequired
+          textInputProps={{
+            labelText: "Item Search",
+            name: "textInputName",
+            placeholder: "Item Search",
+          }}
+        />
       </div>
     </div>
   </DSProvider>
@@ -192,33 +160,16 @@ block to see its code implementation.
   <DSProvider>
     <div style={{ direction: "rtl" }}>
       <div style={{ width: "400px" }}>
-        <SearchBar>
-          <Input
-            ariaLabelledBy="button-ex3"
-            id="input-ex3"
-            placeholder="البحث عن عنصر"
-            required={true}
-            type={InputTypes.text}
-            attributes={{
-              ["aria-describedby"]: "error-helperText-ex3",
-            }}
-          />
-          <Button
-            buttonType={ButtonTypes.Primary}
-            id="button-ex3"
-            type="submit"
-          >
-            <Icon
-              name={IconNames.Search}
-              size={IconSizes.Small}
-              align={IconAlign.Left}
-            />
-            يبحث
-          </Button>
-        </SearchBar>
-        <HelperErrorText id="error-helperText-ex3">
-          استخدم كلمة رئيسية أو عبارة للبحث!
-        </HelperErrorText>
+        <SearchBar
+          helperText="استخدم كلمة رئيسية أو عبارة للبحث!"
+          id="example3"
+          isRequired
+          textInputProps={{
+            labelText: "Item Search",
+            name: "textInputName",
+            placeholder: "Item Search",
+          }}
+        />
       </div>
     </div>
   </DSProvider>
@@ -248,10 +199,8 @@ help reduce any visual mistakes.
           />
           Search
         </Button>
-      </div>
-      <div style={{ width: "300px" }}>
-        A RTL button:
         <div dir="rtl">
+          An RTL button:
           <Button
             buttonType={ButtonTypes.Primary}
             id="button-ex5"

package/src/components/StyleGuide/Breakpoints.stories.mdx

@@ -1,17 +1,7 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Preview,
-  Description,
-} from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import cssVariables from "../../helpers/CSSVariablesHelper";
-import getCSSVariable from "../../helpers/getCSSVariable";
 import Heading from "../Heading/Heading";
-import { CSSVariablesInterface } from "../../interfaces";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta title={getCategory("Breakpoints")} />

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -1,12 +1,6 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Description,
-} from "@storybook/addon-docs/blocks";
-import { withDesign } from "storybook-addon-designs";
 import { ButtonGroup } from "@chakra-ui/react";
+import { Canvas, Meta } from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
 
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
@@ -17,7 +11,6 @@ import {
   IconRotationTypes,
   IconSizes,
 } from "../Icons/IconTypes";
-import getCSSVariable from "../../helpers/getCSSVariable";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -110,8 +103,7 @@ can be achieved by using the `Form` component to wrap the `Button`s.
 ## Button Types
 
 The `buttonType` prop should be used to render various forms of the button
-component. Note that the `SearchBar` type is only used internally in the
-`SearchBar` component.
+component.
 
 <Canvas>
   <DSProvider>
@@ -121,7 +113,6 @@ component. Note that the `SearchBar` type is only used internally in the
       <Button buttonType={ButtonTypes.Callout}>Callout Button</Button>
       <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
       <Button buttonType={ButtonTypes.Link}>Link Button</Button>
-      <Button buttonType={ButtonTypes.SearchBar}>SearchBar Button</Button>
       <Button buttonType={ButtonTypes.NoBrand}>NoBrand Button</Button>
     </ButtonGroup>
   </DSProvider>
@@ -154,12 +145,6 @@ component. Note that the `SearchBar` type is only used internally in the
 - used for equally weighted actions
 - Visual Treatment: text link with underline
 
-### ButtonTypes.SearchBar
-
-- used internally in the `SearchBar` component for visual flow when it is next
-  to the `TextInput` component
-- Visual Treatment: rectangular, filled, no border radius on the left side
-
 ### ButtonTypes.NoBrand
 
 - used in cases where there is no brand color

package/src/components/StyleGuide/ColorCard.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
+
 import Card from "../Card/Card";
 import { CardLayouts } from "../Card/CardTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
-// import Text from "../Text/Text";
-// import { TextDisplaySizes } from "../Text/TextTypes";
 
 export interface ColorCardProps {
   /** backgroundColor of the color card */

package/src/components/StyleGuide/Colors.stories.mdx

@@ -1,19 +1,12 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Description,
-} from "@storybook/addon-docs/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import ColorCard from "./ColorCard";
-import DSProvider from "../../theme/provider";
-import getCSSVariable from "../../helpers/getCSSVariable";
-import { getCategory } from "../../utils/componentCategories";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 export const cssVars = {
   brand: ["--nypl-colors-brand-primary", "--nypl-colors-brand-secondary"],
@@ -73,7 +66,6 @@ export const cssVars = {
 };
 
 export const makeColorCard = function (key) {
-  // const cssValue = getCSSVariable(key);
   const cssValue = `var(${key})`;
   const card = (
     <ColorCard backgroundColor={cssValue} colorName={key} key={key} />

package/src/components/StyleGuide/DesignTokens.stories.mdx

@@ -1,11 +1,6 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Description,
-} from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
+
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta title={getCategory("Design Tokens")} />
@@ -33,7 +28,7 @@ Design tokens are a single source of truth when it comes to styles. They allow a
 
 ## How to Use the NYPL Design Tokens
 
-The NYPL design tokens are built into the NYPL Design System (the DS) and are offered in two formats for consumption: CSS variables and javascript data objects. To access either of these formats, the DS v0.25.2 or higher needs to be properly installed in a consuming React application.
+The NYPL design tokens are built into the NYPL Design System (the DS) and are offered in two formats for consumption: CSS variables and javascript data objects. To access either of these formats, the DS `v0.25.9` or higher needs to be properly installed in a consuming React application.
 
 ## Using NYPL Design Tokens in CSS
 

package/src/components/StyleGuide/Forms.stories.mdx

@@ -1,18 +1,10 @@
-import {
-  Meta,
-  Story,
-  Canvas,
-  ArgsTable,
-  Preview,
-  Description,
-} from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { getCategory } from "../../utils/componentCategories";
-import getCSSVariable from "../../helpers/getCSSVariable";
 import Card from "../Card/Card";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";
+import { getCategory } from "../../utils/componentCategories";
 
 <Meta title={getCategory("Forms")} />