@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/StatusBadge/StatusBadge.test.tsx

@@ -1,25 +1,53 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import StatusBadge from "./StatusBadge";
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
 
 describe("StatusBadge Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <StatusBadge level={"low"}>Registration Required</StatusBadge>
+      <StatusBadge>Registration Required</StatusBadge>
     );
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
-describe("StatusBadge Test", () => {
-  it("Shows status badge", () => {
-    render(<StatusBadge level={"low"}>Registration Required</StatusBadge>);
+describe("StatusBadge", () => {
+  it("renders a status badge and text", () => {
+    render(<StatusBadge>Registration Required</StatusBadge>);
     expect(screen.getByText("Registration Required")).toBeInTheDocument();
   });
-  it("Can pass status badge content as child", () => {
-    render(<StatusBadge level={"medium"}>Cancelled</StatusBadge>);
-    expect(screen.getByText("Cancelled")).toBeInTheDocument();
+
+  it("throws a warning when no children are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<StatusBadge></StatusBadge>);
+    expect(warn).toHaveBeenCalledWith("Status Badge has no children.");
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const low = renderer
+      .create(<StatusBadge id="low">Registration Required</StatusBadge>)
+      .toJSON();
+    const medium = renderer
+      .create(
+        <StatusBadge id="medium" level={StatusBadgeTypes.Medium}>
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+    const high = renderer
+      .create(
+        <StatusBadge id="high" level={StatusBadgeTypes.High}>
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+
+    expect(low).toMatchSnapshot();
+    expect(medium).toMatchSnapshot();
+    expect(high).toMatchSnapshot();
   });
 });

package/src/components/StatusBadge/StatusBadge.tsx

@@ -1,37 +1,36 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useStyleConfig } from "@chakra-ui/react";
+
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface StatusBadgeProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** ClassName that appears in addition to "status-badge" */
+  /** Additional class for the component */
   className?: string;
-  /** Level of badge **/
-  level?: "low" | "medium" | "high";
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Level of the status badge through StatusBadgeTypes. */
+  level?: StatusBadgeTypes;
 }
 
-export default function StatusBadge(
-  props: React.PropsWithChildren<StatusBadgeProps>
-) {
-  const { blockName, className, level } = props;
-
-  const baseClass = "status-badge";
-
-  let statusBadgeModifiers = ["low"];
+function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>) {
+  const {
+    children,
+    className,
+    id = generateUUID(),
+    level = StatusBadgeTypes.Low,
+  } = props;
+  const styles = useStyleConfig("StatusBadge", { variant: level });
 
-  if (!props.children) {
-    console.warn("Status Badge has no children");
-  }
-
-  if (level) {
-    statusBadgeModifiers = [level];
+  if (!children) {
+    console.warn("Status Badge has no children.");
   }
 
   return (
-    <div
-      className={bem(baseClass, statusBadgeModifiers, blockName, [className])}
-    >
-      {props.children}
-    </div>
+    <Box id={id} className={className} __css={styles}>
+      {children}
+    </Box>
   );
 }
+
+export default StatusBadge;

package/src/components/StatusBadge/StatusBadgeTypes.tsx

@@ -0,0 +1,5 @@
+export enum StatusBadgeTypes {
+  Low = "low",
+  Medium = "medium",
+  High = "high",
+}

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusBadge renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+  id="low"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+  id="medium"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  id="high"
+>
+  Registration Required
+</div>
+`;

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -1,13 +1,15 @@
 import { Meta, Canvas } from "@storybook/addon-docs/blocks";
+
 import SearchBar from "../SearchBar/SearchBar";
 import Input from "../Input/Input";
 import { InputTypes } from "../Input/InputTypes";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconNames, IconSizes, IconAlign } from "../Icons/IconTypes";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Bidirectionality")} />
 
@@ -115,97 +117,111 @@ won't hurt.
 #1 - Left to right default
 
 <Canvas>
-  <div style={{ width: "400px" }}>
-    <SearchBar>
-      <Input
-        ariaLabelledBy="button-ex1"
-        id="input-ex1"
-        placeholder="Item Search"
-        required={true}
-        type={InputTypes.text}
-        attributes={{
-          ["aria-describedby"]: "error-helperText-ex1",
-        }}
-      />
-      <Button buttonType={ButtonTypes.Primary} id="button-ex1" type="submit">
-        <Icon
-          name={IconNames.search}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
-        />
-        Search
-      </Button>
-    </SearchBar>
-    <HelperErrorText id="error-helperText-ex1">
-      Use a keyword or phrase to search!
-    </HelperErrorText>
-  </div>
-</Canvas>
-
-#2 - Right to left using `dir="rtl"`. Click on "Show code" in the following
-block to see its code implementation.
-
-<Canvas>
-  <div dir="rtl">
+  <DSProvider>
     <div style={{ width: "400px" }}>
       <SearchBar>
         <Input
-          ariaLabelledBy="button-ex2"
-          id="input-ex2"
-          placeholder="البحث عن عنصر"
+          ariaLabelledBy="button-ex1"
+          id="input-ex1"
+          placeholder="Item Search"
           required={true}
           type={InputTypes.text}
           attributes={{
-            ["aria-describedby"]: "error-helperText-ex2",
+            ["aria-describedby"]: "error-helperText-ex1",
           }}
         />
-        <Button buttonType={ButtonTypes.Primary} id="button-ex2" type="submit">
+        <Button buttonType={ButtonTypes.Primary} id="button-ex1" type="submit">
           <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            name={IconNames.Search}
+            size={IconSizes.Small}
+            align={IconAlign.Left}
           />
-          يبحث
+          Search
         </Button>
       </SearchBar>
-      <HelperErrorText id="error-helperText-ex2">
-        استخدم كلمة رئيسية أو عبارة للبحث!
+      <HelperErrorText id="error-helperText-ex1">
+        Use a keyword or phrase to search!
       </HelperErrorText>
     </div>
-  </div>
+  </DSProvider>
+</Canvas>
+
+#2 - Right to left using `dir="rtl"`. Click on "Show code" in the following
+block to see its code implementation.
+
+<Canvas>
+  <DSProvider>
+    <div dir="rtl">
+      <div style={{ width: "400px" }}>
+        <SearchBar>
+          <Input
+            ariaLabelledBy="button-ex2"
+            id="input-ex2"
+            placeholder="البحث عن عنصر"
+            required={true}
+            type={InputTypes.text}
+            attributes={{
+              ["aria-describedby"]: "error-helperText-ex2",
+            }}
+          />
+          <Button
+            buttonType={ButtonTypes.Primary}
+            id="button-ex2"
+            type="submit"
+          >
+            <Icon
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
+            />
+            يبحث
+          </Button>
+        </SearchBar>
+        <HelperErrorText id="error-helperText-ex2">
+          استخدم كلمة رئيسية أو عبارة للبحث!
+        </HelperErrorText>
+      </div>
+    </div>
+  </DSProvider>
 </Canvas>
 
 #3 - Right to left using `direction: rtl;`. Click on "Show code" in the following
 block to see its code implementation.
 
 <Canvas>
-  <div style={{ direction: "rtl" }}>
-    <div style={{ width: "400px" }}>
-      <SearchBar>
-        <Input
-          ariaLabelledBy="button-ex3"
-          id="input-ex3"
-          placeholder="البحث عن عنصر"
-          required={true}
-          type={InputTypes.text}
-          attributes={{
-            ["aria-describedby"]: "error-helperText-ex3",
-          }}
-        />
-        <Button buttonType={ButtonTypes.Primary} id="button-ex3" type="submit">
-          <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+  <DSProvider>
+    <div style={{ direction: "rtl" }}>
+      <div style={{ width: "400px" }}>
+        <SearchBar>
+          <Input
+            ariaLabelledBy="button-ex3"
+            id="input-ex3"
+            placeholder="البحث عن عنصر"
+            required={true}
+            type={InputTypes.text}
+            attributes={{
+              ["aria-describedby"]: "error-helperText-ex3",
+            }}
           />
-          يبحث
-        </Button>
-      </SearchBar>
-      <HelperErrorText id="error-helperText-ex3">
-        استخدم كلمة رئيسية أو عبارة للبحث!
-      </HelperErrorText>
+          <Button
+            buttonType={ButtonTypes.Primary}
+            id="button-ex3"
+            type="submit"
+          >
+            <Icon
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
+            />
+            يبحث
+          </Button>
+        </SearchBar>
+        <HelperErrorText id="error-helperText-ex3">
+          استخدم كلمة رئيسية أو عبارة للبحث!
+        </HelperErrorText>
+      </div>
     </div>
-  </div>
+  </DSProvider>
 </Canvas>
 
 ## Component Updates
@@ -220,30 +236,36 @@ general, specifying an equal margin or padding to both sides of an element may
 help reduce any visual mistakes.
 
 <Canvas>
-  <div style={{ display: "flex", "flex-direction": "column" }}>
-    <div style={{ width: "300px" }}>
-      A regular button:
-      <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">
-        <Icon
-          name={IconNames.search}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
-        />
-        Search
-      </Button>
-    </div>
-    <div style={{ width: "300px" }}>
-      A RTL button:
-      <div dir="rtl">
-        <Button buttonType={ButtonTypes.Primary} id="button-ex5" type="submit">
+  <DSProvider>
+    <div style={{ display: "flex", "flex-direction": "column" }}>
+      <div style={{ width: "300px" }}>
+        A regular button:
+        <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">
           <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            name={IconNames.Search}
+            size={IconSizes.Small}
+            align={IconAlign.Left}
           />
           Search
         </Button>
       </div>
+      <div style={{ width: "300px" }}>
+        A RTL button:
+        <div dir="rtl">
+          <Button
+            buttonType={ButtonTypes.Primary}
+            id="button-ex5"
+            type="submit"
+          >
+            <Icon
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
+            />
+            Search
+          </Button>
+        </div>
+      </div>
     </div>
-  </div>
+  </DSProvider>
 </Canvas>

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -3,22 +3,22 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
 
 import { getCategory } from "../../utils/componentCategories";
-import Button from "../Button/Button";
+import Button, { ButtonGroup } from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Icon from "../Icons/Icon";
 import {
-  IconColors,
   IconNames,
   IconRotationTypes,
   IconSizes,
+  IconAlign,
 } from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Buttons")}
@@ -60,93 +60,88 @@ For information about using the `Button` component, please see below.
 - Buttons may have an icon on either the left or the right.
 - Buttons by default are blue. However, Donation buttons are red.
 - Buttons used for Back to Top actions have a Secondary button style with an arrow icon pointing up.
+- When buttons are used in a set (where the user can move forward or backward), the `Primary` button is on the right and the `Secondary` button on the left (i.e. cancel = secondary, submit = primary).
 
 ## Spacing
 
 Buttons should use `--space-xs` (0.5rem) for spacing in situations where multiple buttons are aligned in horizontal or vertical layouts. Buttons should use `--space-l` (2rem) for all other spacing situations.
 
-<Preview>
-  <div
-    style={{
-      display: "flex",
-    }}
-  >
-    <Button
-      buttonType={ButtonTypes.Primary}
-      attributes={{
-        style: {
-          marginRight: getCSSVariable("--space-xs"),
-        },
-      }}
-    >
-      Button Text
-    </Button>
-    <Button
-      buttonType={ButtonTypes.Primary}
-      attributes={{
-        style: {
-          marginRight: getCSSVariable("--space-xs"),
-        },
-      }}
-    >
-      <Icon decorative modifiers={["small", "icon-left"]} name="search" />
-      Button Text
-    </Button>
-    <Button
-      buttonType={ButtonTypes.Primary}
-      attributes={{
-        style: {
-          marginRight: getCSSVariable("--space-xs"),
-        },
-      }}
-    >
-      <Icon
-        name={IconNames.close}
-        decorative={true}
-        size={IconSizes.medium}
-        color={IconColors.ui_white}
-      />
-    </Button>
-    <Button
-      buttonType={ButtonTypes.Primary}
-      attributes={{
-        style: {
-          backgroundColor: getCSSVariable("--section-books-and-more-primary"),
-          marginRight: getCSSVariable("--space-xs"),
-        },
-      }}
-    >
-      Button Text
-    </Button>
-    <Button buttonType={ButtonTypes.Secondary}>
-      Back to Top
-      <Icon
-        name={IconNames.arrow}
-        decorative={true}
-        iconRotation={IconRotationTypes.rotate180}
-        modifiers={["small", "icon-right"]}
-      />
-    </Button>
-  </div>
-</Preview>
+<Canvas>
+  <DSProvider>
+    <ButtonGroup>
+      <Button
+        buttonType={ButtonTypes.Primary}
+        attributes={{
+          style: {
+            marginRight: getCSSVariable("--space-xs"),
+          },
+        }}
+      >
+        Button Text
+      </Button>
+      <Button
+        buttonType={ButtonTypes.Primary}
+        attributes={{
+          style: {
+            marginRight: getCSSVariable("--space-xs"),
+          },
+        }}
+      >
+        <Icon
+          name={IconNames.Search}
+          size={IconSizes.Small}
+          align={IconAlign.Left}
+        />
+        Button Text
+      </Button>
+      <Button
+        buttonType={ButtonTypes.Primary}
+        attributes={{
+          style: {
+            marginRight: getCSSVariable("--space-xs"),
+          },
+        }}
+      >
+        <Icon name={IconNames.Close} size={IconSizes.Medium} />
+      </Button>
+      <Button
+        buttonType={ButtonTypes.Primary}
+        attributes={{
+          style: {
+            backgroundColor: getCSSVariable("--section-books-and-more-primary"),
+            marginRight: getCSSVariable("--space-xs"),
+          },
+        }}
+      >
+        Button Text
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        Back to Top
+        <Icon
+          name={IconNames.Arrow}
+          size={IconSizes.Small}
+          align={IconAlign.Right}
+          iconRotation={IconRotationTypes.Rotate180}
+        />
+      </Button>
+    </ButtonGroup>
+  </DSProvider>
+</Canvas>
 
 ## Button Types
 
 The `buttonType` prop should be used to render various forms of the button component.
 
-<Preview>
-  <div
-    style={{
-      display: "flex",
-      justifyContent: "space-around",
-    }}
-  >
-    <Button buttonType={ButtonTypes.Primary}>Primary Button</Button>
-    <Button buttonType={ButtonTypes.Secondary}>Secondary Button</Button>
-    <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
-    <Button buttonType={ButtonTypes.Link}>Link Button</Button>
-  </div>
-</Preview>
+<Canvas>
+  <DSProvider>
+    <ButtonGroup>
+      <Button buttonType={ButtonTypes.Primary}>Primary Button</Button>
+      <Button buttonType={ButtonTypes.Secondary}>Secondary Button</Button>
+      <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
+      <Button buttonType={ButtonTypes.Link}>Link Button</Button>
+    </ButtonGroup>
+  </DSProvider>
+</Canvas>
 
 ### ButtonTypes.Primary
 
@@ -176,26 +171,29 @@ Buttons are blue by default but should be red when it is intended as a call out.
 The "Back to Top" button must be of `ButtonTypes` `Secondary` and must include an up arrow icon.
 
 <Canvas>
-  <Button
-    buttonType={ButtonTypes.Primary}
-    attributes={{
-      style: {
-        backgroundColor: getCSSVariable("--section-books-and-more-primary"),
-      },
-    }}
-  >
-    Donate to this library
-  </Button>
-  <br />
-  <Button buttonType={ButtonTypes.Secondary}>
-    Back to Top
-    <Icon
-      name={IconNames.arrow}
-      decorative={true}
-      iconRotation={IconRotationTypes.rotate180}
-      modifiers={["small", "icon-right"]}
-    />
-  </Button>
+  <DSProvider>
+    <ButtonGroup>
+      <Button
+        buttonType={ButtonTypes.Primary}
+        attributes={{
+          style: {
+            backgroundColor: getCSSVariable("--section-books-and-more-primary"),
+          },
+        }}
+      >
+        Donate to this library
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        Back to Top
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate180}
+          size={IconSizes.Small}
+          align={IconAlign.Right}
+        />
+      </Button>
+    </ButtonGroup>
+  </DSProvider>
 </Canvas>
 
 ## Figma Reference