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

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

@@ -13,45 +13,50 @@ describe("HorizontalRule Accessibility", () => {
 });
 
 describe("HorizontalRule", () => {
-  it("Renders the UI snapshot correctly", () => {
-    const tree = renderer.create(<HorizontalRule />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("Renders HorizontalRule component", () => {
+  it("renders HorizontalRule component", () => {
     render(<HorizontalRule />);
     expect(screen.getByRole("separator")).toBeInTheDocument();
   });
 
-  it("Renders with proper custom class", () => {
+  it("renders with proper custom class", () => {
     render(<HorizontalRule className="custom-hr" />);
-    expect(screen.getByRole("separator")).toHaveAttribute(
-      "class",
-      "horizontal-rule custom-hr"
-    );
+    const hrClass = screen.getByRole("separator").getAttribute("class");
+    expect(hrClass).toContain("custom-hr");
   });
 
-  it("Renders with correct width and height values", () => {
-    render(
-      <HorizontalRule className="custom-hr" width="720px" height="5rem" />
+  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."
     );
 
-    expect(screen.getByRole("separator")).toHaveAttribute(
-      "style",
-      "width: 720px; height: 5rem;"
+    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 with correct width and height values", () => {
-    render(<HorizontalRule className="custom-hr" width="80%" align="left" />);
-
-    expect(screen.getByRole("separator")).toHaveAttribute(
-      "style",
-      "width: 80%; height: 2px;"
-    );
-    expect(screen.getByRole("separator")).toHaveAttribute(
-      "class",
-      "horizontal-rule horizontal-rule--left custom-hr"
-    );
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer.create(<HorizontalRule />).toJSON();
+    const updatedHeight = renderer
+      .create(<HorizontalRule height="5rem" />)
+      .toJSON();
+    const updatedWidth = renderer
+      .create(<HorizontalRule width="720px" />)
+      .toJSON();
+    const alignLeft = renderer.create(<HorizontalRule align="left" />).toJSON();
+    const alignRight = renderer
+      .create(<HorizontalRule align="right" />)
+      .toJSON();
+    expect(basic).toMatchSnapshot();
+    expect(updatedHeight).toMatchSnapshot();
+    expect(updatedWidth).toMatchSnapshot();
+    expect(alignLeft).toMatchSnapshot();
+    expect(alignRight).toMatchSnapshot();
   });
 });

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

@@ -3,13 +3,13 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
 
 import Icon from "./Icon";
 import {
+  IconAlign,
   IconNames,
   LogoNames,
   IconColors,
@@ -28,11 +28,15 @@ 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"],
   }}
+  argTypes={{
+    children: { table: { disable: true } },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+  }}
 />
 
 # Icon
@@ -40,89 +44,98 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.24.1`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Icon} />
 
-<Preview withToolbar style={{ backgroundColor: "#fafafa" }}>
+<Canvas withToolbar>
   <Story
     name="Icon Props Control"
     args={{
-      name: "check",
-      color: IconColors.ui_black,
-      size: IconSizes.xlarge,
-      iconRotation: IconRotationTypes.rotate0,
+      align: "None",
+      color: "UiBlack",
       decorative: true,
-      titleText: "An example icon",
+      iconRotation: "Rotate0",
+      name: "Check",
+      size: "ExtraLarge",
     }}
     argTypes={{
-      color: {
+      align: {
         control: {
           type: "select",
-          options: IconColors,
         },
+        options: Object.keys(IconAlign),
       },
-      size: {
+      color: {
         control: {
           type: "select",
-          options: IconSizes,
         },
+        options: Object.keys(IconColors),
       },
       iconRotation: {
         control: {
           type: "select",
-          options: IconRotationTypes,
         },
+        options: Object.keys(IconRotationTypes),
       },
-      blockName: {
-        table: {
-          disable: true,
+      name: {
+        control: {
+          type: "select",
         },
+        options: Object.keys(IconNames),
       },
-      modifiers: {
-        table: {
-          disable: true,
+      size: {
+        control: {
+          type: "select",
         },
+        options: Object.keys(IconSizes),
       },
     }}
   >
-    {(args) => <Icon {...args} />}
+    {(args) => (
+      <Icon
+        align={IconAlign[args.align]}
+        color={IconColors[args.color]}
+        iconRotation={IconRotationTypes[args.iconRotation]}
+        name={IconNames[args.name]}
+        size={IconSizes[args.size]}
+        title={args.title}
+      />
+    )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Icon Props Control" />
 
-export const iconRow = (icon, opts = {}) => {
+export const iconRow = (icon, iconType = IconNames, 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 = { padding: "1rem" };
   const {
-    size = IconSizes.large,
-    iconRotation = IconRotationTypes.rotate0,
-    color = IconColors.ui_black,
+    size = IconSizes.Large,
+    iconRotation = IconRotationTypes.Rotate0,
+    color = IconColors.UiBlack,
     displayValue = icon,
   } = opts;
   let key = icon;
-  if (icon.indexOf("_negative") !== -1) {
+  if (icon.indexOf("Negative") !== -1 || color.indexOf("white") !== -1) {
     styles.backgroundColor = "#000";
-    styles.display = "inline-block";
   }
   // The following is just to fix duplicate React key issues.
-  if (iconRotation !== IconRotationTypes.rotate0) {
+  if (iconRotation !== IconRotationTypes.Rotate0) {
     key += `-${iconRotation}`;
   }
-  if (color !== IconColors.ui_black) {
+  if (color !== IconColors.UiBlack) {
     key += `-${color}`;
   }
-  if (size !== IconSizes.large) {
+  if (size !== IconSizes.Large) {
     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={icon}
-          decorative={true}
+          name={iconType[icon]}
           size={size}
           iconRotation={iconRotation}
           color={color}
@@ -138,33 +151,33 @@ export const rotations = [];
 export const colors = [];
 export const sizes = [];
 for (const icon in IconNames) {
-  icons.push(iconRow(icon));
+  icons.push(iconRow(icon, IconNames));
 }
 for (const logo in LogoNames) {
-  logos.push(iconRow(logo, { iconSize: IconSizes.xlarge }));
+  logos.push(iconRow(logo, LogoNames, { iconSize: IconSizes.ExtraLarge }));
 }
 for (const iconRotation in IconRotationTypes) {
   rotations.push(
-    iconRow(IconNames.arrow, {
-      size: IconSizes.large,
+    iconRow("Arrow", IconNames, {
+      size: IconSizes.Large,
       iconRotation: IconRotationTypes[iconRotation],
-      displayValue: IconRotationTypes[iconRotation],
+      displayValue: iconRotation,
     })
   );
 }
 for (const iconColor in IconColors) {
   colors.push(
-    iconRow(IconNames.download, {
+    iconRow("Download", IconNames, {
       color: IconColors[iconColor],
-      displayValue: IconColors[iconColor],
+      displayValue: iconColor,
     })
   );
 }
 for (const iconSize in IconSizes) {
   sizes.push(
-    iconRow(IconNames.arrow, {
+    iconRow("Arrow", IconNames, {
       size: IconSizes[iconSize],
-      displayValue: IconSizes[iconSize],
+      displayValue: iconSize,
     })
   );
 }
@@ -173,65 +186,65 @@ 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
 the icon to be rotated when it is rendered. The `IconRotationTypes` enum
 can be found in `src/components/Icons/IconTypes.tsx`.
 
-```js
+```jsx
 // Example
-<Icon
-  name={IconNames.arrow}
-  decorative={true}
-  iconRotation={IconRotationTypes.rotate180}
-/>
+<Icon name={IconNames.Arrow} iconRotation={IconRotationTypes.Rotate180} />
 ```
 
-<Preview>
+<Canvas>
   <Story name="Rotation Types">{allIconsType(rotations)}</Story>
-</Preview>
+</Canvas>
 
 ## IconColors Types
 
 Update an SVG icon by passing a `color` prop with a value from `IconColors`.
-The `IconColors` enum can be found in`src/components/Icons/IconTypes.tsx`.
+The `IconColors` enum can be found in `src/components/Icons/IconTypes.tsx`.
 
-```js
+```jsx
 // Example
-<Icon
-  name={IconNames.speaker_notes}
-  decorative={true}
-  color={IconColors.brand_primary}
-/>
+<Icon name={IconNames.Speaker_notes} color={IconColors.BrandPrimary} />
 ```
 
-<Preview>
+<Canvas>
   <Story name="Color Types">{allIconsType(colors)}</Story>
-</Preview>
+</Canvas>
 
 ## IconSizes Types
 
 Update an SVG icon by passing a `size` prop with a value from `IconSizes`.
 The `IconSizes` enum can be found in`src/components/Icons/IconTypes.tsx`.
 
-```js
+```jsx
 // Example
-<Icon name={IconNames.clock} decorative={true} size={IconSizes.xxlarge} />
+<Icon name={IconNames.Clock} size={IconSizes.ExtraExtraLarge} />
 ```
 
-<Preview>
+<Canvas>
   <Story name="Sizes Types">{allIconsType(sizes)}</Story>
-</Preview>
+</Canvas>
 
 ## All Display Icons
 
 The following icons are for generic purposes. All the available logo names can
 be found in the `IconNames` enum in `src/components/Icons/IconTypes.tsx`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="All Display Icons">{allIconsType(icons)}</Story>
-</Preview>
+</Canvas>
 
 ## All Logo Icons
 
@@ -241,28 +254,32 @@ The following icons are meant to be used for logos for different libraries
 and products. All the available logo names can
 be found in the `LogoNames` enum in `src/components/Icons/IconTypes.tsx`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="All Logo Icons">{allIconsType(logos)}</Story>
-</Preview>
+</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.
 
-```js
-<Icon {...args}>
-  <svg ...><!-- the direct svg here --></svg>
+```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>
 ```
 
-<Preview>
+<Canvas>
   <Story
     name="Custom Icons"
     args={{
-      color: IconColors.ui_black,
-      size: IconSizes.xxxlarge,
-      iconRotation: IconRotationTypes.rotate0,
+      color: IconColors.UiBlack,
+      size: IconSizes.ExtraExtraExtraLarge,
+      iconRotation: IconRotationTypes.Rotate0,
       decorative: true,
     }}
   >
@@ -280,4 +297,4 @@ child to the `Icon` component.
       </Icon>
     )}
   </Story>
-</Preview>
+</Canvas>

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

@@ -7,38 +7,64 @@ import { IconNames } from "./IconTypes";
 
 describe("Icon Accessibility", () => {
   it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <Icon name={IconNames.download} decorative={true} />
-    );
+    const { container } = render(<Icon name={IconNames.Download} />);
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
 describe("Icon", () => {
-  it("throws an error if both name and children are passed to Icon", () => {
-    expect(() =>
-      render(
-        <Icon name={IconNames.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>
-      )
-    ).toThrowError("Icon accepts either a name or children, not both");
+  it("consoles a warning if both name and children are passed to Icon", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Icon name={IconNames.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(
+      "Icon accepts either a `name` prop or an `svg` element child, not both."
+    );
+  });
+
+  it("consoles a warning if both name and children are not passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Icon />);
+    expect(warn).toHaveBeenCalledWith(
+      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+    );
   });
 
   it("renders an icon based on the icon `name` prop", () => {
-    const utils = render(<Icon name={IconNames.download} decorative={true} />);
-    expect(utils.container.querySelector(".icon")).toBeInTheDocument();
+    const { container } = render(<Icon name={IconNames.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={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 utils = render(
-      <Icon decorative={true}>
+    const { container } = render(
+      <Icon>
         <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
           <path
             fillRule="evenodd"
@@ -48,6 +74,6 @@ describe("Icon", () => {
         </svg>
       </Icon>
     );
-    expect(utils.container.querySelector(".icon")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toBeInTheDocument();
   });
 });