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

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

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

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

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

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

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