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

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

@@ -2,7 +2,8 @@
 
 exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="defaultRangeSlider-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -15,7 +16,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
     className="css-0"
   >
     <div
-      className="css-bunm4f"
+      className="css-ho21zx"
+      id="defaultRangeSlider-textInput-start-wrapper"
     >
       <input
         aria-label="Label - start value"
@@ -138,7 +140,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="defaultRangeSlider-textInput-end-wrapper"
     >
       <input
         aria-label="Label - end value"
@@ -174,7 +177,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="errored-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -187,7 +191,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
     className="css-0"
   >
     <div
-      className="css-bunm4f"
+      className="css-ho21zx"
+      id="errored-textInput-start-wrapper"
     >
       <input
         aria-invalid={true}
@@ -311,7 +316,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="errored-textInput-end-wrapper"
     >
       <input
         aria-invalid={true}
@@ -348,7 +354,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="required-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -364,7 +371,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
     className="css-0"
   >
     <div
-      className="css-bunm4f"
+      className="css-ho21zx"
+      id="required-textInput-start-wrapper"
     >
       <input
         aria-label="Label - start value"
@@ -488,7 +496,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="required-textInput-end-wrapper"
     >
       <input
         aria-label="Label - end value"
@@ -525,7 +534,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="disabled-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -538,7 +548,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
     className="css-0"
   >
     <div
-      className="css-bunm4f"
+      className="css-ho21zx"
+      id="disabled-textInput-start-wrapper"
     >
       <input
         aria-label="Label - start value"
@@ -663,7 +674,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="disabled-textInput-end-wrapper"
     >
       <input
         aria-label="Label - end value"
@@ -699,13 +711,15 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="noLabels-wrapper"
 >
   <div
     className="css-0"
   >
     <div
-      className="css-bunm4f"
+      className="css-ho21zx"
+      id="noLabels-textInput-start-wrapper"
     >
       <input
         aria-label="Label - start value"
@@ -828,7 +842,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="noLabels-textInput-end-wrapper"
     >
       <input
         aria-label="Label - end value"
@@ -852,7 +867,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="noVisibleValues-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -976,7 +992,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="onlySlider-wrapper"
 >
   <div
     className="css-0"
@@ -1081,7 +1098,8 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="defaultSlider-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -1174,7 +1192,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="defaultSlider-textInput-end-wrapper"
     >
       <input
         aria-label="Label"
@@ -1210,7 +1229,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="errored-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -1303,7 +1323,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="errored-textInput-end-wrapper"
     >
       <input
         aria-invalid={true}
@@ -1340,7 +1361,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="required-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -1436,7 +1458,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="required-textInput-end-wrapper"
     >
       <input
         aria-label="Label"
@@ -1473,7 +1496,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="disabled-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -1568,7 +1592,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="disabled-textInput-end-wrapper"
     >
       <input
         aria-label="Label"
@@ -1604,7 +1629,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="noLabels-wrapper"
 >
   <div
     className="css-0"
@@ -1690,7 +1716,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="noLabels-textInput-end-wrapper"
     >
       <input
         aria-label="Label"
@@ -1714,7 +1741,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="noVisibleValues-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -1814,7 +1842,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
+  id="onlySlider-wrapper"
 >
   <div
     className="css-0"
@@ -1895,7 +1924,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
 <div
-  className="css-kle7zy"
+  className="css-1y4kn3e"
+  id="chakra-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -1988,7 +2018,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="chakra-textInput-end-wrapper"
     >
       <input
         aria-label="Label"
@@ -2024,8 +2055,9 @@ exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
 <div
-  className="css-1xdhyk6"
+  className="css-1u8qly9"
   data-testid="props"
+  id="props-wrapper"
 >
   <label
     className="css-1xdhyk6"
@@ -2118,7 +2150,8 @@ exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
       100
     </div>
     <div
-      className="css-1ebeaqx"
+      className="css-1f1uedm"
+      id="props-textInput-end-wrapper"
     >
       <input
         aria-label="Label"

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -21,7 +21,7 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic)
+Use the [Button](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-button--button-with-controls)
 component to render form buttons.
 
 ```jsx

package/src/components/StyleGuide/Colors.stories.mdx

@@ -197,5 +197,5 @@ Section colors are branding colors only in use at NYPL.
 
 For additional spacing information, please refer to the Figma Main file.
 
-- [NYPL Brand Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007)
-- [NYPL UI Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37)
+- [NYPL Brand Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007)
+- [NYPL UI Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674)

package/src/components/StyleGuide/Forms.stories.mdx

@@ -18,7 +18,8 @@ import { getCategory } from "../../utils/componentCategories";
 
 ## General Information
 
-Use the [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/form-elements-form--form) component to control the placement and spacing for standard HTML forms.
+Use the [Form](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-form--form-with-controls)
+component to control the placement and spacing for standard HTML forms.
 
 ## Form Layout
 

package/src/components/StyleGuide/Iconography.stories.mdx

@@ -20,7 +20,7 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the Reservoir Design System (DS) [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+Use the Reservoir Design System (DS) [Icon](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-media-icons-icon--icon-with-controls)
 component to render and control icons as `<svg>` elements within consuming apps.
 
 The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
@@ -28,7 +28,7 @@ The DS utilizes the `Filled` icons available in the [Material UI Design System](
 ## Icon Examples
 
 The graphic of the `Icon` component is handled through the `name` prop. To see
-all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-media-icons-icon--icon-with-controls)
 Storybook page.
 
 <Canvas>

package/src/components/StyleGuide/Spacing.stories.mdx

@@ -68,7 +68,7 @@ between elements, both horizontal and vertical, should be `2rem`.
 
 Form input components should have a `2rem` space between each form input
 component. This includes both vertical (column) and horizontal (row) stacking.
-The DS [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-form--form-with-controls)
+The DS [Form](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-form--form-with-controls)
 component has correct spacing incorporated into its UI structure and should
 always be used when building forms. Please note that the spacing in the `Form`
 component is identical to the spacing in the `Grid` component.

package/src/components/StyleGuide/Typography.stories.mdx

@@ -205,7 +205,7 @@ black on a white background.
 
 In cases where specific colors must be applied to text elements, the DS
 provides CSS variables for the full NYPL color palette. Refer to the
-[Colors](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/style-guide-colors--colors-brand)
+[Colors](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page)
 section of the Style Guide for details.
 
 ## Font Weight

package/src/components/Table/Table.stories.mdx

@@ -37,7 +37,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -209,7 +209,6 @@ export const charactersData = [
   [
     "Isabelle",
     "-",
-    ,
     <Image
       alt="Isabelle"
       size="small"
@@ -219,7 +218,6 @@ export const charactersData = [
   [
     "K.K.",
     "Slider",
-    ,
     <Image
       alt="K.K Slider"
       size="small"
@@ -244,7 +242,6 @@ export const charactersData = [
   [
     "Isabelle",
     "-",
-    ,
     <Image
       alt="Isabelle"
       size="small"
@@ -254,7 +251,6 @@ export const charactersData = [
   [
     "K.K.",
     "Slider",
-    ,
     <Image
       alt="K.K Slider"
       size="small"

package/src/components/Table/Table.test.tsx

@@ -15,6 +15,14 @@ export const columnHeaders = [
   "Zipcode",
   "State",
 ];
+export const columnHeadersUneven = [
+  "First Name",
+  "Last Name",
+  "Nick Name",
+  "Address1",
+  "City",
+  "Zipcode",
+];
 export const tableData = [
   ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
   ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
@@ -29,6 +37,12 @@ export const tableData = [
     "NY",
   ],
 ];
+export const tableDataUneven = [
+  ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
+  ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
+  ["K.K.", "Slider", "Totakeke", "Niper Place", "New York", "98765", "NY"],
+  ["Sonny", "Resetti", "Risetto san", "Village Road", "New York", "09873"],
+];
 export const characterHeaders = ["First Name", "Last Name", "Avatar"];
 export const charactersData = [
   [
@@ -115,6 +129,25 @@ describe("Table", () => {
     );
   });
 
+  it("logs a warning when the columns in each `tableData` row are not identical", async () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Table tableData={tableDataUneven} columnHeaders={columnHeaders} />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Table: The number of columns in each row of the data table are not identical. " +
+        "The `Table` component may not render properly."
+    );
+  });
+
+  it("logs a warning when the column headers `columnHeaders` is not equal the number of columns in the data table", async () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Table tableData={tableData} columnHeaders={columnHeadersUneven} />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Table: The number of column headers in the `columnHeaders` prop is not equal " +
+        "to the number of columns in the data table. " +
+        "The `Table` component may not render properly."
+    );
+  });
+
   it("renders JSX elements from the data array", () => {
     render(
       <Table

package/src/components/Table/Table.tsx

@@ -100,6 +100,16 @@ export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
       return null;
     }
 
+    for (let i = 1; i < tableData.length; i++) {
+      if (tableData[0].length !== tableData[i].length) {
+        console.warn(
+          "NYPL Reservoir Table: The number of columns in each row of the data table are not identical. " +
+            "The `Table` component may not render properly."
+        );
+        break;
+      }
+    }
+
     return (
       <ChakraTbody>
         {tableData.map((row, index) => (
@@ -119,6 +129,17 @@ export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
     );
   };
 
+  for (let j = 0; j < tableData.length; j++) {
+    if (columnHeaders.length !== tableData[j].length) {
+      console.warn(
+        "NYPL Reservoir Table: The number of column headers in the `columnHeaders` prop is not equal " +
+          "to the number of columns in the data table. " +
+          "The `Table` component may not render properly."
+      );
+      break;
+    }
+  }
+
   return (
     <ChakraTable id={id} sx={styles} className={className} {...rest}>
       {tableCaption}

package/src/components/Template/Template.stories.mdx

@@ -138,7 +138,7 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
       sidebar: "left",
       renderFooterElement: true,
       renderHeaderElement: true,
-      renderSkipNavigation: false,
+      renderSkipNavigation: true,
     }}
     argTypes={{
       aboveHeader: { control: false },
@@ -599,7 +599,7 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           <Accordion accordionData={faqContent} />
           <HorizontalRule />
           <p>Fill out the form!</p>
-          <Form id="form1" action="/end/point">
+          <Form action="/end/point" id="form1">
             <FormField>
               <TextInput
                 helperText="Make sure to complete this field."
@@ -618,13 +618,17 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
             </FormField>
             <FormRow>
               <FormField>
-                <TextInput labelText="Phone Field" type="tel" />
+                <TextInput
+                  id="phone-field"
+                  labelText="Phone Field"
+                  type="tel"
+                />
               </FormField>
               <FormField>
-                <TextInput labelText="URL Field" type="url" />
+                <TextInput id="url-field" labelText="URL Field" type="url" />
               </FormField>
               <FormField>
-                <TextInput labelText="Age" type="number" />
+                <TextInput id="age-field" labelText="Age" type="number" />
               </FormField>
             </FormRow>
             <FormField>

package/src/components/TextInput/TextInput.stories.mdx

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

package/src/components/TextInput/TextInput.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   chakra,
   Input as ChakraInput,
   Textarea as ChakraTextarea,
@@ -7,10 +6,10 @@ 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 { getAriaAttrs } from "../../utils/utils";
 
 // HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 export type TextInputTypes =
@@ -147,7 +146,13 @@ export const TextInput = chakra(
       let footnote: HelperErrorTextType = isInvalid
         ? finalInvalidText
         : helperText;
-      let ariaAttributes = {};
+      const ariaAttributes = getAriaAttrs({
+        footnote,
+        id,
+        labelText,
+        name: "TextInput",
+        showLabel,
+      });
       let fieldOutput;
       let options;
 
@@ -157,13 +162,6 @@ export const TextInput = chakra(
         );
       }
 
-      if (!showLabel) {
-        ariaAttributes["aria-label"] =
-          labelText && footnote ? `${labelText} - ${footnote}` : labelText;
-      } else if (helperText) {
-        ariaAttributes["aria-describedby"] = `${id}-helperText`;
-      }
-
       if (type === "tel" || type === "url" || type === "email") {
         const example = TextInputFormats[type] || "";
         footnote = (
@@ -213,7 +211,16 @@ export const TextInput = chakra(
       }
 
       return (
-        <Box __css={styles} className={className} {...rest}>
+        <ComponentWrapper
+          className={className}
+          helperText={helperText}
+          id={id}
+          invalidText={finalInvalidText}
+          isInvalid={isInvalid}
+          showHelperInvalidText={showHelperInvalidText && !isHidden}
+          __css={styles}
+          {...rest}
+        >
           {labelText && showLabel && !isHidden && (
             <Label
               htmlFor={id}
@@ -224,14 +231,7 @@ export const TextInput = chakra(
             </Label>
           )}
           {fieldOutput}
-          {footnote && showHelperInvalidText && !isHidden && (
-            <HelperErrorText
-              id={`${id}-helperText`}
-              isInvalid={isInvalid}
-              text={footnote}
-            />
-          )}
-        </Box>
+        </ComponentWrapper>
       );
     }
   )