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

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

@@ -6,16 +6,20 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
   id="regularCard"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/400/200/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/400/200/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -55,16 +59,20 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
   id="cardWithExtendedStyles"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -96,6 +104,8 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -103,6 +113,8 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -149,16 +161,20 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
   id="cardWithNoCTAs"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -193,16 +209,20 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
   id="cardWithNoContent"
 >
   <div
-    className="the-wrap  css-0"
+    className="css-0"
   >
     <div
-      className="the-crop css-0"
+      className="the-wrap  css-0"
     >
-      <img
-        alt="Alt text"
-        className="css-0"
-        src="https://placeimg.com/300/400/arch"
-      />
+      <div
+        className="the-crop css-0"
+      >
+        <img
+          alt="Alt text"
+          className="css-0"
+          src="https://placeimg.com/300/400/arch"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -226,6 +246,8 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -233,6 +255,8 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -304,6 +328,8 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         className="css-0"
         href="online"
         id="link-online"
+        rel={null}
+        target={null}
       >
         Read Online
       </a>
@@ -311,6 +337,8 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         className="css-0"
         href="#url"
         id="link-icon"
+        rel={null}
+        target={null}
       >
         <svg
           aria-hidden={true}
@@ -360,16 +388,20 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
     id="fullclick"
   >
     <div
-      className="the-wrap  css-0"
+      className="css-0"
     >
       <div
-        className="the-crop css-0"
+        className="the-wrap  css-0"
       >
-        <img
-          alt="Alt text"
-          className="css-0"
-          src="https://placeimg.com/400/200/arch"
-        />
+        <div
+          className="the-crop css-0"
+        >
+          <img
+            alt="Alt text"
+            className="css-0"
+            src="https://placeimg.com/400/200/arch"
+          />
+        </div>
       </div>
     </div>
     <div

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

