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

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

@@ -87,7 +87,204 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
       <span
         aria-current="page"
         className="chakra-breadcrumb__link css-0"
-        href="#string3"
+      >
+        <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"

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

@@ -28,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"],
   }}
@@ -40,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Button} />
 
@@ -53,6 +52,8 @@ that can be rendered.
 - `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 with
 no text, it will automatically be configured to use the `"iconOnly"` type.
@@ -230,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

@@ -107,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
@@ -154,12 +161,25 @@ describe("Button Snapshot", () => {
         </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();
   });
 });

package/src/components/Button/Button.tsx

@@ -3,6 +3,8 @@ import { Button as ChakraButton, useStyleConfig } from "@chakra-ui/react";
 
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
+import { getVariant } from "../../utils/utils";
+import generateUUID from "../../helpers/generateUUID";
 
 type ButtonElementType = "submit" | "button" | "reset";
 
@@ -13,35 +15,24 @@ interface ButtonProps {
   attributes?: { [key: string]: any };
   /** The kind of button assigned through the `ButtonTypes` enum  */
   buttonType?: ButtonTypes;
-  /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+  /** Additional className to use. */
   className?: string;
-  /** Adds 'disabled' property to the button */
-  disabled?: boolean;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Trigger the Button's action through the `mouseDown` event handler instead of `onClick`. `false` by default. */
+  /** Adds 'disabled' property to the button */
+  isDisabled?: boolean;
+  /** Trigger the Button's action through the `mouseDown` event handler instead
+   * of `onClick`. `false` by default. */
   mouseDown?: boolean;
   /** The action to perform on the `<button>`'s onClick function */
   onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-  /** The html button attribute */
+  /** The HTML button type attribute. */
   type?: ButtonElementType;
 }
 
-// Used to map between ButtonTypes enum values and Chakra variant options.
-const variantMap = {};
-for (const type in ButtonTypes) {
-  variantMap[ButtonTypes[type]] = ButtonTypes[type];
-}
-
 /**
- * Map the ButtonType to the Button Chakra theme variant object. If a wrong
- * value is passed (typically in non-Typescript scenarios), then the default
- * is the "primary" variant.
+ * Renders a simple `button` element with custom variant styles.
  */
-const getVariant = (buttonType) =>
-  variantMap[buttonType] || ButtonTypes.Primary;
-
-/** Renders a simple `button` element with custom classes and modifiers. */
 function Button(props: React.PropsWithChildren<ButtonProps>) {
   const {
     additionalStyles = {},
@@ -49,8 +40,8 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
     buttonType,
     children,
     className = "",
-    disabled,
-    id,
+    isDisabled,
+    id = generateUUID(),
     mouseDown = false,
     onClick,
     type = "button",
@@ -59,7 +50,7 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   let childCount = 0;
   let hasIcon = false;
   let variant;
-  let styles;
+  let styles = {};
 
   React.Children.map(children, (child: React.ReactElement) => {
     childCount++;
@@ -76,7 +67,7 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   if (childCount === 1 && hasIcon) {
     variant = "iconOnly";
   } else {
-    variant = getVariant(buttonType);
+    variant = getVariant(buttonType, ButtonTypes, ButtonTypes.Primary);
   }
 
   styles = useStyleConfig("Button", { variant });
@@ -87,7 +78,7 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
       data-testid="button"
       className={className}
       type={type}
-      disabled={disabled}
+      isDisabled={isDisabled}
       __css={{ ...styles, ...additionalStyles }}
       {...attributes}
       {...btnCallback}

package/src/components/Button/ButtonTypes.tsx

@@ -5,4 +5,5 @@ export enum ButtonTypes {
   Pill = "pill",
   Link = "link",
   SearchBar = "searchBar",
+  NoBrand = "noBrand",
 }

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

@@ -16,11 +16,12 @@ exports[`Button Snapshot Renders the UI snapshot correctly 2`] = `
 <button
   className="chakra-button css-0"
   data-testid="button"
+  disabled={true}
   id="button"
   onClick={[MockFunction]}
   type="button"
 >
-  Seconday
+  Disabled
 </button>
 `;
 
@@ -32,7 +33,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 3`] = `
   onClick={[MockFunction]}
   type="button"
 >
-  Callout
+  Seconday
 </button>
 `;
 
@@ -44,7 +45,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 4`] = `
   onClick={[MockFunction]}
   type="button"
 >
-  Pill
+  Callout
 </button>
 `;
 
@@ -56,11 +57,23 @@ exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
   onClick={[MockFunction]}
   type="button"
 >
-  Link
+  Pill
 </button>
 `;
 
 exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
+<button
+  className="chakra-button css-0"
+  data-testid="button"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Link
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 7`] = `
 <button
   className="chakra-button css-0"
   data-testid="button"
