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

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>

package/src/components/Image/Image.test.tsx

@@ -74,6 +74,14 @@ describe("Image", () => {
     const figCaption = renderer
       .create(<Image src="test.png" alt="" imageCaption="Caption" />)
       .toJSON();
+    const sizeExtraExtraSmall = renderer
+      .create(
+        <Image src="test.png" alt="" imageSize={ImageSizes.ExtraExtraSmall} />
+      )
+      .toJSON();
+    const sizeExtraSmall = renderer
+      .create(<Image src="test.png" alt="" imageSize={ImageSizes.ExtraSmall} />)
+      .toJSON();
     const sizeSmall = renderer
       .create(<Image src="test.png" alt="" imageSize={ImageSizes.Small} />)
       .toJSON();
@@ -152,6 +160,8 @@ describe("Image", () => {
       .toJSON();
     expect(basic).toMatchSnapshot();
     expect(figCaption).toMatchSnapshot();
+    expect(sizeExtraExtraSmall).toMatchSnapshot();
+    expect(sizeExtraSmall).toMatchSnapshot();
     expect(sizeSmall).toMatchSnapshot();
     expect(sizeMedium).toMatchSnapshot();
     expect(sizeLarge).toMatchSnapshot();

package/src/components/Image/ImageTypes.ts

@@ -14,6 +14,8 @@ export enum ImageSizes {
   Large = "large",
   Medium = "medium",
   Small = "small",
+  ExtraSmall = "xsmall",
+  ExtraExtraSmall = "xxsmall",
 }
 
 export enum ImageTypes {

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

@@ -54,6 +54,22 @@ exports[`Image Renders the UI snapshot correctly 5`] = `
 `;
 
 exports[`Image Renders the UI snapshot correctly 6`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 7`] = `
+<img
+  alt=""
+  className="css-0"
+  src="test.png"
+/>
+`;
+
+exports[`Image Renders the UI snapshot correctly 8`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -69,7 +85,7 @@ exports[`Image Renders the UI snapshot correctly 6`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 7`] = `
+exports[`Image Renders the UI snapshot correctly 9`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -85,7 +101,7 @@ exports[`Image Renders the UI snapshot correctly 7`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 8`] = `
+exports[`Image Renders the UI snapshot correctly 10`] = `
 <img
   alt=""
   className="css-0"
@@ -93,7 +109,7 @@ exports[`Image Renders the UI snapshot correctly 8`] = `
 />
 `;
 
-exports[`Image Renders the UI snapshot correctly 9`] = `
+exports[`Image Renders the UI snapshot correctly 11`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -109,7 +125,7 @@ exports[`Image Renders the UI snapshot correctly 9`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 10`] = `
+exports[`Image Renders the UI snapshot correctly 12`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -125,7 +141,7 @@ exports[`Image Renders the UI snapshot correctly 10`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 11`] = `
+exports[`Image Renders the UI snapshot correctly 13`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -141,7 +157,7 @@ exports[`Image Renders the UI snapshot correctly 11`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 12`] = `
+exports[`Image Renders the UI snapshot correctly 14`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -157,7 +173,7 @@ exports[`Image Renders the UI snapshot correctly 12`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 13`] = `
+exports[`Image Renders the UI snapshot correctly 15`] = `
 <div
   className="the-wrap  css-0"
 >
@@ -173,7 +189,7 @@ exports[`Image Renders the UI snapshot correctly 13`] = `
 </div>
 `;
 
-exports[`Image Renders the UI snapshot correctly 14`] = `
+exports[`Image Renders the UI snapshot correctly 16`] = `
 <div
   className="the-wrap  css-0"
 >

package/src/components/Label/Label.stories.mdx

@@ -27,7 +27,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Label} />
 

package/src/components/Link/Link.stories.mdx

@@ -26,8 +26,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36854%3A24387",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36854%3A24387",
     },
     jest: ["Link.test.tsx"],
   }}
@@ -48,7 +47,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Link} />