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

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

@@ -4,6 +4,7 @@ import renderer from "react-test-renderer";
 import { axe } from "jest-axe";
 
 import Breadcrumbs from "./Breadcrumbs";
+import { ColorVariants } from "./BreadcrumbsTypes";
 
 describe("Breadcrumbs Accessibility", () => {
   const breadcrumbsData = [
@@ -31,8 +32,40 @@ describe("Breadcrumbs Snapshot", () => {
         <Breadcrumbs id="breadcrumbs-test" breadcrumbsData={breadcrumbsData} />
       )
       .toJSON();
+    const breadcrumbsVariantColor = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.BooksAndMore}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsBlogsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsAdditionalStyles = renderer
+      .create(
+        <Breadcrumbs
+          additionalStyles={{
+            bg: "var(--nypl-colors-ui-error-primary)",
+          }}
+          breadcrumbsData={breadcrumbsData}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
+    expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsBlogsVariant).toMatchSnapshot();
+    expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });
 

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -23,6 +23,8 @@ export interface BreadcrumbsDataProps {
 }
 
 export interface BreadcrumbProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Breadcrumb links as an array */
   breadcrumbsData: BreadcrumbsDataProps[];
   /** className you can add in addition to 'input' */
@@ -64,6 +66,7 @@ const getElementsFromData = (data, breadcrumbsID) => {
 
 function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const {
+    additionalStyles = {},
     breadcrumbsData,
     className,
     colorVariant,
@@ -78,10 +81,11 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   }
 
   const styles = useStyleConfig("Breadcrumb", { variant });
+  const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
 
   return (
-    <ChakraBreadcrumb className={className} __css={styles} id={id}>
+    <ChakraBreadcrumb className={className} __css={finalStyles} id={id}>
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,4 +1,5 @@
 export enum ColorVariants {
+  Blogs = "blogs",
   BooksAndMore = "booksAndMore",
   Locations = "locations",
   Research = "research",

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

@@ -87,7 +87,303 @@ 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-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 4`] = `
+<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>) {