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

package/src/components/ComponentWrapper/ComponentWrapper.test.tsx

@@ -143,9 +143,21 @@ describe("ComponentWrapper", () => {
         </ComponentWrapper>
       )
       .toJSON();
+    const withChakraProps = renderer.create(
+      <ComponentWrapper id="chakra" p="20px" color="ui.error.primary">
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+    const withOtherProps = renderer.create(
+      <ComponentWrapper id="props" data-testid="props">
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
 
     expect(basic).toMatchSnapshot();
     expect(onlyWithChildren).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -1,4 +1,4 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import Heading from "../Heading/Heading";
@@ -7,8 +7,6 @@ import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
 import Text from "../Text/Text";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface ComponentWrapperProps {
   /** The UI elements that will be wrapped by this component */
   children: React.ReactNode;
@@ -27,50 +25,50 @@ export interface ComponentWrapperProps {
   isInvalid?: boolean;
 }
 
-function ComponentWrapper(
-  props: React.PropsWithChildren<ComponentWrapperProps>
-) {
-  const {
-    children,
-    descriptionText,
-    headingText,
-    helperText,
-    id = generateUUID(),
-    invalidText,
-    isInvalid = false,
-  } = props;
-  const hasChildren = !!children;
-  const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
-  const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
+export const ComponentWrapper = chakra(
+  (props: React.PropsWithChildren<ComponentWrapperProps>) => {
+    const {
+      children,
+      descriptionText,
+      headingText,
+      helperText,
+      id,
+      invalidText,
+      isInvalid = false,
+      ...rest
+    } = props;
+    const hasChildren = !!children;
+    const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
+    const footnote: HelperErrorTextType = 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.
-  if (!hasChildren) {
-    console.warn("NYPL Reservoir ComponentWrapper: No children were passed.");
-  }
+    // Note: Typescript warns when there are no children passed and
+    // doesn't compile. This is meant to log in non-Typescript apps.
+    if (!hasChildren) {
+      console.warn("NYPL Reservoir ComponentWrapper: No children were passed.");
+    }
 
-  return (
-    <Box __css={styles}>
-      {headingText && (
-        <Heading
-          id={`${id}-heading`}
-          level={HeadingLevels.Two}
-          text={headingText}
-        />
-      )}
-      {descriptionText && <Text>{descriptionText}</Text>}
-      {children}
-      {footnote && (
-        <Box __css={styles.helperText}>
+    return (
+      <Box __css={styles} {...rest}>
+        {headingText && (
+          <Heading
+            id={`${id}-heading`}
+            level={HeadingLevels.Two}
+            text={headingText}
+          />
+        )}
+        {descriptionText && <Text>{descriptionText}</Text>}
+        {children}
+        {footnote && (
           <HelperErrorText
+            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
           />
-        </Box>
-      )}
-    </Box>
-  );
-}
+        )}
+      </Box>
+    );
+  }
+);
 
 export default ComponentWrapper;

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

@@ -2,16 +2,16 @@
 
 exports[`ComponentWrapper Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="id-heading"
   >
     heading text
   </h2>
   <p
-    className="chakra-text css-0"
+    className="chakra-text css-1xdhyk6"
   >
     description text
   </p>
@@ -19,27 +19,23 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 1`] = `
     children elements
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "helper text",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "helper text",
       }
-      data-isinvalid={false}
-      id="id-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="id-helperText"
+  />
 </div>
 `;
 
 exports[`ComponentWrapper Renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div>
     children elements
@@ -49,16 +45,16 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 2`] = `
 
 exports[`ComponentWrapper Renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <h2
-    className="chakra-heading css-0"
+    className="chakra-heading css-1xdhyk6"
     id="id-heading"
   >
     heading text
   </h2>
   <p
-    className="chakra-text css-0"
+    className="chakra-text css-1xdhyk6"
   >
     description text
   </p>
@@ -66,20 +62,37 @@ exports[`ComponentWrapper Renders the UI snapshot correctly 3`] = `
     children elements
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "invalid text",
-        }
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "invalid text",
       }
-      data-isinvalid={true}
-      id="id-helperText"
-    />
+    }
+    data-isinvalid={true}
+    id="id-helperText"
+  />
+</div>
+`;
+
+exports[`ComponentWrapper Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-kle7zy"
+>
+  <div>
+    children elements
+  </div>
+</div>
+`;
+
+exports[`ComponentWrapper Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+>
+  <div>
+    children elements
   </div>
 </div>
 `;

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

@@ -67,7 +67,7 @@ export const enumValues = getStorybookEnumValues(
     showLabel: {
       table: { defaultValue: { summary: true } },
     },
-    showOptReqLabel: {
+    showRequiredLabel: {
       table: { defaultValue: { summary: true } },
     },
   }}
@@ -78,7 +78,20 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Date Range](#date-range)
+- [Calendar Types](#calendar-types)
+- [Other States](#other-states)
+- [Date Inputs and Output](#date-inputs-and-output)
+- [Getting Date Input Values](#getting-date-input-values)
+
+## Overview
 
 <Description of={DatePicker} />
 
@@ -86,6 +99,8 @@ This is fully customizable to allow selectable full dates, only the month, or
 only they year as input. Initial date values and max and min date values can
 also be added through props.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="DatePicker with Controls"
@@ -97,33 +112,58 @@ also be added through props.
       helperTextFrom: "Select start date.",
       helperTextTo: "Select end date.",
       id: "datePicker-id",
-      initialDate: "1/1/2021",
-      initialDateTo: "1/30/2021",
+      initialDate: "4/1/2022",
+      initialDateTo: "12/1/2022",
       invalidText: "Please select a valid date.",
       isDateRange: false,
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Select the date you want to visit NYPL",
-      maxDate: "1/1/2022",
-      minDate: "1/1/2021",
+      maxDate: "1/1/2023",
+      minDate: "1/1/2022",
       nameFrom: "visit-dates-from",
       nameTo: "visit-dates-to",
       onChange: undefined,
       refTo: undefined,
       showHelperInvalidText: true,
       showLabel: true,
-      showOptReqLabel: true,
+      showRequiredLabel: true,
     }}
   >
     {(args) => (
-      <DatePicker {...args} dateType={enumValues.getValue(args.dateType)} />
+      <DatePicker
+        {...args}
+        dateType={enumValues.getValue(args.dateType)}
+        onChange={undefined}
+      />
     )}
   </Story>
 </Canvas>
 
 <ArgsTable story="DatePicker with Controls" />
 
+## Accessibility
+
+The Reservoir `DatePicker` component implements the `react-datepicker` npm package.
+This package exports a component that is used internally to display the popup
+calendar, manage its data, and associate the `<label>` element with its corresponding
+`<input>` element. This component is accessible through keyboard navigation.
+
+The Reservoir `DatePicker` handles the grouping of the two `<input>` elements in
+the "date range" mode by wrapping the elements in a `<fieldset>` element with
+its own `<legend>` label for the group. Note that this is in addition to the two
+labels that each `<input>` element is associated with.
+
+When `showLabel` is set to false, the single `<input>` element's `aria-label`
+attribute is set to the required `labelText` value. In the "date range" mode,
+when `showLabel` is set to false, the `<fieldset>`'s `<legend>` will have the
+`labelText` visually hidden.
+
+Resources:
+
+- [react-datepicker Accessibility](https://github.com/Hacker0x01/react-datepicker#accessibility)
+
 ## Date Range
 
 A date range can be rendered by setting the `isDateRange` prop to `true`. This
@@ -133,8 +173,8 @@ will share the props and styling. Note that for date range types, a `fieldset`
 is used as the parent wrapper and the `labelText` is used for the `legend`
 element text.
 
-Note: In the following example, the minimum date is "1/1/2021" and the max date
-is "3/1/21". This means only values within this range are selectable from the
+Note: In the following example, the minimum date is "1/1/2022" and the max date
+is "7/1/22". This means only values within this range are selectable from the
 popup calendar.
 
 <Canvas withToolbar>
@@ -143,8 +183,8 @@ popup calendar.
       id="date-range"
       dateFormat="yyyy-MM-dd"
       dateType={DatePickerTypes.Full}
-      minDate="1/1/2021"
-      maxDate="3/1/2021"
+      minDate="1/1/2022"
+      maxDate="7/1/2022"
       labelText="Select the date range you want to visit NYPL"
       nameFrom="visit-dates-from"
       nameTo="visit-dates-to"
@@ -152,7 +192,6 @@ popup calendar.
       helperTextTo="To this date."
       helperText="Select a valid date range."
       invalidText="There was an error with the date range :("
-      showOptReqLabel={false}
       isDateRange
     />
   </Story>
@@ -198,7 +237,6 @@ calendar; the four previous years, the current year, and the next seven years.
       dateType={DatePickerTypes.Year}
       labelText="Select the year you want to visit NYPL"
       helperText="Note that the Library may be closed on Sundays."
-      showOptReqLabel={false}
     />
   </Story>
 </Canvas>
@@ -215,7 +253,6 @@ calendar; the four previous years, the current year, and the next seven years.
       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."
-      showOptReqLabel={false}
       isInvalid
       isDateRange
     />
@@ -230,7 +267,6 @@ calendar; the four previous years, the current year, and the next seven years.
       id="disabled-date"
       dateType={DatePickerTypes.Full}
       labelText="Select the year you want to visit NYPL"
-      showOptReqLabel={false}
       isDateRange
       isDisabled
     />
@@ -239,8 +275,8 @@ calendar; the four previous years, the current year, and the next seven years.
 
 ### Required State
 
-The "Required" or "Optional" text in the legend in the date range, or the label
-in a normal date input, can be hidden when `showOptReqLabel` is set to `false`.
+The "Required" text in the legend in the date range, or the label in a normal
+date input, can be hidden when `showRequiredLabel` is set to `false`.
 
 <Canvas>
   <DSProvider>
@@ -302,7 +338,7 @@ written in [ISO-8601 format](https://www.w3.org/TR/NOTE-datetime).
 
 The maximum and minimum date values can be set through the `maxDate` and
 `minDate` props, respectively. In this example, go back to January through
-February to see the dates that are available to select.
+February to see the dates that are available to select in 2022.
 
 <Canvas>
   <DSProvider>
@@ -311,22 +347,22 @@ February to see the dates that are available to select.
       dateFormat="MM-dd-yyyy"
       dateType={DatePickerTypes.Full}
       labelText="Select the date you want to visit NYPL"
-      minDate="1/1/2021"
-      maxDate="3/1/2021"
+      minDate="1/1/2022"
+      maxDate="3/1/2022"
       isDateRange
     />
   </DSProvider>
 </Canvas>
 
-## Getting Date Data Values
+## Getting Date Input Values
 
 ### Controlled Component Using `onChange` prop
 
-If your application uses controlled React components and the 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 data is an object with
-`startDate` and `endDate` keys and `Date` object values.
+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 
+data is an object with `startDate` and `endDate` keys and `Date` object values.
 
 ```tsx
 const onChange = (data) => {