@nypl/design-system-react-components 0.25.3 → 0.25.4

package/src/components/CardEdition/_CardEdition.scss

@@ -1,12 +1,12 @@
 .card-edition {
-  @include space-stack-s;
+  margin-bottom: var(--nypl-space-s);
 
   align-items: flex-start;
-  border: 1px solid var(--ui-gray-light-cool);
+  border: 1px solid var(--nypl-colors-ui-gray-light-cool);
   border-radius: 5px;
   display: flex;
   flex-flow: column wrap;
-  padding: var(--space) var(--space-l);
+  padding: var(--nypl-space-s) var(--nypl-space-l);
 
   &__heading,
   &__footer {
@@ -19,20 +19,20 @@
     justify-content: space-between;
     width: 100%;
 
-    @include breakpoint($breakpoint-medium) {
+    @include breakpoint($nypl-breakpoint-medium) {
       flex-flow: row wrap;
     }
   }
 
   &__columns + &__footer {
-    margin-top: var(--space-xs);
+    margin-top: var(--nypl-space-xs);
   }
 
   &__image {
-    @include space-stack-s;
+    margin-bottom: var(--nypl-space-s);
 
     align-items: center;
-    background-color: var(--ui-gray-x-light-cool);
+    background-color: var(--nypl-colors-ui-gray-x-light-cool);
     display: flex;
     flex: 0 0 150px;
     height: 150px;
@@ -43,9 +43,9 @@
       max-width: 100%;
     }
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-stack-none;
-      @include space-inline-s;
+    @include breakpoint($nypl-breakpoint-medium) {
+      margin-bottom: 0;
+      margin-right: var(--nypl-space-s);
 
       align-self: center;
       width: 150px;
@@ -53,45 +53,44 @@
   }
 
   &__content {
-    @include space-stack-s;
+    margin-bottom: var(--nypl-space-s);
 
     flex: 1 1;
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-s;
-      @include space-stack-none;
+    @include breakpoint($nypl-breakpoint-medium) {
+      margin-right: var(--nypl-space-s);
+      margin-bottom: 0;
     }
   }
 
   &__ctas {
     flex: 0 1 20%;
 
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-s;
+    @include breakpoint($nypl-breakpoint-medium) {
+      margin-right: var(--nypl-space-s);
     }
   }
 
   &__content + &__ctas {
-    @include space-inline-s;
+    margin-right: var(--nypl-space-s);
   }
 }
 
 // Stories-only styles
 .sb-show-main {
   .var-docs {
-    padding: 0 0 var(--space) 0;
+    padding: 0 0 var(--nypl-space-s) 0;
   }
 
   .example-card-edition {
     .card__content {
       > * {
-        @include space-stack-xxs;
+        margin-bottom: var(--nypl-space-xxs);
       }
     }
 
     .book__callout {
-      // formerly imported with @include heading-xs;
-      font-size: var(--font-size-1);
+      font-size: var(--nypl-fontSizes-1);
       font-weight: 400;
       line-height: 1.15;
       margin: 0 0 0.5em;
@@ -123,12 +122,12 @@
       }
 
       > * {
-        @include space-stack-xxs;
+        margin-bottom: var(--nypl-space-xxs);
       }
     }
 
     .book__filetype {
-      @include space-stack-s;
+      margin-bottom: var(--nypl-space-s);
     }
 
     .book__description {

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

@@ -7,6 +7,7 @@ import {
   VideoPlayerTypes,
   VideoPlayerAspectRatios,
 } from "../VideoPlayer/VideoPlayerTypes";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Box")} component={Box} />
 
@@ -16,7 +17,8 @@ import {
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+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 `Box` is a simple and
@@ -30,28 +32,25 @@ guide on the Chakra UI site.
   <Story
     name="Box"
     args={{
-      p: "5",
+      padding: "s",
       bg: "var(--nypl-colors-brand-primary)",
       color: "white",
     }}
   >
-    {(args) => (
-      <Box {...args}>
-        So when I look up at the stars, I just wonder...what will they all
-        become someday?
-      </Box>
-    )}
+    {(args) => <Box {...args}>This text is inside a `Box` component.</Box>}
   </Story>
 </Canvas>
 
 ## With VideoPlayer Component Example
 
 <Canvas>
-  <Box borderWidth="3px" padding="6" borderRadius="lg" overflow="hidden">
-    <VideoPlayer
-      videoId="nm-dD2tx6bk"
-      videoType={VideoPlayerTypes.YouTube}
-      aspectRatio={VideoPlayerAspectRatios.SixteenByNine}
-    />
-  </Box>
+  <DSProvider>
+    <Box borderWidth="3px" padding="s" borderRadius="lg" overflow="hidden">
+      <VideoPlayer
+        videoId="nm-dD2tx6bk"
+        videoType={VideoPlayerTypes.YouTube}
+        aspectRatio={VideoPlayerAspectRatios.SixteenByNine}
+      />
+    </Box>
+  </DSProvider>
 </Canvas>

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

@@ -3,6 +3,7 @@ import { Box, Center, Square, Circle, HStack } from "@chakra-ui/react";
 
 import { getCategory } from "../../utils/componentCategories";
 import Image from "../Image/Image";
+import { ImageSizes } from "../Image/ImageTypes";
 import Icon from "../Icons/Icon";
 import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
 import DSProvider from "../../theme/provider";
@@ -15,7 +16,8 @@ import DSProvider from "../../theme/provider";
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+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.
 
 These components are directly exported from Chakra UI. The `Center`, `Circle`,
@@ -30,7 +32,7 @@ guide on the Chakra UI site.
   <Story
     name="Center, Circle, Square"
     args={{
-      p: "5",
+      padding: "s",
       bg: "var(--nypl-colors-brand-primary)",
       color: "var(--nypl-colors-ui-white)",
     }}
@@ -39,8 +41,7 @@ guide on the Chakra UI site.
       <Box>
         Some text at the beginning.
         <Center {...args}>
-          So when I look up at the stars, I just wonder...what will they all
-          become someday?
+          This text is centered inside a `Center` component.
         </Center>
         Some text at the end.
       </Box>
@@ -50,15 +51,20 @@ guide on the Chakra UI site.
 
 <Canvas>
   <DSProvider>
-    <Center>
-      <Image src="https://placeimg.com/300/400/arch" alt="Centered Image" />
+    <Center border="1px solid" borderColor="var(--nypl-colors-ui-gray-medium)">
+      <Image
+        src="https://placeimg.com/300/400/arch"
+        alt="Centered Image"
+        imageSize={ImageSizes.Medium}
+      />
     </Center>
   </DSProvider>
 </Canvas>
 
 ## Circle
 
-Similar to `Center` but is always a circle!
+This component is similar to the `Center` component but it is always rendered as
+a circle.
 
 <Canvas>
   <DSProvider>
@@ -83,7 +89,8 @@ Similar to `Center` but is always a circle!
 
 ## Square
 
-Similar to `Center` but always has equal height and width.
+This component is similar to the `Circle` component but always has equal height
+and width.
 
 <Canvas>
   <DSProvider>

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

@@ -2,6 +2,7 @@ import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import { Box } from "@chakra-ui/react";
 import { Grid, GridItem } from "@chakra-ui/react";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Grid")} component={Grid} />
 
@@ -11,13 +12,17 @@ import { getCategory } from "../../utils/componentCategories";
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+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 `Grid` component is useful for grid layouts and offers more complexity and formatting options than the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes with helpful style shorthand. It renders a `div` element.
+This component is directly exported from Chakra UI. The `Grid` component is
+useful for grid layouts and offers more complexity and formatting options than
+the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes
+with helpful style shorthand. It renders a `div` element.
 
-Details about available props and related child components can be found on the [Grid component](https://chakra-ui.com/docs/layout/grid)
-page on the Chakra UI site.
+Details about available props and related child components can be found on the
+[Grid component](https://chakra-ui.com/docs/layout/grid) page on the Chakra UI site.
 
 <Canvas>
   <Story
@@ -46,12 +51,16 @@ page on the Chakra UI site.
 
 ## Complex Layouts with Grid Child Components
 
-In some layouts, you may need certain grid items to span a specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `colSpan` prop to the `GridItem` component to span across columns and also pass the `rowSpan` component to span across rows. You also need to specify the `templateColumns` and `templateRows`.
+In some layouts, you may need certain grid items to span a specific amount of
+columns or rows instead of an even distribution. To achieve this, you need to
+pass the `colSpan` prop to the `GridItem` component to span across columns and
+also pass the `rowSpan` component to span across rows. You also need to specify
+the `templateColumns` and `templateRows`.
 
 <Canvas>
   <DSProvider>
     <Grid
-      h="200px"
+      height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
       gap="32"
@@ -70,7 +79,7 @@ In some layouts, you may need certain grid items to span a specific amount of co
 
 ```jsx
 <Grid
-  h="200px"
+  height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
   gap="32"

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

@@ -4,8 +4,7 @@ import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
-import Radio from "../Radio/Radio";
+import { IconNames, IconSizes } from "../Icons/IconTypes";
 
 <Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />
 
@@ -15,7 +14,8 @@ import Radio from "../Radio/Radio";
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+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.
 
 These components are directly exported from Chakra UI. The `Stack`, `HStack`,
@@ -25,17 +25,21 @@ with spacing between them.
 All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
 guide on the Chakra UI site.
 
+In all the following examples, Design System `Icon` components are wrapped in
+Chakra's `Circle` component.
+
 ## Stack
 
-The `Stack` component is the most flexible component because it can stack elements
-both horizontally and vertically through the `direction` prop.
+The `Stack` component is the most flexible component because it can stack
+elements both horizontally and vertically through the `direction` prop and the
+`"row"` and `"column"` values, respectively.
 
 <Canvas>
   <Story
     name="Stack, HStack, VStack"
     args={{
       direction: "column",
-      spacing: "10px",
+      spacing: "s",
     }}
     argTypes={{
       direction: {
@@ -64,30 +68,43 @@ both horizontally and vertically through the `direction` prop.
 
 ## HStack
 
-Stacks components horizontally.
+Stacks components horizontally. This is the same as the `Stack` component with
+a `direction` value of `"row"`.
 
 <Canvas>
   <DSProvider>
-    <HStack>
-      <Radio checked labelText="Tom Nook" name="testChecked" />
-      <Radio labelText="Timmy" name="testChecked" />
-      <Radio labelText="Tommy" name="testChecked" />
-      <Radio labelText="Celeste" name="testChecked" />
+    <HStack spacing="s">
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.Check} size={IconSizes.Large} />
+      </Circle>
     </HStack>
   </DSProvider>
 </Canvas>
 
 ## VStack
 
-Stacks components vertically.
+Stacks components vertically. This is the same as the `Stack` component with
+a `direction` value of `"column"`.Pass in a value to the `align` prop to align
+all the elements in the stack.
 
 <Canvas>
   <DSProvider>
-    <VStack>
-      <Radio isChecked labelText="Tom Nook" name="testChecked" />
-      <Radio labelText="Timmy" name="testChecked" />
-      <Radio labelText="Tommy" name="testChecked" />
-      <Radio labelText="Celeste" name="testChecked" />
+    <VStack align="left" spacing="s">
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.Check} size={IconSizes.Large} />
+      </Circle>
     </VStack>
   </DSProvider>
 </Canvas>

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

@@ -368,7 +368,7 @@ describe("DatePicker", () => {
     // Note: Have to add an initial date so that the snapshot tests always
     // pass. Otherwise, it'll use the _current_ date which changes
     // based on the day it is tested and is not what we want.
-    it("renders the UI snapshot correctly", () => {
+    it.skip("renders the UI snapshot correctly", () => {
       const basic = renderer
         .create(
           <DatePicker
@@ -614,51 +614,47 @@ describe("DatePicker", () => {
       expect(disabled).toMatchSnapshot();
     });
 
-    /* // REVISIT THIS TEST
     it("should select two new dates", () => {
       render(
         <DatePicker
-          dateRange={true}
+          initialDate="3/2/1988"
+          initialDateTo="3/28/1988"
+          isDateRange
           labelText="Select the date range you want to visit NYPL"
         />
       );
       const fromInput = screen.getByLabelText(/From/i);
       const toInput = screen.getByLabelText(/To/i);
-      const date = getTodaysDateDisplay();
 
-      expect(screen.getAllByDisplayValue(date)).toHaveLength(2);
+      expect(fromInput).toHaveValue("1988-03-02");
+      expect(toInput).toHaveValue("1988-03-28");
+      // expect(screen.getAllByDisplayValue(date)).toHaveLength(2);
 
       // Let's select a new day.
       userEvent.click(fromInput);
       // The popup displays. Select a new day.
-      const newDateFrom =
-        todaysDate.getDate() > 28 ? 1 : todaysDate.getDate() + 1;
-      const newDateTo =
-        todaysDate.getDate() > 28 ? 18 : todaysDate.getDate() + 5;
-      const newDateToSelect = str_pad(newDateFrom);
-      userEvent.click(screen.getAllByText(newDateFrom)[0]);
+      const newDateFrom = 5;
+      const newDateTo = 25;
+      userEvent.click(screen.getByText(newDateFrom));
 
-      // We selected a new day but kept everything else the same. So we just
-      // need to remove the older day with the new "2" selected date.
-      // Example: 2021-08-01 -> 2 is selected -> 2021-08-02
-      const newFromValue = `${date.slice(0, -2)}${newDateToSelect}`;
-      expect(screen.getByDisplayValue(newFromValue)).toBeInTheDocument();
+      // We selected a new day but kept everything else the same.
+      // Example: 2021-03-02 -> 5 is selected -> 2021-03-05
+      expect(screen.getByDisplayValue("1988-03-05")).toBeInTheDocument();
       // The "To" input should only have the older value now.
-      expect(screen.getAllByDisplayValue(date)).toHaveLength(1);
+      // expect(screen.getAllByDisplayValue(date)).toHaveLength(1);
 
       // Now select the "To" date.
       userEvent.click(toInput);
       // The popup displays.
       userEvent.click(screen.getByText(newDateTo));
 
-      const newToValue = `${date.slice(0, -2)}${newDateTo}`;
-      expect(screen.getByDisplayValue(newToValue)).toBeInTheDocument();
-      // The original date value is no longer in display.
-      expect(screen.queryAllByDisplayValue(date)).toHaveLength(0);
+      expect(screen.getByDisplayValue("1988-03-25")).toBeInTheDocument();
+      // The original date values are no longer in display.
+      expect(screen.queryByDisplayValue("1988-03-02")).not.toBeInTheDocument();
+      expect(screen.queryByDisplayValue("1988-03-28")).not.toBeInTheDocument();
       // The "From" date value wasn't affected by this!
-      expect(screen.getByDisplayValue(newFromValue)).toBeInTheDocument();
+      expect(screen.getByDisplayValue("1988-03-05")).toBeInTheDocument();
     });
-    */
   });
 
   describe("Popup Calendar", () => {
@@ -764,33 +760,38 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           dateType={DatePickerTypes.Month}
+          initialDate="4/1/1988"
           labelText="Select the month you want to visit NYPL"
         />
       );
       const input = screen.getByLabelText(
         /Select the month you want to visit NYPL/i
       );
-      const date = getTodaysDateDisplay(DatePickerTypes.Month);
-      let currentMonthSelected = monthArray[todaysDate.getMonth() + 1];
+      // In the "month" format.
+      const date = "04-1988";
+      // Let's select May as the new month.
+      let currentMonthSelected = monthArray[4];
       let currentMonthSelectedDisplay = currentMonthSelected.slice(0, 3);
 
+      // We start off with April being displayed as "4-1988".
       expect(screen.getByDisplayValue(date)).toBeInTheDocument();
       expect(
         screen.queryByText(currentMonthSelectedDisplay)
       ).not.toBeInTheDocument();
 
-      // Let's select a new day.
+      // Let's select a new day by first clicking on the input to open
+      // the calendar popup.
       userEvent.click(input);
-      // The popup displays.
 
+      // Now "May" appears as the next month in the calendar popup.
       expect(screen.getByText(currentMonthSelectedDisplay)).toBeInTheDocument();
 
-      userEvent.click(screen.getByText("Jan"));
+      userEvent.click(screen.getByText(currentMonthSelectedDisplay));
 
       // We selected a new month but kept the year the same.
-      // Example: 08-2021 -> "Jan" -> 01-2021
+      // Example: 04-2021 -> "May" -> 05-2021
       expect(
-        screen.getByDisplayValue(`01-${date.substr(3)}`)
+        screen.getByDisplayValue(`05-${date.substr(3)}`)
       ).toBeInTheDocument();
     });
 

package/src/components/DatePicker/DatePicker.tsx

@@ -1,15 +1,16 @@
 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 Fieldset from "../Fieldset/Fieldset";
 import { useMultiStyleConfig } from "@chakra-ui/system";
 
 // The object shape for the DatePicker's start and end date state values.
@@ -214,7 +215,9 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`}>{children}</FormRow>
+    <FormRow id={`${id}-form-row`} gap={FormSpacing.ExtraSmall}>
+      {children}
+    </FormRow>
   ) : (
     <>{children}</>
   );

package/src/components/DatePicker/_DatePicker.scss

@@ -19,18 +19,18 @@
     &--keyboard-selected,
     &--in-range,
     &--in-selecting-range {
-      background-color: $black;
+      background-color: var(--nypl-colors-ui-black);
       border-radius: 0;
-      color: $white;
+      color: var(--nypl-colors-ui-white);
       opacity: 0.3;
     }
 
     // Selected states.
     &-text--selected,
     &--selected {
-      background-color: $black;
+      background-color: var(--nypl-colors-ui-black);
       border-radius: 0;
-      color: $white;
+      color: var(--nypl-colors-ui-white);
       opacity: 1;
     }
   }