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

package/src/components/SearchBar/SearchBar.stories.mdx

@@ -164,8 +164,8 @@ screenreaders to pick up this entire search form.
 
 Resources:
 
-- [Reservoir Select](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-select--select-with-controls)
-- [Reservoir TextInput](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-textinput--text-input-with-controls)
+- [Reservoir Select](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-select--select-with-controls)
+- [Reservoir TextInput](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-textinput--text-input-with-controls)
 - [a11ymatters Accessible Search Form](https://www.a11ymatters.com/pattern/accessible-search/)
 - [MDN ARIA: search role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role)
 
@@ -310,7 +310,7 @@ const helperText = "";
 While the Design System does not implement an `Autosuggest` or `Autocomplete`
 component, it does show a pattern for using the `react-autosuggest` package.
 In this example, we're using the `react-autosuggest` example found in the
-[Basic Autosuggest story](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/autosuggest--autosuggest-library)
+[Basic Autosuggest story](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/development-guide-autosuggest--autosuggest-library)
 as the main component inside the `SearchBar` component.
 
 In order to render this custom input element in the `SearchBar` component, pass

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

@@ -3,6 +3,7 @@
 exports[`SearchBar renders the UI snapshot correctly 1`] = `
 <div
   className="css-1xdhyk6"
+  id="basic-wrapper"
 >
   <form
     aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
@@ -12,7 +13,8 @@ exports[`SearchBar renders the UI snapshot correctly 1`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-basic-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -89,6 +91,7 @@ exports[`SearchBar renders the UI snapshot correctly 1`] = `
 exports[`SearchBar renders the UI snapshot correctly 2`] = `
 <div
   className="css-1xdhyk6"
+  id="withSelect-wrapper"
 >
   <form
     aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
@@ -98,7 +101,8 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-select-withSelect-wrapper"
     >
       <div
         className="css-0"
@@ -217,7 +221,8 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
       
     </div>
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-withSelect-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -294,6 +299,7 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
 exports[`SearchBar renders the UI snapshot correctly 3`] = `
 <div
   className="css-1xdhyk6"
+  id="withoutHelperText-wrapper"
 >
   <form
     aria-label="SearchBar label"
@@ -303,7 +309,8 @@ exports[`SearchBar renders the UI snapshot correctly 3`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-withoutHelperText-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -368,6 +375,7 @@ exports[`SearchBar renders the UI snapshot correctly 3`] = `
 exports[`SearchBar renders the UI snapshot correctly 4`] = `
 <div
   className="css-1xdhyk6"
+  id="invalidState-wrapper"
 >
   <form
     aria-label="SearchBar label"
@@ -377,7 +385,8 @@ exports[`SearchBar renders the UI snapshot correctly 4`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-invalidState-wrapper"
     >
       <input
         aria-invalid={true}
@@ -442,6 +451,7 @@ exports[`SearchBar renders the UI snapshot correctly 4`] = `
 exports[`SearchBar renders the UI snapshot correctly 5`] = `
 <div
   className="css-1xdhyk6"
+  id="disabledState-wrapper"
 >
   <form
     aria-label="SearchBar label"
@@ -451,7 +461,8 @@ exports[`SearchBar renders the UI snapshot correctly 5`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-disabledState-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -517,6 +528,7 @@ exports[`SearchBar renders the UI snapshot correctly 5`] = `
 exports[`SearchBar renders the UI snapshot correctly 6`] = `
 <div
   className="css-1xdhyk6"
+  id="requiredState-wrapper"
 >
   <form
     aria-label="SearchBar label"
@@ -526,7 +538,8 @@ exports[`SearchBar renders the UI snapshot correctly 6`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-requiredState-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -593,6 +606,7 @@ exports[`SearchBar renders the UI snapshot correctly 6`] = `
 exports[`SearchBar renders the UI snapshot correctly 7`] = `
 <div
   className="css-1xdhyk6"
+  id="noBrandButtonType-wrapper"
 >
   <form
     aria-label="SearchBar label"
@@ -602,7 +616,8 @@ exports[`SearchBar renders the UI snapshot correctly 7`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-noBrandButtonType-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -669,6 +684,7 @@ exports[`SearchBar renders the UI snapshot correctly 7`] = `
 exports[`SearchBar renders the UI snapshot correctly 8`] = `
 <div
   className="css-1xdhyk6"
+  id="withHeading-wrapper"
 >
   <h2
     className="chakra-heading css-1xdhyk6"
@@ -730,6 +746,7 @@ exports[`SearchBar renders the UI snapshot correctly 8`] = `
 exports[`SearchBar renders the UI snapshot correctly 9`] = `
 <div
   className="css-1xdhyk6"
+  id="withDescription-wrapper"
 >
   <p
     className="chakra-text css-1xdhyk6"
@@ -790,6 +807,7 @@ exports[`SearchBar renders the UI snapshot correctly 9`] = `
 exports[`SearchBar renders the UI snapshot correctly 10`] = `
 <div
   className="css-1xdhyk6"
+  id="withHeadingAndDescription-wrapper"
 >
   <h2
     className="chakra-heading css-1xdhyk6"
@@ -856,6 +874,7 @@ exports[`SearchBar renders the UI snapshot correctly 10`] = `
 exports[`SearchBar renders the UI snapshot correctly 11`] = `
 <div
   className="css-1xdhyk6"
+  id="chakra-wrapper"
 >
   <form
     aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
@@ -865,7 +884,8 @@ exports[`SearchBar renders the UI snapshot correctly 11`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-chakra-wrapper"
     >
       <input
         aria-label="Item Search"
@@ -943,6 +963,7 @@ exports[`SearchBar renders the UI snapshot correctly 12`] = `
 <div
   className="css-1xdhyk6"
   data-testid="props"
+  id="props-wrapper"
 >
   <form
     aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
@@ -952,7 +973,8 @@ exports[`SearchBar renders the UI snapshot correctly 12`] = `
     role="search"
   >
     <div
-      className="css-1xdhyk6"
+      className="css-1u8qly9"
+      id="searchbar-textinput-props-wrapper"
     >
       <input
         aria-label="Item Search"

package/src/components/Select/Select.stories.mdx

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

package/src/components/Select/Select.tsx

@@ -6,12 +6,11 @@ import {
 } from "@chakra-ui/react";
 import React, { useEffect, useState, useRef } from "react";
 
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import Icon from "../Icons/Icon";
 import Label from "../Label/Label";
-import { AriaAttributes } from "../../utils/interfaces";
+import { getAriaAttrs } from "../../utils/utils";
 
 export type SelectTypes = "default" | "searchbar";
 export type LabelPositions = "default" | "inline";
@@ -89,7 +88,6 @@ export const Select = chakra(
         value = "",
         ...rest
       } = props;
-      const ariaAttributes: AriaAttributes = {};
       const [labelWidth, setLabelWidth] = useState<number>(0);
       const labelRef = useRef<HTMLDivElement>(null);
       const styles = useMultiStyleConfig("CustomSelect", {
@@ -100,6 +98,13 @@ export const Select = chakra(
         ? invalidText
         : "There is an error related to this field.";
       const footnote = isInvalid ? finalInvalidText : helperText;
+      const ariaAttributes = getAriaAttrs({
+        footnote,
+        id,
+        labelText,
+        name: "Select",
+        showLabel,
+      });
       // To control the `Select` component, both `onChange` and `value`
       // must be passed.
       const controlledProps = onChange ? { onChange, value } : {};
@@ -108,13 +113,6 @@ export const Select = chakra(
       // when the labelPosition is inline (equivalent to --nypl-space-xs).
       const labelSelectGap = 8;
 
-      if (!showLabel) {
-        ariaAttributes["aria-label"] =
-          labelText && footnote ? `${labelText} - ${footnote}` : labelText;
-      } else if (helperText) {
-        ariaAttributes["aria-describedby"] = `${id}-helperText`;
-      }
-
       if (!id) {
         console.warn(
           "NYPL Reservoir Select: This component's required `id` prop was not passed."
@@ -133,7 +131,19 @@ export const Select = chakra(
       }, [labelPosition]);
 
       return (
-        <Box className={className} __css={styles} {...rest}>
+        <ComponentWrapper
+          className={className}
+          helperText={helperText}
+          helperTextStyles={{
+            marginLeft: { sm: "auto", md: `${labelWidth}px` },
+          }}
+          id={id}
+          invalidText={finalInvalidText}
+          isInvalid={isInvalid}
+          showHelperInvalidText={showHelperInvalidText}
+          __css={styles}
+          {...rest}
+        >
           <Box __css={labelPosition === "inline" && styles.inline}>
             {showLabel && (
               <Box ref={labelRef}>
@@ -164,15 +174,7 @@ export const Select = chakra(
               {children}
             </ChakraSelect>
           </Box>
-          {footnote && showHelperInvalidText && (
-            <HelperErrorText
-              id={`${id}-helperText`}
-              isInvalid={isInvalid}
-              text={footnote}
-              ml={{ sm: "auto", md: `${labelWidth}px` }}
-            />
-          )}
-        </Box>
+        </ComponentWrapper>
       );
     }
   )

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

@@ -2,7 +2,8 @@
 
 exports[`Select Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -96,7 +97,8 @@ exports[`Select Renders the UI snapshot correctly 1`] = `
 
 exports[`Select Renders the UI snapshot correctly 2`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -191,7 +193,8 @@ exports[`Select Renders the UI snapshot correctly 2`] = `
 
 exports[`Select Renders the UI snapshot correctly 3`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -211,6 +214,7 @@ exports[`Select Renders the UI snapshot correctly 3`] = `
       className="chakra-select__wrapper css-42b2qy"
     >
       <select
+        aria-describedby="select-helperText"
         aria-invalid={true}
         className="chakra-select css-1ik61og"
         disabled={false}
@@ -284,7 +288,7 @@ exports[`Select Renders the UI snapshot correctly 3`] = `
   <div
     aria-atomic={true}
     aria-live="polite"
-    className="css-1mpebub"
+    className="css-1sax8hu"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Tom doesn't count as a sibling :(.",
@@ -298,7 +302,8 @@ exports[`Select Renders the UI snapshot correctly 3`] = `
 
 exports[`Select Renders the UI snapshot correctly 4`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -391,7 +396,7 @@ exports[`Select Renders the UI snapshot correctly 4`] = `
   <div
     aria-atomic={true}
     aria-live="off"
-    className="css-1mpebub"
+    className="css-1sax8hu"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Remember, Logan will judge you no matter who you pick.",
@@ -405,7 +410,8 @@ exports[`Select Renders the UI snapshot correctly 4`] = `
 
 exports[`Select Renders the UI snapshot correctly 5`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -503,7 +509,8 @@ exports[`Select Renders the UI snapshot correctly 5`] = `
 
 exports[`Select Renders the UI snapshot correctly 6`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -601,7 +608,8 @@ exports[`Select Renders the UI snapshot correctly 6`] = `
 
 exports[`Select Renders the UI snapshot correctly 7`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="select-wrapper"
 >
   <div
     className="css-0"
@@ -697,7 +705,8 @@ exports[`Select Renders the UI snapshot correctly 7`] = `
 
 exports[`Select Renders the UI snapshot correctly 8`] = `
 <div
-  className="css-kle7zy"
+  className="css-1y4kn3e"
+  id="chakra-wrapper"
 >
   <div
     className="css-0"
@@ -791,8 +800,9 @@ exports[`Select Renders the UI snapshot correctly 8`] = `
 
 exports[`Select Renders the UI snapshot correctly 9`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
   data-testid="props"
+  id="props-wrapper"
 >
   <div
     className="css-0"

package/src/components/SkipNavigation/SkipNavigation.stories.mdx

@@ -29,7 +29,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.28.0`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -59,7 +59,7 @@ intentional as the links should initially be visually hidden.**
   >
     {(args) => (
       <>
-        <Button>Focus on me and then press "tab"</Button>
+        <Button id="example-btn">Focus on me and then press "tab"</Button>
         <SkipNavigation {...args} />
       </>
     )}

package/src/components/Slider/Slider.stories.mdx

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

package/src/components/Slider/Slider.tsx

@@ -13,10 +13,9 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
 import Label from "../Label/Label";
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import TextInput, { TextInputTypes } from "../TextInput/TextInput";
 
 export interface SliderProps {
@@ -120,7 +119,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   if (isRangeSlider && currentValue[0] > currentValue[1]) {
     finalIsInvalid = true;
   }
-  const footnote = finalIsInvalid ? invalidText : helperText;
+  // const footnote = finalIsInvalid ? invalidText : helperText;
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
@@ -276,7 +275,16 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
   };
 
   return (
-    <Box className={className} __css={styles} {...rest}>
+    <ComponentWrapper
+      className={className}
+      helperText={helperText}
+      id={id}
+      invalidText={invalidText}
+      isInvalid={finalIsInvalid}
+      showHelperInvalidText={showHelperInvalidText}
+      __css={styles}
+      {...rest}
+    >
       {showLabel && (
         <Label
           id={`${id}-label`}
@@ -307,15 +315,7 @@ export const Slider = chakra((props: React.PropsWithChildren<SliderProps>) => {
 
         {showBoxes && getTextInput("end")}
       </Box>
-
-      {footnote && showHelperInvalidText && (
-        <HelperErrorText
-          id={`${id}-helperText`}
-          isInvalid={finalIsInvalid}
-          text={footnote}
-        />
-      )}
-    </Box>
+    </ComponentWrapper>
   );
 });