@nypl/design-system-react-components 0.25.13 → 0.27.0

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,10 +1,11 @@
-import * as React from "react";
 import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
+  chakra,
   useStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import Icon from "../Icons/Icon";
 import {
@@ -13,7 +14,6 @@ import {
   IconSizes,
   IconTypes,
 } from "../Icons/IconTypes";
-import generateUUID from "../../helpers/generateUUID";
 import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 import { getVariant } from "../../utils/utils";
 
@@ -64,13 +64,14 @@ const getElementsFromData = (data, breadcrumbsID) => {
   return breadcrumbItems;
 };
 
-function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
+export const Breadcrumbs = chakra((props: BreadcrumbProps) => {
   const {
     additionalStyles = {},
     breadcrumbsData,
     breadcrumbsType,
     className,
-    id = generateUUID(),
+    id,
+    ...rest
   } = props;
   const variant = getVariant(breadcrumbsType, BreadcrumbsTypes);
 
@@ -83,18 +84,18 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const styles = useStyleConfig("Breadcrumb", { variant });
   const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
-  const ariaAttrs = { "aria-label": "Breadcrumb" };
 
   return (
     <ChakraBreadcrumb
+      aria-label="Breadcrumb"
       className={className}
       id={id}
-      {...ariaAttrs}
       __css={finalStyles}
+      {...rest}
     >
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );
-}
+});
 
 export default Breadcrumbs;

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

@@ -3,7 +3,7 @@
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 <nav
   aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-0"
+  className="chakra-breadcrumb css-1xdhyk6"
   id="breadcrumbs-test"
 >
   <ol
@@ -38,7 +38,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-onkibi"
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
           focusable={false}
           id="breadcrumbs-test__backarrow"
           role="img"
@@ -102,7 +102,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 <nav
   aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-0"
+  className="chakra-breadcrumb css-1xdhyk6"
   id="breadcrumbs-test"
 >
   <ol
@@ -137,7 +137,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-onkibi"
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
           focusable={false}
           id="breadcrumbs-test__backarrow"
           role="img"
@@ -201,7 +201,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 <nav
   aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-0"
+  className="chakra-breadcrumb css-1xdhyk6"
   id="breadcrumbs-test"
 >
   <ol
@@ -236,7 +236,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-onkibi"
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
           focusable={false}
           id="breadcrumbs-test__backarrow"
           role="img"
@@ -300,7 +300,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 <nav
   aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-0"
+  className="chakra-breadcrumb css-1xdhyk6"
   id="breadcrumbs-test"
 >
   <ol
@@ -335,7 +335,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-onkibi"
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
           focusable={false}
           id="breadcrumbs-test__backarrow"
           role="img"
@@ -399,7 +399,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
 <nav
   aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-0"
+  className="chakra-breadcrumb css-1xdhyk6"
   id="breadcrumbs-test"
 >
   <ol
@@ -434,7 +434,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-onkibi"
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
           focusable={false}
           id="breadcrumbs-test__backarrow"
           role="img"
@@ -498,7 +498,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 6`] = `
 <nav
   aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-1f2fw9u"
+  className="chakra-breadcrumb css-ruvqk2"
   id="breadcrumbs-test"
 >
   <ol
