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

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

@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-0"
+  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-onkibi"
+          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 2`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-0"
+  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-onkibi"
+          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 3`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-1f2fw9u"
+  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-onkibi"
+          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>
+`;

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

@@ -6,11 +6,17 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { ButtonGroup } from "@chakra-ui/react";
 
-import Button, { ButtonGroup } from "./Button";
+import Button from "./Button";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
+import {
+  IconAlign,
+  IconNames,
+  IconRotationTypes,
+  IconSizes,
+} from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
@@ -22,8 +28,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
     },
     jest: ["Button.test.tsx"],
   }}
@@ -34,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Button} />
 
@@ -43,11 +48,15 @@ that can be rendered.
 
 - `ButtonTypes.Primary` is used for actions that move the user forward.
 - `ButtonTypes.Secondary` is used for actions that move the user back, such as cancellations.
+- `ButtonTypes.Callout` is used for call to action text such as "Donate".
 - `ButtonTypes.Pill` is used for equally weighted actions within cards and always in a set.
 - `ButtonTypes.Link` is used for equally weighted actions in a text based list.
+- `ButtonTypes.SearchBar` is a variant only used in the `SearchBar` component.
+- `ButtonTypes.NoBrand` is a variant used when there is no brand and will display
+  the background color as black.
 
-When one and only one `Icon` component is passed inside a `Button` component,
-it will automatically be configured to use the `"icon-only"` type.
+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.
 
 <Canvas withToolbar>
   <Story name="Basic">{(args) => <Button {...args}>Button Text</Button>}</Story>
@@ -83,7 +92,7 @@ Controls for this Story section to preview a `Button` with the selected icon.
     args={{
       displayLeft: true,
       buttonText: "Button Text",
-      iconType: IconNames.search,
+      iconType: IconNames.Search,
     }}
     argTypes={{
       iconType: {
@@ -99,16 +108,16 @@ Controls for this Story section to preview a `Button` with the selected icon.
         {args.displayLeft && (
           <Icon
             name={args.iconType}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            align={IconAlign.Left}
+            size={IconSizes.Small}
           />
         )}
         {args.buttonText}
         {!args.displayLeft && (
           <Icon
             name={args.iconType}
-            decorative={true}
-            modifiers={["small", "icon-right"]}
+            align={IconAlign.Right}
+            size={IconSizes.Small}
           />
         )}
       </Button>
@@ -123,20 +132,20 @@ The icon can be placed to the left or the right of the button text.
     <ButtonGroup>
       <Button buttonType={ButtonTypes.Secondary}>
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate90}
-          modifiers={["small", "icon-left"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
         />
         Previous
       </Button>
       <Button buttonType={ButtonTypes.Secondary}>
         Next
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate270}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
         />
       </Button>
     </ButtonGroup>
@@ -157,10 +166,9 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
         }}
       >
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate90}
-          modifiers={["small"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          size={IconSizes.Small}
         />
       </Button>
       <Button
@@ -170,10 +178,9 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
         }}
       >
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate270}
-          modifiers={["small"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          size={IconSizes.Small}
         />
       </Button>
       <Button
@@ -182,7 +189,7 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
           "aria-label": "Close",
         }}
       >
-        <Icon name={IconNames.close} decorative={true} modifiers={["small"]} />
+        <Icon name={IconNames.Close} size={IconSizes.Small} />
       </Button>
     </ButtonGroup>
   </DSProvider>
@@ -201,10 +208,11 @@ must include an up arrow icon on the right side.
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate180}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate180}
+          size={IconSizes.Small}
+          className="right"
+          align={IconAlign.Right}
         />
       </Button>
     </ButtonGroup>
@@ -223,17 +231,18 @@ The different `ButtonTypes` modified by the `buttonType` prop:
       <Button buttonType={ButtonTypes.Callout}>Callout</Button>
       <Button buttonType={ButtonTypes.Pill}>Pill</Button>
       <Button buttonType={ButtonTypes.Link}>Link</Button>
+      <Button buttonType={ButtonTypes.NoBrand}>NoBrand</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
 
-Modifying the `disabled` prop:
+Modifying the `isDisabled` prop:
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button disabled={false}>Enabled</Button>
-      <Button disabled={true}>Disabled</Button>
+      <Button isDisabled={false}>Enabled</Button>
+      <Button isDisabled>isDisabled</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>

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

@@ -6,7 +6,7 @@ import renderer from "react-test-renderer";
 
 import Button from "./Button";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import { ButtonTypes } from "./ButtonTypes";
 
 describe("Button Accessibility", () => {
@@ -23,7 +23,6 @@ describe("Button Accessibility", () => {
 
 describe("Button", () => {
   let onClick;
-  let container;
   let rerender;
 
   beforeEach(() => {
@@ -33,7 +32,6 @@ describe("Button", () => {
         Submit
       </Button>
     );
-    container = utils.container;
     rerender = utils.rerender;
   });
 
@@ -47,10 +45,6 @@ describe("Button", () => {
     expect(screen.getByText("Submit")).toBeInTheDocument();
   });
 
-  it("has 'button' class", () => {
-    expect(container.querySelector(".button")).toBeInTheDocument();
-  });
-
   it("optionally calls the onClick on mouseDown instead of on click", () => {
     expect(onClick).toHaveBeenCalledTimes(0);
     rerender(
@@ -94,13 +88,13 @@ describe("padding for icon only button", () => {
     const { container } = render(
       <Button id="button" onClick={onClick} type="button">
         <Icon
-          name={IconNames.check}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
+          align={IconAlign.Left}
+          name={IconNames.Check}
+          size={IconSizes.Small}
         />
       </Button>
     );
-    expect(container.querySelector(".button .icon")).toBeInTheDocument();
+    expect(container.querySelector("button svg")).toBeInTheDocument();
   });
 });
 
@@ -113,6 +107,13 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
+    const disabled = renderer
+      .create(
+        <Button id="button" onClick={jest.fn()} isDisabled>
+          Disabled
+        </Button>
+      )
+      .toJSON();
     const secondary = renderer
       .create(
         <Button
@@ -149,11 +150,36 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
+    const searchBar = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.SearchBar}
+        >
+          SearchBar
+        </Button>
+      )
+      .toJSON();
+    const noBrand = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.NoBrand}
+        >
+          NoBrand
+        </Button>
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
+    expect(disabled).toMatchSnapshot();
     expect(secondary).toMatchSnapshot();
     expect(callout).toMatchSnapshot();
     expect(pill).toMatchSnapshot();
     expect(link).toMatchSnapshot();
+    expect(searchBar).toMatchSnapshot();
+    expect(noBrand).toMatchSnapshot();
   });
 });