@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,368 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StructuredContent renders the UI snapshot 1`] = `
+<div
+  className="css-1xdhyk6"
+  id="withHTMLStringContent"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="withHTMLStringContent-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-1xdhyk6"
+    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
+    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 2`] = `
+<div
+  className="css-1xdhyk6"
+  id="withHTMLDOMContent"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="withHTMLDOMContent-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-1xdhyk6"
+    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="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.
+      <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-1xdhyk6"
+  id="withoutAnImage"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="withoutAnImage-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    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>",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`StructuredContent renders the UI snapshot 4`] = `
+<div
+  className="css-1xdhyk6"
+  id="withImageWithoutCaptionOrCredit"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="withImageWithoutCaptionOrCredit-heading"
+  >
+    Heading text
+  </h2>
+  <h3
+    className="chakra-heading css-1xdhyk6"
+    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
+    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 5`] = `
+<div
+  className="css-1xdhyk6"
+  id="withoutHeading"
+>
+  <h3
+    className="chakra-heading css-1xdhyk6"
+    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
+    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 6`] = `
+<div
+  className="css-1xdhyk6"
+  id="withoutCalloutText"
+>
+  <h2
+    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"
+  >
+    <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>
+`;

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

@@ -0,0 +1,206 @@
+import { Canvas, Meta } from "@storybook/addon-docs";
+
+import Button from "../Button/Button";
+import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import Icon from "../Icons/Icon";
+import SearchBar from "../SearchBar/SearchBar";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta title={getCategory("Bidirectionality")} />
+
+# Bidirectionality
+
+When building UIs, we think in terms of left to right for layout direction. This
+is because the default language we build UIs for is English. At NYPL, we serve
+patrons who speak a variety of languages including languages such as Arabic or
+Hebrew which are right to left languages.
+
+To correctly render these languages, UIs should be mirrored to accomodate navigation
+and the passage of time, for example. Check out Material Design's
+[Bidirectionality documentation](https://material.io/design/usability/bidirectionality.html)
+for more information on layout mirroring.
+
+## Terms
+
+- LTR = left to right
+- RTL = right to left
+
+## Background
+
+While the majority of applications at NYPL will have a LTR direction, some applications
+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 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
+
+The `dir` HTML attribute can be added to elements to indicate its directionality.
+The default direction is `"ltr"` or left to right. For languages, such as Arabic
+or Hebrew, the correct direction is right to left and the proper attribute
+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 your top-level
+`app` class, the `dir` attribute can be added to that element:
+
+```jsx
+<div className="app" dir="rtl">
+  ...
+</div>
+```
+
+An anti-pattern is to add `dir` to all the elements you want to change directionality
+in. This HTML rule cascades down to its children elements so there is no need to
+do the following:
+
+```jsx
+// don't do this
+<div className="app" dir="rtl">
+  <div dir="rtl">
+    <p dir="rtl">
+      Some text <button dir="rtl">Button</button>
+    </p>
+  </div>
+</div>
+```
+
+The `dir` HTML attribute is the recommended way to change directionality, but note
+that this attribute is not supported in Internet Explorer.
+
+- [MDN dir Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+- [W3C internationalization dir QA](https://www.w3.org/International/questions/qa-html-dir)
+
+### `direction` CSS rule
+
+Another option to change text and UI directionality is through the CSS `direction`
+rule. The default value for all elements is `direction: ltr;`. This rule is
+supported by all major browsers and can target specific elements through CSS rules:
+
+```css
+.rightToLeft {
+  direction: rtl;
+}
+
+.leftToRight {
+  direction: ltr;
+}
+```
+
+- [MDN direction Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
+- [CSS Tricks direction](https://css-tricks.com/almanac/properties/d/direction/)
+
+### Examples using `dir` and `direction`
+
+For the following examples, the main element we are targeting is a div wrapper
+that sets a 400px width container for a `SearchBar` component. Notice that in both
+RTL examples (#2 and #3), it's not just the text that aligns right but the element
+itself that aligns right. This is why using the CSS rule `text-align: right;` is
+not the proper way to handle RTL languages since the UI needs to be mirrored (see above).
+
+In both RTL (#2 and #3) examples, the directionality changes for the div wrapper
+and there is no significant difference, but implementing both in a real application
+won't hurt.
+
+#1 - Left to right default
+
+<Canvas>
+  <DSProvider>
+    <div style={{ width: "400px" }}>
+      <SearchBar
+        helperText="Use a keyword or phrase to search!"
+        id="example1"
+        isRequired
+        textInputProps={{
+          labelText: "Item Search",
+          name: "textInputName",
+          placeholder: "Item Search",
+        }}
+      />
+    </div>
+  </DSProvider>
+</Canvas>
+
+#2 - Right to left using `dir="rtl"`. Click on "Show code" in the following
+block to see its code implementation.
+
+<Canvas>
+  <DSProvider>
+    <div dir="rtl">
+      <div style={{ width: "400px" }}>
+        <SearchBar
+          helperText="استخدم كلمة رئيسية أو عبارة للبحث!"
+          id="example2"
+          isRequired
+          textInputProps={{
+            labelText: "Item Search",
+            name: "textInputName",
+            placeholder: "Item Search",
+          }}
+        />
+      </div>
+    </div>
+  </DSProvider>
+</Canvas>
+
+#3 - Right to left using `direction: rtl;`. Click on "Show code" in the following
+block to see its code implementation.
+
+<Canvas>
+  <DSProvider>
+    <div style={{ direction: "rtl" }}>
+      <div style={{ width: "400px" }}>
+        <SearchBar
+          helperText="استخدم كلمة رئيسية أو عبارة للبحث!"
+          id="example3"
+          isRequired
+          textInputProps={{
+            labelText: "Item Search",
+            name: "textInputName",
+            placeholder: "Item Search",
+          }}
+        />
+      </div>
+    </div>
+  </DSProvider>
+</Canvas>
+
+## Component Updates
+
+You may have noticed in the above RTL examples that in the `Button` component
+there is no space between the text and the icon. Although this may be difficult
+to see in the Arabic language example, it's more noticeable in the English examples
+below. The lack of space happens because the icon has a `margin-right` rule
+which works well in the default LTR display but does not apply well in the RTL
+display. No audit has been made to see what components need an update but in
+general, specifying an equal margin or padding to both sides of an element may
+help reduce any visual mistakes.
+
+<Canvas>
+  <DSProvider>
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <div style={{ width: "300px" }}>
+        A regular button:
+        <Button id="button-ex4" type="submit">
+          <Icon name="search" size="small" align="left" />
+          Search
+        </Button>
+        <div dir="rtl">
+          An RTL button:
+          <Button id="button-ex5" type="submit">
+            <Icon name="search" size="small" align="left" />
+            Search
+          </Button>
+        </div>
+      </div>
+    </div>
+  </DSProvider>
+</Canvas>

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

@@ -0,0 +1,55 @@
+import { Meta } from "@storybook/addon-docs";
+
+import Heading from "../Heading/Heading";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Breakpoints")} />
+
+# Breakpoints
+
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [CSS Variables](#css-variables)             |
+| 3. [Figma Reference](#figma-reference)         |
+
+## General Information
+
+The Reservoir Design System (DS) adheres to four global breakpoints for
+responsive layouts and typography.
+
+- Mobile: 320px
+- Tablet Portrait: 600px
+- Tablet Landscape: 960px
+- Desktop: 1280px
+
+## CSS Variables
+
+The following CSS variables are available through the DS.
+
+```css
+--nypl-breakpoint-small: 320px;
+--nypl-breakpoint-medium: 600px;
+--nypl-breakpoint-large: 960px;
+--nypl-breakpoint-xl: 1280px;
+```
+
+## SCSS Variables
+
+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;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-breakpoint-xl: 1280px;
+$nypl-max-width: $nypl-breakpoint-xl;
+```
+
+## Figma Reference
+
+For additional spacing information, please refer to the Figma Main file.
+
+- https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17983%3A60146