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

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

@@ -1,269 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image Renders the UI snapshot correctly 1`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 2`] = `
-<figure
-  className="css-0"
->
-  <img
-    alt=""
-    className="css-0"
-    src="test.png"
-  />
-  <figcaption
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      Caption
-    </div>
-  </figcaption>
-</figure>
-`;
-
-exports[`Image Renders the UI snapshot correctly 3`] = `
-<figure
-  className="css-0"
->
-  <img
-    alt=""
-    className="css-0"
-    src="test.png"
-  />
-  <figcaption
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      Credit
-    </div>
-  </figcaption>
-</figure>
-`;
-
-exports[`Image Renders the UI snapshot correctly 4`] = `
-<figure
-  className="css-0"
->
-  <img
-    alt=""
-    className="css-0"
-    src="test.png"
-  />
-  <figcaption
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      Caption
-    </div>
-    <div
-      className="css-0"
-    >
-      Credit
-    </div>
-  </figcaption>
-</figure>
-`;
-
-exports[`Image Renders the UI snapshot correctly 5`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 6`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 7`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 8`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 9`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 10`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 11`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 12`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 13`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 14`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 15`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 16`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 17`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 18`] = `
-<div
-  className="the-wrap css-1u8qly9"
->
-  <div
-    className="the-crop css-0"
-  >
-    <img
-      alt=""
-      className="css-0"
-      src="test.png"
-    />
-  </div>
-</div>
-`;
-
-exports[`Image Renders the UI snapshot correctly 19`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;
-
-exports[`Image Renders the UI snapshot correctly 20`] = `
-<img
-  alt=""
-  className="css-0"
-  src="test.png"
-/>
-`;

package/src/components/Label/Label.stories.mdx

@@ -1,100 +0,0 @@
-import { Box, VStack } from "@chakra-ui/react";
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from "@storybook/addon-docs";
-
-import Label from "./Label";
-import { getCategory } from "../../utils/componentCategories";
-
-<Meta
-  title={getCategory("Label")}
-  component={Label}
-  parameters={{
-    jest: ["Label.test.tsx"],
-  }}
-  argTypes={{
-    className: { control: false },
-    id: { control: false },
-    isInlined: { table: { disable: true } },
-    text: {
-      description: "Only used for Storybook",
-    },
-  }}
-/>
-
-# Label
-
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.10`   |
-| Latest            | `0.26.0`   |
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Component Props](#component-props)
-- [Accessibility](#accessibility)
-- [isRequired helper text](#isrequired-helper-text)
-
-## Overview
-
-<Description of={Label} />
-
-## Component Props
-
-<Canvas>
-  <Story
-    name="Label with Controls"
-    args={{
-      className: undefined,
-      htmlFor: "id-of-input-element",
-      id: "label-id",
-      isRequired: false,
-      text: "A label for a villager.",
-    }}
-  >
-    {(args) => <Label {...args}>{args.text}</Label>}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Label with Controls" />
-
-## Accessibility
-
-The `Label` component is an accessible HTML `<label>` element. The JSX prop
-`htmlFor` should be set to the `id` of the input element that the label is
-associated with. This is the proper way to label inputs so that screenreaders
-can read the label, without the use of the `aria-label` attribute on the input
-element.
-
-Note: All form-related Reservoir components already implement this `Label`
-component so there is no need to use this component unless if you are building
-a new form-related input component.
-
-Resources:
-
-- [WebAIM Creating Accessible Forms](https://webaim.org/techniques/forms/advanced)
-
-## isRequired helper text
-
-An optional helper string can be rendered at the end of the `Label` text through
-the `isRequired` prop. This is useful for visually labeling a field as required
-with the `"(Required)"` text next to the label's text. This is set to `false`
-by default.
-
-<Canvas>
-  <Story name="isRequired helper text">
-    <VStack>
-      <Label htmlFor="label-id1" id="regular">
-        A regular label
-      </Label>
-      <Label htmlFor="label-id2" id="required" isRequired>
-        A label that is required
-      </Label>
-    </VStack>
-  </Story>
-</Canvas>

package/src/components/Label/Label.test.tsx

@@ -1,116 +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 Label from "./Label";
-
-describe("Label Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <Label id="label" htmlFor="some-input-id">
-        Cupcakes
-      </Label>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it("passes axe accessibility test with required text", async () => {
-    const { container } = render(
-      <Label id="label" htmlFor="some-input-id" isRequired>
-        Cupcakes
-      </Label>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("Label", () => {
-  it("renders a label element when passed text as children", () => {
-    render(
-      <Label id="label" htmlFor="some-input-id">
-        Cupcakes
-      </Label>
-    );
-    expect(screen.getByText("Cupcakes")).toBeInTheDocument();
-  });
-
-  it("renders a label element when passed element as children", () => {
-    render(
-      <Label id="label" htmlFor="some-input-id">
-        <span>Cupcakes</span>
-      </Label>
-    );
-    expect(screen.getByText("Cupcakes")).toBeInTheDocument();
-  });
-
-  it("renders the '(Required)' helper text", () => {
-    const { rerender } = render(
-      <Label id="label" htmlFor="some-input-id">
-        <span>Cupcakes</span>
-      </Label>
-    );
-    expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
-
-    rerender(
-      <Label id="label" htmlFor="some-input-id" isRequired>
-        <span>Cupcakes</span>
-      </Label>
-    );
-
-    expect(screen.queryByText(/Required/i)).toBeInTheDocument();
-  });
-
-  it("Logs a warning when there is no `id` passed", () => {
-    const warn = jest.spyOn(console, "warn");
-    render(
-      // @ts-ignore: Typescript complains when a required prop is not passed, but
-      // here we don't want to pass the required prop to make sure the warning appears.
-      <Label htmlFor="some-input-id">Cupcakes</Label>
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Label: This component's required `id` prop was not passed."
-    );
-  });
-
-  it("Renders the UI snapshot correctly", () => {
-    const simple = renderer
-      .create(
-        <Label id="label" htmlFor="some-input-id">
-          Cupcakes
-        </Label>
-      )
-      .toJSON();
-    const required = renderer
-      .create(
-        <Label id="label3" htmlFor="some-input-id" isRequired>
-          Cupcakes
-        </Label>
-      )
-      .toJSON();
-    const withChakraProps = renderer
-      .create(
-        <Label
-          id="chakra"
-          htmlFor="some-input-id"
-          p="20px"
-          color="ui.error.primary"
-        >
-          Cupcakes
-        </Label>
-      )
-      .toJSON();
-    const withOtherProps = renderer
-      .create(
-        <Label id="props" htmlFor="some-input-id" data-testid="props">
-          Cupcakes
-        </Label>
-      )
-      .toJSON();
-
-    expect(simple).toMatchSnapshot();
-    expect(required).toMatchSnapshot();
-    expect(withChakraProps).toMatchSnapshot();
-    expect(withOtherProps).toMatchSnapshot();
-  });
-});

package/src/components/Label/Label.tsx

@@ -1,55 +0,0 @@
-import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
-import * as React from "react";
-
-interface LabelProps {
-  /** Additional CSS class name to render in the `label` element. */
-  className?: string;
-  /** The id of the html element that this `Label` is describing. */
-  htmlFor: string;
-  /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
-  /** Controls whether the label should be inline with the input it goes with.
-   * This prop should only be used internally. */
-  isInlined?: boolean;
-  /** Controls whether the "(Required)" text should be displayed alongside the
-   * label's text. False by default. */
-  isRequired?: boolean;
-}
-
-/**
- * A label for form inputs. It should never be used alone.
- */
-export const Label = chakra((props: React.PropsWithChildren<LabelProps>) => {
-  const {
-    children,
-    className,
-    htmlFor,
-    id,
-    isInlined = false,
-    isRequired = false,
-    ...rest
-  } = props;
-  const styles = useStyleConfig("Label", { isInlined });
-
-  if (!id) {
-    console.warn(
-      "NYPL Reservoir Label: This component's required `id` prop was not passed."
-    );
-  }
-
-  return (
-    <Box
-      as="label"
-      id={id}
-      className={className}
-      htmlFor={htmlFor}
-      __css={styles}
-      {...rest}
-    >
-      {children}
-      {isRequired && <span> (Required)</span>}
-    </Box>
-  );
-});
-
-export default Label;

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

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Label Renders the UI snapshot correctly 1`] = `
-<label
-  className="css-1xdhyk6"
-  htmlFor="some-input-id"
-  id="label"
->
-  Cupcakes
-</label>
-`;
-
-exports[`Label Renders the UI snapshot correctly 2`] = `
-<label
-  className="css-1xdhyk6"
-  htmlFor="some-input-id"
-  id="label3"
->
-  Cupcakes
-  <span>
-     (Required)
-  </span>
-</label>
-`;
-
-exports[`Label Renders the UI snapshot correctly 3`] = `
-<label
-  className="css-kle7zy"
-  htmlFor="some-input-id"
-  id="chakra"
->
-  Cupcakes
-</label>
-`;
-
-exports[`Label Renders the UI snapshot correctly 4`] = `
-<label
-  className="css-1xdhyk6"
-  data-testid="props"
-  htmlFor="some-input-id"
-  id="props"
->
-  Cupcakes
-</label>
-`;