@nypl/design-system-react-components 0.25.7 → 0.25.10

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

@@ -1,6 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { Box } from "@chakra-ui/react";
-import { Grid, GridItem } from "@chakra-ui/react";
+import { Box, Grid, GridItem } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -11,6 +11,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
+| Latest            | `0.25.1`   |
 
 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)
@@ -63,16 +64,12 @@ the `templateColumns` and `templateRows`.
       height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
-      gap="32"
+      gap="l"
     >
-      <GridItem
-        rowSpan={2}
-        colSpan={1}
-        bg="var(--nypl-colors-ui-link-primary)"
-      />
-      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
-      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
-      <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
+      <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
+      <GridItem colSpan={2} bg="ui.success.primary" />
+      <GridItem colSpan={2} bg="ui.success.secondary" />
+      <GridItem colSpan={4} bg="ui.link.secondary" />
     </Grid>
   </DSProvider>
 </Canvas>
@@ -82,11 +79,11 @@ the `templateColumns` and `templateRows`.
   height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
-  gap="32"
+  gap="l"
 >
-  <GridItem rowSpan={2} colSpan={1} bg="var(--nypl-colors-ui-link-primary)" />
-  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
-  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
-  <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
+  <GridItem rowSpan={2} colSpan={1} bg="ui.link.primary" />
+  <GridItem colSpan={2} bg="ui.success.primary" />
+  <GridItem colSpan={2} bg="ui.success.secondary" />
+  <GridItem colSpan={4} bg="ui.link.secondary" />
 </Grid>
 ```

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

@@ -1,10 +1,10 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
 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, IconSizes } from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />
 

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

@@ -1,17 +1,17 @@
+import { HStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { HStack } from "@chakra-ui/react";
 
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
 import Checkbox from "./Checkbox";
 import { onChangeDefault } from "./Checkbox";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Checkbox")}
@@ -20,16 +20,35 @@ import { onChangeDefault } from "./Checkbox";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
     },
     jest: ["Checkbox.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
-    isChecked: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    isChecked: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isIndeterminate: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    key: { table: { disable: true } },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: false } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: false } },
+    },
   }}
 />
 
@@ -38,7 +57,7 @@ import { onChangeDefault } from "./Checkbox";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Checkbox} />
 
@@ -49,15 +68,18 @@ cause an accessibility violation if none is present.
   <Story
     name="Checkbox"
     args={{
+      className: undefined,
       helperText: "This is the helper text!",
-      id: "test_id",
+      id: "checkbox_id",
       invalidText: "This is the error text :(",
+      isChecked: undefined,
       isDisabled: false,
       isIndeterminate: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Test Label",
       name: "test_name",
+      onChange: undefined,
       showHelperInvalidText: true,
       showLabel: true,
       value: "1",

package/src/components/Checkbox/Checkbox.tsx

@@ -1,23 +1,26 @@
-import * as React from "react";
 import {
   Box,
   Checkbox as ChakraCheckbox,
   Icon,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import * as React from "react";
+
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface CheckboxProps {
   /** className you can add in addition to 'input' */
   className?: string;
   /** Optional string to populate the HelperErrorText for standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the HelperErrorText for the error state
    * when `isInvalid` is true. */
-  invalidText?: string;
+  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:
@@ -89,7 +92,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       value,
     } = props;
     const styles = useMultiStyleConfig("Checkbox", {});
-    const footnote = isInvalid ? invalidText : helperText;
+    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
     const onChange = props.onChange || onChangeDefault;
     // Use Chakra's default indeterminate icon.
@@ -130,9 +133,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         </ChakraCheckbox>
         {footnote && showHelperInvalidText && (
           <Box __css={styles.helper}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </>

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

@@ -1,17 +1,23 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
+import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "./CheckboxGroup";
 import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
-import Checkbox from "../Checkbox/Checkbox";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  CheckboxGroupLayoutTypes,
+  "CheckboxGroupLayoutTypes"
+);
 
 <Meta
   title={getCategory("CheckboxGroup")}
@@ -20,17 +26,41 @@ import Checkbox from "../Checkbox/Checkbox";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
     },
     jest: ["CheckboxGroup.test.tsx"],
   }}
   argTypes={{
     children: { table: { disable: true } },
-    defaultValue: { table: { disable: true } },
-    id: { table: { disable: true } },
-    name: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    defaultValue: { control: false },
+    id: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    key: { table: { disable: true } },
+    layout: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "CheckboxGroupLayoutTypes.Column" } },
+      options: enumValues.options,
+    },
+    name: { control: false },
+    onChange: { control: false },
+    optReqFlag: {
+      table: { defaultValue: { summary: true } },
+    },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
   }}
 />
 
@@ -39,7 +69,7 @@ import Checkbox from "../Checkbox/Checkbox";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={CheckboxGroup} />
 
@@ -49,20 +79,22 @@ import Checkbox from "../Checkbox/Checkbox";
     args={{
       defaultValue: ["4"],
       helperText: "This is the helper text for the full group.",
+      id: "checkboxGroup-id",
       invalidText: "This is the error text :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Standard Checkbox Group",
-      layout: CheckboxGroupLayoutTypes.Column,
+      layout: "CheckboxGroupLayoutTypes.Column",
       name: "checkbox-story",
+      onChange: undefined,
       optReqFlag: true,
       showHelperInvalidText: true,
       showLabel: true,
     }}
   >
     {(args) => (
-      <CheckboxGroup {...args}>
+      <CheckboxGroup {...args} layout={enumValues.getValue(args.layout)}>
         <Checkbox value="2" labelText="Checkbox 2" />
         <Checkbox value="3" labelText="Checkbox 3" />
         <Checkbox value="4" labelText="Checkbox 4" />

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -6,12 +6,14 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import generateUUID from "../../helpers/generateUUID";
-import { spacing } from "../../theme/foundations/spacing";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import Checkbox from "../Checkbox/Checkbox";
+import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import Fieldset from "../Fieldset/Fieldset";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
+import { spacing } from "../../theme/foundations/spacing";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface CheckboxGroupProps {
   /** Any child node passed to the component. */
@@ -19,11 +21,11 @@ export interface CheckboxGroupProps {
   /** Populates the initial value of the input */
   defaultValue?: string[];
   /** Optional string to populate the HelperErrorText for standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the HelperErrorText for error state */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** Adds the 'disabled' prop to the input when true. */
   isDisabled?: boolean;
   /** A`dds the 'aria-invalid' attribute to the input and
