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

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,12 +24,10 @@ 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;
@@ -52,71 +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 (!showLabel) {
-    if (typeof labelText !== "string") {
+    if (!id) {
       console.warn(
-        "NYPL Reservoir Radio: `labelText` must be a string when `showLabel` is false."
+        "NYPL Reservoir Radio: This component's required `id` prop was not passed."
       );
     }
-    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}
-        alignItems="flex-start"
-        __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

@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -285,7 +285,7 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
   />
   <span
     aria-hidden={true}
-    className="css-ssalds"
+    className="css-14wybg9"
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
@@ -312,3 +312,100 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
   </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>
+`;