@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -2,7 +2,6 @@ import { Meta, Story, Canvas } from "@storybook/addon-docs";
 import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
 
 import Icon from "../Icons/Icon";
-import { IconNames, IconSizes } from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -15,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 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)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Stack`, `HStack`,
@@ -53,13 +52,13 @@ elements both horizontally and vertically through the `direction` prop and the
     {(args) => (
       <Stack {...args}>
         <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-          <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+          <Icon name="errorFilled" size="large" />
         </Circle>
         <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-          <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+          <Icon name="errorOutline" size="large" />
         </Circle>
         <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-          <Icon name={IconNames.Check} size={IconSizes.Large} />
+          <Icon name="check" size="large" />
         </Circle>
       </Stack>
     )}
@@ -75,13 +74,13 @@ a `direction` value of `"row"`.
   <DSProvider>
     <HStack spacing="s">
       <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-        <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+        <Icon name="errorFilled" size="large" />
       </Circle>
       <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-        <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+        <Icon name="errorOutline" size="large" />
       </Circle>
       <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-        <Icon name={IconNames.Check} size={IconSizes.Large} />
+        <Icon name="check" size="large" />
       </Circle>
     </HStack>
   </DSProvider>
@@ -97,13 +96,13 @@ all the elements in the stack.
   <DSProvider>
     <VStack align="left" spacing="s">
       <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-        <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+        <Icon name="errorFilled" size="large" />
       </Circle>
       <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-        <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+        <Icon name="errorOutline" size="large" />
       </Circle>
       <Circle size="50px" borderColor="ui.black" borderWidth="1px">
-        <Icon name={IconNames.Check} size={IconSizes.Large} />
+        <Icon name="check" size="large" />
       </Circle>
     </VStack>
   </DSProvider>

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.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 

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

@@ -1,7 +1,7 @@
 import { Flex, Spacer } from "@chakra-ui/react";
-import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import * as React from "react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
@@ -39,7 +39,7 @@ describe("Checkbox Accessibility", () => {
 });
 
 describe("Checkbox", () => {
-  let changeHandler;
+  let changeHandler: jest.MockedFunction<() => void>;
 
   beforeEach(() => {
     changeHandler = jest.fn();

package/src/components/Checkbox/Checkbox.tsx

@@ -5,11 +5,23 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import * as React from "react";
+import { AriaAttributes } from "../../utils/interfaces";
 
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-export interface CheckboxProps {
+
+interface CheckboxIconProps {
+  /** When using the Checkbox as a "controlled" form element, you can specify
+   * the Checkbox's checked state using this prop.
+   * Learn more about controlled and uncontrolled form fields:
+   * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+  isChecked?: boolean;
+  /** Adds the indeterminate state to the `Checkbox`. */
+  isIndeterminate?: boolean;
+}
+
+export interface CheckboxProps extends CheckboxIconProps {
   /** className you can add in addition to 'input' */
   className?: string;
   /** Optional string to populate the HelperErrorText for standard state */
@@ -19,16 +31,9 @@ export interface CheckboxProps {
   /** Optional string to populate the HelperErrorText for the error state
    * when `isInvalid` is true. */
   invalidText?: HelperErrorTextType;
-  /** When using the Checkbox as a "controlled" form element, you can specify
-   * the Checkbox's checked state using this prop.
-   * Learn more about controlled and uncontrolled form fields:
-   * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
-  isChecked?: boolean;
   /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
    * This also makes the text italic and color scheme gray. */
   isDisabled?: boolean;
-  /** Adds the indeterminate state to the `Checkbox`. */
-  isIndeterminate?: boolean;
   /** Adds the 'aria-invalid' attribute to the input when true. This also makes
    * the color theme "NYPL error" red for the button and text. */
   isInvalid?: boolean;
@@ -55,7 +60,7 @@ export const onChangeDefault = () => {
   return;
 };
 
-function CheckboxIcon(props) {
+function CheckboxIcon(props: CheckboxIconProps) {
   // We don't need the `isIndeterminate` or `isChecked` props but it
   // causes rendering issues on the SVG element, so we remove them
   // before passing all the props to the `Icon` component.
@@ -91,8 +96,8 @@ export const Checkbox = chakra(
       ...rest
     } = props;
     const styles = useMultiStyleConfig("Checkbox", {});
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
-    const ariaAttributes = {};
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes: AriaAttributes = {};
     const onChange = props.onChange || onChangeDefault;
     // Use Chakra's default indeterminate icon.
     const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
@@ -110,7 +115,9 @@ export const Checkbox = chakra(
         );
       }
       ariaAttributes["aria-label"] =
-        labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+        labelText && footnote
+          ? `${labelText} - ${footnote}`
+          : (labelText as string);
     } else {
       if (footnote) ariaAttributes["aria-describedby"] = `${id}-helperText`;
     }
@@ -145,10 +152,10 @@ export const Checkbox = chakra(
         </ChakraCheckbox>
         {footnote && showHelperInvalidText && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </>

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

@@ -10,12 +10,8 @@ import { withDesign } from "storybook-addon-designs";
 
 import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "./CheckboxGroup";
-import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 
 <Meta
   title={getCategory("CheckboxGroup")}
@@ -46,9 +42,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
     },
     key: { table: { disable: true } },
     layout: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "LayoutTypes.Column" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "column" } },
     },
     name: { control: false },
     onChange: { control: false },
@@ -70,7 +64,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -104,7 +98,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
       isInvalid: false,
       isRequired: false,
       labelText: "Standard Checkbox Group",
-      layout: "LayoutTypes.Column",
+      layout: "column",
       name: "checkbox-story",
       onChange: undefined,
       showHelperInvalidText: true,
@@ -113,7 +107,7 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
     }}
   >
     {(args) => (
-      <CheckboxGroup {...args} layout={enumValues.getValue(args.layout)}>
+      <CheckboxGroup {...args}>
         <Checkbox value="2" labelText="Checkbox 2" />
         <Checkbox value="3" labelText="Checkbox 3" />
         <Checkbox value="4" labelText="Checkbox 4" />
@@ -153,12 +147,7 @@ a row.
       <Checkbox value="5" labelText="Checkbox 5" />
     </CheckboxGroup>
     <br />
-    <CheckboxGroup
-      id="row"
-      labelText="Row"
-      name="row-example"
-      layout={LayoutTypes.Row}
-    >
+    <CheckboxGroup id="row" labelText="Row" name="row-example" layout="row">
       <Checkbox value="2" labelText="Checkbox 2" />
       <Checkbox value="3" labelText="Checkbox 3" />
       <Checkbox value="4" labelText="Checkbox 4" />
@@ -296,7 +285,7 @@ children are checked, the parent will be in the "checked" state.
 The following working example can be used in your application to keep track of
 the checked and indeterminate states - taken and modified from Chakra's
 [Checkbox](https://chakra-ui.com/docs/form/checkbox#indeterminate) documentation.
-Note that this example is specifically using Reservoir Design System (DS) 
+Note that this example is specifically using Reservoir Design System (DS)
 `Checkbox` and `CheckboxGroup` components.
 
 ```tsx

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