@@ -76,7 +78,7 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
       showHelperInvalidText = true,
       showLabel = true,
     } = props;
-    const footnote = isInvalid ? invalidText : helperText;
+    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const spacingProp =
       layout === CheckboxGroupLayoutTypes.Column ? spacing.s : spacing.l;
     const newChildren = [];
@@ -139,9 +141,11 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
         </ChakraCheckboxGroup>
         {footnote && showHelperInvalidText && (
           <Box __css={styles.helper}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperErrorText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperErrorText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </Fieldset>

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

@@ -584,11 +584,14 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "helper text",
+        }
+      }
       data-isinvalid={false}
       id="helperText-helperErrorText"
-    >
-      helper text
-    </div>
+    />
   </div>
 </fieldset>
 `;

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

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import ComponentWrapper from "./ComponentWrapper";
+
+/**
+ * @NOTE while the component is accessible, whatever is passed as children
+ * elements may not be considered accessible. This is up to the developer to
+ * make sure to pass accessible elements.
+ */
+describe("ComponentWrapper Accessibility", () => {
+  it("Passes axe accessibility test", async () => {
+    const { container } = render(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={false}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("Passes axe accessibility test without certain props", async () => {
+    const { container } = render(
+      <ComponentWrapper id="id">
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("ComponentWrapper", () => {
+  it("renders with different text sections and children elements", () => {
+    render(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={false}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.getByText("description text")).toBeInTheDocument();
+    expect(screen.getByText("heading text")).toBeInTheDocument();
+    expect(screen.getByText("helper text")).toBeInTheDocument();
+    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
+    expect(screen.getByText("children elements")).toBeInTheDocument();
+  });
+
+  it("renders with only its children elements", () => {
+    render(
+      <ComponentWrapper id="id">
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.queryByText("description text")).not.toBeInTheDocument();
+    expect(screen.queryByText("heading text")).not.toBeInTheDocument();
+    expect(screen.queryByText("helper text")).not.toBeInTheDocument();
+    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
+    expect(screen.getByText("children elements")).toBeInTheDocument();
+  });
+
+  it("renders invalid text in the internal HelperErrorText component", () => {
+    const { rerender } = render(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={false}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.getByText("helper text")).toBeInTheDocument();
+    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
+
+    rerender(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={true}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.queryByText("helper text")).not.toBeInTheDocument();
+    expect(screen.getByText("invalid text")).toBeInTheDocument();
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <ComponentWrapper
+          descriptionText="description text"
+          headingText="heading text"
+          helperText="helper text"
+          id="id"
+          invalidText="invalid text"
+          isInvalid={false}
+        >
+          <div>children elements</div>
+        </ComponentWrapper>
+      )
+      .toJSON();
+    const onlyWithChildren = renderer
+      .create(
+        <ComponentWrapper id="id">
+          <div>children elements</div>
+        </ComponentWrapper>
+      )
+      .toJSON();
+    const isInvalid = renderer
+      .create(
+        <ComponentWrapper
+          descriptionText="description text"
+          headingText="heading text"
+          helperText="helper text"
+          id="id"
+          invalidText="invalid text"
+          isInvalid={true}
+        >
+          <div>children elements</div>
+        </ComponentWrapper>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(onlyWithChildren).toMatchSnapshot();
+    expect(isInvalid).toMatchSnapshot();
+  });
+});

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -1,22 +1,30 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import generateUUID from "../../helpers/generateUUID";
+import * as React from "react";
+
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+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;
-  /** Optional string to set the text for a video description */
+  /** Optional string to set the text for the component's description */
   descriptionText?: string;
   /** Optional string to set the text for a `Heading` component */
   headingText?: string;
   /** Optional string to set the text for a `HelperErrorText` component */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  /** Optional string to populate the `HelperErrorText` for the error state
+   * when `isInvalid` is true. */
+  invalidText?: HelperErrorTextType;
+  /** Sets invalid text in the error state. */
+  isInvalid?: boolean;
 }
 
 function ComponentWrapper(
@@ -28,34 +36,39 @@ function ComponentWrapper(
     headingText,
     helperText,
     id = generateUUID(),
+    invalidText,
+    isInvalid = false,
   } = 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("Component Wrapper has no children.");
+    console.warn("`ComponentWrapper` has no children.");
   }
 
   return (
     <Box __css={styles}>
-      <>
-        {headingText && (
-          <Heading
-            id={`${id}-heading`}
-            level={HeadingLevels.Two}
-            text={headingText}
+      {headingText && (
+        <Heading
+          id={`${id}-heading`}
+          level={HeadingLevels.Two}
+          text={headingText}
+        />
+      )}
+      {descriptionText && <Text>{descriptionText}</Text>}
+      {children}
+      {footnote && (
+        <Box __css={styles.helperText}>
+          <HelperErrorText
+            id={`${id}-helperText`}
+            isInvalid={isInvalid}
+            text={footnote}
           />
-        )}
-        {descriptionText && <Text>{descriptionText}</Text>}
-        {children}
-        {helperText && (
-          <Box __css={styles.helperText}>
-            <HelperErrorText id={`${id}-helperText`} isInvalid={false}>
-              {helperText}
-            </HelperErrorText>
-          </Box>
-        )}
-      </>
+        </Box>
+      )}
     </Box>
   );
 }