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

package/src/components/Form/Form.tsx

@@ -1,66 +1,95 @@
 import * as React from "react";
-import bem from "../../utils/bem";
-import generateUUID from "../../helpers/generateUUID";
 import { FormSpacing } from "./FormTypes";
+import SimpleGrid from "../Grid/SimpleGrid";
+import { Box } from "@chakra-ui/react";
+import generateUUID from "../../helpers/generateUUID";
+
+export interface FormChildProps {
+  /** className to be applied to FormRow */
+  className?: string;
+  /** Spacing size (internal use) */
+  gap?: FormSpacing;
+  /** ID that other components can cross reference (internal use) */
+  id?: string;
+}
 
 export interface FormProps {
   /** Optional form `action` attribute */
   action?: string;
-  /** Optional additional attributes passed to the `<form>` element */
-  attributes?: { [key: string]: any };
   /** Optional className you can add in addition to `form` */
   className?: string;
   /** Optional ID that other components can cross reference */
   id?: string;
   /** Optional form `method` attribute */
   method?: "get" | "post";
-  /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
   /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
   spacing?: FormSpacing;
 }
 
-// FormRow child-component
-export function FormRow(props) {
-  const { children, className } = props;
-  return <div className={bem("form-row", [], "", [className])}>{children}</div>;
+/** FormRow child-component */
+export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
+  const { children, className, gap, id } = props;
+  const count = React.Children.count(children);
+  const alteredChildren = React.Children.map(
+    children,
+    (child: React.ReactElement, i) => {
+      if (!child) return null;
+      return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+    }
+  );
+  return (
+    <SimpleGrid columns={count} className={className} gap={gap} id={id}>
+      {alteredChildren}
+    </SimpleGrid>
+  );
 }
 
