@nypl/design-system-react-components 0.25.12 → 0.26.1

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

@@ -2,45 +2,38 @@
 
 exports[`Card Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="regularCard"
 >
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/400/200/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
   </div>
   <div
     className="card-body css-0"
   >
     <h3
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="heading1"
+      layout="column"
     >
       The Card Heading
     </h3>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       middle column content
     </div>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <button
-        className="chakra-button css-0"
+        className="chakra-button css-1xdhyk6"
         data-testid="button"
         id="button1"
         onClick={[Function]}
@@ -55,37 +48,30 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
 
 exports[`Card Renders the UI snapshot correctly 2`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithExtendedStyles"
 >
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/300/400/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/300/400/arch"
+    />
   </div>
   <div
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       The Card Heading
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div>
         Published in New York by Random House
@@ -98,10 +84,10 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
       </div>
     </div>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="online"
         id="link-online"
         rel={null}
@@ -110,7 +96,7 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         Read Online
       </a>
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#url"
         id="link-icon"
         rel={null}
@@ -118,7 +104,7 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon css-onkibi"
+          className="chakra-icon css-1grhd2q"
           focusable={false}
           id="icon-cardWithExtendedStyles"
           role="img"
@@ -157,37 +143,30 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
 
 exports[`Card Renders the UI snapshot correctly 3`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithNoCTAs"
 >
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/300/400/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/300/400/arch"
+    />
   </div>
   <div
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       The Card Heading
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <p>
         Published in New York by Random House
@@ -205,35 +184,28 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
 
 exports[`Card Renders the UI snapshot correctly 4`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithNoContent"
 >
   <div
     className="css-0"
   >
-    <div
-      className="the-wrap  css-0"
-    >
-      <div
-        className="the-crop css-0"
-      >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/300/400/arch"
-        />
-      </div>
-    </div>
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/300/400/arch"
+    />
   </div>
   <div
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#edition-link"
         id="editioncardheading1-link"
         rel={null}
@@ -243,10 +215,10 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
       </a>
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="online"
         id="link-online"
         rel={null}
@@ -255,7 +227,7 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         Read Online
       </a>
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#url"
         id="link-icon"
         rel={null}
@@ -263,7 +235,7 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon css-onkibi"
+          className="chakra-icon css-1grhd2q"
           focusable={false}
           id="icon-cardWithNoContent"
           role="img"
@@ -302,18 +274,19 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
 
 exports[`Card Renders the UI snapshot correctly 5`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithNoImage"
 >
   <div
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#edition-link"
         id="editioncardheading1-link"
         rel={null}
@@ -323,15 +296,15 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
       </a>
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       middle column content
     </div>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="online"
         id="link-online"
         rel={null}
@@ -340,7 +313,7 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         Read Online
       </a>
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#url"
         id="link-icon"
         rel={null}
@@ -348,7 +321,7 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon css-onkibi"
+          className="chakra-icon css-1grhd2q"
           focusable={false}
           id="icon-cardWithNoImage"
           role="img"
@@ -387,35 +360,28 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
 
 exports[`Card Renders the UI snapshot correctly 6`] = `
 <div
-  className="chakra-linkbox css-10n1vic"
+  className="chakra-linkbox css-hng3kb"
 >
   <div
-    className="css-0"
+    className="css-1xdhyk6"
     id="fullclick"
   >
     <div
       className="css-0"
     >
-      <div
-        className="the-wrap  css-0"
-      >
-        <div
-          className="the-crop css-0"
-        >
-          <img
-            alt="Alt text"
-            className="css-0"
-            src="https://placeimg.com/400/200/arch"
-          />
-        </div>
-      </div>
+      <img
+        alt="Alt text"
+        className="css-0"
+        src="https://placeimg.com/400/200/arch"
+      />
     </div>
     <div
       className="card-body css-0"
     >
       <h3
-        className="chakra-heading css-0"
+        className="chakra-heading css-1xdhyk6"
         id="heading1"
+        layout="column"
       >
         <a
           className="chakra-linkbox__overlay css-kvj8dg"
@@ -425,15 +391,15 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
         </a>
       </h3>
       <div
-        className="css-0"
+        className="css-1xdhyk6"
       >
         middle column content
       </div>
       <div
-        className="css-0"
+        className="css-1xdhyk6"
       >
         <button
-          className="chakra-button css-0"
+          className="chakra-button css-1xdhyk6"
           data-testid="button"
           id="button1"
           onClick={[Function]}
@@ -446,3 +412,157 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
   </div>
 </div>
 `;
+
+exports[`Card Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1xdhyk6"
+  id="cardID"
+>
+  <div
+    className="css-0"
+  >
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-1xdhyk6"
+      id="heading1"
+      layout="column"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-1xdhyk6"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-1xdhyk6"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button1"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+    <div
+      className="css-1xdhyk6"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button2"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-1t0bvx9"
+  id="chakraProps"
+>
+  <div
+    className="css-0"
+  >
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-1ss7kwh"
+      id="heading1"
+      layout="column"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-1rn2qcq"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-1avkygu"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button1"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="card-testid"
+  id="otherProps"
+>
+  <div
+    className="css-0"
+  >
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-1ss7kwh"
+      id="heading1"
+      layout="column"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-1xdhyk6"
+      data-testid="cardcontent-testid"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-1xdhyk6"
+      data-testid="cardaction-testid"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button1"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Chakra/Center.stories.mdx

@@ -53,9 +53,9 @@ guide on the Chakra UI site.
   <DSProvider>
     <Center border="1px solid" borderColor="var(--nypl-colors-ui-gray-medium)">
       <Image
-        src="https://placeimg.com/300/400/arch"
         alt="Centered Image"
-        imageSize={ImageSizes.Medium}
+        size={ImageSizes.Medium}
+        src="https://placeimg.com/300/400/arch"
       />
     </Center>
   </DSProvider>

package/src/components/Chakra/Grid.stories.mdx

@@ -19,7 +19,7 @@ for more information.
 
 This component is directly exported from Chakra UI. The `Grid` component is
 useful for grid layouts and offers more complexity and formatting options than
-the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes
+the Reservoir Design System (DS) `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes
 with helpful style shorthand. It renders a `div` element.
 
 Details about available props and related child components can be found on the
@@ -30,7 +30,7 @@ Details about available props and related child components can be found on the
     name="Grid"
     args={{
       templateColumns: "repeat(5, 1fr)",
-      gap: "l",
+      gap: "grid.default",
     }}
   >
     {(args) => (
@@ -64,7 +64,7 @@ the `templateColumns` and `templateRows`.
       height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
-      gap="l"
+      gap="grid.default"
     >
       <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
       <GridItem colSpan={2} bg="ui.success.primary" />
@@ -79,7 +79,7 @@ the `templateColumns` and `templateRows`.
   height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
-  gap="l"
+  gap="grid.default"
 >
   <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
   <GridItem colSpan={2} bg="ui.success.primary" />