@@ -7,7 +7,6 @@ import renderer from "react-test-renderer";
 
 import CheckboxGroup from "./CheckboxGroup";
 import Checkbox from "../Checkbox/Checkbox";
-import { LayoutTypes } from "../../helpers/enums";
 
 describe("CheckboxGroup Accessibility", () => {
   it("passes axe accessibility with string labels ", async () => {
@@ -305,12 +304,7 @@ describe("Checkbox", () => {
       .toJSON();
     const row = renderer
       .create(
-        <CheckboxGroup
-          labelText="row"
-          name="row"
-          id="row"
-          layout={LayoutTypes.Row}
-        >
+        <CheckboxGroup labelText="row" name="row" id="row" layout="row">
           <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
           <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -11,8 +11,9 @@ import Fieldset from "../Fieldset/Fieldset";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
 import { spacing } from "../../theme/foundations/spacing";
+
 export interface CheckboxGroupProps {
   /** Any child node passed to the component. */
   children: React.ReactNode;
@@ -73,7 +74,7 @@ export const CheckboxGroup = chakra(
       isInvalid = false,
       isRequired = false,
       labelText,
-      layout = LayoutTypes.Column,
+      layout = "column",
       name,
       onChange,
       showHelperInvalidText = true,
@@ -81,12 +82,12 @@ export const CheckboxGroup = chakra(
       showRequiredLabel = true,
       ...rest
     } = props;
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
+    const footnote = isInvalid ? invalidText : helperText;
+    const newChildren: JSX.Element[] = [];
     const spacingProp =
-      layout === LayoutTypes.Column
+      layout === "column"
         ? spacing.input.group.default.vstack
         : spacing.input.group.default.hstack;
-    const newChildren = [];
     const checkboxProps =
       defaultValue && onChange
         ? {
@@ -102,31 +103,34 @@ export const CheckboxGroup = chakra(
     }
 
     // Go through the Checkbox children and update them as needed.
-    React.Children.map(children, (child: React.ReactElement, i) => {
-      if (child.type !== Checkbox) {
-        // Special case for Storybook MDX documentation.
-        if (child.props.mdxType && child.props.mdxType === "Checkbox") {
-          noop();
-        } else {
-          console.warn(
-            "NYPL Reservoir CheckboxGroup: Only `Checkbox` components are " +
-              "allowed as children."
-          );
+    React.Children.map(
+      children as JSX.Element,
+      (child: React.ReactElement, i) => {
+        if (child.type !== Checkbox) {
+          // Special case for Storybook MDX documentation.
+          if (child.props.mdxType && child.props.mdxType === "Checkbox") {
+            noop();
+          } else {
+            console.warn(
+              "NYPL Reservoir CheckboxGroup: Only `Checkbox` components are " +
+                "allowed as children."
+            );
+          }
         }
-      }
 
-      if (child !== undefined && child !== null) {
-        const newProps = {
-          key: i,
-          id: `${id}-${i}`,
-          name,
-          isDisabled,
-          isInvalid,
-          isRequired,
-        };
-        newChildren.push(React.cloneElement(child, newProps));
+        if (child !== undefined && child !== null) {
+          const newProps = {
+            key: i,
+            id: `${id}-${i}`,
+            name,
+            isDisabled,
+            isInvalid,
+            isRequired,
+          };
+          newChildren.push(React.cloneElement(child, newProps));
+        }
       }
-    });
+    );
 
     // Get the Chakra-based styles for the custom elements in this component.
     const styles = useMultiStyleConfig("CheckboxGroup", { isFullWidth });
@@ -147,7 +151,7 @@ export const CheckboxGroup = chakra(
             direction={[layout]}
             spacing={spacingProp}
             ref={ref}
-            aria-label={!showLabel ? labelText : null}
+            aria-label={!showLabel ? labelText : undefined}
             sx={styles.stack}
           >
             {newChildren}
@@ -155,10 +159,10 @@ export const CheckboxGroup = chakra(
         </ChakraCheckboxGroup>
         {footnote && showHelperInvalidText && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperErrorText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </Fieldset>

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

@@ -9,7 +9,6 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
     column
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="column"
@@ -149,7 +148,6 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
     row
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1objuxj"
     data-testid="checkbox-group"
     id="row"
@@ -429,7 +427,6 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
     helperText
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="helperText"
@@ -581,7 +578,6 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
     invalidText
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="invalidText"
@@ -721,7 +717,6 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
     no optional or required label
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="noRequiredLabel"
@@ -864,7 +859,6 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
     </span>
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="required"
@@ -1004,7 +998,6 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
     invalid
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="invalid"
@@ -1150,7 +1143,6 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
     disabled
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="disabled"
@@ -1296,7 +1288,6 @@ exports[`Checkbox renders the UI snapshot correctly 10`] = `
     jsxLabels
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="jsxLabels"
@@ -1460,7 +1451,6 @@ exports[`Checkbox renders the UI snapshot correctly 11`] = `
     chakraProps
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="chakraProps"
@@ -1601,7 +1591,6 @@ exports[`Checkbox renders the UI snapshot correctly 12`] = `
     otherProps
   </legend>
   <div
-    aria-label={null}
     className="chakra-stack css-1wdv1uh"
     data-testid="checkbox-group"
     id="otherProps"

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -2,7 +2,6 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
@@ -39,7 +38,7 @@ export const ComponentWrapper = chakra(
     } = props;
     const hasChildren = !!children;
     const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
+    const footnote = 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.
@@ -49,21 +48,15 @@ export const ComponentWrapper = chakra(
 
     return (
       <Box __css={styles} {...rest}>
-        {headingText && (
-          <Heading
-            id={`${id}-heading`}
-            level={HeadingLevels.Two}
-            text={headingText}
-          />
-        )}
+        {headingText && <Heading id={`${id}-heading`} text={headingText} />}
         {descriptionText && <Text>{descriptionText}</Text>}
         {children}
         {footnote && (
           <HelperErrorText
-            additionalStyles={styles.helperErrorText}
             id={`${id}-helperText`}
             isInvalid={isInvalid}
             text={footnote}
+            __css={styles.helperErrorText}
           />
         )}
       </Box>