@nypl/design-system-react-components 0.25.2 → 0.25.6

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/__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={{
@@ -69,7 +68,7 @@ import Radio from "../Radio/Radio";
       </RadioGroup>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="RadioGroup" />
 

package/src/components/RadioGroup/RadioGroup.tsx

@@ -11,6 +11,7 @@ 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. */
@@ -19,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
@@ -117,30 +118,24 @@ 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>
@@ -151,7 +146,7 @@ const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
             </HelperErrorText>
           </Box>
         )}
-      </Box>
+      </Fieldset>
     );
   }
 );

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

@@ -5,17 +5,13 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
   className=" css-0"
   id="radio-group-column"
 >
-  <legend
-    className=""
-  >
-    <span>
-      column
-    </span>
-    <span
+  <legend>
+    column
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -125,17 +121,13 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
   className=" css-0"
   id="radio-group-row"
 >
-  <legend
-    className=""
-  >
-    <span>
-      row
-    </span>
-    <span
+  <legend>
+    row
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -245,17 +237,13 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
   className=" css-0"
   id="radio-group-noLabel"
 >
-  <legend
-    className="sr-only"
-  >
-    <span>
-      no label
-    </span>
-    <span
+  <legend>
+    no label
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label="no label"
@@ -365,17 +353,13 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
   className=" css-0"
   id="radio-group-helperText"
 >
-  <legend
-    className=""
-  >
-    <span>
-      helperText
-    </span>
-    <span
+  <legend>
+    helperText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -498,17 +482,13 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
   className=" css-0"
   id="radio-group-invalidText"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalidText
-    </span>
-    <span
+  <legend>
+    invalidText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -618,12 +598,8 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
   className=" css-0"
   id="radio-group-optReq"
 >
-  <legend
-    className=""
-  >
-    <span>
-      no optional or required label
-    </span>
+  <legend>
+    no optional or required label
   </legend>
   <div
     aria-label={null}
@@ -733,17 +709,13 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
   className=" css-0"
   id="radio-group-required"
 >
-  <legend
-    className=""
-  >
-    <span>
-      required
-    </span>
-    <span
+  <legend>
+    required
+    <div
       className="css-0"
     >
-      Required
-    </span>
+      Optional
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -855,17 +827,13 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   className=" css-0"
   id="radio-group-invalid"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalid
-    </span>
-    <span
+  <legend>
+    invalid
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -874,6 +842,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -924,6 +893,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -981,17 +951,13 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   className=" css-0"
   id="radio-group-disabled"
 >
-  <legend
-    className=""
-  >
-    <span>
-      disabled
-    </span>
-    <span
+  <legend>
+    disabled
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -1000,6 +966,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}
@@ -1050,6 +1017,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}