@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/components/HorizontalRule/HorizontalRule.tsx

@@ -1,47 +1,45 @@
 // HorizontalRule
 import * as React from "react";
-import bem from "../../utils/bem";
+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";
-  /** Additional attributes passed to the horizontal rule */
-  attributes?: { [key: string]: any };
   /** 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;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: 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;
 }
 
 export default function HorizontalRule(
   props: React.ComponentProps<"hr"> & HorizontalRuleProps
 ) {
-  const {
-    align,
-    attributes = {},
-    className,
-    width = "auto",
-    height = "2px",
-    modifiers = [],
-  } = props;
+  const { align, className, height = "2px", width = "auto" } = props;
+  const styles = useStyleConfig("HorizontalRule", { align });
+  let finalHeight = height;
 
-  attributes["style"] = {
-    width: width,
-    height: height,
-  };
-
-  if (align) {
-    modifiers.push(align);
+  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";
   }
 
-  return (
-    <hr
-      className={bem("horizontal-rule", modifiers, "", [className])}
-      {...attributes}
-    />
-  );
+  const finalStyles = {
+    ...styles,
+    height: finalHeight,
+    width,
+  };
+
+  return <Box as="hr" className={className} __css={finalStyles} />;
 }

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

@@ -1,13 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HorizontalRule Renders the UI snapshot correctly 1`] = `
-<hr
-  className="horizontal-rule "
-  style={
-    Object {
-      "height": "2px",
-      "width": "auto",
-    }
-  }
+exports[`HorizontalRule renders the UI snapshot correctly 1`] = `
+<hr
+  className="css-ili6fu"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 2`] = `
+<hr
+  className="css-1pwp4fu"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 3`] = `
+<hr
+  className="css-gj8znx"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 4`] = `
+<hr
+  className="css-ili6fu"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 5`] = `
+<hr
+  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>
@@ -132,7 +132,7 @@ export const iconRow = (icon, iconType = IconNames, opts = {}) => {
     key += `-${size}`;
   }
   return (
-    <li key={key} style={{ marginBottom: "var(--space-s)" }}>
+    <li key={key} style={{ marginBottom: "var(--nypl-space-s)" }}>
       <span style={styles}>
         <Icon
           name={iconType[icon]}
@@ -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

@@ -14,6 +14,8 @@ import {
 import iconSvgs from "./IconSvgs";
 
 export interface IconProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Aligns the icon. */
   align?: IconAlign;
   /** className that appears in addition to "icon" */
@@ -31,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;
 }
@@ -40,6 +46,7 @@ export interface IconProps {
  */
 export default function Icon(props: React.PropsWithChildren<IconProps>) {
   const {
+    additionalStyles = {},
     align = "none",
     children,
     className,
@@ -49,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", {
@@ -63,6 +71,7 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
     className,
     id,
     role: "img",
+    title,
   };
   let childSVG = null;
 
@@ -84,7 +93,13 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
   // render the SVG child with NYPL-theme styling.
   if (name) {
     const SvgComponent: any = iconSvgs[name];
-    return <ChakraIcon as={SvgComponent} {...iconProps} __css={styles} />;
+    return (
+      <ChakraIcon
+        as={SvgComponent}
+        {...iconProps}
+        __css={{ ...styles, ...additionalStyles }}
+      />
+    );
   }
 
   // If no `name` prop was passed, we expect a child SVG element to be passed.

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>