@nypl/design-system-react-components 0.25.2 → 0.25.6

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

@@ -50,7 +50,7 @@ exports[`Hero Renders the UI snapshot correctly 2`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <h1
@@ -82,7 +82,7 @@ exports[`Hero Renders the UI snapshot correctly 3`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <h1
@@ -114,7 +114,7 @@ exports[`Hero Renders the UI snapshot correctly 4`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <h1
@@ -146,7 +146,7 @@ exports[`Hero Renders the UI snapshot correctly 5`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <h1
@@ -178,7 +178,7 @@ exports[`Hero Renders the UI snapshot correctly 6`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <h1
@@ -253,7 +253,7 @@ exports[`Hero Renders the UI snapshot correctly 8`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <div
@@ -294,7 +294,7 @@ exports[`Hero Renders the UI snapshot correctly 9`] = `
   >
     <img
       alt="Image example"
-      className="image "
+      className="css-0"
       src="https://placeimg.com/800/400/animals"
     />
     <div

package/src/components/HorizontalRule/HorizontalRule.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -34,15 +33,17 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.0`   |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.3`   |
 
 <Description of={HorizontalRule} />
 
 The `HorizontalRule` component renders a basic `<hr>` element. The `height`,
-`width`, and `align` props can be customized.
+`width`, and `align` props can be customized. For the `height` prop, use a whole
+number, a `px` value, a `em` value, or a `rem` value. Otherwise, the default
+value of "2px" will be used.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="HorizontalRule">{(args) => <HorizontalRule {...args} />}</Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="HorizontalRule" />

package/src/components/HorizontalRule/HorizontalRule.test.tsx

@@ -24,6 +24,23 @@ describe("HorizontalRule", () => {
     expect(hrClass).toContain("custom-hr");
   });
 
+  it("renders with proper custom class", () => {
+    const warn = jest.spyOn(console, "warn");
+    const { rerender } = render(
+      <HorizontalRule className="custom-hr" height="20px" />
+    );
+    expect(warn).not.toHaveBeenCalledWith(
+      "`HorizontalRule`: For the `height` prop, use a whole number, a `px` " +
+        "value, a `em` value, or a `rem` value. Using the default of 2px."
+    );
+
+    rerender(<HorizontalRule className="custom-hr" height="20%" />);
+    expect(warn).toHaveBeenCalledWith(
+      "`HorizontalRule`: For the `height` prop, use a whole number, a `px` " +
+        "value, a `em` value, or a `rem` value. Using the default of 2px."
+    );
+  });
+
   it("renders the UI snapshot correctly", () => {
     const basic = renderer.create(<HorizontalRule />).toJSON();
     const updatedHeight = renderer

package/src/components/HorizontalRule/HorizontalRule.tsx

@@ -3,13 +3,20 @@ import * as React from "react";
 import { Box, useStyleConfig } from "@chakra-ui/react";
 
 export interface HorizontalRuleProps {
-  /** Optional alignment value to align the horizontal rule to one side or the other when the width is less than 100%. If omitted, the horizobntal rule will have a default center alignment. */
+  /** Optional alignment value to align the horizontal rule to one side or the
+   * other when the width is less than 100%. If omitted, the horizontal rule
+   * will have a default center alignment. */
   align?: "left" | "right";
   /** ClassName you can add in addition to `horizontal-rule` */
   className?: string;
-  /** Optional height value.  This value should be entered with the same formatting as a CSS height attribute (ex. `2%`, `5px`, `1.5rem`).  If omitted, the horizobntal rule will have a default height of 2px. */
+  /** Optional height value. This value should be entered with the same
+   * formatting as a CSS height attribute except for percent values (ex. `2`,
+   * `5px`, `1.5rem`). If this prop is omitted or a percent value is used, the
+   * horizontal rule will have a default height of 2px. */
   height?: string;
-  /** Optional width value.  This value should be entered with the same formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).  If omitted, the horizobntal rule will have a default width of 100%. */
+  /** Optional width value. This value should be entered with the same
+   * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
+   * omitted, the horizontal rule will have a default width of "auto". */
   width?: string;
 }
 
@@ -18,10 +25,20 @@ export default function HorizontalRule(
 ) {
   const { align, className, height = "2px", width = "auto" } = props;
   const styles = useStyleConfig("HorizontalRule", { align });
+  let finalHeight = height;
+
+  if (height.endsWith("%")) {
+    console.warn(
+      "`HorizontalRule`: For the `height` prop, use a whole number, a `px`" +
+        " value, a `em` value, or a `rem` value. Using the default of 2px."
+    );
+    finalHeight = "2px";
+  }
+
   const finalStyles = {
     ...styles,
+    height: finalHeight,
     width,
-    height,
   };
 
   return <Box as="hr" className={className} __css={finalStyles} />;

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

@@ -2,30 +2,30 @@
 
 exports[`HorizontalRule renders the UI snapshot correctly 1`] = `
 <hr
-  className="css-14epzr5"
+  className="css-ili6fu"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 2`] = `
 <hr
-  className="css-21umwa"
+  className="css-1pwp4fu"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 3`] = `
 <hr
-  className="css-bbdxhg"
+  className="css-gj8znx"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 4`] = `
 <hr
-  className="css-14epzr5"
+  className="css-ili6fu"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 5`] = `
 <hr
-  className="css-14epzr5"
+  className="css-ili6fu"
 />
 `;

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

@@ -28,8 +28,7 @@ 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"],
   }}
@@ -45,7 +44,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Icon} />
 
@@ -100,6 +99,7 @@ import { getCategory } from "../../utils/componentCategories";
         iconRotation={IconRotationTypes[args.iconRotation]}
         name={IconNames[args.name]}
         size={IconSizes[args.size]}
+        title={args.title}
       />
     )}
   </Story>
@@ -186,6 +186,14 @@ export const allIconsType = (list) => (
   <ul style={{ listStyle: "none" }}>{list}</ul>
 );
 
+## Accessibility
+
+For accessibility purposes, every DS `Icon` will render the `svg` element with
+its icon name in the `title` element. The default text in the `title` element
+is the icon's code name. Pass in better descriptive text in the `title` prop
+when using the `Icon` component in your application. This will give screenreaders
+a better descriptive title for the `svg` graphic.
+
 ## Rotation Types
 
 Passing an `iconRotation` prop with a value from `IconRotationTypes` allows

package/src/components/Icons/Icon.test.tsx

@@ -44,6 +44,24 @@ describe("Icon", () => {
     expect(container.querySelector("svg")).toBeInTheDocument();
   });
 
+  // NOTE: the svg icon is dynamically generated by the "svgr" package. At build
+  // time, it generate the `title` element but it doesn't generate it for tests.
+  // In order to test this, we can check the `title` attribute in the svg
+  // element itself. Inspect the `Icon` in Storybook to see the `title` element.
+  it("renders a title element", () => {
+    const { container, rerender } = render(<Icon name={IconNames.Download} />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "title",
+      "download icon"
+    );
+
+    rerender(<Icon name={IconNames.Download} title="title content" />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "title",
+      "title content"
+    );
+  });
+
   it("renders an icon based on the child", () => {
     const { container } = render(
       <Icon>

package/src/components/Icons/Icon.tsx

@@ -33,6 +33,10 @@ export interface IconProps {
   name?: IconNames | LogoNames;
   /** Sets the icon size. */
   size?: IconSizes;
+  /** For accessibility purposes, the text passed in the `title` prop gets
+   * rendered in a `title` element in the SVG. This descriptive text is not
+   * visible but is needed for screenreaders to describe the graphic. */
+  title?: string;
   /** Sets the icon variant type. */
   type?: IconTypes;
 }
@@ -52,6 +56,7 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
     id = generateUUID(),
     name,
     size = IconSizes.Medium,
+    title = `${name} icon`,
     type = IconTypes.Default,
   } = props;
   const styles = useStyleConfig("Icon", {
@@ -66,6 +71,7 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
     className,
     id,
     role: "img",
+    title,
   };
   let childSVG = null;
 

package/src/components/Icons/IconSvgs.tsx

@@ -1,11 +1,22 @@
 /* eslint-disable camelcase */
 import accessibility_full from "../../../icons/svg/accessibility_full.svg";
 import accessibility_partial from "../../../icons/svg/accessibility_partial.svg";
+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 arrow from "../../../icons/svg/arrow.svg";
 import brooklyn from "../../../icons/svg/brooklyn.svg";
 import check from "../../../icons/svg/check.svg";
 import clock from "../../../icons/svg/clock.svg";
 import close from "../../../icons/svg/close.svg";
+import file_type_audio from "../../../icons/svg/file_type_audio.svg";
+import file_type_doc from "../../../icons/svg/file_type_doc.svg";
+import file_type_generic_doc from "../../../icons/svg/file_type_generic_doc.svg";
+import file_type_image from "../../../icons/svg/file_type_image.svg";
+import file_type_pdf from "../../../icons/svg/file_type_pdf.svg";
+import file_type_spreadsheet from "../../../icons/svg/file_type_spreadsheet.svg";
+import file_type_video from "../../../icons/svg/file_type_video.svg";
 import download from "../../../icons/svg/download.svg";
 import error_filled from "../../../icons/svg/error_filled.svg";
 import error_outline from "../../../icons/svg/error_outline.svg";
@@ -42,6 +53,10 @@ import utility_search from "../../../icons/svg/search.svg";
 export default {
   accessibility_full,
   accessibility_partial,
+  action_check_circle,
+  action_help_default,
+  action_help_outline,
+  action_launch,
   arrow,
   brooklyn,
   check,
@@ -50,6 +65,13 @@ export default {
   download,
   error_filled,
   error_outline,
+  file_type_audio,
+  file_type_doc,
+  file_type_generic_doc,
+  file_type_image,
+  file_type_pdf,
+  file_type_spreadsheet,
+  file_type_video,
   headset,
   logo_brooklyn,
   logo_nypl,

package/src/components/Icons/IconTypes.tsx

@@ -49,6 +49,10 @@ export enum IconSizes {
 export enum IconNames {
   AccessibilityFull = "accessibility_full",
   AccessibilityPartial = "accessibility_partial",
+  ActionCheckCircle = "action_check_circle",
+  ActionHelpDefault = "action_help_default",
+  ActionHelpOutline = "action_help_outline",
+  ActionLaunch = "action_launch",
   Arrow = "arrow",
   Check = "check",
   Clock = "clock",
@@ -56,6 +60,13 @@ export enum IconNames {
   Download = "download",
   ErrorFilled = "error_filled",
   ErrorOutline = "error_outline",
+  FileTypeAudio = "file_type_audio",
+  FileTypeDoc = "file_type_doc",
+  FileTypeGenericDoc = "file_type_generic_doc",
+  FileTypeImage = "file_type_image",
+  FileTypePdf = "file_type_pdf",
+  FileTypeSpreadsheet = "file_type_spreadsheet",
+  FileTypeVideo = "file_type_video",
   Headset = "headset",
   Minus = "minus",
   Plus = "plus",

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

@@ -0,0 +1,220 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { VStack } from "@chakra-ui/react";
+
+import Image from "./Image";
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+import Heading from "../Heading/Heading";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("Image")}
+  component={Image}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
+    },
+    jest: ["Image.test.tsx"],
+  }}
+  argTypes={{
+    alt: { table: { disable: true } },
+    className: { table: { disable: true } },
+    component: { table: { disable: true } },
+  }}
+/>
+
+# Image
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.6`    |
+| Latest            | `0.25.3`   |
+
+<Description of={Image} />
+
+<p>
+  If you want a simple HTML `img` element then don't pass in values for the
+  `imageAspectRatio` or `imageSize` props.
+</p>
+
+<Canvas>
+  <Story
+    name="Image Props"
+    args={{
+      alt: "Alt text",
+      imageAspectRatio: ImageRatios.TwoByOne,
+      imageCaption: "Image caption",
+      imageCredit: "Image credit",
+      imageSize: ImageSizes.Medium,
+      imageType: ImageTypes.Default,
+      src: "https://placeimg.com/400/300/animals",
+    }}
+  >
+    {(args) => <Image {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Image Props" />
+
+## Image Figure
+
+By passing in `imageCredit` or `imageCaption`, the `Image` component will
+render an HTML `figure` element and render an `img` element inside with the
+proper props. If no `imageCredit` or `imageCaption` prop values are passed,
+then an `img` element will be rendered with or without wrapper style divs.
+
+<Canvas>
+  <Story
+    name="Figure and figcaption"
+    args={{
+      alt: "Alt text",
+      imageAspectRatio: ImageRatios.ThreeByTwo,
+      imageCaption: "Image caption",
+      imageCredit: "Image credit",
+      imageSize: ImageSizes.Medium,
+      imageType: ImageTypes.Default,
+      src: "https://placeimg.com/400/300/animals",
+    }}
+    argTypes={{
+      imageAspectRatio: { table: { disable: true } },
+      imageCaption: { table: { disable: true } },
+      imageCredit: { table: { disable: true } },
+      imageSize: { table: { disable: true } },
+      imageType: { table: { disable: true } },
+      src: { table: { disable: true } },
+    }}
+  >
+    {(args) => <Image {...args} />}
+  </Story>
+</Canvas>
+
+## Image Sizes
+
+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>
+  </Story>
+</Canvas>
+
+## Image Aspect Ratios
+
+Use the `imageAspectRatio` prop to set the desired aspect ratio. Note: the
+following example has `imageSize` set to `ImageSizes.Small`.
+
+For a better viewing experience, the `Image` components below have been wrapped
+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>
+  </Story>
+</Canvas>
+
+## Image Types
+
+Use the `imageType` prop to get an image variant. Note that to get a perfect
+circle, the `imageAspectRatio` prop _must_ be set to `ImageRatios.Square`.
+
+For a better viewing experience, the `Image` components below have been wrapped
+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>
+  </Story>
+</Canvas>