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

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

@@ -9,13 +9,12 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
     column
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="column"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -76,7 +75,7 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -149,13 +148,12 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
     row
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1objuxj"
     data-testid="checkbox-group"
     id="row"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -216,7 +214,7 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -295,7 +293,7 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
     id="noLabel"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -356,7 +354,7 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -429,13 +427,12 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
     helperText
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="helperText"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -496,7 +493,7 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -581,13 +578,12 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
     invalidText
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="invalidText"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -648,7 +644,7 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -721,13 +717,12 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
     no optional or required label
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="noRequiredLabel"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -788,7 +783,7 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -864,13 +859,12 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
     </span>
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="required"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -931,7 +925,7 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -1004,13 +998,12 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
     invalid
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="invalid"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       data-invalid=""
       onClick={[Function]}
     >
@@ -1074,7 +1067,7 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       data-invalid=""
       onClick={[Function]}
     >
@@ -1150,13 +1143,12 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
     disabled
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="disabled"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       data-disabled=""
       onClick={[Function]}
     >
@@ -1220,7 +1212,7 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       data-disabled=""
       onClick={[Function]}
     >
@@ -1296,13 +1288,12 @@ exports[`Checkbox renders the UI snapshot correctly 10`] = `
     jsxLabels
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="jsxLabels"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -1375,7 +1366,7 @@ exports[`Checkbox renders the UI snapshot correctly 10`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -1460,13 +1451,12 @@ exports[`Checkbox renders the UI snapshot correctly 11`] = `
     chakraProps
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="chakraProps"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -1527,7 +1517,7 @@ exports[`Checkbox renders the UI snapshot correctly 11`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -1601,13 +1591,12 @@ exports[`Checkbox renders the UI snapshot correctly 12`] = `
     otherProps
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="otherProps"
   >
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input
@@ -1668,7 +1657,7 @@ exports[`Checkbox renders the UI snapshot correctly 12`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1cgy6rg"
+      className="chakra-checkbox css-scawxr"
       onClick={[Function]}
     >
       <input

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -2,7 +2,6 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
@@ -39,7 +38,7 @@ export const ComponentWrapper = chakra(
     } = props;
     const hasChildren = !!children;
     const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
+    const footnote = isInvalid ? invalidText : helperText;
 
     // Note: Typescript warns when there are no children passed and
     // doesn't compile. This is meant to log in non-Typescript apps.
@@ -49,21 +48,15 @@ export const ComponentWrapper = chakra(
 
     return (
       <Box __css={styles} {...rest}>
-        {headingText && (
-          <Heading
-            id={`${id}-heading`}
-            level={HeadingLevels.Two}
-            text={headingText}
-          />
-        )}
+        {headingText && <Heading id={`${id}-heading`} text={headingText} />}
         {descriptionText && <Text>{descriptionText}</Text>}
         {children}
         {footnote && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </Box>

package/src/components/DatePicker/DatePicker.stories.mdx

@@ -8,15 +8,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import DatePicker from "./DatePicker";
-import { DatePickerTypes } from "./DatePickerTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(
-  DatePickerTypes,
-  "DatePickerTypes"
-);
 
 <Meta
   title={getCategory("DatePicker")}
@@ -36,8 +29,7 @@ export const enumValues = getStorybookEnumValues(
     },
     dateType: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "DatePickerTypes.Full" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "full" } },
     },
     id: { control: false },
     isDateRange: {
@@ -78,7 +70,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -107,7 +99,7 @@ also be added through props.
     args={{
       className: undefined,
       dateFormat: "yyyy-MM-dd",
-      dateType: "DatePickerTypes.Full",
+      dateType: "full",
       helperText: "Note that the Library may be closed on Sundays.",
       helperTextFrom: "Select start date.",
       helperTextTo: "Select end date.",
@@ -131,13 +123,7 @@ also be added through props.
       showRequiredLabel: true,
     }}
   >
-    {(args) => (
-      <DatePicker
-        {...args}
-        dateType={enumValues.getValue(args.dateType)}
-        onChange={undefined}
-      />
-    )}
+    {(args) => <DatePicker {...args} onChange={undefined} />}
   </Story>
 </Canvas>
 
@@ -182,7 +168,7 @@ popup calendar.
     <DatePicker
       id="date-range"
       dateFormat="yyyy-MM-dd"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       minDate="1/1/2022"
       maxDate="7/1/2022"
       labelText="Select the date range you want to visit NYPL"
@@ -204,19 +190,19 @@ popup calendar.
 By default, the `DatePicker` will display the input date value in the full
 format that contains the year, month, and day such as "2021-01-30". Although
 this is the default, it can be explicitly set through the `dateType` prop with
-value of `DatePickerTypes.Full`.
+value of `"full"`.
 
 ### Month Date Input
 
 It's possible to select dates by skipping the day value and only selecting
-the month and the year when `dateType` is set to `DatePickerTypes.Month`. Note
+the month and the year when `dateType` is set to `"month"`. Note
 that all 12 months will appear in the popup calendar with their abbreviated names.
 
 <Canvas withToolbar>
   <Story name="Month Date Input">
     <DatePicker
       id="month-date"
-      dateType={DatePickerTypes.Month}
+      dateType="month"
       labelText="Select the month you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
       invalidText="Please select a valid month."
@@ -227,14 +213,14 @@ that all 12 months will appear in the popup calendar with their abbreviated name
 ### Year Date Input
 
 It's possible to select dates by only the year when `dateType` is set to
-`DatePickerTypes.Year`. Note that only 12 values will appear in the popup
-calendar; the four previous years, the current year, and the next seven years.
+`"year"`. Note that only 12 values will appear in the popup calendar; the four
+previous years, the current year, and the next seven years.
 
 <Canvas withToolbar>
   <Story name="Year Date Input">
     <DatePicker
       id="year-date"
-      dateType={DatePickerTypes.Year}
+      dateType="year"
       labelText="Select the year you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
     />
@@ -249,7 +235,7 @@ calendar; the four previous years, the current year, and the next seven years.
   <DSProvider>
     <DatePicker
       id="invalid-date"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the year you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
       invalidText="Please select a valid date."
@@ -265,7 +251,7 @@ calendar; the four previous years, the current year, and the next seven years.
   <DSProvider>
     <DatePicker
       id="disabled-date"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the year you want to visit NYPL"
       isDateRange
       isDisabled
@@ -281,8 +267,8 @@ date input, can be hidden when `showRequiredLabel` is set to `false`.
 <Canvas>
   <DSProvider>
     <DatePicker
-      id="disabled-date"
-      dateType={DatePickerTypes.Full}
+      id="required-date"
+      dateType="full"
       labelText="Select the year you want to visit NYPL"
       isDateRange
       isRequired
@@ -305,7 +291,7 @@ styleguide, we display dates as "year-month-day" by default.
   <DSProvider>
     <DatePicker
       id="init-dates"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the date you want to visit NYPL"
       initialDate="12/1/21"
       initialDateTo="12/10/21"
@@ -325,7 +311,7 @@ written in [ISO-8601 format](https://www.w3.org/TR/NOTE-datetime).
     <DatePicker
       id="format-date"
       dateFormat="MM-dd-yyyy"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the date you want to visit NYPL"
       initialDate="12/1/21"
       initialDateTo="12/10/21"
@@ -345,7 +331,7 @@ February to see the dates that are available to select in 2022.
     <DatePicker
       id="max-min-dates"
       dateFormat="MM-dd-yyyy"
-      dateType={DatePickerTypes.Full}
+      dateType="full"
       labelText="Select the date you want to visit NYPL"
       minDate="1/1/2022"
       maxDate="3/1/2022"
@@ -358,10 +344,10 @@ February to see the dates that are available to select in 2022.
 
 ### Controlled Component Using `onChange` prop
 
-If your application uses controlled React components and the Reservoir Design 
+If your application uses controlled React components and the Reservoir Design
 System (DS) DatePicker must be controlled, you can extract the data through the
 `onChange` prop function. This will be called every time the date is updated in
-either the start date input field or the end date input field. The returned 
+either the start date input field or the end date input field. The returned
 data is an object with `startDate` and `endDate` keys and `Date` object values.
 
 ```tsx
@@ -381,7 +367,7 @@ const onChange = (data) => {
 // Example of the DS DatePicker instance with the function above:
 <DatePicker
   id="date-range"
-  dateType={DatePickerTypes.Full}
+  dateType="full"
   labelText="Select the date range you want to visit NYPL"
   invalidText="Please select a valid date range."
   onChange={onChange}
@@ -425,7 +411,7 @@ const submitForm = (formData) => {
 >
   <DatePicker
     id="date-range"
-    dateType={DatePickerTypes.Full}
+    dateType="full"
     labelText="Select the date range you want to visit NYPL"
     nameFrom="visitDateFrom"
     nameTo="visitDateTo"
@@ -446,7 +432,7 @@ const refEnd = React.createRef<TextInputRefType>();
 // ...
 <DatePicker
   id="date-range"
-  dateType={DatePickerTypes.Full}
+  dateType="full"
   labelText="Select the date range you want to visit NYPL"
   nameFrom="visitDateFrom"
   nameTo="visitDateTo"

package/src/components/DatePicker/DatePicker.test.tsx

@@ -4,13 +4,12 @@ import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
 import renderer from "react-test-renderer";
 
-import DatePicker from "./DatePicker";
-import { DatePickerTypes } from "./DatePickerTypes";
+import DatePicker, { DatePickerTypes, FullDateType } from "./DatePicker";
 import { TextInputRefType } from "../TextInput/TextInput";
 
 /** This adds a "0" padding for date values under "10". */
-const strPad = (n) => String("0" + n).slice(-2);
-const monthArray = [
+const strPad = (n: number) => String("0" + n).slice(-2);
+const monthArray: string[] = [
   "January",
   "February",
   "March",
@@ -58,11 +57,11 @@ describe("DatePicker", () => {
     return [year, month, day];
   };
   /** Returns today's date in string format based on the DatePicker type. */
-  const getTodaysDateDisplay = (type?) => {
+  const getTodaysDateDisplay = (type?: DatePickerTypes) => {
     const [year, month, day] = getTodaysValues();
-    if (DatePickerTypes.Year === type) {
+    if ("year" === type) {
       return `${year}`;
-    } else if (DatePickerTypes.Month === type) {
+    } else if ("month" === type) {
       return `${month}-${year}`;
     }
     return `${year}-${month}-${day}`;
@@ -106,12 +105,12 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Month}
+          dateType="month"
           labelText="Select the month you want to visit NYPL"
         />
       );
       const [year, month] = getTodaysValues();
-      const date = getTodaysDateDisplay(DatePickerTypes.Month);
+      const date = getTodaysDateDisplay("month");
 
       expect(
         screen.getByLabelText(/Select the month you want to visit NYPL/i)
@@ -125,12 +124,12 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Year}
+          dateType="year"
           labelText="Select the month you want to visit NYPL"
         />
       );
       const [year] = getTodaysValues();
-      const date = getTodaysDateDisplay(DatePickerTypes.Year);
+      const date = getTodaysDateDisplay("year");
 
       expect(
         screen.getByLabelText(/Select the month you want to visit NYPL/i)
@@ -316,8 +315,11 @@ describe("DatePicker", () => {
     });
 
     it("should pass the value to the `onChange` function", () => {
-      let dateObject: any = {};
-      const onChange = (data) => {
+      let dateObject: FullDateType = {
+        startDate: new Date(),
+        endDate: new Date(),
+      };
+      const onChange = (data: FullDateType) => {
         dateObject = data;
       };
       render(
@@ -370,7 +372,7 @@ describe("DatePicker", () => {
     it("should throw a warning when `onChange` is passed as well as a `ref` prop.", () => {
       const warn = jest.spyOn(console, "warn");
       const ref = React.createRef<TextInputRefType>();
-      const onChange = (_data) => {};
+      const onChange = (_data: {}) => {};
       render(
         <DatePicker
           id="datePicker"
@@ -788,7 +790,7 @@ describe("DatePicker", () => {
       userEvent.click(screen.getByText(midMonthDay));
       // So only the month should change accordingly.
       const newMonthValue = `${newDayValue.substr(0, 5)}${strPad(
-        "10"
+        10
       )}${newDayValue.substr(7)}`;
       expect(screen.getByDisplayValue(newMonthValue)).toBeInTheDocument();
     });
@@ -797,7 +799,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Month}
+          dateType="month"
           labelText="Select the month you want to visit NYPL"
         />
       );
@@ -824,7 +826,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Month}
+          dateType="month"
           initialDate="4/1/1988"
           labelText="Select the month you want to visit NYPL"
         />
@@ -864,7 +866,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Year}
+          dateType="year"
           labelText="Select the year you want to visit NYPL"
         />
       );
@@ -902,7 +904,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           id="datePicker"
-          dateType={DatePickerTypes.Year}
+          dateType="year"
           labelText="Select the year you want to visit NYPL"
         />
       );