@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/components/Fieldset/Fieldset.stories.mdx

@@ -0,0 +1,55 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import Fieldset from "./Fieldset";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("Fieldset")}
+  component={Fieldset}
+  decorators={[withDesign]}
+  parameters={{
+    jest: ["Fieldset.test.tsx"],
+  }}
+  argTypes={{
+    children: { table: { disable: true } },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+  }}
+/>
+
+# Fieldset
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.3`   |
+| Latest            | `0.25.3`   |
+
+<Description of={Fieldset} />
+
+<Canvas withToolbar>
+  <Story
+    name="Basic"
+    args={{
+      isLegendHidden: false,
+      isRequired: false,
+      legendText: "This is the legend text",
+      optReqFlag: true,
+    }}
+  >
+    {(args) => (
+      <Fieldset {...args}>
+        <p>Text children in the Fieldset component.</p>
+      </Fieldset>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Basic" />

package/src/components/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Fieldset from "./Fieldset";
+
+describe("Fieldset Accessibility", () => {
+  it("passes axe accessibility", async () => {
+    const { container } = render(
+      <Fieldset legendText="Legend Text">
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility with the legend hidden", async () => {
+    const { container } = render(
+      <Fieldset legendText="Legend Text" isLegendHidden>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Fieldset", () => {
+  it("renders text in a legend and fieldset along with its children", () => {
+    render(
+      <Fieldset legendText="Legend Text">
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByRole("group")).toBeInTheDocument();
+    // `legend` has no HTML role
+    expect(screen.getByText(/Legend Text/i)).toBeInTheDocument();
+    expect(screen.getByText("Some other fields")).toBeInTheDocument();
+  });
+
+  it("renders 'Optional' text by default in the legend", () => {
+    render(
+      <Fieldset legendText="Legend Text">
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Optional/i)).toBeInTheDocument();
+  });
+
+  it("renders 'Required' text in the legend", () => {
+    render(
+      <Fieldset legendText="Legend Text" isRequired>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Required/i)).toBeInTheDocument();
+  });
+
+  it("can hide the 'Required'/'Optional' text in the legend but still show the main text", () => {
+    const { rerender } = render(
+      <Fieldset legendText="Legend Text" isRequired>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Required/i)).toBeInTheDocument();
+
+    rerender(
+      <Fieldset legendText="Legend Text" optReqFlag={false}>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Legend Text/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Optional/i)).not.toBeInTheDocument();
+
+    rerender(
+      <Fieldset legendText="Legend Text" isRequired optReqFlag={false}>
+        <p>Some other fields</p>
+      </Fieldset>
+    );
+
+    expect(screen.getByText(/Legend Text/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <Fieldset legendText="Legend Text">
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+    const required = renderer
+      .create(
+        <Fieldset legendText="Legend Text" isRequired>
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+    const hiddenHelperText = renderer
+      .create(
+        <Fieldset legendText="Legend Text" isRequired optReqFlag={false}>
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+    const hiddenLegend = renderer
+      .create(
+        <Fieldset legendText="Legend Text" isLegendHidden>
+          <p>Some other fields</p>
+        </Fieldset>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(required).toMatchSnapshot();
+    expect(hiddenHelperText).toMatchSnapshot();
+    expect(hiddenLegend).toMatchSnapshot();
+  });
+});

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+
+interface FieldsetProps {
+  /** Children to render. Typically form-related components are used. */
+  children: React.ReactNode;
+  /** Additional class name to add. */
+  className?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Flag to show or hide the text in the `legend` element. False by default. */
+  isLegendHidden?: boolean;
+  /** Flag to render "Required" or "Optional" in the `legend`.
+   * False/"Optional" by default. */
+  isRequired?: boolean;
+  /** Text to display in the `legend` element. */
+  legendText?: string;
+  /** Flag to show or hide the "Required"/"Optional" text in the `legend`.
+   * True by default. */
+  optReqFlag?: boolean;
+}
+
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+const Fieldset: React.FC<FieldsetProps> = ({
+  children,
+  className,
+  id,
+  isLegendHidden = false,
+  isRequired = false,
+  legendText,
+  optReqFlag = true,
+}) => {
+  const styles = useMultiStyleConfig("Fieldset", { isLegendHidden });
+  return (
+    <Box as="fieldset" id={id} __css={styles} className={className}>
+      <legend>
+        {legendText}
+        {optReqFlag && (
+          <Box __css={styles.helper}>
+            {isRequired ? "Required" : "Optional"}
+          </Box>
+        )}
+      </legend>
+      {children}
+    </Box>
+  );
+};
+
+export default Fieldset;

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

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fieldset renders the UI snapshot correctly 1`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;
+
+exports[`Fieldset renders the UI snapshot correctly 2`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;
+
+exports[`Fieldset renders the UI snapshot correctly 3`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;
+
+exports[`Fieldset renders the UI snapshot correctly 4`] = `
+<fieldset
+  className="css-0"
+>
+  <legend>
+    Legend Text
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </legend>
+  <p>
+    Some other fields
+  </p>
+</fieldset>
+`;

package/src/components/Form/Form.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -57,7 +56,7 @@ The `Form` component renders a standard `<form>` element and should be used to h
 
 `FormRow` should be used as a parent of multiple `FormField` components when you need to render multiple input components in a horizontal row.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Form"
     args={{
@@ -187,7 +186,7 @@ The `Form` component renders a standard `<form>` element and should be used to h
       </Form>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Form" />
 
@@ -254,7 +253,7 @@ By default, the `Form` component will handle the NYPL spacing around form input
 
 Below are the spacing variants available with the `FormSpacing` enum.
 
-<Preview>
+<Canvas>
   <Story
     name="Spacing Variants"
     args={{
@@ -263,7 +262,7 @@ Below are the spacing variants available with the `FormSpacing` enum.
   >
     {getForms(sizes)}
   </Story>
-</Preview>
+</Canvas>
 
 ## Example Code
 

package/src/components/Form/Form.tsx

@@ -33,6 +33,7 @@ export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
   const alteredChildren = React.Children.map(
     children,
     (child: React.ReactElement, i) => {
+      if (!child) return null;
       return React.cloneElement(child, { id: `${id}-grandchild${i}` });
     }
   );

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

@@ -8,17 +8,8 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import SimpleGrid from "./SimpleGrid";
-import Card, {
-  CardImage,
-  CardHeading,
-  CardContent,
-  CardActions,
-} from "../Card/Card";
-import {
-  CardImageRatios,
-  CardImageSizes,
-  CardLayouts,
-} from "../Card/CardTypes";
+import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
+import { CardLayouts } from "../Card/CardTypes";
 import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import {
@@ -28,6 +19,7 @@ import {
   IconRotationTypes,
 } from "../Icons/IconTypes";
 import Image from "../Image/Image";
+import { ImageRatios } from "../Image/ImageTypes";
 
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
@@ -86,9 +78,9 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
     {(args) => (
       <SimpleGrid {...args}>
         <Card
-          imageSrc="https://placeimg.com/500/200/animals"
+          imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -99,7 +91,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -110,7 +102,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/240/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -121,7 +113,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/260/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -132,7 +124,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/320/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -143,7 +135,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
         <Card
           imageSrc="https://placeimg.com/400/300/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -169,6 +161,7 @@ for (const icon in IconNames) {
   const iname = `Example icon: ${IconNames[icon]}`;
   const iconRender = (
     <Icon
+      key={icon}
       name={IconNames[icon]}
       size={IconSizes.ExtraExtraExtraLarge}
       titleText={iname}
@@ -190,24 +183,24 @@ This example is rendering square `Image` components with the `columns` prop set
 <Canvas>
   <DSProvider>
     <SimpleGrid columns={6}>
-      <Image src="https://placeimg.com/300/300/animals?x=1" />
-      <Image src="https://placeimg.com/300/300/animals?x=2" />
-      <Image src="https://placeimg.com/300/300/animals?x=3" />
-      <Image src="https://placeimg.com/300/300/animals?x=4" />
-      <Image src="https://placeimg.com/300/300/animals?x=5" />
-      <Image src="https://placeimg.com/300/300/animals?x=6" />
-      <Image src="https://placeimg.com/300/300/animals?x=7" />
-      <Image src="https://placeimg.com/300/300/animals?x=8" />
-      <Image src="https://placeimg.com/300/300/animals?x=9" />
-      <Image src="https://placeimg.com/300/300/animals?x=10" />
-      <Image src="https://placeimg.com/300/300/animals?x=11" />
-      <Image src="https://placeimg.com/300/300/animals?x=12" />
-      <Image src="https://placeimg.com/300/300/animals?x=13" />
-      <Image src="https://placeimg.com/300/300/animals?x=14" />
-      <Image src="https://placeimg.com/300/300/animals?x=15" />
-      <Image src="https://placeimg.com/300/300/animals?x=16" />
-      <Image src="https://placeimg.com/300/300/animals?x=17" />
-      <Image src="https://placeimg.com/300/300/animals?x=18" />
+      <Image src="https://placeimg.com/300/300/animals?x=1" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=2" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=3" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=4" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=5" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=6" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=7" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=8" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=9" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=10" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=11" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=12" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=13" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=14" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=15" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=16" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=17" alt="" />
+      <Image src="https://placeimg.com/300/300/animals?x=18" alt="" />
     </SimpleGrid>
   </DSProvider>
 </Canvas>
@@ -225,7 +218,7 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         center
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.FourByThree}
+        imageAspectRatio={ImageRatios.FourByThree}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1">
           Card Heading
@@ -242,7 +235,7 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.FourByThree}
+        imageAspectRatio={ImageRatios.FourByThree}
       >
         <CardHeading level={HeadingLevels.Four} id="heading2">
           Card Heading
@@ -259,7 +252,7 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         center
         imageSrc="https://placeimg.com/320/320/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.FourByThree}
+        imageAspectRatio={ImageRatios.FourByThree}
       >
         <CardHeading level={HeadingLevels.Four} id="heading3">
           Card Heading

package/src/components/Grid/SimpleGrid.test.tsx

@@ -5,7 +5,7 @@ import renderer from "react-test-renderer";
 
 import SimpleGrid from "./SimpleGrid";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { CardImageRatios } from "../Card/CardTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 
 describe("Grid Accessibility", () => {
@@ -15,7 +15,7 @@ describe("Grid Accessibility", () => {
         <Card
           imageSrc="https://placeimg.com/500/200/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Two}>Card Heading</CardHeading>
           <CardContent>
@@ -26,7 +26,7 @@ describe("Grid Accessibility", () => {
         <Card
           imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -37,7 +37,7 @@ describe("Grid Accessibility", () => {
         <Card
           imageSrc="https://placeimg.com/400/240/animals"
           imageAlt="Alt text"
-          imageAspectRatio={CardImageRatios.TwoByOne}
+          imageAspectRatio={ImageRatios.TwoByOne}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>

package/src/components/Heading/Heading.stories.mdx

@@ -25,10 +25,9 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Heading.test.tsx"],
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
+    additionalStyles: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    sx: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -37,7 +36,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.2`   |
 
 <Description of={Heading} />
 

package/src/components/HelperErrorText/HelperErrorText.stories.mdx

@@ -35,7 +35,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.3`   |
 
 <Description of={HelperErrorText} />
 

package/src/components/HelperErrorText/HelperErrorText.tsx

@@ -6,6 +6,8 @@ import generateUUID from "../../helpers/generateUUID";
 export type AriaLiveValues = "assertive" | "off" | "polite";
 
 interface HelperErrorTextProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Aria attribute. When true, assistive technologies will
    * read the entire DOM element. When false, only changes (additionals or
    * removals) will be read. True by default. */
@@ -31,6 +33,7 @@ export default function HelperErrorText(
   props: React.PropsWithChildren<HelperErrorTextProps>
 ) {
   const {
+    additionalStyles = {},
     ariaAtomic = true,
     ariaLive = "polite",
     children,
@@ -41,6 +44,7 @@ export default function HelperErrorText(
   // Only announce the text in the invalid state.
   const announceAriaLive = isInvalid;
   const styles = useStyleConfig("HelperErrorText", { isInvalid });
+  const finalStyles = { ...styles, ...additionalStyles };
 
   return (
     <Box
@@ -49,7 +53,7 @@ export default function HelperErrorText(
       aria-atomic={ariaAtomic}
       data-isinvalid={isInvalid}
       aria-live={announceAriaLive ? ariaLive : "off"}
-      __css={styles}
+      __css={finalStyles}
     >
       {children}
     </Box>

package/src/components/Hero/HeroTypes.tsx

@@ -10,6 +10,7 @@ export enum HeroTypes {
   FiftyFifty = "fiftyfifty",
 }
 
+// Only used for internal purposes.
 export const HeroSecondaryTypes = [
   HeroTypes.Secondary,
   HeroTypes.SecondaryBooksAndMore,