@nypl/design-system-react-components 0.25.13 → 0.27.0

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

@@ -2,7 +2,7 @@
 
 exports[`Card Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="regularCard"
 >
   <div
@@ -18,21 +18,22 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
     className="card-body css-0"
   >
     <h3
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="heading1"
+      layout="column"
     >
       The Card Heading
     </h3>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       middle column content
     </div>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <button
-        className="chakra-button css-0"
+        className="chakra-button css-1xdhyk6"
         data-testid="button"
         id="button1"
         onClick={[Function]}
@@ -47,7 +48,7 @@ exports[`Card Renders the UI snapshot correctly 1`] = `
 
 exports[`Card Renders the UI snapshot correctly 2`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithExtendedStyles"
 >
   <div
@@ -63,13 +64,14 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       The Card Heading
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div>
         Published in New York by Random House
@@ -82,10 +84,10 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
       </div>
     </div>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="online"
         id="link-online"
         rel={null}
@@ -94,7 +96,7 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
         Read Online
       </a>
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#url"
         id="link-icon"
         rel={null}
@@ -102,7 +104,7 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon css-onkibi"
+          className="chakra-icon css-1grhd2q"
           focusable={false}
           id="icon-cardWithExtendedStyles"
           role="img"
@@ -141,7 +143,7 @@ exports[`Card Renders the UI snapshot correctly 2`] = `
 
 exports[`Card Renders the UI snapshot correctly 3`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithNoCTAs"
 >
   <div
@@ -157,13 +159,14 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       The Card Heading
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <p>
         Published in New York by Random House
@@ -181,7 +184,7 @@ exports[`Card Renders the UI snapshot correctly 3`] = `
 
 exports[`Card Renders the UI snapshot correctly 4`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithNoContent"
 >
   <div
@@ -197,11 +200,12 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#edition-link"
         id="editioncardheading1-link"
         rel={null}
@@ -211,10 +215,10 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
       </a>
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="online"
         id="link-online"
         rel={null}
@@ -223,7 +227,7 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
         Read Online
       </a>
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#url"
         id="link-icon"
         rel={null}
@@ -231,7 +235,7 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon css-onkibi"
+          className="chakra-icon css-1grhd2q"
           focusable={false}
           id="icon-cardWithNoContent"
           role="img"
@@ -270,18 +274,19 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
 
 exports[`Card Renders the UI snapshot correctly 5`] = `
 <div
-  className="edition-card css-0"
+  className="edition-card css-1xdhyk6"
   id="cardWithNoImage"
 >
   <div
     className="card-body css-0"
   >
     <h2
-      className="chakra-heading css-0"
+      className="chakra-heading css-1xdhyk6"
       id="editioncardheading1"
+      layout="column"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#edition-link"
         id="editioncardheading1-link"
         rel={null}
@@ -291,15 +296,15 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
       </a>
     </h2>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       middle column content
     </div>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="online"
         id="link-online"
         rel={null}
@@ -308,7 +313,7 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
         Read Online
       </a>
       <a
-        className="css-0"
+        className="css-1xdhyk6"
         href="#url"
         id="link-icon"
         rel={null}
@@ -316,7 +321,7 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
       >
         <svg
           aria-hidden={true}
-          className="chakra-icon css-onkibi"
+          className="chakra-icon css-1grhd2q"
           focusable={false}
           id="icon-cardWithNoImage"
           role="img"
@@ -355,10 +360,10 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
 
 exports[`Card Renders the UI snapshot correctly 6`] = `
 <div
-  className="chakra-linkbox css-10n1vic"
+  className="chakra-linkbox css-hng3kb"
 >
   <div
-    className="css-0"
+    className="css-1xdhyk6"
     id="fullclick"
   >
     <div
@@ -374,8 +379,9 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
       className="card-body css-0"
     >
       <h3
-        className="chakra-heading css-0"
+        className="chakra-heading css-1xdhyk6"
         id="heading1"
+        layout="column"
       >
         <a
           className="chakra-linkbox__overlay css-kvj8dg"
@@ -385,15 +391,15 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
         </a>
       </h3>
       <div
-        className="css-0"
+        className="css-1xdhyk6"
       >
         middle column content
       </div>
       <div
-        className="css-0"
+        className="css-1xdhyk6"
       >
         <button
-          className="chakra-button css-0"
+          className="chakra-button css-1xdhyk6"
           data-testid="button"
           id="button1"
           onClick={[Function]}
@@ -406,3 +412,157 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
   </div>
 </div>
 `;
+
+exports[`Card Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1xdhyk6"
+  id="cardID"
+>
+  <div
+    className="css-0"
+  >
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-1xdhyk6"
+      id="heading1"
+      layout="column"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-1xdhyk6"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-1xdhyk6"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button1"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+    <div
+      className="css-1xdhyk6"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button2"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-1t0bvx9"
+  id="chakraProps"
+>
+  <div
+    className="css-0"
+  >
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-1ss7kwh"
+      id="heading1"
+      layout="column"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-1rn2qcq"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-1avkygu"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button1"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="card-testid"
+  id="otherProps"
+>
+  <div
+    className="css-0"
+  >
+    <img
+      alt="Alt text"
+      className="css-0"
+      src="https://placeimg.com/400/200/arch"
+    />
+  </div>
+  <div
+    className="card-body css-0"
+  >
+    <h3
+      className="chakra-heading css-1ss7kwh"
+      id="heading1"
+      layout="column"
+    >
+      The Card Heading
+    </h3>
+    <div
+      className="css-1xdhyk6"
+      data-testid="cardcontent-testid"
+    >
+      middle column content
+    </div>
+    <div
+      className="css-1xdhyk6"
+      data-testid="cardaction-testid"
+    >
+      <button
+        className="chakra-button css-1xdhyk6"
+        data-testid="button"
+        id="button1"
+        onClick={[Function]}
+        type="submit"
+      >
+        Example CTA
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Chakra/Grid.stories.mdx

@@ -19,7 +19,7 @@ for more information.
 
 This component is directly exported from Chakra UI. The `Grid` component is
 useful for grid layouts and offers more complexity and formatting options than
-the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes
+the Reservoir Design System (DS) `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes
 with helpful style shorthand. It renders a `div` element.
 
 Details about available props and related child components can be found on the
@@ -30,7 +30,7 @@ Details about available props and related child components can be found on the
     name="Grid"
     args={{
       templateColumns: "repeat(5, 1fr)",
-      gap: "l",
+      gap: "grid.default",
     }}
   >
     {(args) => (
@@ -64,7 +64,7 @@ the `templateColumns` and `templateRows`.
       height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
-      gap="l"
+      gap="grid.default"
     >
       <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
       <GridItem colSpan={2} bg="ui.success.primary" />
@@ -79,7 +79,7 @@ the `templateColumns` and `templateRows`.
   height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
-  gap="l"
+  gap="grid.default"
 >
   <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
   <GridItem colSpan={2} bg="ui.success.primary" />

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -57,12 +57,31 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Checked](#checked)
+- [Indeterminate](#indeterminate)
+- [Focused](#focused)
+- [Errored](#errored)
+- [Disabled](#disabled)
+- [Helper Text](#helper-text)
+- [Error Text](#error-text)
+- [With JSX Element Label](#with-jsx-element-label)
+
+## Overview
 
 <Description of={Checkbox} />
 
-This component renders a Checkbox 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 Checkbox button form element. See below for configuration
+information. Note that the `id` property, while optional, will cause an
+accessibility violation if none is present.
+
+## Component Props
 
 <Canvas withToolbar>
   <Story
@@ -91,6 +110,24 @@ cause an accessibility violation if none is present.
 
 <ArgsTable story="Checkbox" />
 
+## Accessibility
+
+The `Checkbox` component renders `<label>` and `<input type="checkbox" />`
+elements that are associated with each other; the label has a `for` attribute
+with the value of the `input`'s `id` element. If there is helper or invalid text,
+the `<input>` element will have a `aria-describedby` attribute with the value of
+the helper or invalid text.
+
+When `showLabel` is set to false, the `labelText` value will be set to the
+`<input>`'s `aria-label` attribute.
+
+Resources:
+
+- [W3C WAI ARIA Checkbox Example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html)
+- [a11ymatters Accessible Checkbox](https://www.a11ymatters.com/pattern/checkbox/)
+- [MDN ARIA: checkbox role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
+- [Chakra UI Checkbox](https://chakra-ui.com/docs/components/form/checkbox)
+
 ## Checked
 
 Note that the `isChecked` property in this example is set to `true` and clicking
@@ -123,7 +160,10 @@ now be controlled and removed by the parent component in order to remove this st
 
 <Canvas>
   <DSProvider>
-    <Checkbox labelText="Click or tab to the Checkbox to see its focus state" />
+    <Checkbox
+      id="focused"
+      labelText="Click or tab to the Checkbox to see its focus state"
+    />
   </DSProvider>
 </Canvas>
 
@@ -132,8 +172,9 @@ now be controlled and removed by the parent component in order to remove this st
 <Canvas>
   <DSProvider>
     <HStack>
-      <Checkbox isInvalid labelText="I am in an error state" />
+      <Checkbox id="invalid" isInvalid labelText="I am in an error state" />
       <Checkbox
+        id="invalid-checked"
         isInvalid
         isChecked
         labelText="I am checked in an error state"
@@ -147,8 +188,13 @@ now be controlled and removed by the parent component in order to remove this st
 <Canvas>
   <DSProvider>
     <HStack>
-      <Checkbox isDisabled labelText="I am disabled" />
-      <Checkbox isDisabled isChecked labelText="I am checked and disabled" />
+      <Checkbox id="disabled" isDisabled labelText="I am disabled" />
+      <Checkbox
+        id="disabled-checked"
+        isDisabled
+        isChecked
+        labelText="I am checked and disabled"
+      />
     </HStack>
   </DSProvider>
 </Canvas>
@@ -158,6 +204,7 @@ now be controlled and removed by the parent component in order to remove this st
 <Canvas>
   <DSProvider>
     <Checkbox
+      id="helpertext"
       name="testHelperText"
       labelText="I have helper text"
       helperText="I am the helper text for this Checkbox"
@@ -170,10 +217,11 @@ now be controlled and removed by the parent component in order to remove this st
 <Canvas>
   <DSProvider>
     <Checkbox
-      name="testinvalidText"
-      labelText="I have error text"
+      id="invalid-text"
       invalidText="I am the error text for this Checkbox"
       isInvalid
+      name="testinvalidText"
+      labelText="I have error text"
     />
   </DSProvider>
 </Canvas>
@@ -186,6 +234,10 @@ usage.
 
 <Canvas>
   <DSProvider>
-    <Checkbox labelText={<span>Arts</span>} name="jsxElementLabel" />
+    <Checkbox
+      id="jsx-label"
+      labelText={<span>Arts</span>}
+      name="jsxElementLabel"
+    />
   </DSProvider>
 </Canvas>

package/src/components/Checkbox/Checkbox.test.tsx

@@ -6,7 +6,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Checkbox from "./Checkbox";
-import * as generateUUID from "../../helpers/generateUUID";
 
 describe("Checkbox Accessibility", () => {
   it("passes axe accessibility test with string label", async () => {
@@ -41,11 +40,9 @@ describe("Checkbox Accessibility", () => {
 
 describe("Checkbox", () => {
   let changeHandler;
-  let generateUUIDSpy;
 
   beforeEach(() => {
     changeHandler = jest.fn();
-    generateUUIDSpy = jest.spyOn(generateUUID, "default");
   });
 
   it("Renders with a checkbox input and label", () => {
@@ -110,12 +107,6 @@ describe("Checkbox", () => {
     expect(screen.getByRole("checkbox")).toHaveAttribute("id", "inputID");
   });
 
-  it("Calls the UUID generation function if no id prop value is passed", () => {
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
-    render(<Checkbox labelText="Test Label" />);
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
-  });
-
   it("Sets the 'checked' attribute", () => {
     render(
       <Checkbox
@@ -218,6 +209,7 @@ describe("Checkbox", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Checkbox
+        id="checkbox"
         value="arts"
         labelText={
           <Flex>
@@ -235,6 +227,16 @@ describe("Checkbox", () => {
     );
   });
 
+  it("Logs a warning when there is no `id` passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    // @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.
+    render(<Checkbox labelText="checkbox" />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Checkbox: This component's required `id` prop was not passed."
+    );
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const primary = renderer
       .create(<Checkbox id="inputID" labelText="Test Label" />)
@@ -284,6 +286,25 @@ describe("Checkbox", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Checkbox
+          id="checkbox-chakra"
+          labelText="Test Label"
+          p="s"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Checkbox
+          id="checkbox-props"
+          labelText="Test Label"
+          data-testid="testid"
+        />
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
@@ -292,5 +313,7 @@ describe("Checkbox", () => {
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
     expect(withJSXLabel).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });