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

package/src/components/Pagination/Pagination.stories.mdx

@@ -9,9 +9,10 @@ import { withDesign } from "storybook-addon-designs";
 import { withQuery } from "@storybook/addon-queryparams";
 import Pagination from "./Pagination";
 import * as stories from "./Pagination.stories.tsx";
+import { getCategory } from "../../utils/componentCategories";
 
 <Meta
-  title="Pagination"
+  title={getCategory("Pagination")}
   component={Pagination}
   decorators={[withDesign, withQuery]}
   argTypes={{
@@ -31,6 +32,11 @@ import * as stories from "./Pagination.stories.tsx";
 
 # Pagination
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.10`   |
+| Latest            | `0.22.2`   |
+
 <Description of={Pagination} />
 
 The `Pagination` component helps navigate between pages of a multi-page

package/src/components/Pagination/Pagination.test.tsx

@@ -19,12 +19,12 @@ describe("Pagination with getPageHref", () => {
   const getPageHref = (page: number) => `page=${page}`;
 
   it("Renders a nav element with items and links", () => {
-    render(
+    const { container } = render(
       <Pagination pageCount={20} currentPage={6} getPageHref={getPageHref} />
     );
 
     expect(screen.getByRole("navigation")).toBeInTheDocument();
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(container.querySelector(".pagination__list")).toBeInTheDocument();
     // Previous/Next buttons + truncated item list = 11 total items
     expect(screen.getAllByRole("listitem")).toHaveLength(11);
     // Each element links to anotherpage.
@@ -53,7 +53,8 @@ describe("Pagination with getPageHref", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[0]).toHaveAttribute("aria-disabled");
-    expect(links[0]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[0].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Next link is disabled when on the last page item", () => {
@@ -62,7 +63,8 @@ describe("Pagination with getPageHref", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[9]).toHaveAttribute("aria-disabled");
-    expect(links[9]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[9].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Current page item has active class", () => {
@@ -70,7 +72,8 @@ describe("Pagination with getPageHref", () => {
       <Pagination pageCount={11} currentPage={5} getPageHref={getPageHref} />
     );
     const links = screen.getAllByRole("button");
-    expect(links[5]).toHaveAttribute("class", "link pagination__link selected");
+    const linkClass = links[5].getAttribute("class");
+    expect(linkClass).toContain("pagination__link selected");
   });
 
   it("When pagination has 1 element, pagination is not shown", () => {
@@ -92,7 +95,7 @@ describe("Pagination with changeCallback", () => {
   const changeCallback = jest.fn();
 
   it("Renders a nav element with an unordered list of items", () => {
-    render(
+    const { container } = render(
       <Pagination
         pageCount={11}
         currentPage={6}
@@ -100,7 +103,7 @@ describe("Pagination with changeCallback", () => {
       />
     );
     expect(screen.getByRole("navigation")).toBeInTheDocument();
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(container.querySelector(".pagination__list")).toBeInTheDocument();
     expect(screen.getAllByRole("listitem")).toHaveLength(11);
   });
 
@@ -114,7 +117,8 @@ describe("Pagination with changeCallback", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[0]).toHaveAttribute("aria-disabled");
-    expect(links[0]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[0].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Next link is disabled when on the last page item", () => {
@@ -127,7 +131,8 @@ describe("Pagination with changeCallback", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[9]).toHaveAttribute("aria-disabled");
-    expect(links[9]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[9].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Current page item has active class", () => {
@@ -139,7 +144,8 @@ describe("Pagination with changeCallback", () => {
       />
     );
     const links = screen.getAllByRole("button");
-    expect(links[5]).toHaveAttribute("class", "link pagination__link selected");
+    const linkClass = links[5].getAttribute("class");
+    expect(linkClass).toContain("pagination__link selected");
   });
 
   it("When page item is selected, runs the onPageChange callback", () => {

package/src/components/Radio/Radio.stories.mdx

@@ -3,14 +3,14 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
-} from "@storybook/addon-docs/blocks";
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { getCategory } from "../../utils/componentCategories";
+import { HStack } from "@chakra-ui/react";
 
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 import Radio from "./Radio";
-import { onChangeDefault } from "./Radio";
 
 <Meta
   title={getCategory("Radio")}
@@ -25,19 +25,28 @@ import { onChangeDefault } from "./Radio";
     jest: ["Radio.test.tsx"],
   }}
   argTypes={{
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+    isChecked: { table: { disable: true } },
     onChange: { table: { disable: true } },
-    checked: { table: { disable: true } },
   }}
 />
 
 # Radio
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.22.0`   |
+| Latest            | `0.25.0`   |
+
 <Description of={Radio} />
 
-This component renders a radio button form element. See below for configuration information. Note that the `id` property, while optional, will
-cause an accessibility violation if none is present.
+This component renders a radio button form element. Note that all these examples
+show the `Radio` button in isolation. We recommend to always use the `Radio`
+component inside the Design System `RadioGroup` component. The `RadioGroup`
+component will handle all the states and data management.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Radio"
     args={{
@@ -45,77 +54,79 @@ cause an accessibility violation if none is present.
       showLabel: true,
       id: "test_id",
       name: "test_name",
+      value: "1",
+      isDisabled: false,
+      isRequired: false,
+      isInvalid: false,
+      helperText: "This is the helper text!",
+      invalidText: "This is the error text :(",
     }}
   >
     {(args) => <Radio {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Radio" />
 
 ## Checked
 
 <Canvas>
-  <Radio
-    checked
-    labelText="I am checked"
-    name="testChecked"
-    onChange={onChangeDefault}
-    showLabel={true}
-  ></Radio>
+  <DSProvider>
+    <Radio labelText="I am checked" isChecked value="1" />
+  </DSProvider>
 </Canvas>
 
 ## Focused
 
 <Canvas>
-  <Radio
-    name="testFocus"
-    labelText="Click or tab to the Radio to see its focus state"
-    showLabel={true}
-  ></Radio>
+  <DSProvider>
+    <Radio labelText="Click or tab to the Radio to see its focus state" />
+  </DSProvider>
 </Canvas>
 
 ## Errored
 
 <Canvas>
-  <Radio
-    name="testErrored"
-    errored
-    showLabel={true}
-    labelText="I am in an error state"
-  ></Radio>
+  <DSProvider>
+    <HStack>
+      <Radio isInvalid labelText="I am in an error state" />
+      <Radio isInvalid isChecked labelText="I am checked in an error state" />
+    </HStack>
+  </DSProvider>
 </Canvas>
 
 ## Disabled
 
 <Canvas>
-  <Radio
-    name="testDisabled"
-    disabled
-    showLabel={true}
-    labelText="I am disabled"
-  ></Radio>
+  <DSProvider>
+    <HStack>
+      <Radio isDisabled labelText="I am disabled" />
+      <Radio isDisabled isChecked labelText="I am checked and disabled" />
+    </HStack>
+  </DSProvider>
 </Canvas>
 
 ## Helper Text
 
 <Canvas>
-  <Radio
-    name="testHelperText"
-    showLabel={true}
-    labelText="I have helper text"
-    helperText="I am the helper text for this Radio"
-  ></Radio>
+  <DSProvider>
+    <Radio
+      name="testHelperText"
+      labelText="I have helper text"
+      helperText="I am the helper text for this Radio"
+    />
+  </DSProvider>
 </Canvas>
 
 ## Error Text
 
 <Canvas>
-  <Radio
-    name="testErrorText"
-    showLabel={true}
-    errored
-    labelText="I have error text"
-    errorText="I am the error text for this Radio"
-  ></Radio>
+  <DSProvider>
+    <Radio
+      name="testErrorText"
+      labelText="I have error text"
+      invalidText="I am the error text for this Radio"
+      isInvalid
+    />
+  </DSProvider>
 </Canvas>

package/src/components/Radio/Radio.test.tsx

@@ -1,203 +1,157 @@
 import * as React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
-import userEvent from "@testing-library/user-event";
+import renderer from "react-test-renderer";
 
 import * as generateUUID from "../../helpers/generateUUID";
 import Radio from "./Radio";
 
 describe("Radio Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <Radio
-        id="inputID"
-        attributes={{ onClick: jest.fn() }}
-        onChange={jest.fn()}
-        labelText="Test Label"
-        showLabel={false}
-      />
-    );
+  it("passes axe accessibility", async () => {
+    const { container } = render(<Radio id="inputID" labelText="Test Label" />);
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
 describe("Radio Button", () => {
-  let changeHandler;
-  let clickHander;
-  let generateUUIDSpy;
-
-  beforeEach(() => {
-    clickHander = jest.fn();
-    changeHandler = jest.fn();
-    generateUUIDSpy = jest.spyOn(generateUUID, "default");
-    render(
-      <Radio
-        id="inputID"
-        attributes={{ onClick: clickHander }}
-        onChange={changeHandler}
-        labelText="Test Label"
-        showLabel={false}
-      />
-    );
-  });
-
-  it("Renders without crashing", () => {
+  it("renders with a radio input and label", () => {
+    render(<Radio id="inputID" labelText="Test Label" />);
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
     expect(screen.getByRole("radio")).toBeInTheDocument();
   });
 
-  it("Renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false", () => {
+  it("renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false", () => {
+    render(<Radio id="inputID" labelText="Test Label" showLabel={false} />);
     expect(screen.getByLabelText("Test Label")).toHaveAttribute(
       "aria-label",
       "Test Label"
     );
   });
 
-  it("The radio element's ID is set properly using the value passed to it.", () => {
-    expect(screen.getByRole("radio")).toHaveAttribute("id", "inputID");
-  });
-
-  it("Allows user to pass in additional attributes", () => {
-    expect(clickHander).toHaveBeenCalledTimes(0);
-    userEvent.click(screen.getByRole("radio"));
-    expect(clickHander).toHaveBeenCalledTimes(1);
-  });
-
-  // TODO:
-  // // Click works but it should be onChange.
-  // it("Changing the value calls the onChange handler", () => {
-  //   expect(changeHandler).toHaveBeenCalledTimes(0);
-  //   console.log(screen.debug());
-  //   fireEvent.change(screen.getByRole("radio"));
-  //   expect(changeHandler).toHaveBeenCalledTimes(1);
-  // });
-
-  it("Renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false and 'helperText' has been passed", () => {
+  it("renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false and 'helperText' has been passed", () => {
     render(
       <Radio
-        //add other props here
-        id="test_id"
-        labelText="Hello"
+        id="inputID"
+        labelText="Test Label"
         showLabel={false}
-        helperText="The helper text."
+        helperText="This is the helper text."
       />
     );
     expect(
-      screen.getByLabelText("Hello - The helper text.")
+      screen.getByLabelText("Test Label - This is the helper text.")
     ).toBeInTheDocument();
   });
 
-  it("Renders with label", () => {
-    render(
+  it("renders visible helper or error text", () => {
+    const { rerender } = render(
       <Radio
-        //add other props here
-        id="test_id2"
-        labelText="Hello"
-        showLabel={true}
+        id="inputID"
+        labelText="Test Label"
+        helperText="This is the helper text."
+        invalidText="This is the error text :("
+      />
+    );
+    expect(screen.getByText("This is the helper text.")).toBeVisible();
+    expect(
+      screen.queryByText("This is the error text :(")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <Radio
+        id="inputID"
+        labelText="Test Label"
+        isInvalid
+        helperText="This is the helper text."
+        invalidText="This is the error text :("
       />
     );
-    expect(screen.getByText("Hello")).toBeInTheDocument();
-    expect(screen.getByLabelText("Hello")).not.toHaveAttribute("aria-label");
-    expect(screen.getByText("Hello")).toHaveAttribute("for", "test_id2");
+    expect(screen.getByText("This is the error text :(")).toBeVisible();
+    expect(
+      screen.queryByText("This is the helper text.")
+    ).not.toBeInTheDocument();
   });
 
-  it("Renders with visible helper text", () => {
+  it("sets the radio's ID", () => {
+    render(<Radio id="inputID" labelText="Test Label" />);
+    expect(screen.getByRole("radio")).toHaveAttribute("id", "inputID");
+  });
+
+  it("calls the UUID generation function if no id prop value is passed", () => {
+    const generateUUIDSpy = jest.spyOn(generateUUID, "default");
+    expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
+    render(<Radio labelText="Hello" />);
+    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("sets the 'checked' attribute", () => {
     render(
       <Radio
-        //add other props here
-        id="test_id3"
-        labelText="Hello"
+        id="inputID-attributes"
+        labelText="onChange test"
         showLabel={true}
-        helperText="The visible helper text."
-        errorText="The error text."
-        errored={false}
+        isChecked
       />
     );
-    expect(screen.getByText("The visible helper text.")).toBeInTheDocument();
-    expect(screen.queryByText("The error text.")).not.toBeInTheDocument();
+    expect(screen.getByRole("radio")).toHaveAttribute("checked");
   });
 
-  it("Renders with visible error text", () => {
+  it("sets the 'disabled' attribute", () => {
     render(
       <Radio
-        //add other props here
-        id="test_id4"
-        labelText="Hello"
+        id="inputID-attributes"
+        labelText="onChange test"
         showLabel={true}
-        helperText="The helper text."
-        errorText="The visible error text."
-        errored={true}
+        isDisabled
       />
     );
-    expect(screen.queryByText("The helper text.")).not.toBeInTheDocument();
-    expect(screen.getByText("The visible error text.")).toBeInTheDocument();
+    expect(screen.getByRole("radio")).toHaveAttribute("disabled");
   });
 
-  it("Calls a UUID generation method if no ID is passed as a prop", () => {
-    render(<Radio labelText="Hello" showLabel={true} />);
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("The 'checked' attribute can set properly", () => {
-    const onChange = jest.fn();
+  it("sets the 'required' attribute", () => {
     render(
       <Radio
         id="inputID-attributes"
         labelText="onChange test"
-        showLabel={false}
-        attributes={{
-          checked: true,
-          "aria-checked": true,
-          onChange,
-        }}
+        showLabel={true}
+        isRequired
       />
     );
-
-    expect(screen.getByLabelText("onChange test")).toHaveAttribute("checked");
-    expect(screen.getByLabelText("onChange test")).toHaveAttribute(
-      "aria-checked"
-    );
+    expect(screen.getByRole("radio")).toHaveAttribute("required");
   });
 
-  // TODO:
-  // it("Passes the ref to the input element", () => {
-  //   const ref = React.createRef<HTMLInputElement>();
-  //   const container = render(
-  //     <Radio
-  //       id="inputID-attributes"
-  //       ref={ref}
-  //       labelText="Hello"
-  //       showLabel={false}
-  //     />
-  //   );
-  //   expect(container.find("input").instance()).toEqual(ref.current);
-  // });
-
-  it("Renders HTML attributes passed through the `attributes` prop", () => {
-    const onChangeSpy = jest.fn();
-    const onBlurSpy = jest.fn();
+  it("sets the error state", () => {
     render(
       <Radio
         id="inputID-attributes"
-        attributes={{
-          onChange: onChangeSpy,
-          onBlur: onBlurSpy,
-          tabIndex: 0,
-        }}
-        labelText="attributes test"
+        labelText="onChange test"
         showLabel={true}
+        isInvalid
       />
     );
-    expect(screen.getByLabelText("attributes test")).toHaveAttribute(
-      "tabIndex",
-      "0"
-    );
-    // TODO:
-    // Click works but it should be onChange.
-    // expect(onChangeSpy).toHaveBeenCalledTimes(0);
-    // userEvent.click(screen.getByLabelText("attributes test"));
-    // expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(onBlurSpy).toHaveBeenCalledTimes(0);
-    fireEvent.blur(screen.getByLabelText("attributes test"));
-    expect(onBlurSpy).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("radio")).toHaveAttribute("aria-invalid");
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const primary = renderer
+      .create(<Radio id="inputID" labelText="Test Label" />)
+      .toJSON();
+    const isChecked = renderer
+      .create(<Radio id="radio-checked" labelText="Test Label" isChecked />)
+      .toJSON();
+    const isRequired = renderer
+      .create(<Radio id="radio-required" labelText="Test Label" isRequired />)
+      .toJSON();
+    const isInvalid = renderer
+      .create(<Radio id="radio-invalid" labelText="Test Label" isInvalid />)
+      .toJSON();
+    const isDisabled = renderer
+      .create(<Radio id="radio-disabled" labelText="Test Label" isDisabled />)
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(isChecked).toMatchSnapshot();
+    expect(isRequired).toMatchSnapshot();
+    expect(isInvalid).toMatchSnapshot();
+    expect(isDisabled).toMatchSnapshot();
   });
 });