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

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

@@ -2,7 +2,7 @@
 
 exports[`Accordion Renders the UI snapshot correctly 1`] = `
 <div
-  className="chakra-accordion css-0"
+  className="chakra-accordion css-1xdhyk6"
   id="accordian"
 >
   <div
@@ -11,7 +11,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-ubg1nw"
+      className="chakra-accordion__button css-1v42wmb"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -26,7 +26,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
       </div>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
@@ -75,14 +75,14 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
         role="region"
       >
         <div
-          className="css-0"
+          className="css-1xdhyk6"
           id="card"
         >
           <div
             className="css-0"
           >
             <div
-              className="the-wrap  css-0"
+              className="the-wrap css-1u8qly9"
             >
               <div
                 className="the-crop css-0"
@@ -99,13 +99,14 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
             className="card-body css-0"
           >
             <h4
-              className="chakra-heading css-0"
+              className="chakra-heading css-1xdhyk6"
               id="heading1"
+              layout="row"
             >
               Gerry Kellman
             </h4>
             <div
-              className="css-0"
+              className="css-1xdhyk6"
             >
               Gerri is 
               <b>
@@ -123,7 +124,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
 
 exports[`Accordion Renders the UI snapshot correctly 2`] = `
 <div
-  className="chakra-accordion css-0"
+  className="chakra-accordion css-1xdhyk6"
   id="accordian"
 >
   <div
@@ -132,7 +133,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-ubg1nw"
+      className="chakra-accordion__button css-1v42wmb"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -147,7 +148,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
       </div>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
@@ -196,14 +197,14 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
         role="region"
       >
         <div
-          className="css-0"
+          className="css-1xdhyk6"
           id="card"
         >
           <div
             className="css-0"
           >
             <div
-              className="the-wrap  css-0"
+              className="the-wrap css-1u8qly9"
             >
               <div
                 className="the-crop css-0"
@@ -220,13 +221,503 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
             className="card-body css-0"
           >
             <h4
-              className="chakra-heading css-0"
+              className="chakra-heading css-1xdhyk6"
               id="heading1"
+              layout="row"
             >
               Gerry Kellman
             </h4>
             <div
-              className="css-0"
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 3`] = `
+<div
+  className="chakra-accordion css-1t0bvx9"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-1v42wmb"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 4`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  data-testid="testid"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-1v42wmb"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 5`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-1m4sr3t"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 6`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-x43iy9"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
             >
               Gerri is 
               <b>

package/src/components/Autosuggest/Autosuggest.stories.mdx

@@ -8,12 +8,13 @@ import { getCategory } from "../../utils/componentCategories";
 
 # Autosuggest
 
-The NYPL Design System does not have its own `Autosuggest` component. Instead,
+The Reservoir Design System (DS) does not have its own `Autosuggest` component. Instead,
 we are currently using the
 [react-autosuggest](https://www.npmjs.com/package/react-autosuggest) package.
 We recommend using this package in your application and wrapping it in a [custom
-component](#code-implementation). The NYPL Design System does have custom styling that targets the
-classes from the `react-autosuggest` package, so the look and feel will be consistent.
+component](#code-implementation). The Reservoir Design System (DS) does have custom
+styling that targets the classes from the `react-autosuggest` package, so the look
+and feel will be consistent.
 
 In the following previews, you'll notice that there is a lot of white space underneath
 every input element. Since the suggestion dropdown will appear on top of page content,