@@ -533,7 +533,206 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 6`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-onkibi"
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          role="img"
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 7`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="chakra-breadcrumb css-1t0bvx9"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          role="img"
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 8`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="chakra-breadcrumb css-1xdhyk6"
+  data-testid="testid"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-1grhd2q"
           focusable={false}
           id="breadcrumbs-test__backarrow"
           role="img"

package/src/components/Button/Button.stories.mdx

@@ -40,7 +40,7 @@ export const enumValues = getStorybookEnumValues(ButtonTypes, "ButtonTypes");
     buttonText: { description: "Only used for Storybook" },
     buttonType: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "ButtonType.Primary" } },
+      table: { defaultValue: { summary: "ButtonTypes.Primary" } },
       options: enumValues.options,
     },
     className: { control: false },
@@ -65,7 +65,19 @@ export const enumValues = getStorybookEnumValues(ButtonTypes, "ButtonTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.9`   |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Button Groups](#button-groups)
+- [With Icons](#with-icons)
+- [Patterns](#patterns)
+- [Other Examples](#other-examples)
+
+## Overview
 
 <Description of={Button} />
 
@@ -83,6 +95,8 @@ that can be rendered.
 When one and only one `Icon` component is passed inside a `Button` component with
 no text, it will automatically be configured to use the `"iconOnly"` type.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Button with Controls"
@@ -103,7 +117,17 @@ no text, it will automatically be configured to use the `"iconOnly"` type.
     }}
   >
     {(args) => (
-      <Button {...args} buttonType={enumValues.getValue(args.buttonType)}>
+      <Button
+        additionalStyles={args.additionalStyles}
+        attributes={args.attributes}
+        buttonType={enumValues.getValue(args.buttonType)}
+        className={args.className}
+        id={args.id}
+        isDisabled={args.isDisabled}
+        mouseDown={args.mouseDown}
+        onClick={args.onClick}
+        type={args.type}
+      >
         {args.displayIcon && args.displayIconLeft && (
           <Icon
             name={args.iconType}
@@ -126,6 +150,21 @@ no text, it will automatically be configured to use the `"iconOnly"` type.
 
 <ArgsTable story="Button with Controls" />
 
+## Accessibility
+
+The Reservoir `Button` component renders an HTML `<button>` element that is
+accessible. `Button`s should be used to perform user actions or submit forms,
+never to link and go to another page. For `Button`s without text and only an
+icon, make sure to pass an `aria-label` value to the `Button`. `Button`s cannot
+have images of text.
+
+Resources:
+
+- [W3C WAI ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button)
+- [W3C WAI ARIA Button Examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html)
+- [MDN ARIA: button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)
+- [Chakra UI Button](https://chakra-ui.com/docs/components/form/button)
+
 ## Button Groups
 
 Primary and secondary buttons should be grouped like in the following example.
@@ -135,8 +174,12 @@ be used to wrap the `Button` component.
 <Canvas>
   <Story name="Button Groups">
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Secondary}>Button</Button>
-      <Button buttonType={ButtonTypes.Primary}>Submit</Button>
+      <Button buttonType={ButtonTypes.Secondary} id="group-1">
+        Button
+      </Button>
+      <Button buttonType={ButtonTypes.Primary} id="group-2">
+        Submit
+      </Button>
     </ButtonGroup>
   </Story>
 </Canvas>
@@ -149,8 +192,8 @@ to see the full list of icon and logo names that can be rendered.
 
 <Canvas>
   <Story name="With Icon">
-    <VStack align="left" width="150px">
-      <Button>
+    <VStack align="left" spacing="input.group.button.vstack" width="150px">
+      <Button id="icon-1">
         <Icon
           name={IconNames.Search}
           align={IconAlign.Left}
@@ -158,7 +201,7 @@ to see the full list of icon and logo names that can be rendered.
         />
         Button Text
       </Button>
-      <Button>
+      <Button id="icon-2">
         Button Text
         <Icon
           name={IconNames.Search}
@@ -175,7 +218,7 @@ The icon can be placed to the left or the right of the button text.
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Secondary}>
+      <Button buttonType={ButtonTypes.Secondary} id="icon-left">
         <Icon
           name={IconNames.Arrow}
           iconRotation={IconRotationTypes.Rotate90}
@@ -184,7 +227,7 @@ The icon can be placed to the left or the right of the button text.
         />
         Previous
       </Button>
-      <Button buttonType={ButtonTypes.Secondary}>
+      <Button buttonType={ButtonTypes.Secondary} id="icon-right">
         Next
         <Icon
           name={IconNames.Arrow}
@@ -205,10 +248,11 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
   <DSProvider>
     <ButtonGroup>
       <Button
-        buttonType={ButtonTypes.Secondary}
         attributes={{
           "aria-label": "Previous",
         }}
+        buttonType={ButtonTypes.Secondary}
+        id="prev-btn"
       >
         <Icon
           name={IconNames.Arrow}
@@ -217,10 +261,11 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
         />
       </Button>
       <Button
-        buttonType={ButtonTypes.Secondary}
         attributes={{
           "aria-label": "Next",
         }}
+        buttonType={ButtonTypes.Secondary}
+        id="next-btn"
       >
         <Icon
           name={IconNames.Arrow}
@@ -229,10 +274,11 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
         />
       </Button>
       <Button
-        buttonType={ButtonTypes.Secondary}
         attributes={{
           "aria-label": "Close",
         }}
+        buttonType={ButtonTypes.Secondary}
+        id="close-btn"
       >
         <Icon name={IconNames.Close} size={IconSizes.Small} />
       </Button>
@@ -249,8 +295,10 @@ must include an up arrow icon on the right side.
 <Canvas>
   <Story name="Patterns">
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Callout}>Donate to this library</Button>
-      <Button buttonType={ButtonTypes.Secondary}>
+      <Button buttonType={ButtonTypes.Callout} id="donate-btn">
+        Donate to this library
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary} id="top-btn">
         Back to Top
         <Icon
           name={IconNames.Arrow}
@@ -271,12 +319,24 @@ The different `ButtonTypes` modified by the `buttonType` prop:
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button buttonType={ButtonTypes.Primary}>Primary</Button>
-      <Button buttonType={ButtonTypes.Secondary}>Secondary</Button>
-      <Button buttonType={ButtonTypes.Callout}>Callout</Button>
-      <Button buttonType={ButtonTypes.Pill}>Pill</Button>
-      <Button buttonType={ButtonTypes.Link}>Link</Button>
-      <Button buttonType={ButtonTypes.NoBrand}>NoBrand</Button>
+      <Button buttonType={ButtonTypes.Primary} id="primary-btn">
+        Primary
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary} id="secondary-btn">
+        Secondary
+      </Button>
+      <Button buttonType={ButtonTypes.Callout} id="callout-btn">
+        Callout
+      </Button>
+      <Button buttonType={ButtonTypes.Pill} id="pill-btn">
+        Pill
+      </Button>
+      <Button buttonType={ButtonTypes.Link} id="link-btn">
+        Link
+      </Button>
+      <Button buttonType={ButtonTypes.NoBrand} id="nobrand-btn">
+        NoBrand
+      </Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
@@ -286,8 +346,12 @@ Modifying the `isDisabled` prop:
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button isDisabled={false}>Enabled</Button>
-      <Button isDisabled>isDisabled</Button>
+      <Button id="enabled-btn" isDisabled={false}>
+        Enabled
+      </Button>
+      <Button id="disabled-btn" isDisabled>
+        isDisabled
+      </Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>

package/src/components/Button/Button.test.tsx

@@ -96,6 +96,16 @@ describe("padding for icon only button", () => {
     );
     expect(container.querySelector("button svg")).toBeInTheDocument();
   });
+
+  it("logs a warning when there is no `id` passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    // @ts-ignore: Typescript complains when a required prop is not passed, but
+    // here we don't want to pass the required prop to make sure the warning appears.
+    render(<Button>Submit</Button>);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Button: This component's required `id` prop was not passed."
+    );
+  });
 });
 
 describe("Button Snapshot", () => {
@@ -161,6 +171,19 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          p="s"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Button id="button" onClick={jest.fn()} data-testid="testid" />)
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(disabled).toMatchSnapshot();
@@ -169,5 +192,7 @@ describe("Button Snapshot", () => {
     expect(pill).toMatchSnapshot();
     expect(link).toMatchSnapshot();
     expect(noBrand).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });