@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,109 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,47 +0,0 @@
-// 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>
-`;