@nypl/design-system-react-components 0.28.0 → 1.0.2

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

@@ -2,7 +2,8 @@
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -31,7 +32,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -56,7 +58,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
 >
   <input
     aria-label="Custom Input Label"
@@ -76,7 +79,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -118,7 +122,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -131,6 +136,7 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
     </span>
   </label>
   <input
+    aria-describedby="myTextInput-helperText"
     aria-invalid={true}
     aria-required={true}
     className="chakra-input css-0"
@@ -160,7 +166,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextInput-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -189,7 +196,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 7`] = `
 <div
-  className="css-kle7zy"
+  className="css-1y4kn3e"
+  id="chakra-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -214,8 +222,9 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 7`] = `
 
 exports[`UI Snapshots renders the text input UI snapshot correctly 8`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
   data-testid="props"
+  id="props-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -241,7 +250,8 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 8`] = `
 
 exports[`UI Snapshots renders the textarea UI snapshot correctly 1`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="myTextarea-wrapper"
 >
   <label
     className="css-1xdhyk6"

package/src/components/Toggle/Toggle.stories.mdx

@@ -45,7 +45,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 

package/src/components/Toggle/Toggle.tsx

@@ -7,10 +7,9 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
-import { AriaAttributes } from "../../utils/interfaces";
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { getAriaAttrs } from "../../utils/utils";
 
 export type ToggleSizes = "default" | "small";
 export interface ToggleProps {
@@ -71,12 +70,16 @@ export const Toggle = chakra(
       size = "default",
       ...rest
     } = props;
-    const footnote = isInvalid ? invalidText : helperText;
-    const ariaAttributes: AriaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", { isDisabled, size });
     const switchStyles = useStyleConfig("Switch", { size });
-    ariaAttributes["aria-label"] =
-      labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes = getAriaAttrs({
+      footnote,
+      id,
+      labelText,
+      name: "Toggle",
+      showLabel: true,
+    });
 
     if (!id) {
       console.warn(
@@ -85,14 +88,21 @@ export const Toggle = chakra(
     }
 
     return (
-      <>
-        <Box __css={styles} {...rest}>
+      <ComponentWrapper
+        helperText={helperText}
+        helperTextStyles={styles.helperErrorText}
+        id={id}
+        invalidText={invalidText}
+        isInvalid={isInvalid}
+        {...rest}
+      >
+        <Box __css={styles}>
           <Switch
             id={id}
-            name={name || "default"}
             isDisabled={isDisabled}
             isInvalid={isInvalid}
             isRequired={isRequired}
+            name={name || "default"}
             ref={ref}
             size={size === "default" ? "lg" : "sm"}
             lineHeight="1.5"
@@ -110,15 +120,7 @@ export const Toggle = chakra(
             {labelText}
           </Switch>
         </Box>
-        {footnote && (
-          <HelperErrorText
-            id={`${id}-helperText`}
-            isInvalid={isInvalid}
-            text={footnote}
-            __css={styles.helperErrorText}
-          />
-        )}
-      </>
+      </ComponentWrapper>
     );
   })
 );