@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/components/DatePicker/DatePicker.tsx

@@ -1,69 +1,78 @@
 import React, { useState, forwardRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
-import { FormRow, FormField } from "../Form/Form";
 import { DatePickerTypes } from "./DatePickerTypes";
+import Fieldset from "../Fieldset/Fieldset";
+import { FormRow, FormField } from "../Form/Form";
+import { FormSpacing } from "../Form/FormTypes";
+import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import TextInput, {
   InputProps,
   TextInputRefType,
 } from "../TextInput/TextInput";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
-import bem from "../../utils/bem";
+import { useMultiStyleConfig } from "@chakra-ui/system";
 
 // The object shape for the DatePicker's start and end date state values.
 // Internal use only.
 interface FullDateType {
-  startDate: Date;
+  /** Date object that gets returned for the onChange
+   * function only for date ranges. */
   endDate?: Date;
+  /** Date object that gets returned for the onChange function. */
+  startDate: Date;
 }
 
 // Used for the input fields' parent wrapper. Internal use only.
 interface DateRangeRowProps {
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
   /** Whether to render a single date input or two for a range of two dates. */
-  dateRange?: boolean;
+  isDateRange?: boolean;
 }
 
 // Interface used by the `div` or `fieldset` parent wrapper element.
 // Internal use only.
 interface DatePickerWrapperProps extends DateRangeRowProps {
-  /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
+  /** Additional className. */
+  className?: string;
+  /** Adds the 'required' property to the input element(s). */
+  isRequired?: boolean;
   /** Passed to the `TextInput` component to render a label associated with an input field. */
   labelText: string;
   /** Offers the ability to show the label onscreen or hide it. */
   showLabel?: boolean;
-  /** Additional className for use with BEM. See how to work with blockNames and
-   * BEM here: http://getbem.com/introduction/ */
-  className?: string;
+  /** Whether or not to display the "Required"/"Optional" text in the label text. */
+  showOptReqLabel?: 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 {
-  /** Data value used by the ReactDatePicker plugin and the custom TextInput component. */
-  value?: string;
-  /** Event handler used by the ReactDatePicker plugin to open the popup calendar. */
-  onClick?: (data: any) => any;
-  /** The ReactDatePicker plugin has its own `required` prop so we use this to
-   * pass the value from the parent `DatePicker` component. */
-  dsRequired?: boolean;
   /** The ReactDatePicker plugin has its own `id` prop so we use this to pass the
    * value from the parent `DatePicker` component. */
   dsId?: string;
   /** The ReactDatePicker plugin manipulates the ref value so we declare our
    * own for some cases. */
   dsRef?: React.Ref<TextInputRefType>;
+  /** The ReactDatePicker plugin has its own `required` prop so we use this to
+   * pass the value from the parent `DatePicker` component. */
+  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;
 }
 
 // Main interface for the exported DS DatePicker component.
 export interface DatePickerProps extends DatePickerWrapperProps {
+  /** The date format to display. Defaults to "yyyy-MM-dd".
+   * Must be in ISO-8601 format. */
+  dateFormat?: string;
   /** DatePicker date types that can be rendered. */
   dateType?: DatePickerTypes;
-  /** The date format to display. Defaults to "yyyy-MM-dd". */
-  dateFormat?: string;
   /** Populates the `HelperErrorText` component in this component. */
   helperText?: string;
   /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
@@ -73,73 +82,67 @@ export interface DatePickerProps extends DatePickerWrapperProps {
   /** The initial date value. This must be in the mm/dd/yyyy format. */
   initialDate?: string;
   /** The initialTo date value used for date ranges.
-   * This must be in the mm/dd/yyyy format.
-   */
+   * This must be in the mm/dd/yyyy format. */
   initialDateTo?: string;
-  /** The minimum date value that applies to both input fields.
-   * This must be in the mm/dd/yyyy format.
-   */
-  minDate?: string;
-  /** The maximum date value that applies to both input fields.
-   * This must be in the mm/dd/yyyy format.
-   */
-  maxDate?: string;
-  /** Populates the `HelperErrorText` error state for both "From" and "To" input components. */
+  /** Populates the `HelperErrorText` error state for both "From"
+   * and "To" input components. */
   invalidText?: string;
-  /** Helper for modifiers array; adds 'isInvalid' styling. */
-  isInvalid?: boolean;
-  /** Adds the 'required' property to the input element(s). */
-  required?: boolean;
-  /** Whether or not to display the "Required"/"Optional" text in the label text. */
-  showOptReqLabel?: boolean;
   /** Adds the 'disabled' property to the input element(s). */
   isDisabled?: boolean;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM
-   * here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** BlockName for use with BEM. See how to work with blockNames and BEM
-   * here: http://getbem.com/introduction/ */
-  blockName?: string;
+  /** Adds 'isInvalid' styling. */
+  isInvalid?: boolean;
+  /** Adds the 'required' property to the input element(s). */
+  isRequired?: boolean;
+  /** The maximum date value that applies to both input fields.
+   * This must be in the mm/dd/yyyy format. */
+  maxDate?: string;
+  /** The minimum date value that applies to both input fields.
+   * This must be in the mm/dd/yyyy format. */
+  minDate?: string;
   /** Value name for the single input field or the "From" input field in a date range. */
   nameFrom?: string;
   /** Value name for the "To" input field */
   nameTo?: string;
-  /** An additional explicit React ref passed for a date range's "From" input field. */
-  refTo?: React.Ref<TextInputRefType>;
   /** The action to perform on the `input`'s onChange function for both fields.
    * This will return the data in an object with `startDate` and `endDate` keys.
    */
   onChange?: (data: FullDateType) => void;
+  /** An additional explicit React ref passed for a date range's "To"
+   * input field. Note that the "From" input takes the initial "ref" value. */
+  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;
 }
 
 /**
  * A Design System `TextInput` component that is used as the custom input
- * element for the `DatePicker` plugin. This uses `forwardRef` because,
- * internally, the `DatePicker` plugin needs to keep track of the input data.
+ * element for the `react-datepicker` plugin. This uses `forwardRef` because,
+ * internally, the `react-datepicker` plugin needs to keep track of the input data.
  * @note This is only used internally for this file.
- * @note we don't declare an `onClick` prop but the `DatePicker` plugin takes
- * care of that. That is used and needed to open/close the popup calendar.
- * @note we can't use the prop name "required" for the `required` prop we need.
- * Instead, we are calling it `dsRequired`. This is because the `DatePicker`
- * plugin internally makes use of the "required" name so we need a new name.
+ * @note we don't declare an `onClick` prop but the `react-datepicker` plugin
+ * takes care of that. That is used and needed to open/close the popup calendar.
  */
 const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
   (
     {
-      showLabel,
-      onChange,
-      value,
-      labelText,
-      isDisabled,
-      dsRequired,
-      showOptReqLabel,
-      isInvalid,
+      additionalStyles = {},
+      attributes,
+      dsId,
+      dsRef,
       helperText,
       invalidText,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      labelText,
+      onChange,
       onClick,
-      dsId,
-      dsRef,
-      attributes,
+      showLabel,
+      showHelperInvalidText,
+      showOptReqLabel,
+      value,
     },
     ref: React.Ref<TextInputRefType>
   ) => (
@@ -150,16 +153,18 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
       value={value}
       labelText={labelText}
       isDisabled={isDisabled}
-      isRequired={dsRequired}
+      isRequired={isRequired}
+      showHelperInvalidText={showHelperInvalidText}
       showOptReqLabel={showOptReqLabel}
       isInvalid={isInvalid}
       helperText={helperText}
       invalidText={invalidText}
-      // Use either the specific prop-based or the forwardRef value.
-      // react-datepicker manipulates the `ref` value so sometimes we want a
-      // specific ref through the `dsRef` prop.
+      // Use either the specific prop-based or the `forwardRef` value.
+      // `react-datepicker` manipulates the `ref` value so when we
+      // want a specific ref, use the `dsRef` prop.
       ref={dsRef || ref}
       attributes={{ ...attributes, onClick }}
+      additionalStyles={additionalStyles}
     />
   )
 );
@@ -171,23 +176,32 @@ const CustomTextInput = forwardRef<TextInputRefType, CustomTextInputProps>(
  * @note This is only used internally for this file.
  */
 const DatePickerWrapper: React.FC<DatePickerWrapperProps> = ({
+  children,
+  className,
   id,
-  dateRange,
-  showLabel,
+  isDateRange,
+  isRequired,
   labelText,
-  className = "",
-  children,
-}) =>
-  dateRange ? (
-    <fieldset id={`date-range-${id}`} className={className}>
-      <legend className={showLabel ? "" : "sr-only"}>{labelText}</legend>
-      {children}
-    </fieldset>
-  ) : (
-    <div id={`date-range-${id}`} className={className}>
-      {children}
-    </div>
-  );
+  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>
+);
 
 /**
  * This is the wrapper component that conditionally renders the input fields
@@ -195,11 +209,15 @@ const DatePickerWrapper: React.FC<DatePickerWrapperProps> = ({
  * layout for the two side-by-side date input fields.
  * @note This is only used internally for this file.
  */
-const DateRangeRow: React.FC<DateRangeRowProps> = ({ dateRange, children }) =>
-  dateRange ? (
-    <div className="form form--spacing-extra-small">
-      <FormRow>{children}</FormRow>
-    </div>
+const DateRangeRow: React.FC<DateRangeRowProps> = ({
+  id,
+  isDateRange,
+  children,
+}) =>
+  isDateRange ? (
+    <FormRow id={`${id}-form-row`} gap={FormSpacing.ExtraSmall}>
+      {children}
+    </FormRow>
   ) : (
     <>{children}</>
   );
@@ -210,37 +228,38 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({ dateRange, children }) =>
 const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
   (props, ref?) => {
     const {
-      id = generateUUID(),
-      dateType = DatePickerTypes.Full,
+      className,
       dateFormat = "yyyy-MM-dd",
-      dateRange = false,
-      labelText = "From",
-      showLabel = true,
+      dateType = DatePickerTypes.Full,
       helperText,
       helperTextFrom,
       helperTextTo,
+      id = generateUUID(),
+      initialDate,
+      initialDateTo,
       invalidText,
-      isInvalid,
-      required,
-      showOptReqLabel = true,
+      isDateRange = false,
       isDisabled,
+      isInvalid,
+      isRequired,
+      labelText = "From",
+      maxDate,
+      minDate,
       nameFrom,
       nameTo,
-      blockName,
-      modifiers = [],
-      className,
-      refTo,
       onChange,
-      initialDate,
-      initialDateTo,
-      minDate,
-      maxDate,
+      refTo,
+      showHelperInvalidText = true,
+      showLabel = true,
+      showOptReqLabel = true,
     } = props;
+    const styles = useMultiStyleConfig("DatePicker", {});
+    const finalStyles = isDateRange ? styles : {};
     const initStartDate = initialDate ? new Date(initialDate) : new Date();
     const initEndDate = initialDateTo ? new Date(initialDateTo) : new Date();
     let initFullDate: FullDateType = { startDate: initStartDate };
     // Only include the `endDate` key for date ranges.
-    if (dateRange) {
+    if (isDateRange) {
       initFullDate = { ...initFullDate, endDate: initEndDate };
     }
     const [fullDate, setFullDate] = useState<FullDateType>(initFullDate);
@@ -253,7 +272,7 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
     };
     // How many years to display in the DatePickerTypes.Year option.
     const yearsToDisplay = 12;
-    // Both ReactDatePicker components share some props.
+    // Both `ReactDatePicker` components share some props.
     let baseDatePickerAttrs = {
       popperClassName: "date-picker-calendar",
       popperPlacement: "bottom-start",
@@ -268,24 +287,30 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       minDate: minDate ? new Date(minDate) : null,
       maxDate: maxDate ? new Date(maxDate) : null,
       dateFormat,
-      isDisabled,
     };
-    // Both TextInput components share some props.
+    // Both custom `TextInput` components share some props.
     let baseCustomTextInputAttrs = {
-      dsRequired: required,
-      showOptReqLabel,
-      // Always display the labels or the input fields when
-      // the DatePicker component is a `dateRange` type.
-      showLabel: dateRange ? true : showLabel,
+      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,
+      // Always display the labels for the input fields when
+      // the DatePicker component is a date range type.
+      showLabel: isDateRange ? true : showLabel,
       isDisabled,
       isInvalid,
-      helperText: dateRange ? helperTextFrom : helperText,
+      helperText: isDateRange ? helperTextFrom : helperText,
+      showHelperInvalidText,
       invalidText,
+      additionalStyles: finalStyles.subLabels,
     };
+    // These are attribute objects for the `react-datepicker` package component.
     let startDatePickerAttrs = {};
     let endDatePickerAttrs = {};
+    // This sets set only for date ranges for the "To" input field.
     let endDatePickerElement = null;
-    // This changes to "From" when `dateRange` is true.
+    // This changes to "From" when `isDateRange` is true.
     let startLabelText = labelText;
 
     // Update the appropriate props for the selected date type to render.
@@ -309,20 +334,20 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
       );
     }
 
-    // Set the "From" DatePicker values here based off the base props. If a date
-    // range is selected additional props get added automatically.
+    // Set the "From" DatePicker values here based on the base props. If a date
+    // range is selected, additional props get added automatically.
     startDatePickerAttrs = { ...baseDatePickerAttrs };
 
-    // A date range is selected. We must now update the props for the start/"from"
-    // input component and render an end/"To" input component.
-    if (dateRange) {
-      modifiers.push("date-range");
+    // A date range is selected. We must now update the props for the
+    // "start"/"from" input component and render an "end"/"To" input component.
+    if (isDateRange) {
       const endCustomTextInputAttrs = {
         ...baseCustomTextInputAttrs,
+        dsId: `${id}-end`,
         helperText: helperTextTo,
       };
-      // These props are used to follow the pattern recommended by the
-      // react-datepicker plugin.
+      // These props are used to follow the pattern recommended by
+      // the react-datepicker plugin.
       startDatePickerAttrs = {
         ...startDatePickerAttrs,
         selectsStart: true,
@@ -373,20 +398,26 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
     return (
       <DatePickerWrapper
         id={id}
-        dateRange={dateRange}
+        isDateRange={isDateRange}
         showLabel={showLabel}
         labelText={labelText}
-        className={bem("date-picker", modifiers, blockName, [className])}
+        className={className}
+        isRequired={isRequired}
+        showOptReqLabel={showOptReqLabel}
       >
-        <DateRangeRow dateRange={dateRange}>
-          <FormField>{startDatePickerElement}</FormField>
+        <DateRangeRow id={id} isDateRange={isDateRange}>
+          <FormField id={`${id}-start-form`}>
+            {startDatePickerElement}
+          </FormField>
 
           {endDatePickerElement && (
-            <FormField>{endDatePickerElement}</FormField>
+            <FormField id={`${id}-end-form`}>{endDatePickerElement}</FormField>
           )}
         </DateRangeRow>
-        {helperText && dateRange && (
-          <HelperErrorText isError={false}>{helperText}</HelperErrorText>
+        {helperText && isDateRange && showHelperInvalidText && (
+          <HelperErrorText id={`${id}-helper-text`} isInvalid={false}>
+            {helperText}
+          </HelperErrorText>
         )}
       </DatePickerWrapper>
     );

package/src/components/DatePicker/_DatePicker.scss

@@ -1,76 +1,42 @@
-fieldset {
-  legend {
-    @include space-stack-xs;
-
-    font-size: 14px;
-    font-weight: var(--font-weight-medium);
-  }
-
-  &.date-picker {
-    @include fieldset-reset;
-  }
-
-  .label,
-  .label__required-helper {
-    font-size: var(--font-size--2);
-    font-weight: var(--font-weight-regular);
-    margin-bottom: 0;
-  }
-}
-
-.date-picker {
-  .sr-only {
-    @include screenreader-only();
+// Styles needed to override `react-datepicker` plugin styles.
+.date-picker-calendar {
+  // Make sure the width is enough to fit 12 selectable years.
+  .react-datepicker__year-wrapper {
+    max-width: 220px;
   }
 
-  .form .form-row,
-  .form-field {
-    margin-bottom: 0;
-  }
-
-  .react-datepicker-wrapper {
-    width: 100%;
-  }
-
-  .date-picker-calendar {
-    // Make sure the width is enough to fit 12 selectable years
-    .react-datepicker__year-wrapper {
-      max-width: 220px;
+  // Moving away from React DatePickers default blue color theme:
+  .react-datepicker__year,
+  .react-datepicker__month,
+  .react-datepicker__day {
+    // For currently selected ranges
+    &--in-range.react-datepicker__day--in-range {
+      opacity: 0.5;
     }
 
-    // Moving away from React DatePickers default blue color theme:
-    .react-datepicker__year,
-    .react-datepicker__month,
-    .react-datepicker__day {
-      // For currently selected ranges
-      &--in-range.react-datepicker__day--in-range {
-        opacity: 0.5;
-      }
-
-      // For ranges about to be selected
-      &-text--keyboard-selected,
-      &--keyboard-selected,
-      &--in-range,
-      &--in-selecting-range {
-        background-color: $black;
-        border-radius: 0;
-        color: $white;
-        opacity: 0.3;
-      }
-
-      // Selected states
-      &-text--selected,
-      &--selected {
-        background-color: $black;
-        border-radius: 0;
-        color: $white;
-        opacity: 1;
-      }
+    // For ranges about to be selected.
+    &-text--keyboard-selected,
+    &--keyboard-selected,
+    &--in-range,
+    &--in-selecting-range {
+      background-color: var(--nypl-colors-ui-black);
+      border-radius: 0;
+      color: var(--nypl-colors-ui-white);
+      opacity: 0.3;
     }
 
-    // Shift the traingle to the left
-    .react-datepicker__triangle {
-      transform: translate(32px, 0px) !important;
+    // Selected states.
+    &-text--selected,
+    &--selected {
+      background-color: var(--nypl-colors-ui-black);
+      border-radius: 0;
+      color: var(--nypl-colors-ui-white);
+      opacity: 1;
     }
   }
+
+  // Shift the triangle to the left.
+  .react-datepicker__triangle {
+    transform: translate(32px, 0px) !important;
+  }
 }