@nypl/design-system-react-components 0.25.11 → 0.26.0

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

@@ -1,16 +1,32 @@
+import { Flex, Spacer } from "@chakra-ui/react";
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import * as generateUUID from "../../helpers/generateUUID";
 import Radio from "./Radio";
 
 describe("Radio Accessibility", () => {
-  it("passes axe accessibility", async () => {
+  it("passes axe accessibility test with string label", async () => {
     const { container } = render(<Radio id="inputID" labelText="Test Label" />);
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test with jsx label", async () => {
+    const { container } = render(
+      <Radio
+        id="jsxLabel"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Radio Button", () => {
@@ -76,13 +92,6 @@ describe("Radio Button", () => {
     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
@@ -147,6 +156,40 @@ describe("Radio Button", () => {
     expect(screen.queryByText("There is an error!")).not.toBeInTheDocument();
   });
 
+  it("logs a warning if `labelText` is not a string and `showLabel` is false", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Radio
+        id="radio"
+        value="arts"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        showLabel={false}
+      />
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false."
+    );
+  });
+
+  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.
+      <Radio labelText="Arts" />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Radio: This component's required `id` prop was not passed."
+    );
+  });
+
   it("renders the UI snapshot correctly", () => {
     const primary = renderer
       .create(<Radio id="inputID" labelText="Test Label" />)
@@ -163,11 +206,42 @@ describe("Radio Button", () => {
     const isDisabled = renderer
       .create(<Radio id="radio-disabled" labelText="Test Label" isDisabled />)
       .toJSON();
+    const withJSXLabel = renderer
+      .create(
+        <Radio
+          id="jsxLabel"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Radio
+          id="chakra"
+          labelText="Test Label"
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Radio id="props" labelText="Test Label" data-testid="props" />)
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
+    expect(withJSXLabel).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Radio/Radio.tsx

@@ -1,22 +1,20 @@
-import * as React from "react";
 import {
-  Box,
+  chakra,
   Radio as ChakraRadio,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface RadioProps {
   /** Additional class name. */
   className?: string;
   /** Optional string to populate the HelperErrorText for the standard state. */
   helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
+  id: string;
   /** Optional string to populate the HelperErrorText for the error state
    * when `isInvalid` is true.
    */
@@ -26,19 +24,17 @@ export interface RadioProps {
    * Learn more about controlled and uncontrolled form fields: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
   isChecked?: boolean;
   /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-   * This also makes the text italic and color scheme gray.
-   */
+   * This also makes the text italic and color scheme gray. */
   isDisabled?: boolean;
   /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-   * the color theme "NYPL error" red for the button and text.
-   */
+   * the color theme "NYPL error" red for the button and text. */
   isInvalid?: boolean;
   /** Adds the 'required' attribute to the input when true. */
   isRequired?: boolean;
   /** The radio button's label. This will serve as the text content for the
    * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
    * is false. */
-  labelText: string;
+  labelText: string | JSX.Element;
   /** Used to reference the input element in forms. */
   name?: string;
   /** Should be passed along with `isChecked` for controlled components. */
@@ -52,65 +48,78 @@ export interface RadioProps {
   value?: string;
 }
 
-const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
-  const {
-    className,
-    helperText,
-    id = generateUUID(),
-    invalidText,
-    isChecked,
-    isDisabled = false,
-    isInvalid = false,
-    isRequired = false,
-    labelText,
-    name,
-    onChange,
-    showHelperInvalidText = true,
-    showLabel = true,
-    value,
-  } = props;
-  const styles = useMultiStyleConfig("Radio", {});
-  const footnote = isInvalid ? invalidText : helperText;
-  const attributes = {};
+export const Radio = chakra(
+  React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
+    const {
+      className,
+      helperText,
+      id,
+      invalidText,
+      isChecked,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      labelText,
+      name,
+      onChange,
+      showHelperInvalidText = true,
+      showLabel = true,
+      value,
+      ...rest
+    } = props;
+    const styles = useMultiStyleConfig("Radio", {});
+    const footnote = isInvalid ? invalidText : helperText;
+    const attributes = {};
+
+    if (!id) {
+      console.warn(
+        "NYPL Reservoir Radio: This component's required `id` prop was not passed."
+      );
+    }
 
-  if (!showLabel) {
-    attributes["aria-label"] =
-      labelText && footnote ? `${labelText} - ${footnote}` : labelText;
-  } else {
-    if (footnote) {
+    if (!showLabel) {
+      if (typeof labelText !== "string") {
+        console.warn(
+          "NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false."
+        );
+      }
+      attributes["aria-label"] =
+        labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+    } else if (footnote) {
       attributes["aria-describedby"] = `${id}-helperText`;
     }
-  }
 
-  return (
-    <>
-      <ChakraRadio
-        className={className}
-        id={id}
-        isChecked={isChecked}
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isRequired={isRequired}
-        name={name}
-        onChange={onChange}
-        value={value}
-        ref={ref}
-        __css={styles}
-        {...attributes}
-      >
-        {showLabel && labelText}
-      </ChakraRadio>
-      {footnote && showHelperInvalidText && (
-        <Box __css={styles.helper} aria-disabled={isDisabled}>
+    return (
+      <>
+        <ChakraRadio
+          className={className}
+          id={id}
+          isChecked={isChecked}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          name={name}
+          onChange={onChange}
+          value={value}
+          ref={ref}
+          alignItems="flex-start"
+          __css={styles}
+          {...attributes}
+          {...rest}
+        >
+          {showLabel && labelText}
+        </ChakraRadio>
+        {footnote && showHelperInvalidText && (
           <HelperErrorText
+            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
           />
-        </Box>
-      )}
-    </>
-  );
-});
+        )}
+      </>
+    );
+  })
+);
 
 export default Radio;

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

@@ -2,7 +2,7 @@
 
 exports[`Radio Button renders the UI snapshot correctly 1`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
 >
   <input
     checked={false}
@@ -32,7 +32,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
   />
   <span
     aria-hidden={true}
-    className="css-ssalds"
+    className="css-14wybg9"
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
@@ -50,7 +50,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 2`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
   data-checked=""
 >
   <input
@@ -81,7 +81,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
   />
   <span
     aria-hidden={true}
-    className="css-ssalds"
+    className="css-14wybg9"
     data-checked=""
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
@@ -101,7 +101,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 3`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
 >
   <input
     aria-required={true}
@@ -132,7 +132,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
   />
   <span
     aria-hidden={true}
-    className="css-ssalds"
+    className="css-14wybg9"
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
@@ -150,7 +150,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 4`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
   data-invalid=""
 >
   <input
@@ -182,7 +182,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
   />
   <span
     aria-hidden={true}
-    className="css-ssalds"
+    className="css-14wybg9"
     data-invalid=""
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
@@ -202,7 +202,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
 
 exports[`Radio Button renders the UI snapshot correctly 5`] = `
 <label
-  className="chakra-radio css-1pw4d56"
+  className="chakra-radio css-13p0l12"
   data-disabled=""
 >
   <input
@@ -234,7 +234,7 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
   />
   <span
     aria-hidden={true}
-    className="css-ssalds"
+    className="css-14wybg9"
     data-disabled=""
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
@@ -251,3 +251,161 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
   </span>
 </label>
 `;
+
+exports[`Radio Button renders the UI snapshot correctly 6`] = `
+<label
+  className="chakra-radio css-13p0l12"
+>
+  <input
+    checked={false}
+    className="chakra-radio__input"
+    disabled={false}
+    id="jsxLabel"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    required={false}
+    style={
+      Object {
+        "border": "0px",
+        "clip": "rect(0px, 0px, 0px, 0px)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": "0px",
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+    type="radio"
+    value="arts"
+  />
+  <span
+    aria-hidden={true}
+    className="css-14wybg9"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  />
+  <span
+    className="chakra-radio__label css-1y8kf23"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="css-k008qs"
+    >
+      <span>
+        Arts
+      </span>
+      <div
+        className="css-17xejub"
+      />
+      <span>
+        4
+      </span>
+    </div>
+  </span>
+</label>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 7`] = `
+<label
+  className="chakra-radio css-13p0l12"
+>
+  <input
+    checked={false}
+    className="chakra-radio__input"
+    disabled={false}
+    id="chakra"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    required={false}
+    style={
+      Object {
+        "border": "0px",
+        "clip": "rect(0px, 0px, 0px, 0px)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": "0px",
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+    type="radio"
+  />
+  <span
+    aria-hidden={true}
+    className="css-1dwi2jm"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  />
+  <span
+    className="chakra-radio__label css-1y8kf23"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    Test Label
+  </span>
+</label>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 8`] = `
+<label
+  className="chakra-radio css-13p0l12"
+>
+  <input
+    checked={false}
+    className="chakra-radio__input"
+    disabled={false}
+    id="props"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    required={false}
+    style={
+      Object {
+        "border": "0px",
+        "clip": "rect(0px, 0px, 0px, 0px)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": "0px",
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+    type="radio"
+  />
+  <span
+    aria-hidden={true}
+    className="css-14wybg9"
+    data-testid="props"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  />
+  <span
+    className="chakra-radio__label css-1y8kf23"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    Test Label
+  </span>
+</label>
+`;