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

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

@@ -28,7 +28,10 @@ const monthArray = [
 describe("DatePicker Accessibility", () => {
   it("passes axe accessibility for a single date input", async () => {
     const { container } = render(
-      <DatePicker labelText="Select the date you want to visit NYPL" />
+      <DatePicker
+        id="datePicker"
+        labelText="Select the date you want to visit NYPL"
+      />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -36,6 +39,7 @@ describe("DatePicker Accessibility", () => {
   it("passes axe accessibility for a date range", async () => {
     const { container } = render(
       <DatePicker
+        id="datePicker"
         labelText="Select the date range you want to visit NYPL"
         isDateRange
       />
@@ -67,7 +71,10 @@ describe("DatePicker", () => {
   describe("Single input", () => {
     it("should render the basic date input field including a date", () => {
       render(
-        <DatePicker labelText="Select the full date you want to visit NYPL" />
+        <DatePicker
+          id="datePicker"
+          labelText="Select the full date you want to visit NYPL"
+        />
       );
       const [year, month, day] = getTodaysValues();
       const date = getTodaysDateDisplay();
@@ -85,6 +92,7 @@ describe("DatePicker", () => {
     it("should render with an initial date", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the full date you want to visit NYPL"
           initialDate="1/2/1988"
         />
@@ -97,6 +105,7 @@ describe("DatePicker", () => {
     it("should render the 'month' DatePicker type", () => {
       render(
         <DatePicker
+          id="datePicker"
           dateType={DatePickerTypes.Month}
           labelText="Select the month you want to visit NYPL"
         />
@@ -115,6 +124,7 @@ describe("DatePicker", () => {
     it("should render the 'year' DatePicker type", () => {
       render(
         <DatePicker
+          id="datePicker"
           dateType={DatePickerTypes.Year}
           labelText="Select the month you want to visit NYPL"
         />
@@ -135,6 +145,7 @@ describe("DatePicker", () => {
       const customDateFormat2 = "MM/dd/yyyy";
       const { rerender } = render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           dateFormat={customDateFormat1}
         />
@@ -147,6 +158,7 @@ describe("DatePicker", () => {
       const dateFormat2 = `${month}/${day}/${year}`;
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           dateFormat={customDateFormat2}
         />
@@ -157,6 +169,7 @@ describe("DatePicker", () => {
     it("should hide the input label but add an aria-label", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           showLabel={false}
         />
@@ -174,6 +187,7 @@ describe("DatePicker", () => {
     it("should render with helper text and error text", () => {
       const { rerender } = render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           invalidText="Please select a valid date."
@@ -193,6 +207,7 @@ describe("DatePicker", () => {
 
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           invalidText="Please select a valid date."
@@ -211,6 +226,7 @@ describe("DatePicker", () => {
     it("should not render the helper text or invalid text when 'showHelperInvalidText' is false", () => {
       const { rerender } = render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           invalidText="Please select a valid date."
@@ -226,6 +242,7 @@ describe("DatePicker", () => {
 
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           invalidText="Please select a valid date."
@@ -244,6 +261,7 @@ describe("DatePicker", () => {
     it("should render a disabled input field", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           isDisabled
@@ -258,6 +276,7 @@ describe("DatePicker", () => {
     it("should render a required label", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           isRequired
@@ -267,22 +286,18 @@ describe("DatePicker", () => {
       expect(screen.getByText(/required/i)).toBeInTheDocument();
     });
 
-    it("should hide the Optional/Required text in the label with `showOptReqLabel`", () => {
+    it("should hide the (Required) text in the label with `showRequiredLabel`", () => {
       const { rerender } = render(
-        <DatePicker labelText="Select the date you want to visit NYPL" />
-      );
-      expect(screen.getByText(/Optional/i)).toBeInTheDocument();
-
-      rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
-          showOptReqLabel={false}
         />
       );
-      expect(screen.queryByText(/Optional/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
 
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           isRequired
         />
@@ -291,8 +306,9 @@ describe("DatePicker", () => {
 
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
-          showOptReqLabel={false}
+          showRequiredLabel={false}
           isRequired
         />
       );
@@ -306,6 +322,7 @@ describe("DatePicker", () => {
       };
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           onChange={onChange}
@@ -339,6 +356,7 @@ describe("DatePicker", () => {
       const ref = React.createRef<TextInputRefType>();
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           ref={ref}
         />
@@ -355,6 +373,7 @@ describe("DatePicker", () => {
       const onChange = (_data) => {};
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           ref={ref}
           nameFrom="start-date"
@@ -425,11 +444,39 @@ describe("DatePicker", () => {
           />
         )
         .toJSON();
+      const withChakraProps = renderer
+        .create(
+          <DatePicker
+            id="chakra"
+            labelText="Select the date you want to visit NYPL"
+            helperText="Note that the Library may be closed on Sundays."
+            invalidText="Please select a valid date."
+            initialDate="1/2/1988"
+            p="20px"
+            color="ui.error.primary"
+          />
+        )
+        .toJSON();
+      const withOtherProps = renderer
+        .create(
+          <DatePicker
+            id="props"
+            labelText="Select the date you want to visit NYPL"
+            helperText="Note that the Library may be closed on Sundays."
+            invalidText="Please select a valid date."
+            initialDate="1/2/1988"
+            data-testid="datepicker"
+          />
+        )
+        .toJSON();
+
       expect(basic).toMatchSnapshot();
       expect(withoutLabel).toMatchSnapshot();
       expect(withCustomFormat).toMatchSnapshot();
       expect(invalid).toMatchSnapshot();
       expect(disabled).toMatchSnapshot();
+      expect(withChakraProps).toMatchSnapshot();
+      expect(withOtherProps).toMatchSnapshot();
     });
   });
 
@@ -437,6 +484,7 @@ describe("DatePicker", () => {
     it("should render the date range with two input fields", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date range you want to visit NYPL"
           isDateRange
         />
@@ -456,6 +504,7 @@ describe("DatePicker", () => {
     it("should render the initial dates", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the full date you want to visit NYPL"
           isDateRange
           initialDate="1/2/1988"
@@ -472,6 +521,7 @@ describe("DatePicker", () => {
     it("should render two input labels and three separate helper text", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextFrom="Note for the 'from' field."
@@ -498,6 +548,7 @@ describe("DatePicker", () => {
     it("should render different states based on respective props", () => {
       const { rerender } = render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
@@ -514,6 +565,7 @@ describe("DatePicker", () => {
 
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
@@ -528,6 +580,7 @@ describe("DatePicker", () => {
 
       rerender(
         <DatePicker
+          id="datePicker"
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
@@ -538,7 +591,7 @@ describe("DatePicker", () => {
       );
       // Both input fields are required.
       // The "Required" text is only displayed once in the `legend`.
-      expect(screen.getAllByText(/required/i)).toHaveLength(1);
+      expect(screen.getAllByText(/Required/i)).toHaveLength(1);
       expect(screen.getByLabelText(/From/i)).toHaveAttribute("required");
       expect(screen.getByLabelText(/To/i)).toHaveAttribute("required");
     });
@@ -620,6 +673,7 @@ describe("DatePicker", () => {
     it("should select two new dates", () => {
       render(
         <DatePicker
+          id="datePicker"
           initialDate="3/2/1988"
           initialDateTo="3/28/1988"
           isDateRange
@@ -662,7 +716,12 @@ describe("DatePicker", () => {
 
   describe("Popup Calendar", () => {
     it("should render a popup calendar for the full date", () => {
-      render(<DatePicker labelText="Select the date you want to visit NYPL" />);
+      render(
+        <DatePicker
+          id="datePicker"
+          labelText="Select the date you want to visit NYPL"
+        />
+      );
       const input = screen.getByLabelText(
         /Select the date you want to visit NYPL/i
       );
@@ -692,6 +751,7 @@ describe("DatePicker", () => {
     it("should select a new date from the calendar", () => {
       render(
         <DatePicker
+          id="datePicker"
           labelText="Select the date you want to visit NYPL"
           initialDate="08/01/2021"
         />
@@ -736,6 +796,7 @@ describe("DatePicker", () => {
     it("should render a popup calendar for the month date", () => {
       render(
         <DatePicker
+          id="datePicker"
           dateType={DatePickerTypes.Month}
           labelText="Select the month you want to visit NYPL"
         />
@@ -762,6 +823,7 @@ describe("DatePicker", () => {
     it("should select a new month from the calendar", () => {
       render(
         <DatePicker
+          id="datePicker"
           dateType={DatePickerTypes.Month}
           initialDate="4/1/1988"
           labelText="Select the month you want to visit NYPL"
@@ -801,6 +863,7 @@ describe("DatePicker", () => {
     it("should render a popup calendar for the year date", () => {
       render(
         <DatePicker
+          id="datePicker"
           dateType={DatePickerTypes.Year}
           labelText="Select the year you want to visit NYPL"
         />
@@ -838,6 +901,7 @@ describe("DatePicker", () => {
     it("should select a new year from the calendar", () => {
       render(
         <DatePicker
+          id="datePicker"
           dateType={DatePickerTypes.Year}
           labelText="Select the year you want to visit NYPL"
         />
@@ -858,5 +922,17 @@ describe("DatePicker", () => {
 
       expect(screen.getByDisplayValue("2024")).toBeInTheDocument();
     });
+
+    it("logs a warning when there is no `id` passed", () => {
+      const warn = jest.spyOn(console, "warn");
+      render(
+        // @ts-ignore: Typescript complains when a required prop is not passed, but
+        // here we don't want to pass the required prop to make sure the warning appears.
+        <DatePicker labelText="Select the year you want to visit NYPL" />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir DatePicker: This component's required `id` prop was not passed."
+      );
+    });
   });
 });

package/src/components/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+import { chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState, forwardRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
@@ -8,13 +9,10 @@ import { FormGaps } from "../Form/FormTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import { helperTextMargin } from "../../theme/components/global";
 import TextInput, {
   InputProps,
   TextInputRefType,
 } from "../TextInput/TextInput";
-import generateUUID from "../../helpers/generateUUID";
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 // The object shape for the DatePicker's start and end date state values.
 export interface FullDateType {
@@ -28,7 +26,7 @@ export interface FullDateType {
 // Used for the input fields' parent wrapper. Internal use only.
 interface DateRangeRowProps {
   /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
+  id: string;
   /** Whether to render a single date input or two for a range of two dates. */
   isDateRange?: boolean;
 }
@@ -44,16 +42,17 @@ interface DatePickerWrapperProps extends DateRangeRowProps {
   labelText: string;
   /** Offers the ability to show the label onscreen or hide it. */
   showLabel?: boolean;
-  /** Whether or not to display the "Required"/"Optional" text in the label text. */
-  showOptReqLabel?: boolean;
+  /** Whether or not to display the "(Required)" text in the label text.
+   * True by default. */
+  showRequiredLabel?: boolean;
 }
 
 // Interface used by the internal DS `TextInput` component as a custom
 // component for the ReactDatePicker plugin component. Internal use only.
-interface CustomTextInputProps extends InputProps {
+interface CustomTextInputProps extends Partial<InputProps> {
   /** The ReactDatePicker plugin has its own `id` prop so we use this to pass the
    * value from the parent `DatePicker` component. */
-  dsId?: string;
+  dsId: string;
   /** The ReactDatePicker plugin manipulates the ref value so we declare our
    * own for some cases. */
   dsRef?: React.Ref<TextInputRefType>;
@@ -62,8 +61,6 @@ interface CustomTextInputProps extends InputProps {
   isRequired?: boolean;
   /** Event handler used by the ReactDatePicker plugin to open the popup calendar. */
   onClick?: (data: any) => any;
-  /** Whether or not to display the "Required"/"Optional" text in the label text. */
-  showOptReqLabel?: boolean;
   /** Data value used by the ReactDatePicker plugin and the custom TextInput component. */
   value?: string;
 }
@@ -114,8 +111,6 @@ export interface DatePickerProps extends DatePickerWrapperProps {
   refTo?: React.Ref<TextInputRefType>;
   /** Offers the ability to hide the helper/invalid text. */
   showHelperInvalidText?: boolean;
-  /** Whether or not to display the "Required"/"Optional" text in the label text. */
-  showOptReqLabel?: boolean;
 }
 
 /**
@@ -143,7 +138,7 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       onClick,
       showLabel,
       showHelperInvalidText,
-      showOptReqLabel,
+      showRequiredLabel,
       value,
     },
     ref: React.Ref<TextInputRefType>
@@ -157,7 +152,7 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       isDisabled={isDisabled}
       isRequired={isRequired}
       showHelperInvalidText={showHelperInvalidText}
-      showOptReqLabel={showOptReqLabel}
+      showRequiredLabel={showRequiredLabel}
       isInvalid={isInvalid}
       helperText={helperText}
       invalidText={invalidText}
@@ -177,32 +172,36 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
  * for a date range we render a "fieldset".
  * @note This is only used internally for this file.
  */
-const DatePickerWrapper: React.FC<DatePickerWrapperProps> = ({
-  children,
-  className,
-  id,
-  isDateRange,
-  isRequired,
-  labelText,
-  showLabel,
-  showOptReqLabel,
-}) => (
-  <FormField id={`${id}-form-field}`}>
-    {isDateRange ? (
-      <Fieldset
-        id={id}
-        className={className}
-        isLegendHidden={!showLabel}
-        legendText={labelText}
-        optReqFlag={showOptReqLabel}
-        isRequired={isRequired}
-      >
-        {children}
-      </Fieldset>
-    ) : (
-      children
-    )}
-  </FormField>
+const DatePickerWrapper: React.FC<DatePickerWrapperProps> = chakra(
+  ({
+    children,
+    className,
+    id,
+    isDateRange,
+    isRequired,
+    labelText,
+    showLabel,
+    showRequiredLabel,
+    ...rest
+  }) => (
+    <FormField id={`${id}-form-field`} {...rest}>
+      {isDateRange ? (
+        <Fieldset
+          className={className}
+          id={id}
+          isLegendHidden={!showLabel}
+          isRequired={isRequired}
+          legendText={labelText}
+          showRequiredLabel={showRequiredLabel}
+        >
+          {children}
+        </Fieldset>
+      ) : (
+        children
+      )}
+    </FormField>
+  ),
+  { shouldForwardProp: () => true }
 );
 
 /**
@@ -227,8 +226,8 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
 /**
  * Returns a single date input field or two date input fields for a date range.
  */
-const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
-  (props, ref?) => {
+export const DatePicker = chakra(
+  React.forwardRef<TextInputRefType, DatePickerProps>((props, ref?) => {
     const {
       className,
       dateFormat = "yyyy-MM-dd",
@@ -236,7 +235,7 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       helperText,
       helperTextFrom,
       helperTextTo,
-      id = generateUUID(),
+      id,
       initialDate,
       initialDateTo,
       invalidText,
@@ -253,7 +252,8 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       refTo,
       showHelperInvalidText = true,
       showLabel = true,
-      showOptReqLabel = true,
+      showRequiredLabel = true,
+      ...rest
     } = props;
     const styles = useMultiStyleConfig("DatePicker", {});
     const finalStyles = isDateRange ? styles : {};
@@ -294,9 +294,9 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
     let baseCustomTextInputAttrs = {
       dsId: `${id}-start`,
       isRequired,
-      // In the date range type, don't display the "required"/"optional" text
-      // in individual input labels. It'll display in the legend element.
-      showOptReqLabel: isDateRange ? false : showOptReqLabel,
+      // In the date range type, don't display the "(Required)" text in
+      // individual input labels. It'll display in the legend element.
+      showRequiredLabel: isDateRange ? false : showRequiredLabel,
       // Always display the labels for the input fields when
       // the DatePicker component is a date range type.
       showLabel: isDateRange ? true : showLabel,
@@ -325,6 +325,12 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       baseDatePickerAttrs.dateFormat = "yyyy";
     }
 
+    if (!id) {
+      console.warn(
+        "NYPL Reservoir DatePicker: This component's required `id` prop was not passed."
+      );
+    }
+
     if ((ref && !nameFrom) || (refTo && !nameTo)) {
       console.warn(
         "NYPL Reservoir DatePicker: A `ref` or `refTo` prop was passed but " +
@@ -408,7 +414,8 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
         labelText={labelText}
         className={className}
         isRequired={isRequired}
-        showOptReqLabel={showOptReqLabel}
+        showRequiredLabel={showRequiredLabel}
+        {...rest}
       >
         <DateRangeRow id={id} isDateRange={isDateRange}>
           <FormField id={`${id}-start-form`}>
@@ -420,17 +427,16 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
           )}
         </DateRangeRow>
         {helperText && isDateRange && showHelperInvalidText && (
-          <Box __css={helperTextMargin}>
-            <HelperErrorText
-              id={`${id}-helper-text`}
-              isInvalid={false}
-              text={helperText}
-            />
-          </Box>
+          <HelperErrorText
+            id={`${id}-helper-text`}
+            isInvalid={false}
+            text={helperText}
+          />
         )}
       </DatePickerWrapper>
     );
-  }
+  }),
+  { shouldForwardProp: () => true }
 );
 
 export default DatePicker;