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

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

@@ -2,17 +2,17 @@
 
 exports[`StructuredContent renders the UI snapshot 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="withHTMLStringContent"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withHTMLStringContent-heading"
   >
     Heading text
   </h2>
   <h3
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withHTMLStringContent-callout"
   >
     This is the callout text
@@ -41,6 +41,7 @@ exports[`StructuredContent renders the UI snapshot 1`] = `
     </figcaption>
   </figure>
   <div
+    className="structuredcontent-body"
     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>",
@@ -52,17 +53,17 @@ exports[`StructuredContent renders the UI snapshot 1`] = `
 
 exports[`StructuredContent renders the UI snapshot 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="withHTMLDOMContent"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withHTMLDOMContent-heading"
   >
     Heading text
   </h2>
   <h3
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withHTMLDOMContent-callout"
   >
     This is the callout text
@@ -91,7 +92,7 @@ exports[`StructuredContent renders the UI snapshot 2`] = `
     </figcaption>
   </figure>
   <div
-    className="css-0"
+    className="structuredcontent-body 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.
@@ -137,22 +138,23 @@ exports[`StructuredContent renders the UI snapshot 2`] = `
 
 exports[`StructuredContent renders the UI snapshot 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="withoutAnImage"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withoutAnImage-heading"
   >
     Heading text
   </h2>
   <h3
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withoutAnImage-callout"
   >
     This is the callout text
   </h3>
   <div
+    className="structuredcontent-body"
     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>",
@@ -164,17 +166,17 @@ exports[`StructuredContent renders the UI snapshot 3`] = `
 
 exports[`StructuredContent renders the UI snapshot 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="withImageWithoutCaptionOrCredit"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withImageWithoutCaptionOrCredit-heading"
   >
     Heading text
   </h2>
   <h3
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withImageWithoutCaptionOrCredit-callout"
   >
     This is the callout text
@@ -185,6 +187,7 @@ exports[`StructuredContent renders the UI snapshot 4`] = `
     src="https://placeimg.com/400/300/animals"
   />
   <div
+    className="structuredcontent-body"
     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>",
@@ -196,11 +199,11 @@ exports[`StructuredContent renders the UI snapshot 4`] = `
 
 exports[`StructuredContent renders the UI snapshot 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="withoutHeading"
 >
   <h3
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withoutHeading-callout"
   >
     This is the callout text
@@ -229,6 +232,7 @@ exports[`StructuredContent renders the UI snapshot 5`] = `
     </figcaption>
   </figure>
   <div
+    className="structuredcontent-body"
     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>",
@@ -240,15 +244,95 @@ exports[`StructuredContent renders the UI snapshot 5`] = `
 
 exports[`StructuredContent renders the UI snapshot 6`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="withoutCalloutText"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="withoutCalloutText-heading"
   >
     Heading text
   </h2>
+  <div
+    className="structuredcontent-body"
+    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 7`] = `
+<div
+  className="css-kle7zy"
+  id="withChakraProps"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="withChakraProps-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-1xdhyk6"
+    id="withChakraProps-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="structuredcontent-body"
+    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 8`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+  id="withOtherProps"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="withOtherProps-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-1xdhyk6"
+    id="withOtherProps-callout"
+  >
+    This is the callout text
+  </h3>
   <figure
     className="css-0"
   >
@@ -273,6 +357,7 @@ exports[`StructuredContent renders the UI snapshot 6`] = `
     </figcaption>
   </figure>
   <div
+    className="structuredcontent-body"
     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>",

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

@@ -31,16 +31,16 @@ for more information on layout mirroring.
 ## Background
 
 While the majority of applications at NYPL will have a LTR direction, some applications
-will introduce internationalization through different means. While the NYPL Design
+will introduce internationalization through different means. While the Reservoir Design
 System (DS) has _no preference_ in how an application is internationalized, DS
 components should work appropriately in RTL configurations in any browser.
 
 ## Application Implementation
 
-Components in the NYPL Design System will support layout and component mirroring,
-but application directionality should be implemented at the application level. The
-following are general guidelines on how to set up directionality but implementation
-will be up to the application and its architecture.
+Components in the DS will support layout and component mirroring, but application 
+directionality should be implemented at the application level. The following are 
+general guidelines on how to set up directionality but implementation will be up 
+to the application and its architecture.
 
 ### `dir` HTML attribute
 
@@ -51,11 +51,11 @@ implementation is `dir="rtl"`.
 
 The placement of this attribute can be added at the root `<html>` element but can
 also be placed in specific DOM elements within a page to target specific page sections.
-For example, if you only want to target NYPL DS components within the `nypl-ds` class,
-the `dir` attribute can be added to that element:
+For example, if you only want to target NYPL DS components within your top-level
+`app` class, the `dir` attribute can be added to that element:
 
 ```jsx
-<div className="app nypl-ds" dir="rtl">
+<div className="app" dir="rtl">
   ...
 </div>
 ```
@@ -66,7 +66,7 @@ do the following:
 
 ```jsx
 // don't do this
-<div className="app nypl-ds" dir="rtl">
+<div className="app" dir="rtl">
   <div dir="rtl">
     <p dir="rtl">
       Some text <button dir="rtl">Button</button>

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

@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/addon-docs";
-import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
 import { getCategory } from "../../utils/componentCategories";
@@ -16,7 +15,8 @@ import { getCategory } from "../../utils/componentCategories";
 
 ## General Information
 
-The DS adheres to four global breakpoints for responsive layouts and typography.
+The Reservoir Design System (DS) adheres to four global breakpoints for
+responsive layouts and typography.
 
 - Mobile: 320px
 - Tablet Portrait: 600px
@@ -27,7 +27,7 @@ The DS adheres to four global breakpoints for responsive layouts and typography.
 
 The following CSS variables are available through the DS.
 
-```scss
+```css
 --nypl-breakpoint-small: 320px;
 --nypl-breakpoint-medium: 600px;
 --nypl-breakpoint-large: 960px;
@@ -36,9 +36,9 @@ The following CSS variables are available through the DS.
 
 ## SCSS Variables
 
-If you are using SCSS and imported the NYPL Design System `/dist/resources.scss`
-file, then you can use the following SCSS variables in your media queries or
-SCSS `breakpoint` function (if used).
+If you are using SCSS and imported the DS `/dist/resources.scss` file, then you
+can use the following SCSS variables in your media queries or SCSS `breakpoint`
+function (if used).
 
 ```scss
 $nypl-breakpoint-small: 320px;

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

@@ -1,6 +1,5 @@
 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";
@@ -14,16 +13,7 @@ import {
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
-<Meta
-  title={getCategory("Buttons")}
-  decorators={[withDesign]}
-  parameters={{
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
-    },
-  }}
-/>
+<Meta title={getCategory("Buttons")} />
 
 # Buttons
 
@@ -38,7 +28,7 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the NYPL Design System [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic)
+Use the [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic)
 component to render form buttons.
 
 ```jsx

package/src/components/StyleGuide/ColorCard.tsx

@@ -1,9 +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 { LayoutTypes } from "../../helpers/enums";
 
 export interface ColorCardProps {
   /** backgroundColor of the color card */
@@ -25,9 +25,9 @@ export default function ColorCard(
     <div style={{ display: "flex", alignItems: "center" }}>
       <Card
         backgroundColor={backgroundColor}
-        center
-        layout={CardLayouts.Column}
-        border
+        isBordered
+        isCentered
+        layout={LayoutTypes.Column}
       />
       <div style={{ marginLeft: "1rem" }}>
         <Heading level={HeadingLevels.Four}>{colorName}</Heading>

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

@@ -1,5 +1,4 @@
 import { Canvas, Meta } from "@storybook/addon-docs";
-import { withDesign } from "storybook-addon-designs";
 
 import ColorCard from "./ColorCard";
 import Heading from "../Heading/Heading";
@@ -10,31 +9,35 @@ import DSProvider from "../../theme/provider";
 
 export const cssVars = {
   brand: ["--nypl-colors-brand-primary", "--nypl-colors-brand-secondary"],
-  whatsOn: [
-    "--nypl-colors-section-whats-on-primary",
-    "--nypl-colors-section-whats-on-secondary",
+  blogs: [
+    "--nypl-colors-section-blogs-primary",
+    "--nypl-colors-section-blogs-secondary",
   ],
   booksAndMore: [
     "--nypl-colors-section-books-and-more-primary",
     "--nypl-colors-section-books-and-more-secondary",
   ],
-  research: [
-    "--nypl-colors-section-research-primary",
-    "--nypl-colors-section-research-secondary",
+  education: [
+    "--nypl-colors-section-education-primary",
+    "--nypl-colors-section-education-secondary",
   ],
   locations: [
     "--nypl-colors-section-locations-primary",
     "--nypl-colors-section-locations-secondary",
   ],
-  blogs: [
-    "--nypl-colors-section-blogs-primary",
-    "--nypl-colors-section-blogs-secondary",
+  research: [
+    "--nypl-colors-section-research-primary",
+    "--nypl-colors-section-research-secondary",
   ],
   researchLibraries: [
     "--nypl-colors-section-research-library-lpa",
     "--nypl-colors-section-research-library-schomburg",
     "--nypl-colors-section-research-library-schwartzman",
   ],
+  whatsOn: [
+    "--nypl-colors-section-whats-on-primary",
+    "--nypl-colors-section-whats-on-secondary",
+  ],
   ui: [
     "--nypl-colors-ui-black",
     "--nypl-colors-ui-white",
@@ -84,7 +87,7 @@ export const getColorCards = (cat) => {
   return cards;
 };
 
-<Meta title={getCategory("Colors")} decorators={[withDesign]} />
+<Meta title={getCategory("Colors")} />
 
 # NYPL Colors
 
@@ -112,9 +115,9 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>What's On</Heading>
-    <p>What's On is used for Events, Exhibitions &amp; Audio Guides.</p>
-    <SimpleGrid columns={1}>{getColorCards("whatsOn")}</SimpleGrid>
+    <Heading level={HeadingLevels.Two}>Blogs</Heading>
+    <p>Blogs is used for the Blogs section.</p>
+    <SimpleGrid columns={1}>{getColorCards("blogs")}</SimpleGrid>
   </DSProvider>
 </Canvas>
 
@@ -131,9 +134,12 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Research</Heading>
-    <p>Research is used for the Research Catalog and SCC.</p>
-    <SimpleGrid columns={1}>{getColorCards("research")}</SimpleGrid>
+    <Heading level={HeadingLevels.Two}>Education</Heading>
+    <p>
+      Education is used for the Education section front and all associated
+      sub-sections.
+    </p>
+    <SimpleGrid columns={1}>{getColorCards("education")}</SimpleGrid>
   </DSProvider>
 </Canvas>
 
@@ -150,9 +156,9 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Blogs</Heading>
-    <p>Blogs is used for the Blogs section.</p>
-    <SimpleGrid columns={1}>{getColorCards("blogs")}</SimpleGrid>
+    <Heading level={HeadingLevels.Two}>Research</Heading>
+    <p>Research is used for the Research Catalog and SCC.</p>
+    <SimpleGrid columns={1}>{getColorCards("research")}</SimpleGrid>
   </DSProvider>
 </Canvas>
 
@@ -164,6 +170,14 @@ Section colors are branding colors only in use at NYPL.
   </DSProvider>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Two}>What's On</Heading>
+    <p>What's On is used for Events, Exhibitions &amp; Audio Guides.</p>
+    <SimpleGrid columns={1}>{getColorCards("whatsOn")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
 ## Utility Colors
 
 <Canvas>

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

@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/addon-docs";
-import { withDesign } from "storybook-addon-designs";
 
 import { getCategory } from "../../utils/componentCategories";
 
@@ -7,34 +6,49 @@ import { getCategory } from "../../utils/componentCategories";
 
 # Design Tokens
 
-| Table of Contents                                                                    |
-| ------------------------------------------------------------------------------------ |
-| 1. [What are Design Tokens?](#what-are-design-tokens)                                |
-| 2. [Why Use Design Tokens?](#why-use-design-tokens)                                  |
-| 3. [How to Use the NYPL Design Tokens](#figma-reference)                             |
-| 4. [Using NYPL Design Tokens in CSS](#using-nypl-design-tokens-in-css)               |
-| 5. [Using NYPL Design Tokens in Javascript](#using-nypl-design-tokens-in-javascript) |
-| 6. [NYPL Design Token Categories](#nypl-design-token-categories)                     |
+| Table of Contents                                                                              |
+| ---------------------------------------------------------------------------------------------- |
+| 1. [What are Design Tokens?](#what-are-design-tokens)                                          |
+| 2. [Why Use Design Tokens?](#why-use-design-tokens)                                            |
+| 3. [How to Use the Reservoir Design Tokens](#figma-reference)                                  |
+| 4. [Using Reservoir Design Tokens in CSS](#using-reservoir-design-tokens-in-css)               |
+| 5. [Using Reservoir Design Tokens in Javascript](#using-reservoir-design-tokens-in-javascript) |
+| 6. [Reservoir Design Token Categories](#reservoir-design-token-categories)                     |
 
 ## What are Design Tokens?
 
-Design tokens are the style values that define a design system. These values can include, but may not be limited to, spacing, color, typography, breakpoints and object styles. Ultimately, these values are used to construct and maintain the components that make up our system.
+Design tokens are the style values that define a design system. These values
+can include, but may not be limited to, spacing, color, typography, breakpoints
+and object styles. Ultimately, these values are used to construct and maintain
+the components that make up our system.
 
 ## Why Use Design Tokens?
 
-_"With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development."_ – Jina Bolton, Lead Designer for the Salesforce Design System
+_"With design tokens, you can capture low-level values and then use them to
+create the styles for your product or app. You can maintain a scalable and
+consistent visual system for UI development."_ - Jina Bolton, Lead Designer
+for the Salesforce Design System
 
-Design tokens are a single source of truth when it comes to styles. They allow an organization to more easily build multiple applications – web and/or native – that feel and look the same without slowing down the development team.
+Design tokens are a single source of truth when it comes to styles. They allow
+an organization to more easily build multiple applications - web and/or native -
+that feel and look the same without slowing down the development team.
 
-## How to Use the NYPL Design Tokens
+## How to Use the Reservoir 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.9` or higher needs to be properly installed in a consuming React application.
+The NYPL design tokens are built into the Reservoir Design System (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
+## Using Reservoir Design Tokens in CSS
 
-If your app uses CSS or SCSS to handle styles, the DS creates standard CSS custom properties (e.g. variables) for consumption in your stylesheets. If the DS is properly installed, the CSS custom properties will be available for you to use. Nothing more needs to be done to your app.
+If your app uses CSS or SCSS to handle styles, the DS creates standard CSS
+custom properties (e.g. variables) for consumption in your stylesheets. If the
+DS is properly installed, the CSS custom properties will be available for you
+to use. Nothing more needs to be done to your app.
 
-To assist with CSS scope isolation, all of the CSS custom properties created by the DS are prefixed with "nypl." Please see the examples below.
+To assist with CSS scope isolation, all of the CSS custom properties created
+by the DS are prefixed with "nypl." Please see the examples below.
 
 ```css
 --nypl-colors-brand-primary
@@ -50,7 +64,8 @@ To assist with CSS scope isolation, all of the CSS custom properties created by
 --nypl-space-l
 ```
 
-The CSS custom properties are defined on the :root pseudo-class and should be implemented using standard CSS custom properties conventions.
+The CSS custom properties are defined on the :root pseudo-class and should be
+implemented using standard CSS custom properties conventions.
 
 ```css
 /* Property Declaration in the DS */
@@ -64,18 +79,25 @@ The CSS custom properties are defined on the :root pseudo-class and should be im
 }
 ```
 
-## Using NYPL Design Tokens in Javascript
+## Using Reservoir Design Tokens in Javascript
 
-If you would like to use CSS-in-JS styles in your React components, the `useNYPLTheme` hook will provide you with NYPL design token values. The hook depends on the `DSProvider` component and will not work properly outside of the `DSProvider` wrapper component.
+If you would like to use CSS-in-JS styles in your React components, the
+`useNYPLTheme` hook will provide you with Reservoir design token values. The hook
+depends on the `DSProvider` component and will not work properly outside of
+the `DSProvider` wrapper component.
 
-After importing and implementing the `DSProvider` wrapper component, as explained in the `DSProvider` section of the [DS Chakra UI](?path=/story/chakra-ui--page#dsprovider) document, your children components can use this hook function.
+After importing and implementing the `DSProvider` wrapper component, as
+explained in the `DSProvider` section of the [DS Chakra UI](?path=/story/chakra-ui--page#dsprovider)
+document, your children components can use this hook function.
 
 ```tsx
 import { useNYPLTheme } from "@nypl/design-system-react-components";
 const theme = useNYPLTheme();
 ```
 
-The theme variable will be a javascript object containing the NYPL design token style values. This will allow you to use design token values in your components through CSS-in-JS.
+The theme variable will be a javascript object containing the NYPL design
+token style values. This will allow you to use design token values in your
+components through CSS-in-JS.
 
 ```tsx
 // theme
@@ -97,9 +119,16 @@ The theme variable will be a javascript object containing the NYPL design token
 
 #### Using in DS Components
 
-The general rule of thumb is that DS components and the available variants should be used with the styles and variants as they are shown in Storybook, but there may be rare times when a component does require a modification. That said, if a DS component does need an updated style, first contact the Design System and UX teams about this update.
+The general rule of thumb is that DS components and the available variants
+should be used with the styles and variants as they are shown in Storybook,
+but there may be rare times when a component does require a modification.
+That said, if a DS component does need an updated style, first contact the
+Design System and UX teams about this update.
 
-If you receive approval to make a change in a consuming app, then you can add styles directly to the `additionalStyles` prop. For example, if the `Heading` component needs to render text in NYPL's "success primary" green color and add a bold font weight, then you can do the following:
+If you receive approval to make a change in a consuming app, then you can add
+styles directly to the `additionalStyles` prop. For example, if the `Heading`
+component needs to render text in Reservoir's "success primary" green color and add
+a bold font weight, then you can do the following:
 
 ```tsx
 const theme = useNYPLTheme();
@@ -145,7 +174,7 @@ const CustomButton = styled.button`
 `;
 ```
 
-## NYPL Design Token Categories
+## Reservoir Design Token Categories
 
 The DS design tokens are broken into the following categories:
 
@@ -162,4 +191,5 @@ The DS design tokens are broken into the following categories:
   - font sizes
   - font weights
 
-For details related to a specific category, please refer to the corresponding section in the Style Guide available in the DS Storybook.
+For details related to a specific category, please refer to the corresponding
+section in the Style Guide available in the DS Storybook.