@nypl/design-system-react-components 0.25.0 → 0.25.4

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

@@ -0,0 +1,357 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="linearBasic"
+    id="linearBasic-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearBasic"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="linearBasic-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label={null}
+      aria-labelledby="circularBasic-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularBasic"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+      <div
+        className="css-f1j64i"
+      >
+        50
+        %
+      </div>
+    </div>
+    <label
+      className="css-0"
+      htmlFor="circularBasic"
+      id="circularBasic-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearNoLabel"
+    >
+      <div
+        aria-label="Linear"
+        aria-labelledby={null}
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label="Circular"
+      aria-labelledby={null}
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularNoLabel"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="linearIndeterminate"
+    id="linearIndeterminate-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearIndeterminate"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="linearIndeterminate-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        className="css-1demtxk"
+        data-indeterminate=""
+        role="progressbar"
+        style={
+          Object {
+            "width": "0%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label={null}
+      aria-labelledby="circularIndeterminate-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      className="chakra-progress css-120wkjd"
+      data-indeterminate=""
+      id="circularIndeterminate"
+      role="progressbar"
+    >
+      <svg
+        className="css-jf70f3"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-tueqm1"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+      </svg>
+    </div>
+    <label
+      className="css-0"
+      htmlFor="circularIndeterminate"
+      id="circularIndeterminate-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="linearDarkMode"
+    id="linearDarkMode-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearDarkMode"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="linearDarkMode-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label={null}
+      aria-labelledby="circularDarkMode-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularDarkMode"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+      <div
+        className="css-f1j64i"
+      >
+        50
+        %
+      </div>
+    </div>
+    <label
+      className="css-0"
+      htmlFor="circularDarkMode"
+      id="circularDarkMode-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;

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

@@ -88,7 +88,7 @@ describe("Radio Button", () => {
       <Radio
         id="inputID-attributes"
         labelText="onChange test"
-        showLabel={true}
+        showLabel
         isChecked
       />
     );
@@ -100,7 +100,7 @@ describe("Radio Button", () => {
       <Radio
         id="inputID-attributes"
         labelText="onChange test"
-        showLabel={true}
+        showLabel
         isDisabled
       />
     );
@@ -112,7 +112,7 @@ describe("Radio Button", () => {
       <Radio
         id="inputID-attributes"
         labelText="onChange test"
-        showLabel={true}
+        showLabel
         isRequired
       />
     );
@@ -124,11 +124,27 @@ describe("Radio Button", () => {
       <Radio
         id="inputID-attributes"
         labelText="onChange test"
-        showLabel={true}
+        showLabel
+        invalidText="There is an error!"
         isInvalid
       />
     );
     expect(screen.getByRole("radio")).toHaveAttribute("aria-invalid");
+    expect(screen.getByText("There is an error!")).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'showHelperInvalidText' is false", () => {
+    render(
+      <Radio
+        id="inputID-attributes"
+        labelText="onChange test"
+        showLabel
+        showHelperInvalidText={false}
+        isInvalid
+      />
+    );
+    expect(screen.getByRole("radio")).toHaveAttribute("aria-invalid");
+    expect(screen.queryByText("There is an error!")).not.toBeInTheDocument();
   });
 
   it("renders the UI snapshot correctly", () => {

package/src/components/Radio/Radio.tsx

@@ -41,6 +41,8 @@ export interface RadioProps {
   name?: string;
   /** Should be passed along with `isChecked` for controlled components. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Offers the ability to show the radio's label onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
@@ -51,9 +53,9 @@ export interface RadioProps {
 const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
   const {
     className,
-    invalidText,
     helperText,
     id = generateUUID(),
+    invalidText,
     isChecked,
     isDisabled = false,
     isInvalid = false,
@@ -61,6 +63,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
     labelText,
     name,
     onChange,
+    showHelperInvalidText = true,
     showLabel = true,
     value,
   } = props;
@@ -95,9 +98,9 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
       >
         {showLabel && labelText}
       </ChakraRadio>
-      {footnote && showLabel && (
+      {footnote && showHelperInvalidText && (
         <Box __css={styles.helper} aria-disabled={isDisabled}>
-          <HelperErrorText isError={isInvalid} id={`${id}-helperText`}>
+          <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
             {footnote}
           </HelperErrorText>
         </Box>

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

@@ -51,6 +51,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
 exports[`Radio Button renders the UI snapshot correctly 2`] = `
 <label
   className="chakra-radio css-78joka"
+  data-checked=""
 >
   <input
     checked={true}
@@ -150,6 +151,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
 exports[`Radio Button renders the UI snapshot correctly 4`] = `
 <label
   className="chakra-radio css-78joka"
+  data-invalid=""
 >
   <input
     aria-invalid={true}
@@ -201,6 +203,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
 exports[`Radio Button renders the UI snapshot correctly 5`] = `
 <label
   className="chakra-radio css-78joka"
+  data-disabled=""
 >
   <input
     aria-disabled={true}

package/src/components/RadioGroup/RadioGroup.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -39,11 +38,11 @@ import Radio from "../Radio/Radio";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.0`   |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.3`   |
 
 <Description of={RadioGroup} />
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="RadioGroup"
     args={{
@@ -53,7 +52,7 @@ import Radio from "../Radio/Radio";
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
-      labelText: "Standar Radio Group",
+      labelText: "Standard Radio Group",
       layout: RadioGroupLayoutTypes.Column,
       name: "radio-story",
       optReqFlag: true,
@@ -69,7 +68,7 @@ import Radio from "../Radio/Radio";
       </RadioGroup>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="RadioGroup" />
 

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -179,7 +179,12 @@ describe("Radio Button", () => {
 
   it("sets the error state for all its Radio children", () => {
     render(
-      <RadioGroup labelText="Test Label" name="test9" isInvalid>
+      <RadioGroup
+        labelText="Test Label"
+        name="test9"
+        isInvalid
+        invalidText="There is an error :("
+      >
         <Radio value="2" labelText="Radio 2" />
         <Radio value="3" labelText="Radio 3" />
         <Radio value="4" labelText="Radio 4" />
@@ -191,6 +196,24 @@ describe("Radio Button", () => {
     expect(radios[0]).toHaveAttribute("aria-invalid");
     expect(radios[1]).toHaveAttribute("aria-invalid");
     expect(radios[2]).toHaveAttribute("aria-invalid");
+    expect(screen.getByText("There is an error :(")).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'showHelperInvalidText' is false", () => {
+    render(
+      <RadioGroup
+        labelText="Test Label"
+        name="test10"
+        isInvalid
+        invalidText="There is an error :("
+        showHelperInvalidText={false}
+      >
+        <Radio value="2" labelText="Radio 2" />
+        <Radio value="3" labelText="Radio 3" />
+        <Radio value="4" labelText="Radio 4" />
+      </RadioGroup>
+    );
+    expect(screen.queryByText("There is an error :(")).not.toBeInTheDocument();
   });
 
   it("renders the UI snapshot correctly", () => {

package/src/components/RadioGroup/RadioGroup.tsx

@@ -11,6 +11,8 @@ import generateUUID from "../../helpers/generateUUID";
 import { spacing } from "../../theme/foundations/spacing";
 import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
 import Radio from "../Radio/Radio";
+import Fieldset from "../Fieldset/Fieldset";
+
 export interface RadioGroupProps {
   /** Any child node passed to the component. */
   children: React.ReactNode;
@@ -18,12 +20,12 @@ export interface RadioGroupProps {
   className?: string;
   /** Populates the initial value of the input */
   defaultValue?: string;
-  /** Optional string to populate the HelperErrorText for error state */
-  invalidText?: string;
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  /** Optional string to populate the HelperErrorText for error state */
+  invalidText?: string;
   /** Adds the 'disabled' prop to the input when true. */
   isDisabled?: boolean;
   /** Adds the 'aria-invalid' attribute to the input and
@@ -42,6 +44,8 @@ export interface RadioGroupProps {
   onChange?: (value: string) => void;
   /** Whether or not to display "Required"/"Optional" in the label text. */
   optReqFlag?: boolean;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Offers the ability to show the group's legend onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
@@ -58,9 +62,9 @@ const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
       children,
       className = "",
       defaultValue,
-      invalidText,
       helperText,
       id = generateUUID(),
+      invalidText,
       isDisabled = false,
       isInvalid = false,
       isRequired = false,
@@ -69,6 +73,7 @@ const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
       name,
       onChange = onChangeDefault,
       optReqFlag = true,
+      showHelperInvalidText = true,
       showLabel = true,
     } = props;
     const footnote = isInvalid ? invalidText : helperText;
@@ -101,18 +106,9 @@ const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
       const chakraRadioProps = getRadioProps({
         value: child.props.value,
       } as any);
-      const newProps = { key: i };
 
       if (child !== undefined && child !== null) {
-        if (isDisabled) {
-          newProps["isDisabled"] = true;
-        }
-        if (isInvalid) {
-          newProps["isInvalid"] = true;
-        }
-        if (isRequired) {
-          newProps["isRequired"] = true;
-        }
+        const newProps = { key: i, isDisabled, isInvalid, isRequired };
         if (child.props.value === defaultValue) {
           newProps["checked"] = true;
         }
@@ -122,39 +118,35 @@ const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
       }
     });
 
-    // Get the Chakra-based styles for all the custom elements in this component.
-    const styles = useMultiStyleConfig("CustomRadioGroup", {});
+    // Get the Chakra-based styles for the custom elements in this component.
+    const styles = useMultiStyleConfig("RadioGroup", {});
 
     return (
-      <Box
-        as="fieldset"
+      <Fieldset
         id={`radio-group-${id}`}
         className={className}
-        __css={styles}
+        isLegendHidden={!showLabel}
+        legendText={labelText}
+        optReqFlag={optReqFlag}
       >
-        <legend className={showLabel ? "" : "sr-only"}>
-          <span>{labelText}</span>
-          {optReqFlag && (
-            <Box as="span" __css={styles.required}>
-              {isRequired ? "Required" : "Optional"}
-            </Box>
-          )}
-        </legend>
         <Stack
           direction={[layout]}
           spacing={spacingProp}
           ref={ref}
           aria-label={!showLabel ? labelText : null}
           {...radioGroupProps}
+          sx={styles.stack}
         >
           {newChildren}
         </Stack>
-        {footnote && (
+        {footnote && showHelperInvalidText && (
           <Box __css={styles.helper}>
-            <HelperErrorText isError={isInvalid}>{footnote}</HelperErrorText>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperErrorText`}>
+              {footnote}
+            </HelperErrorText>
           </Box>
         )}
-      </Box>
+      </Fieldset>
     );
   }
 );