@nypl/design-system-react-components 0.25.9 → 0.25.12

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

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -101,7 +101,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -200,7 +200,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -299,7 +299,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -398,7 +398,106 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
+  className="chakra-breadcrumb css-0"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-onkibi"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          role="img"
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 6`] = `
+<nav
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-1f2fw9u"
   id="breadcrumbs-test"
 >

package/src/components/Card/Card.stories.mdx

@@ -93,7 +93,7 @@ export const cardLayoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Card} />
 

package/src/components/Card/Card.tsx

@@ -222,7 +222,10 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
           child.props.children
         );
       const elem = React.cloneElement(child, {
-        additionalStyles: styles.heading,
+        additionalStyles: {
+          ...styles.heading,
+          ...child.props.additionalStyles,
+        },
         key,
         center,
         // Override the child text with the potential `CardLinkOverlay`.

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

@@ -418,7 +418,7 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
         id="heading1"
       >
         <a
-          className="chakra-linkbox__overlay css-1hnz6hu"
+          className="chakra-linkbox__overlay css-kvj8dg"
           href="http://nypl.org"
         >
           The Card Heading

package/src/components/Chakra/Flex.stories.mdx

@@ -0,0 +1,113 @@
+import { Box, Flex, Spacer, VStack } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import Link from "../Link/Link";
+import { LinkTypes } from "../Link/LinkTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta title={getCategory("Flex")} component={Flex} />
+
+# Flex
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.10`  |
+| Latest            | `0.25.10`  |
+
+Note: This needs the use of the `DSProvider` component. See the
+[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+for more information.
+
+This component is directly exported from Chakra UI. The `Flex` component is
+useful for simple layouts and can be used along with Chakra's `Spacer` component.
+The combination can be used to create a container where the children span the
+entire width of the container.
+
+Details about available props and related child components can be found on the
+[Flex component](https://chakra-ui.com/docs/layout/flex) page on the Chakra UI site.
+
+<Canvas>
+  <Story
+    name="Flex"
+    args={{
+      alignItems: "baseline",
+    }}
+  >
+    {(args) => (
+      <Flex {...args}>
+        <Box w="20" h="20" bg="brand.primary" />
+        <Box w="20" h="20" bg="brand.secondary" />
+        <Box w="20" h="20" bg="brand.primary" />
+        <Box w="20" h="20" bg="brand.secondary" />
+        <Box w="20" h="20" bg="brand.primary" />
+      </Flex>
+    )}
+  </Story>
+</Canvas>
+
+## Examples
+
+Use the `justify` prop to move the children around.
+
+<Canvas>
+  <DSProvider>
+    <VStack align="stretch">
+      <div>
+        <p>`justify` set to "center"</p>
+        <Flex alignItems="baseline" justify="center">
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+        </Flex>
+      </div>
+      <div>
+        <p>`justify` set to "space-between"</p>
+        <Flex alignItems="baseline" justify="space-between">
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+          <Box w="20" h="20" bg="brand.secondary" />
+          <Box w="20" h="20" bg="brand.primary" />
+        </Flex>
+      </div>
+    </VStack>
+  </DSProvider>
+</Canvas>
+
+## With Spacer
+
+A common use-case is displaying a row with two children where the first aligns
+left and the second aligns right. Add the `Spacer` component between the children.
+This is similar to setting `justify="space-between"` on the `Flex` parent but
+the `Spacer` component is more flexible for most situations.
+
+<Canvas>
+  <DSProvider>
+    <Flex alignItems="baseline">
+      <Heading id="row-heading" level={HeadingLevels.Three}>
+        Heading
+      </Heading>
+      <Spacer />
+      <Link href="#viewmore" type={LinkTypes.Forwards}>
+        View more
+      </Link>
+    </Flex>
+  </DSProvider>
+</Canvas>
+
+```jsx
+<Flex alignItems="baseline">
+  <Heading id="row-heading" level={HeadingLevels.Three}>
+    Heading
+  </Heading>
+  <Spacer />
+  <Link href="#viewmore" type={LinkTypes.Forwards}>
+    View more
+  </Link>
+</Flex>
+```

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -57,7 +57,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Checkbox} />
 

package/src/components/Checkbox/Checkbox.tsx

@@ -126,6 +126,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                 defaultIsChecked: false,
               })}
           icon={icon}
+          alignItems="flex-start"
           __css={styles}
           {...ariaAttributes}
         >

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

@@ -2,7 +2,7 @@
 
 exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   onClick={[Function]}
 >
   <input
@@ -65,7 +65,7 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-checked=""
   onClick={[Function]}
 >
@@ -131,7 +131,7 @@ exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-checked=""
   onClick={[Function]}
 >
@@ -219,7 +219,7 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   onClick={[Function]}
 >
   <input
@@ -282,7 +282,7 @@ exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-invalid=""
   onClick={[Function]}
 >
@@ -348,7 +348,7 @@ exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 6`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-disabled=""
   onClick={[Function]}
 >

package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -69,7 +69,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={CheckboxGroup} />
 

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

@@ -20,7 +20,7 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
     id="column"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -81,7 +81,7 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -165,7 +165,7 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
     id="row"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -226,7 +226,7 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -310,7 +310,7 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
     id="noLabel"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -371,7 +371,7 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -455,7 +455,7 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
     id="helperText"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -516,7 +516,7 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -616,7 +616,7 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
     id="invalidText"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -677,7 +677,7 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -756,7 +756,7 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
     id="optReq"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -817,7 +817,7 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -901,7 +901,7 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
     id="required"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -962,7 +962,7 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -1046,7 +1046,7 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
     id="invalid"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-invalid=""
       onClick={[Function]}
     >
@@ -1110,7 +1110,7 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-invalid=""
       onClick={[Function]}
     >
@@ -1197,7 +1197,7 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
     id="disabled"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-disabled=""
       onClick={[Function]}
     >
@@ -1261,7 +1261,7 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-disabled=""
       onClick={[Function]}
     >

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

@@ -78,7 +78,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={DatePicker} />
 

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

@@ -9,7 +9,7 @@ import { DatePickerTypes } from "./DatePickerTypes";
 import { TextInputRefType } from "../TextInput/TextInput";
 
 /** This adds a "0" padding for date values under "10". */
-const str_pad = (n) => String("0" + n).slice(-2);
+const strPad = (n) => String("0" + n).slice(-2);
 const monthArray = [
   "January",
   "February",
@@ -49,8 +49,8 @@ describe("DatePicker", () => {
   /** Returns today's year, month, and day values. */
   const getTodaysValues = () => {
     const year = todaysDate.getFullYear();
-    const month = str_pad(todaysDate.getMonth() + 1);
-    const day = str_pad(todaysDate.getDate());
+    const month = strPad(todaysDate.getMonth() + 1);
+    const day = strPad(todaysDate.getDate());
     return [year, month, day];
   };
   /** Returns today's date in string format based on the DatePicker type. */
@@ -328,9 +328,9 @@ describe("DatePicker", () => {
       expect(screen.getByDisplayValue(newDayValue)).toBeInTheDocument();
 
       const { startDate } = dateObject;
-      const valueFromOnChange = `${startDate.getFullYear()}-${str_pad(
+      const valueFromOnChange = `${startDate.getFullYear()}-${strPad(
         startDate.getMonth() + 1
-      )}-${str_pad(startDate.getDate())}`;
+      )}-${strPad(startDate.getDate())}`;
       expect(newDayValue).toEqual(valueFromOnChange);
     });
 
@@ -724,7 +724,7 @@ describe("DatePicker", () => {
       // We are two months ahead but still selecting the midmonth day.
       userEvent.click(screen.getByText(midMonthDay));
       // So only the month should change accordingly.
-      const newMonthValue = `${newDayValue.substr(0, 5)}${str_pad(
+      const newMonthValue = `${newDayValue.substr(0, 5)}${strPad(
         "10"
       )}${newDayValue.substr(7)}`;
       expect(screen.getByDisplayValue(newMonthValue)).toBeInTheDocument();

package/src/components/DatePicker/DatePicker.tsx

@@ -4,20 +4,20 @@ import ReactDatePicker from "react-datepicker";
 import { DatePickerTypes } from "./DatePickerTypes";
 import Fieldset from "../Fieldset/Fieldset";
 import { FormRow, FormField } from "../Form/Form";
-import { FormSpacing } from "../Form/FormTypes";
+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 { useMultiStyleConfig } from "@chakra-ui/system";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 // The object shape for the DatePicker's start and end date state values.
-// Internal use only.
-interface FullDateType {
+export interface FullDateType {
   /** Date object that gets returned for the onChange
    * function only for date ranges. */
   endDate?: Date;
@@ -217,7 +217,7 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`} gap={FormSpacing.ExtraSmall}>
+    <FormRow id={`${id}-form-row`} gap={FormGaps.ExtraSmall}>
       {children}
     </FormRow>
   ) : (
@@ -417,11 +417,13 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
           )}
         </DateRangeRow>
         {helperText && isDateRange && showHelperInvalidText && (
-          <HelperErrorText
-            id={`${id}-helper-text`}
-            isInvalid={false}
-            text={helperText}
-          />
+          <Box __css={helperTextMargin}>
+            <HelperErrorText
+              id={`${id}-helper-text`}
+              isInvalid={false}
+              text={helperText}
+            />
+          </Box>
         )}
       </DatePickerWrapper>
     );