-// FormField child-component
-export function FormField(props) {
-  const { children, className } = props;
+/** FormField child-component */
+export function FormField(props: React.PropsWithChildren<FormChildProps>) {
+  const { children, className, gap, id } = props;
   return (
-    <div className={bem("form-field", [], "", [className])}>{children}</div>
+    <SimpleGrid columns={1} className={className} gap={gap} id={id}>
+      {children}
+    </SimpleGrid>
   );
 }
 
+/** main Form component */
 export default function Form(props: React.ComponentProps<"form"> & FormProps) {
   const {
     action,
-    attributes = {},
     children,
     className,
     id = generateUUID(),
     method,
-    modifiers = [],
     spacing,
   } = props;
 
+  let attributes = {};
   action && (attributes["action"] = action);
 
   method &&
     (method === "get" || method === "post") &&
     (attributes["method"] = method);
 
-  spacing && modifiers.push(`spacing-${spacing}`);
+  const alteredChildren = React.Children.map(
+    children,
+    (child: React.ReactElement, i) => {
+      return React.cloneElement(child, { gap: spacing, id: `${id}-child${i}` });
+    }
+  );
 
   return (
-    <form
-      className={bem("form", modifiers, "", [className])}
+    <Box
+      as="form"
+      aria-label="form"
       id={id}
       {...attributes}
+      className={className}
     >
-      {children}
-    </form>
+      <SimpleGrid columns={1} gap={spacing} id={id + "-parent"}>
+        {alteredChildren}
+      </SimpleGrid>
+    </Box>
   );
 }

package/src/components/Form/FormTypes.tsx

@@ -1,8 +1,3 @@
-export enum FormSpacing {
-  ExtraExtraSmall = "extra-extra-small",
-  ExtraSmall = "extra-small",
-  Small = "small",
-  Medium = "medium",
-  Large = "large",
-  ExtraLarge = "extra-large",
-}
+import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+
+export { FormSpacing };

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

@@ -2,26 +2,36 @@
 
 exports[`Form Snapshot Renders the UI snapshot correctly 1`] = `
 <form
-  className="form "
+  aria-label="form"
+  className="css-0"
   id="snapshot-form"
 >
   <div
-    className="form-row "
+    className="css-aq1pyb"
+    id="snapshot-form-parent"
   >
     <div
-      className="form-field "
+      className="css-1ao258g"
+      id="snapshot-form-child0"
     >
-      Form Field 1
-    </div>
-    <div
-      className="form-field "
-    >
-      Form Field 2
-    </div>
-    <div
-      className="form-field "
-    >
-      Form Field 3
+      <div
+        className="css-aq1pyb"
+        id="snapshot-form-child0-grandchild0"
+      >
+        Form Field 1
+      </div>
+      <div
+        className="css-aq1pyb"
+        id="snapshot-form-child0-grandchild1"
+      >
+        Form Field 2
+      </div>
+      <div
+        className="css-aq1pyb"
+        id="snapshot-form-child0-grandchild2"
+      >
+        Form Field 3
+      </div>
     </div>
   </div>
 </form>

package/src/components/Grid/GridTypes.tsx

@@ -0,0 +1,9 @@
+export enum GridGaps {
+  ExtraExtraSmall = "xxs",
+  ExtraSmall = "xs",
+  Small = "s",
+  Medium = "m",
+  Large = "l",
+  ExtraLarge = "xl",
+  ExtraExtraLarge = "xxl",
+}

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

@@ -0,0 +1,268 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+
+import SimpleGrid from "./SimpleGrid";
+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 {
+  IconNames,
+  LogoNames,
+  IconSizes,
+  IconRotationTypes,
+} from "../Icons/IconTypes";
+import Image from "../Image/Image";
+import { ImageRatios } from "../Image/ImageTypes";
+
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("SimpleGrid")}
+  component={SimpleGrid}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26613",
+    },
+    jest: ["SimpleGrid.test.tsx"],
+  }}
+  argTypes={{
+    columns: {
+      control: {
+        type: "number",
+        min: 2,
+      },
+      table: {
+        defaultValue: {
+          summary: 3,
+        },
+      },
+    },
+    gap: {
+      table: {
+        defaultValue: {
+          summary: "l",
+        },
+      },
+    },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+  }}
+/>
+
+# SimpleGrid
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.25.1`   |
+| Latest            | `0.25.1`   |
+
+<Description of={SimpleGrid} />
+
+The `SimpleGrid` component is used to render UI elements in a uniform grid layout, with the column widths and grid spacing fixed throughout the grid.
+
+The NYPL standards for the items per row in a grid is `3` for desktop, `2` for tablet and `1` for mobile. By default, the `SimpleGrid` component uses these standards and the `columns` prop is optional. If the `columns` prop is used, the tablet breakpoint will be dropped and only the mobile breakpoint (1 item per row) will be triggered.
+
+<Canvas withToolbar>
+  <Story name="SimpleGrid Props">
+    {(args) => (
+      <SimpleGrid {...args}>
+        <Card
+          imageSrc="https://placeimg.com/400/220/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/220/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/240/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/260/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/320/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/300/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+      </SimpleGrid>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="SimpleGrid Props" />
+
+## Other SimpleGrid Examples
+
+### Icons
+
+This example is rendering `Icon` components with the `columns` prop set to `5`.
+
+export const icons = [];
+for (const icon in IconNames) {
+  const iname = `Example icon: ${IconNames[icon]}`;
+  const iconRender = (
+    <Icon
+      key={icon}
+      name={IconNames[icon]}
+      size={IconSizes.ExtraExtraExtraLarge}
+      titleText={iname}
+    />
+  );
+  icons.push(iconRender);
+}
+
+<Canvas>
+  <Story name="Other SimpleGrid Examples">
+    <SimpleGrid columns={5}>{icons}</SimpleGrid>
+  </Story>
+</Canvas>
+
+### Images
+
+This example is rendering square `Image` components with the `columns` prop set to `6`.
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={6}>
+      <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>
+
+### Horizontal Cards
+
+This example is rendering horizontal `Card` components with the `columns` prop set to `1`.
+
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>
+      <Card
+        layout={CardLayouts.Row}
+        border
+        center
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.FourByThree}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading1">
+          Card Heading
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        border
+        center
+        imageSrc="https://placeimg.com/410/210/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.FourByThree}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading2">
+          Card Heading
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        border
+        center
+        imageSrc="https://placeimg.com/320/320/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.FourByThree}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading3">
+          Card Heading
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import SimpleGrid from "./SimpleGrid";
+import Card, { CardHeading, CardContent } from "../Card/Card";
+import { ImageRatios } from "../Image/ImageTypes";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+
+describe("Grid Accessibility", () => {
+  it("passes axe accessibility test with children components", async () => {
+    const { container } = render(
+      <SimpleGrid>
+        <Card
+          imageSrc="https://placeimg.com/500/200/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Two}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/220/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+        <Card
+          imageSrc="https://placeimg.com/400/240/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={ImageRatios.TwoByOne}
+        >
+          <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
+          <CardContent>
+            Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+            libero, a pharetra augue.
+          </CardContent>
+        </Card>
+      </SimpleGrid>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("SimpleGrid", () => {
+  it("Renders the SimpleGrid UI snapshot correctly", () => {
+    const tree = renderer.create(<SimpleGrid id="test-grid" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("Renders SimpleGrid component", () => {
+    const utils = render(<SimpleGrid id="test-grid-render" />);
+    expect(
+      utils.container.querySelector("#test-grid-render")
+    ).toBeInTheDocument();
+  });
+});

package/src/components/Grid/SimpleGrid.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { SimpleGrid as ChakraSimpleGrid } from "@chakra-ui/react";
+import { GridGaps } from "./GridTypes";
+
+import generateUUID from "../../helpers/generateUUID";
+
+export interface SimpleGridProps {
+  /** Additional class name. */
+  className?: string;
+  /** Optional numeric value to override the default column count; the default column count is 3 */
+  columns?: number;
+  /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for standard grid layouts, this prop should not be used``` */
+  gap?: GridGaps;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+}
+
+function SimpleGrid(props: React.PropsWithChildren<SimpleGridProps>) {
+  const { children, columns, className, gap = GridGaps.Large, id } = props;
+
+  const responsiveCols = columns
+    ? { base: 1, md: columns }
+    : { base: 1, md: 2, lg: 3 };
+
+  return (
+    <ChakraSimpleGrid
+      columns={responsiveCols}
+      gap={gap}
+      id={id || generateUUID()}
+      className={className}
+    >
+      {children}
+    </ChakraSimpleGrid>
+  );
+}
+
+export default SimpleGrid;

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

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SimpleGrid Renders the SimpleGrid UI snapshot correctly 1`] = `
+<div
+  className="css-1tep0ti"
+  id="test-grid"
+/>
+`;

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

@@ -25,9 +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 } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -36,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/Heading/Heading.tsx

@@ -10,8 +10,8 @@ import {
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 
 export interface HeadingProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Optional className that appears in addition to `heading` */
   className?: string;
   /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
@@ -20,8 +20,6 @@ export interface HeadingProps {
   id?: string;
   /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
   level?: HeadingLevels;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
   /** Inner text of the `<h*>` element */
   text?: string;
   /** Optional URL that header points to; when `url` prop is passed to `Heading`, a child `<a>` element is created and the heading text becomes an active link */
@@ -45,6 +43,7 @@ const getVariant = (displaySize) => variantMap[displaySize] || null;
 
 function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const {
+    additionalStyles = {},
     className,
     displaySize,
     id,
@@ -53,9 +52,11 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
     url,
     urlClass,
   } = props;
-
   const variant = displaySize ? getVariant(displaySize) : `h${level}`;
   const styles = useStyleConfig("Heading", { variant });
+  // Combine native base styles with any additional styles.
+  // This is used in the `Hero` and `Notification` components.
+  const finalStyles = { ...styles, ...additionalStyles };
   const asHeading: any = `h${level}`;
 
   if (level < 1 || level > 6) {
@@ -87,7 +88,12 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
   );
 
   return (
-    <ChakraHeading id={id} as={asHeading} sx={styles} className={className}>
+    <ChakraHeading
+      id={id}
+      as={asHeading}
+      sx={finalStyles}
+      className={className}
+    >
       {content}
     </ChakraHeading>
   );