@@ -71,3 +84,15 @@ exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
   SearchBar
 </button>
 `;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 8`] = `
+<button
+  className="chakra-button css-0"
+  data-testid="button"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  NoBrand
+</button>
+`;

package/src/components/Card/Card.stories.mdx

@@ -544,7 +544,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
       <CardHeading level={HeadingLevels.Two} id="img1-heading1">
         Card Component with Custom Image Component
       </CardHeading>
-      <CardHeading level={HeadingLevels.Four} id="img2-heading2">
+      <CardHeading level={HeadingLevels.Three} id="img2-heading2">
         Secondary Heading
       </CardHeading>
       <CardContent>

package/src/components/Card/Card.tsx

@@ -72,7 +72,7 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
  * renders an `Image` component but with overriding styles specific to the
  * `Card` component.
  */
-export function CardImage(props: React.ComponentProps<"img"> & CardImageProps) {
+function CardImage(props: React.ComponentProps<"img"> & CardImageProps) {
   const {
     alt,
     center,
@@ -130,7 +130,7 @@ export function CardActions(props: React.PropsWithChildren<CardActionsProps>) {
  * component to the entire `Card` component. This works together with the
  * `CardLinkOverlay` component to provide a clickable overlay.
  */
-export function CardLinkBox({
+function CardLinkBox({
   children,
   mainActionLink,
 }: React.PropsWithChildren<CardLinkBoxProps>) {
@@ -148,7 +148,7 @@ export function CardLinkBox({
  * the `Card` component while still allowing links in the `CardActions` to be
  * clickable.
  */
-export function CardLinkOverlay({
+function CardLinkOverlay({
   children,
   mainActionLink,
 }: React.PropsWithChildren<CardLinkBoxProps>) {

package/src/components/CardEdition/CardEdition.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
-import { text, boolean, select } from "@storybook/addon-knobs";
 
 import CardEdition from "./CardEdition";
 import Heading from "../Heading/Heading";
@@ -24,10 +23,6 @@ export default {
   component: CardEdition,
 };
 
-let showCTAs, showImage, showHeader, showFooter;
-
-const headerLevels = [1, 2, 3, 4, 5, 6];
-
 const imageRatios = {
   "1x1": "https://placeimg.com/100/100/animals",
   "2x1": "https://placeimg.com/200/100/animals",
@@ -39,48 +34,23 @@ const imageRatios = {
 
 export const cardEdition = () => (
   <>
-    {boolean("Show Header", true) ? (showHeader = true) : (showHeader = false)}
-    {boolean("Show Image", true) ? (showImage = true) : (showImage = false)}
-    {boolean("Show CTAs", true) ? (showCTAs = true) : (showCTAs = false)}
-    {boolean("Show Footer", true) ? (showFooter = true) : (showFooter = false)}
     <CardEdition
       id="cardID"
-      heading={
-        showHeader ? (
-          <Heading
-            level={select("Header Level", headerLevels, headerLevels[2])}
-            id="heading1"
-            text={text("Header Content", "Optional Header")}
-          />
-        ) : (
-          false
-        )
-      }
-      image={
-        showImage ? (
-          <Image
-            src={select("Image Ratio", imageRatios, imageRatios[2])}
-            alt={""}
-          />
-        ) : null
-      }
+      heading={<Heading level={2} id="heading1" text="Header Content" />}
+      image={<Image src={imageRatios[2]} alt="" />}
       ctas={
-        showCTAs ? (
-          <Button
-            onClick={action("clicked")}
-            id="button1"
-            buttonType={ButtonTypes.Primary}
-            type="submit"
-          >
-            {text("CTA Button Text: ", "Example CTA")}
-          </Button>
-        ) : null
-      }
-      footer={
-        showFooter ? <>{text("Footer content: ", "Optional footer")}</> : null
+        <Button
+          onClick={action("clicked")}
+          id="button1"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          CTA Button Text
+        </Button>
       }
+      footer={<>Footer content: </>}
     >
-      {text("Card Content: ", "Middle column content")}
+      Card Content:
     </CardEdition>
   </>
 );
@@ -90,8 +60,7 @@ cardEdition.storyName = "CardEdition";
 cardEdition.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
   },
 };
 
@@ -117,7 +86,7 @@ export const ExampleCardEdition = () => (
       <Heading
         level={HeadingLevels.Two}
         id="heading1"
-        text={"The Year of Magical Thinking"}
+        text="The Year of Magical Thinking"
       />
       <div className="book__callout">A portrait of loss and grief</div>
       <div>
@@ -148,7 +117,6 @@ ExampleCardEdition.storyName = "Example Card Edition";
 ExampleCardEdition.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
   },
 };