@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/StatusBadge/StatusBadge.stories.mdx

@@ -0,0 +1,109 @@
+import { VStack } from "@chakra-ui/react";
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import StatusBadge from "./StatusBadge";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("StatusBadge")}
+  component={StatusBadge}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11256%3A0",
+    },
+    jest: ["StatusBadge.test.tsx"],
+  }}
+  argTypes={{
+    className: { control: false },
+    id: { control: false },
+    level: {
+      table: { defaultValue: { summary: "low" } },
+    },
+    text: {
+      description: "Only used for Storybook",
+    },
+  }}
+/>
+
+# StatusBadge
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.18.7`   |
+| Latest            | `0.28.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Patterns](#patterns)
+
+## Overview
+
+<Description of={StatusBadge} />
+
+## Component Props
+
+<Canvas withToolbar>
+  <Story
+    name="StatusBadge"
+    args={{
+      className: undefined,
+      id: "statusBadge-id",
+      level: "low",
+      text: "Registration Required",
+    }}
+  >
+    {(args) => <StatusBadge level={args.level}>{args.text}</StatusBadge>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="StatusBadge" />
+
+## Accessibility
+
+The visual aspect of the `StatusBadge` component displays three different status
+levels through the use of three different colors. It is important to assign
+the appropriate text so that the user can understand the priority level of the
+`StatusBadge`, and not rely just on the color.
+
+## Patterns
+
+### Higher Barrier
+
+Used in instances where the associated message is the highest barrier. Use
+`"high"` and `"medium"` for these levels.
+
+<Canvas>
+  <DSProvider>
+    <VStack spacing="s" align="stretch">
+      <StatusBadge level="high">On-Site Access Only</StatusBadge>
+      <StatusBadge level="medium">Cancelled</StatusBadge>
+    </VStack>
+  </DSProvider>
+</Canvas>
+
+### Lower Barrier
+
+Used in instances where the associated message is the lower barrier. Use
+`"low"` for this level which is the default.
+
+<Canvas>
+  <DSProvider>
+    <VStack spacing="s" align="stretch">
+      <StatusBadge>Library Card Required</StatusBadge>
+      <StatusBadge>Registration Required</StatusBadge>
+    </VStack>
+  </DSProvider>
+</Canvas>

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

@@ -0,0 +1,70 @@
+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";
+
+describe("StatusBadge Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(
+      <StatusBadge>Registration Required</StatusBadge>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("StatusBadge", () => {
+  it("renders a status badge and text", () => {
+    render(<StatusBadge>Registration Required</StatusBadge>);
+    expect(screen.getByText("Registration Required")).toBeInTheDocument();
+  });
+
+  it("throws a warning when no children are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<StatusBadge></StatusBadge>);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir StatusBadge: No children were passed."
+    );
+  });
+
+  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="medium">
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+    const high = renderer
+      .create(
+        <StatusBadge id="high" level="high">
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <StatusBadge id="chakra" p="20px" color="ui.error.primary">
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <StatusBadge id="props" data-testid="props">
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+
+    expect(low).toMatchSnapshot();
+    expect(medium).toMatchSnapshot();
+    expect(high).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,35 @@
+import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
+export type StatusBadgeTypes = "low" | "medium" | "high";
+export interface StatusBadgeProps {
+  /** Additional class for the component */
+  className?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Level of the status badge. Defaults to `"low"`. */
+  level?: StatusBadgeTypes;
+}
+
+/**
+ * The `StatusBadge` component is used to display a visual badge for three
+ * different status levels.
+ */
+export const StatusBadge = chakra(
+  (props: React.PropsWithChildren<StatusBadgeProps>) => {
+    const { children, className, id, level = "low", ...rest } = props;
+    const styles = useStyleConfig("StatusBadge", { variant: level });
+
+    if (!children) {
+      console.warn("NYPL Reservoir StatusBadge: No children were passed.");
+    }
+
+    return (
+      <Box id={id} className={className} __css={styles} {...rest}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+export default StatusBadge;

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

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