@@ -11,6 +11,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
+| Latest            | `0.25.1`   |
 
 Note: This needs the use of the `DSProvider` component. See the
 [README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
@@ -63,16 +64,12 @@ the `templateColumns` and `templateRows`.
       height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
-      gap="32"
+      gap="l"
     >
-      <GridItem
-        rowSpan={2}
-        colSpan={1}
-        bg="var(--nypl-colors-ui-link-primary)"
-      />
-      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
-      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
-      <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
+      <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
+      <GridItem colSpan={2} bg="ui.success.primary" />
+      <GridItem colSpan={2} bg="ui.success.secondary" />
+      <GridItem colSpan={4} bg="ui.link.secondary" />
     </Grid>
   </DSProvider>
 </Canvas>
@@ -82,11 +79,11 @@ the `templateColumns` and `templateRows`.
   height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
-  gap="32"
+  gap="l"
 >
-  <GridItem rowSpan={2} colSpan={1} bg="var(--nypl-colors-ui-link-primary)" />
-  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
-  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
-  <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
+  <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
+  <GridItem colSpan={2} bg="ui.success.primary" />
+  <GridItem colSpan={2} bg="ui.success.secondary" />
+  <GridItem colSpan={4} bg="ui.link.secondary" />
 </Grid>
 ```

package/src/components/DatePicker/DatePicker.test.tsx

@@ -368,7 +368,7 @@ describe("DatePicker", () => {
     // Note: Have to add an initial date so that the snapshot tests always
     // pass. Otherwise, it'll use the _current_ date which changes
     // based on the day it is tested and is not what we want.
-    it.skip("renders the UI snapshot correctly", () => {
+    it("renders the UI snapshot correctly", () => {
       const basic = renderer
         .create(
           <DatePicker
@@ -805,10 +805,12 @@ describe("DatePicker", () => {
       const input = screen.getByLabelText(
         /Select the year you want to visit NYPL/i
       );
-      const [year] = getTodaysValues();
+      const mockYear = 2021;
 
       expect(
-        screen.queryByText(`${(year as any) - 4} - ${(year as any) + 7}`)
+        screen.queryByText(
+          `${(mockYear as any) - 4} - ${(mockYear as any) + 7}`
+        )
       ).not.toBeInTheDocument();
 
       userEvent.click(input);
@@ -817,16 +819,16 @@ describe("DatePicker", () => {
       // before the current year to seven years after the current year. For year
       // 2021, it will display 2017 - 2028.
       expect(
-        screen.getByText(`${(year as any) - 4} - ${(year as any) + 7}`)
+        screen.getByText(`${(mockYear as any) - 4} - ${(mockYear as any) + 7}`)
       ).toBeInTheDocument();
       // This calendar displays 12 years to select from.
       // It should display the four previous years from the current year.
       for (let i = 4; i > 0; i--) {
-        expect(screen.getByText((year as any) - i)).toBeInTheDocument();
+        expect(screen.getByText((mockYear as any) - i)).toBeInTheDocument();
       }
       // It should display the eight next years from the current year.
       for (let i = 0; i < 8; i++) {
-        expect(screen.getByText((year as any) + i)).toBeInTheDocument();
+        expect(screen.getByText((mockYear as any) + i)).toBeInTheDocument();
       }
     });
 

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

@@ -587,6 +587,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 1`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988-01-02"
           />
@@ -625,12 +626,9 @@ exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
-<<<<<<< HEAD
-            value="2021-11-17"
-=======
             value="1988-01-02"
->>>>>>> development
           />
         </div>
       </div>
@@ -678,6 +676,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 3`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988/02/01"
           />
@@ -729,6 +728,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988-01-02"
           />
@@ -793,6 +793,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988-01-02"
           />

package/src/components/Icons/Icon.stories.mdx

@@ -28,7 +28,8 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
+      url:
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
     },
     jest: ["Icon.test.tsx"],
   }}
@@ -44,7 +45,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Icon} />
 

package/src/components/Icons/IconSvgs.tsx

@@ -5,6 +5,7 @@ import action_check_circle from "../../../icons/svg/action_check_circle.svg";
 import action_help_default from "../../../icons/svg/action_help_default.svg";
 import action_help_outline from "../../../icons/svg/action_help_outline.svg";
 import action_launch from "../../../icons/svg/action_launch.svg";
+import alert_notification_important from "../../../icons/svg/alert_notification_important.svg";
 import arrow from "../../../icons/svg/arrow.svg";
 import brooklyn from "../../../icons/svg/brooklyn.svg";
 import check from "../../../icons/svg/check.svg";
@@ -57,6 +58,7 @@ export default {
   action_help_default,
   action_help_outline,
   action_launch,
+  alert_notification_important,
   arrow,
   brooklyn,
   check,

package/src/components/Icons/IconTypes.tsx

@@ -52,6 +52,7 @@ export enum IconNames {
   ActionCheckCircle = "action_check_circle",
   ActionHelpDefault = "action_help_default",
   ActionHelpOutline = "action_help_outline",
+  AlertNotificationImportant = "alert_notification_important",
   ActionLaunch = "action_launch",
   Arrow = "arrow",
   Check = "check",

package/src/components/Image/Image.stories.mdx

@@ -11,8 +11,16 @@ import { VStack } from "@chakra-ui/react";
 import Image from "./Image";
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 import Heading from "../Heading/Heading";
+import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 
+export const imageBlockStyles = {
+  margin: "auto",
+  maxWidth: "360px",
+  textAlign: "center",
+  width: "100%",
+};
+
 <Meta
   title={getCategory("Image")}
   component={Image}
@@ -20,7 +28,8 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
+      url:
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
     },
     jest: ["Image.test.tsx"],
   }}
@@ -36,7 +45,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Image} />
 
@@ -102,28 +111,61 @@ Use the `ImageSizes` prop to set the desired size.
 
 <Canvas>
   <Story name="Image Sizes">
-    <VStack spacing="xs">
-      <Heading id="Small" text="ImageSizes.Small" />
-      <Image
-        alt="Alt text"
-        imageSize={ImageSizes.Small}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="Medium" text="ImageSizes.Medium" />
-      <Image
-        alt="Alt text"
-        imageSize={ImageSizes.Medium}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="Large" text="ImageSizes.Large" />
-      <Image
-        alt="Alt text"
-        imageSize={ImageSizes.Large}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="Default" text="ImageSizes.Default" />
-      <Image alt="Alt text" src="https://placeimg.com/400/300/animals" />
-    </VStack>
+    <SimpleGrid columns={1}>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="ExtraExtraSmall" text="ImageSizes.ExtraExtraSmall" />
+        <Image
+          alt="Alt text"
+          imageCaption="64px"
+          imageSize={ImageSizes.ExtraExtraSmall}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="ExtraSmall" text="ImageSizes.ExtraSmall" />
+        <Image
+          alt="Alt text"
+          imageCaption="96px"
+          imageSize={ImageSizes.ExtraSmall}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Small" text="ImageSizes.Small" />
+        <Image
+          alt="Alt text"
+          imageCaption="165px"
+          imageSize={ImageSizes.Small}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Medium" text="ImageSizes.Medium" />
+        <Image
+          alt="Alt text"
+          imageCaption="225px"
+          imageSize={ImageSizes.Medium}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Large" text="ImageSizes.Large" />
+        <Image
+          alt="Alt text"
+          imageCaption="360px"
+          imageSize={ImageSizes.Large}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <Heading id="Default" text="ImageSizes.Default" />
+        <Image
+          alt="Alt text"
+          imageCaption="100%"
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+    </SimpleGrid>
   </Story>
 </Canvas>
 
@@ -137,56 +179,72 @@ in an element with a fixed width value.
 
 <Canvas>
   <Story name="Image Aspect Ratios">
-    <VStack spacing="xs" maxWidth="360px" margin="auto">
-      <Heading id="fourbythree" text="ImageRatios.FourByThree" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.FourByThree}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="onebytwo" text="ImageRatios.OneByTwo" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.OneByTwo}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="original" text="ImageRatios.Original" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Original}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="sixteenbynine" text="ImageRatios.SixteenByNine" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.SixteenByNine}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="square" text="ImageRatios.Square" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="threebyfour" text="ImageRatios.ThreeByFour" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.ThreeByFour}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="threebytwo" text="ImageRatios.ThreeByTwo" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.ThreeByTwo}
-        src="https://placeimg.com/400/300/animals"
-      />
-      <Heading id="twobyone" text="ImageRatios.TwoByOne" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        src="https://placeimg.com/400/300/animals"
-      />
-    </VStack>
+    <SimpleGrid columns={1}>
+      <div style={imageBlockStyles}>
+        <Heading id="fourbythree" text="ImageRatios.FourByThree" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.FourByThree}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="onebytwo" text="ImageRatios.OneByTwo" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.OneByTwo}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="original" text="ImageRatios.Original" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Original}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="sixteenbynine" text="ImageRatios.SixteenByNine" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.SixteenByNine}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="square" text="ImageRatios.Square" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Square}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="threebyfour" text="ImageRatios.ThreeByFour" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.ThreeByFour}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="threebytwo" text="ImageRatios.ThreeByTwo" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.ThreeByTwo}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="twobyone" text="ImageRatios.TwoByOne" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+          src="https://placeimg.com/400/300/animals"
+        />
+      </div>
+    </SimpleGrid>
   </Story>
 </Canvas>
 
@@ -200,21 +258,25 @@ in an element with a fixed width value.
 
 <Canvas>
   <Story name="Image Types">
-    <VStack spacing="xs" maxWidth="360px" margin="auto">
-      <Heading id="default" text="ImageTypes.Default" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageType={ImageTypes.Default}
-        src="https://placeimg.com/400/400/animals"
-      />
-      <Heading id="circle" text="ImageTypes.Circle" />
-      <Image
-        alt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageType={ImageTypes.Circle}
-        src="https://placeimg.com/400/400/animals"
-      />
-    </VStack>
+    <SimpleGrid columns={1}>
+      <div style={imageBlockStyles}>
+        <Heading id="default" text="ImageTypes.Default" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Square}
+          imageType={ImageTypes.Default}
+          src="https://placeimg.com/400/400/animals"
+        />
+      </div>
+      <div style={imageBlockStyles}>
+        <Heading id="circle" text="ImageTypes.Circle" />
+        <Image
+          alt="Alt text"
+          imageAspectRatio={ImageRatios.Square}
+          imageType={ImageTypes.Circle}
+          src="https://placeimg.com/400/400/animals"
+        />
+      </div>
+    </SimpleGrid>
   </Story>
 </Canvas>