@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/HorizontalRule/HorizontalRule.tsx

@@ -0,0 +1,27 @@
+// HorizontalRule
+import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
+import * as React from "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 horizontal rule
+   * will have a default center alignment. */
+  align?: "left" | "right";
+  /** ClassName you can add in addition to `horizontal-rule` */
+  className?: string;
+}
+
+export const HorizontalRule = chakra((props: HorizontalRuleProps) => {
+  const { align, className, ...rest } = props;
+  const styles = useStyleConfig("HorizontalRule", { align });
+
+  const finalStyles = {
+    ...styles,
+    height: "2px",
+    width: "100%",
+  };
+
+  return <Box as="hr" className={className} __css={finalStyles} {...rest} />;
+});
+
+export default HorizontalRule;

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HorizontalRule renders the UI snapshot correctly 1`] = `
+<hr
+  className="css-mvtkpx"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 2`] = `
+<hr
+  className="css-j99tgf"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 3`] = `
+<hr
+  className="css-21sffo"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 4`] = `
+<hr
+  className="css-mvtkpx"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 5`] = `
+<hr
+  className="css-mvtkpx"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 6`] = `
+<hr
+  className="css-1pg2j4r"
+/>
+`;
+
+exports[`HorizontalRule renders the UI snapshot correctly 7`] = `
+<hr
+  className="css-mvtkpx"
+  data-testid="props"
+/>
+`;

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

@@ -0,0 +1,413 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Heading from "../Heading/Heading";
+import Icon from "./Icon";
+import iconSvgs from "./IconSvgs";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("Icon")}
+  component={Icon}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
+    },
+    jest: ["Icon.test.tsx"],
+  }}
+  argTypes={{
+    align: {
+      table: { defaultValue: { summary: "none" } },
+    },
+    children: { table: { disable: true } },
+    className: { control: false },
+    color: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ui.black" } },
+      options: [
+        "ui.black",
+        "ui.white",
+        "brand.primary",
+        "brand.secondary",
+        "section.blogs.primary",
+        "section.blogs.secondary",
+        "section.books-and-more.primary",
+        "section.books-and-more.secondary",
+        "section.education.primary",
+        "section.education.secondary",
+        "section.locations.primary",
+        "section.locations.secondary",
+        "section.research.primary",
+        "section.research.secondary",
+        "section.research-library.lpa",
+        "section.research-library.schomburg",
+        "section.research-library.schwartzman",
+        "section.whats-on.primary",
+        "section.whats-on.secondary",
+      ],
+    },
+    iconRotation: {
+      table: { defaultValue: { summary: "rotate0" } },
+    },
+    id: { control: false },
+    name: {},
+    size: {
+      table: { defaultValue: { summary: "medium" } },
+    },
+    title: {
+      control: false,
+      table: { defaultValue: { summary: "`${name} icon`" } },
+    },
+    type: {
+      control: false,
+      table: { defaultValue: { summary: "default" } },
+    },
+  }}
+/>
+
+# Icon
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.4`    |
+| Latest            | `0.28.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Rotation Types](#rotation-types)
+- [IconColors Types](#icon-colors-types)
+- [IconSizes Types](#icon-sizes-types)
+- [All Display Icons](#all-display-icons)
+- [Custom Icons](#custom-icons)
+
+## Overview
+
+<Description of={Icon} />
+
+## Component Props
+
+<Canvas withToolbar>
+  <Story
+    name="Icon with Controls"
+    args={{
+      align: "none",
+      className: undefined,
+      color: "ui.black",
+      decorative: true,
+      iconRotation: "rotate0",
+      id: "icon-id",
+      name: "check",
+      size: "xxlarge",
+      title: undefined,
+      type: "default",
+    }}
+  >
+    {(args) => <Icon {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Icon with Controls" />
+
+export const iconRow = (iconName, opts = {}) => {
+  // We'll use this setup function to render all the icons in a list item.
+  // Some icons display better with a dark background.
+  const styles = { display: "block" };
+  const {
+    size = "large",
+    iconRotation = "rotate0",
+    color = "ui.black",
+    displayValue = iconName,
+  } = opts;
+  let key = iconName;
+  if (iconName.indexOf("Negative") !== -1 || color.indexOf("White") !== -1) {
+    styles.backgroundColor = "#000";
+    styles.padding = "1rem";
+  }
+  // The following is just to fix duplicate React key issues.
+  if (iconRotation !== "rotate0") {
+    key += `-${iconRotation}`;
+  }
+  if (color !== "ui.black") {
+    key += `-${color}`;
+  }
+  if (size !== "large") {
+    key += `-${size}`;
+  }
+  return (
+    <li
+      key={key}
+      style={{ marginBottom: "var(--nypl-space-l)", textAlign: "center" }}
+    >
+      <Heading level="four">{displayValue}</Heading>
+      <span style={styles}>
+        <Icon
+          name={iconName}
+          size={size}
+          iconRotation={iconRotation}
+          color={color}
+        />
+      </span>
+    </li>
+  );
+};
+export const icons = [];
+export const rotations = [];
+export const colors = [];
+export const sizes = [];
+export const iconColorsValues = [
+  "ui.black",
+  "ui.white",
+  "brand.primary",
+  "brand.secondary",
+  "section.blogs.primary",
+  "section.blogs.secondary",
+  "section.books-and-more.primary",
+  "section.books-and-more.secondary",
+  "section.education.primary",
+  "section.education.secondary",
+  "section.locations.primary",
+  "section.locations.secondary",
+  "section.research.primary",
+  "section.research.secondary",
+  "section.research-library.lpa",
+  "section.research-library.schomburg",
+  "section.research-library.schwartzman",
+  "section.whats-on.primary",
+  "section.whats-on.secondary",
+];
+export const iconNamesValues = [
+  "accessibilityFull",
+  "accessibilityPartial",
+  "actionCheckCircle",
+  "actionHelpDefault",
+  "actionHelpOutline",
+  "alertNotificationImportant",
+  "actionLaunch",
+  "arrow",
+  "check",
+  "clock",
+  "close",
+  "download",
+  "errorFilled",
+  "errorOutline",
+  "fileTypeAudio",
+  "fileTypeDoc",
+  "fileTypeGenericDoc",
+  "fileTypeImage",
+  "fileTypePdf",
+  "fileTypeSpreadsheet",
+  "fileTypeVideo",
+  "headset",
+  "minus",
+  "plus",
+  "search",
+  "speakerNotes",
+  "utilityAccountFilled",
+  "utilityAccountUnfilled",
+  "utilityHamburger",
+  "utilitySearch",
+];
+export const iconRotationTypesValues = [
+  "rotate0",
+  "rotate90",
+  "rotate180",
+  "rotate270",
+];
+export const iconSizesValues = [
+  "default",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+  "xxlarge",
+  "xxxlarge",
+];
+for (const icon in iconNamesValues) {
+  icons.push(
+    iconRow(iconNamesValues[icon], {
+      displayValue: iconNamesValues[icon],
+      size: "xxlarge",
+    })
+  );
+}
+for (const iconRotation in iconRotationTypesValues) {
+  rotations.push(
+    iconRow("arrow", {
+      displayValue: iconRotationTypesValues[iconRotation],
+      iconRotation: iconRotationTypesValues[iconRotation],
+      size: "xxlarge",
+    })
+  );
+}
+for (const iconColor in iconColorsValues) {
+  colors.push(
+    iconRow("errorFilled", {
+      color: iconColorsValues[iconColor],
+      displayValue: iconColorsValues[iconColor],
+      size: "xxlarge",
+    })
+  );
+}
+for (const iconSize in iconSizesValues) {
+  sizes.push(
+    iconRow("actionCheckCircle", {
+      displayValue: iconSizesValues[iconSize],
+      size: iconSizesValues[iconSize],
+    })
+  );
+}
+
+export const allIconsType = (list) => (
+  <ul style={{ listStyle: "none" }}>{list}</ul>
+);
+
+## Accessibility
+
+For accessibility purposes, every Reservoir Design System (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.
+
+`Icon`s are decorative by default. This means that they are presentational and
+screenreaders will not read them because the `aria-hidden` attribute is set to
+`true`.
+
+Resources:
+
+- [W3C Design System SVG Icons](https://design-system.w3.org/styles/svg-icons.html)
+- [CSS-Tricks Accessible SVG Icons](https://css-tricks.com/accessible-svg-icons/)
+- [Chakra UI Icon](https://chakra-ui.com/docs/components/media-and-icons/icon)
+
+## Rotation Types
+
+Passing an `iconRotation` prop with a value from `IconRotationTypes` allows
+the icon to be rotated when it is rendered. The values are:
+`"rotate0"`, `"rotate90"`, `"rotate180"`, and `"rotate270"`.
+
+Note: All of the examples below have been rendered with the `size` prop set to
+`xxlarge`.
+
+```jsx
+// Example
+<Icon iconRotation="rotate180" name="arrow" size="xxlarge" />
+```
+
+<Canvas>
+  <Story name="Icon Rotation">{allIconsType(rotations)}</Story>
+</Canvas>
+
+## IconColors Types
+
+Update an SVG icon by passing a `color` prop with a value from the `IconColors`
+type. The values are: `"ui.black"`, `"ui.white"`, `"brand.primary"`,
+`"brand.secondary"`, `"section.blogs.primary"`, `"section.blogs.secondary"`,
+`"section.books-and-more.primary"`, `"section.books-and-more.secondary"`,
+`"section.education.primary"`, `"section.education.secondary"`,
+`"section.locations.primary"`, `"section.locations.secondary"`,
+`"section.research.primary"`, `"section.research.secondary"`,
+`"section.research-library.lpa"`, `"section.research-library.schomburg"`,
+`"section.research-library.schwartzman"`, `"section.whats-on.primary"`,
+`"section.whats-on.secondary"`.
+
+Note: All of the examples below have been rendered with the `size` prop set to
+`xxlarge`.
+
+```jsx
+// Example
+<Icon color="brand.primary" name="errorFilled" size="xxlarge" />
+```
+
+<Canvas>
+  <Story name="Icon Colors">{allIconsType(colors)}</Story>
+</Canvas>
+
+## IconSizes Types
+
+Update an SVG icon by passing a `size` prop with a value from `IconSizes`. The
+values are: `"default"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`,
+`"xxlarge"`, `"xxxlarge"`.
+
+Note: `"default"` sets the width to `100%` and the rendered icon will expand to
+fill the full width of the parent element.
+
+```jsx
+// Example
+<Icon name="actionCheckCircle" size="xxlarge" />
+```
+
+<Canvas>
+  <Story name="Icon Sizes">{allIconsType(sizes)}</Story>
+</Canvas>
+
+## All Display Icons
+
+The following icons are for generic purposes. All the available icon names can
+be found in the `IconNames` type. They are: `"accessibilityFull"`,
+`"accessibilityPartial"`, `"actionCheckCircle"`, `"actionHelpDefault"`,
+`"actionHelpOutline"`, `"alertNotificationImportant"`, `"actionLaunch"`,
+`"arrow"`, `"check"`, `"clock"`, `"close"`, `"download"`, `"errorFilled"`,
+`"errorOutline"`, `"fileTypeAudio"`, `"fileTypeDoc"`,
+`"fileTypeGenericDoc"`, `"fileTypeImage"`, `"fileTypePdf"`,
+`"fileTypeSpreadsheet"`, `"fileTypeVideo"`, `"headset"`, `"minus"`,
+`"plus"`, `"search"`, `"speakerNotes"`, `"utilityAccountFilled"`,
+`"utilityAccountUnfilled"`, `"utilityHamburger"`, `"utilitySearch"`.
+
+Note: All of the examples below have been rendered with the `size` prop set to
+`xxlarge`.
+
+<Canvas withToolbar>
+  <Story name="All Icons">{allIconsType(icons)}</Story>
+</Canvas>
+
+## Custom Icons
+
+If you'd like to pass a custom svg to your application, you can pass it a
+child to the `Icon` component.
+
+```jsx
+<Icon {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 750" fill="#6BE9D8">
+    <g>
+      <path d="M709.9 399.9c-4.5-145.7-115.8-169.6-151.1-170.3-4.2-.1-6.7-4.9-4.2-8.4L632 110.6c3.4-4.8 2.4-11.7-2.3-15.3-15.9-12-36.3-21.4-60.3-28.8-4.3-1.3-8.6 2-8.5 6.5 1.2 50.5-27.6 114.3-36.5 132.9-1 2-3.9 1.9-4.8-.1C485.1 124 397.7 95.1 327.9 104.4c-71.3 9.5-101.6 26.5-163.5 96.6-61.9 70.1-80.2 260.7-82.1 309.4C80.4 559 40 617.1 40 617.1c154 81.4 340.9 68.2 402.2 61.9 44.4-4.6 68.5-21.8 78.5-30.9 2.5-2.3 1.4-6.6-2-7.3-73.8-15.7-80.7-37.2-94.8-63.5-14.5-27.1 8.2-135.7 104.2-108.6 79.6 22.5 51.5 114.9 39.6 145.8-1.4 3.7 2.4 7.3 6 5.6 34-16.5 140.5-79.5 136.2-220.2zM234.7 181.3c17.7-17 69-56.7 167.1-38 99.8 18.9 98.5 109.5 80.4 141.7-2.3 4.1-7 4.5-8.8.1-11.1-27.7-45.5-97.4-112-108-61.8-9.8-105.6 1.7-124.2 8.3-2.5.8-4.4-2.3-2.5-4.1zm-60.2 72l16.9-27.4c5.1-8.3 13.2-14.3 22.6-16.6 16.3-4.1 33-6.9 49.5-8.9 40.3-4.8 79.4-2.1 116.7 15.1 17.4 8 33.6 18.2 46.1 32.9 11.4 13.4 19 29.6 23.7 46.5 1.8 6.3 3.2 12.8 4.3 19.3.6 3.2-.1 6.6-1.7 9.4l-15.8 27.1c-1.7 3-6.1 2.4-7.1-.9-6.7-22-17.9-43.9-32.8-61-12.6-14.4-29.1-23.5-46.1-31.6-12.2-5.8-24.9-10.5-38-13.6-35.3-8.4-71.9-4.4-106.3 5.9-9.2 2.8-18.3 5.9-27.2 9.5-2.3.9-4.9-.7-5.2-3.2-.2-1 0-1.8.4-2.5zm-21.9 64.2l11.7-40.8c1.2-4.3 5-7.5 9.5-7.9l5.2-.5s87.8-25.9 160.4 9.8c56.9 28 68.3 78.8 70.5 99.5.6 5.5-1.4 11-5.3 14.8L389 407.5c-3.8 3.7-10.2 2.2-12-2.8-6-17.2-13.8-34.1-23.5-49.3-5.8-9.1-12.7-18.3-21.6-24.6-16.2-11.5-36.5-19.2-55.7-23.9-14.4-3.6-29.3-4.8-44.1-3.8-12.9.8-25.6 3.2-38 6.7-7.2 2-14.3 4.4-21.3 7.1-3.8 1.5-7.6 3-11.3 4.7-.6.2-1.9.7-3.4 1.3-3.2 1.1-6.5-2-5.5-5.4zM410 465.8c4.4 2 5.8 7.5 3 11.4l-14.8 20.7c-3.5 4.9-9.9 6.6-15.4 4.3l-25.5-10.9c-4.5-1.9-5.5-7.8-1.9-11.1l17.3-15.7c5.8-5.7 14.6-9.1 22-5.8l15.3 7.1zm-270.3-96.3l4.5-23.6c1.2-6.5 5.7-11.9 11.8-14.3 15.7-6.2 50.5-14.3 109.2-.1 62.6 15.1 83.4 66.2 90 91.6 2.2 8.5-.7 17.5-7.5 23.1l-13.4 11.1c-4.2 3.4-10.5 1.5-12-3.7-5.3-18.5-21.2-54.5-66.1-73.7-45.5-19.5-88.3-9.3-107.8-2.6-4.8 1.5-9.7-2.8-8.7-7.8zm-4.4 29.7c.1-5.4 4.2-9.9 9.6-10.6 30.7-3.8 127.8-7.6 155.8 89.7 1.6 5.4-.5 11.3-5.2 14.4l-15.1 10.1c-5 3.4-11.9 1.2-14-4.5-9.5-26-40.2-85.6-119.7-68.3-6.2 1.3-12-3.4-11.9-9.7l.5-21.1zm-9.1 72.9l3.3-19.1c1.4-8.3 9-14.1 17.4-13.1 21.2 2.4 60.2 11.5 85.5 44.9 5.8 7.7 9.2 16.8 10 26.4l.3 3.4c.6 7.1-2.7 14-8.7 18l-12.1 8.2c-4.4 3-10.5 1.2-12.6-3.7l-8.2-24.4c-3.5-10.4-11-19.1-20.8-24.1l-11.1-5.6c-6.7-3.4-14.2-5-21.7-4.5l-14.8.9c-4 .2-7.1-3.4-6.5-7.3zm-15.5 55.7l9.4-30.7c1.8-5.9 8-9.2 13.9-7.4 18.3 5.6 53.5 21.9 54.3 65.2 0 2.7-1.3 5.1-3.6 6.4-8.5 4.9-26.8 12.9-27.8 12-1.2-1.1.8-42.6-39.7-37.7-1.2.1-2.5-.1-3.6-.7-2.5-1.3-3.8-4.3-2.9-7.1zm63.8 100.5c-1.1 6.4-7.4 10.5-13.7 8.9l-85.5-21.9c-3.9-1-5.7-5.5-3.6-8.9l31.4-51.7c1.8-3 5.5-4.5 8.9-3.4 8.3 2.6 22.4 9 24.4 23.2.6 4.3-.9 8.7-4 11.8-1.4 1.4-3 2.5-4.8 3.2l-26.8 10.4c-2.1.8-2.6 3.5-1 5 .6.5 1.3.8 2.1.8l19.5-.2c3.7 0 7.4-.4 11.1-1 12.8-2.1 47-5 42 23.8zm72.1 12.7c-2.3 2.8-5 5.9-8.8 6.3-1.5.2-2.9 0-4.4-.2-1.5-.2-2.9-.2-4.4-.3l-10.5-.9c-3.8-.3-7.5-.7-11.3-1.2-2.9-.3-5.8-.7-8.6-1.2-4-.7-6.6-4.7-5.4-8.6 2.5-8.6 4.2-23.7-8.4-37.6-2-2.2-1.4-5.8 1.2-7.3l24.8-14.1c3.6-2.1 8-2.1 11.6-.1 8.2 4.5 22.3 14.1 29 28.8 5.4 12.1 3.4 26.2-4.8 36.4zm67 3.1c-4.2 4.1-9.8 6.5-15.7 6.8l-24.2 1.1c-4.2.2-7.1-4.2-5.3-8 8.1-17 20.6-55.5-19.4-76.9-3-1.6-3.3-5.9-.4-7.8l15.3-10.2c4.7-3.2 10.8-3.5 15.8-.7 22.8 12.3 80.6 50.2 33.9 95.7zm118.2-5.2c3.5 2.7 1.6 8.2-2.8 8.3l-77.5.8c-4.8.1-8.1-5-6-9.3 30.8-64.1-17.7-97.3-37.5-107.6-3.5-1.8-4-6.7-.9-9.1l9.6-7.7c7.2-5.7 16.7-7.7 25.6-5.4 14.1 3.7 26.1 11.8 33.7 18 5.4 4.4 8.6 10.9 8.8 17.9.9 51.1 29.9 80.9 47 94.1zm76.6-205c-12.4 0-36.1 1.2-52.5 10.2-4.7 2.6-10.2 3.1-15.4 1.7l-26.8-7.4c-4-1.1-5.6-5.9-3-9.2l14.9-18.8c5.2-7.1 13-11.6 21.6-10.2 17.4 2.9 46.3 10.1 63.6 27.4 2.6 2.3 1 6.3-2.4 6.3zm115 112c-1.7 2.2-5 2.2-6.8 0l-.1-.1c-1.8-2.3-7.3-138.3-146.4-168.7-5.4-1.2-7.7-7.5-4.3-11.9l19.6-25.6c4.6-6 12.2-8.9 19.7-7.5 28.1 5.5 95.7 25.7 120.5 96.6 29.5 84.5 13.9 96.8-2.2 117.2zm46.4-88.4c-.8 4.1-6.6 4.2-7.5.1-9.8-43.6-44.3-150.3-147.6-150.8-4.4 0-7.2-4.8-5-8.6l17.6-31.4c4.4-7.9 19.3-9.1 28.1-7 41.1 9.9 143 47.6 114.4 197.7z" />
+    </g>
+  </svg>
+</Icon>
+```
+
+<Canvas>
+  <Story
+    name="Custom Icons"
+    args={{
+      color: "ui.black",
+      size: "xxxlarge",
+      iconRotation: "rotate0",
+      decorative: true,
+    }}
+  >
+    {(args) => (
+      <Icon {...args}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 750 750"
+          fill="#6BE9D8"
+        >
+          <g>
+            <path d="M709.9 399.9c-4.5-145.7-115.8-169.6-151.1-170.3-4.2-.1-6.7-4.9-4.2-8.4L632 110.6c3.4-4.8 2.4-11.7-2.3-15.3-15.9-12-36.3-21.4-60.3-28.8-4.3-1.3-8.6 2-8.5 6.5 1.2 50.5-27.6 114.3-36.5 132.9-1 2-3.9 1.9-4.8-.1C485.1 124 397.7 95.1 327.9 104.4c-71.3 9.5-101.6 26.5-163.5 96.6-61.9 70.1-80.2 260.7-82.1 309.4C80.4 559 40 617.1 40 617.1c154 81.4 340.9 68.2 402.2 61.9 44.4-4.6 68.5-21.8 78.5-30.9 2.5-2.3 1.4-6.6-2-7.3-73.8-15.7-80.7-37.2-94.8-63.5-14.5-27.1 8.2-135.7 104.2-108.6 79.6 22.5 51.5 114.9 39.6 145.8-1.4 3.7 2.4 7.3 6 5.6 34-16.5 140.5-79.5 136.2-220.2zM234.7 181.3c17.7-17 69-56.7 167.1-38 99.8 18.9 98.5 109.5 80.4 141.7-2.3 4.1-7 4.5-8.8.1-11.1-27.7-45.5-97.4-112-108-61.8-9.8-105.6 1.7-124.2 8.3-2.5.8-4.4-2.3-2.5-4.1zm-60.2 72l16.9-27.4c5.1-8.3 13.2-14.3 22.6-16.6 16.3-4.1 33-6.9 49.5-8.9 40.3-4.8 79.4-2.1 116.7 15.1 17.4 8 33.6 18.2 46.1 32.9 11.4 13.4 19 29.6 23.7 46.5 1.8 6.3 3.2 12.8 4.3 19.3.6 3.2-.1 6.6-1.7 9.4l-15.8 27.1c-1.7 3-6.1 2.4-7.1-.9-6.7-22-17.9-43.9-32.8-61-12.6-14.4-29.1-23.5-46.1-31.6-12.2-5.8-24.9-10.5-38-13.6-35.3-8.4-71.9-4.4-106.3 5.9-9.2 2.8-18.3 5.9-27.2 9.5-2.3.9-4.9-.7-5.2-3.2-.2-1 0-1.8.4-2.5zm-21.9 64.2l11.7-40.8c1.2-4.3 5-7.5 9.5-7.9l5.2-.5s87.8-25.9 160.4 9.8c56.9 28 68.3 78.8 70.5 99.5.6 5.5-1.4 11-5.3 14.8L389 407.5c-3.8 3.7-10.2 2.2-12-2.8-6-17.2-13.8-34.1-23.5-49.3-5.8-9.1-12.7-18.3-21.6-24.6-16.2-11.5-36.5-19.2-55.7-23.9-14.4-3.6-29.3-4.8-44.1-3.8-12.9.8-25.6 3.2-38 6.7-7.2 2-14.3 4.4-21.3 7.1-3.8 1.5-7.6 3-11.3 4.7-.6.2-1.9.7-3.4 1.3-3.2 1.1-6.5-2-5.5-5.4zM410 465.8c4.4 2 5.8 7.5 3 11.4l-14.8 20.7c-3.5 4.9-9.9 6.6-15.4 4.3l-25.5-10.9c-4.5-1.9-5.5-7.8-1.9-11.1l17.3-15.7c5.8-5.7 14.6-9.1 22-5.8l15.3 7.1zm-270.3-96.3l4.5-23.6c1.2-6.5 5.7-11.9 11.8-14.3 15.7-6.2 50.5-14.3 109.2-.1 62.6 15.1 83.4 66.2 90 91.6 2.2 8.5-.7 17.5-7.5 23.1l-13.4 11.1c-4.2 3.4-10.5 1.5-12-3.7-5.3-18.5-21.2-54.5-66.1-73.7-45.5-19.5-88.3-9.3-107.8-2.6-4.8 1.5-9.7-2.8-8.7-7.8zm-4.4 29.7c.1-5.4 4.2-9.9 9.6-10.6 30.7-3.8 127.8-7.6 155.8 89.7 1.6 5.4-.5 11.3-5.2 14.4l-15.1 10.1c-5 3.4-11.9 1.2-14-4.5-9.5-26-40.2-85.6-119.7-68.3-6.2 1.3-12-3.4-11.9-9.7l.5-21.1zm-9.1 72.9l3.3-19.1c1.4-8.3 9-14.1 17.4-13.1 21.2 2.4 60.2 11.5 85.5 44.9 5.8 7.7 9.2 16.8 10 26.4l.3 3.4c.6 7.1-2.7 14-8.7 18l-12.1 8.2c-4.4 3-10.5 1.2-12.6-3.7l-8.2-24.4c-3.5-10.4-11-19.1-20.8-24.1l-11.1-5.6c-6.7-3.4-14.2-5-21.7-4.5l-14.8.9c-4 .2-7.1-3.4-6.5-7.3zm-15.5 55.7l9.4-30.7c1.8-5.9 8-9.2 13.9-7.4 18.3 5.6 53.5 21.9 54.3 65.2 0 2.7-1.3 5.1-3.6 6.4-8.5 4.9-26.8 12.9-27.8 12-1.2-1.1.8-42.6-39.7-37.7-1.2.1-2.5-.1-3.6-.7-2.5-1.3-3.8-4.3-2.9-7.1zm63.8 100.5c-1.1 6.4-7.4 10.5-13.7 8.9l-85.5-21.9c-3.9-1-5.7-5.5-3.6-8.9l31.4-51.7c1.8-3 5.5-4.5 8.9-3.4 8.3 2.6 22.4 9 24.4 23.2.6 4.3-.9 8.7-4 11.8-1.4 1.4-3 2.5-4.8 3.2l-26.8 10.4c-2.1.8-2.6 3.5-1 5 .6.5 1.3.8 2.1.8l19.5-.2c3.7 0 7.4-.4 11.1-1 12.8-2.1 47-5 42 23.8zm72.1 12.7c-2.3 2.8-5 5.9-8.8 6.3-1.5.2-2.9 0-4.4-.2-1.5-.2-2.9-.2-4.4-.3l-10.5-.9c-3.8-.3-7.5-.7-11.3-1.2-2.9-.3-5.8-.7-8.6-1.2-4-.7-6.6-4.7-5.4-8.6 2.5-8.6 4.2-23.7-8.4-37.6-2-2.2-1.4-5.8 1.2-7.3l24.8-14.1c3.6-2.1 8-2.1 11.6-.1 8.2 4.5 22.3 14.1 29 28.8 5.4 12.1 3.4 26.2-4.8 36.4zm67 3.1c-4.2 4.1-9.8 6.5-15.7 6.8l-24.2 1.1c-4.2.2-7.1-4.2-5.3-8 8.1-17 20.6-55.5-19.4-76.9-3-1.6-3.3-5.9-.4-7.8l15.3-10.2c4.7-3.2 10.8-3.5 15.8-.7 22.8 12.3 80.6 50.2 33.9 95.7zm118.2-5.2c3.5 2.7 1.6 8.2-2.8 8.3l-77.5.8c-4.8.1-8.1-5-6-9.3 30.8-64.1-17.7-97.3-37.5-107.6-3.5-1.8-4-6.7-.9-9.1l9.6-7.7c7.2-5.7 16.7-7.7 25.6-5.4 14.1 3.7 26.1 11.8 33.7 18 5.4 4.4 8.6 10.9 8.8 17.9.9 51.1 29.9 80.9 47 94.1zm76.6-205c-12.4 0-36.1 1.2-52.5 10.2-4.7 2.6-10.2 3.1-15.4 1.7l-26.8-7.4c-4-1.1-5.6-5.9-3-9.2l14.9-18.8c5.2-7.1 13-11.6 21.6-10.2 17.4 2.9 46.3 10.1 63.6 27.4 2.6 2.3 1 6.3-2.4 6.3zm115 112c-1.7 2.2-5 2.2-6.8 0l-.1-.1c-1.8-2.3-7.3-138.3-146.4-168.7-5.4-1.2-7.7-7.5-4.3-11.9l19.6-25.6c4.6-6 12.2-8.9 19.7-7.5 28.1 5.5 95.7 25.7 120.5 96.6 29.5 84.5 13.9 96.8-2.2 117.2zm46.4-88.4c-.8 4.1-6.6 4.2-7.5.1-9.8-43.6-44.3-150.3-147.6-150.8-4.4 0-7.2-4.8-5-8.6l17.6-31.4c4.4-7.9 19.3-9.1 28.1-7 41.1 9.9 143 47.6 114.4 197.7z" />
+          </g>
+        </svg>
+      </Icon>
+    )}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Icon from "./Icon";
+
+describe("Icon Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(<Icon name="download" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Icon", () => {
+  it("consoles a warning if both name and children are passed to Icon", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Icon name="download" decorative={true}>
+        <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
+          />
+        </svg>
+      </Icon>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Icon: Pass in either a `name` prop or an `svg` element " +
+        "child. Do not pass both."
+    );
+  });
+
+  it("consoles a warning if both name and children are not passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Icon />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Icon: Pass an icon `name` prop or an SVG child to " +
+        "ensure an icon appears."
+    );
+  });
+
+  it("consoles a warning if name is not passed and a child is but it's not an SVG element", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Icon>Not an SVG</Icon>);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Icon: An `svg` element must be passed to the `Icon` " +
+        "component as its child."
+    );
+  });
+
+  it("renders an icon based on the icon `name` prop", () => {
+    const { container } = render(<Icon name="download" />);
+    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="download" />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "title",
+      "download icon"
+    );
+
+    rerender(<Icon name="download" title="title content" />);
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "title",
+      "title content"
+    );
+  });
+
+  it("renders an icon based on the child", () => {
+    const { container } = render(
+      <Icon>
+        <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
+          />
+        </svg>
+      </Icon>
+    );
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer.create(<Icon id="basic" name="download" />).toJSON();
+    const customIcon = renderer
+      .create(
+        <Icon id="customIcon">
+          <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
+            />
+          </svg>
+        </Icon>
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Icon id="chakra" name="download" p="20px" color="ui.error.primary" />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Icon id="props" name="download" data-testid="props" />)
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(customIcon).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});