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

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

@@ -0,0 +1,275 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+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 { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
+import Icon from "../Icons/Icon";
+import {
+  IconNames,
+  LogoNames,
+  IconSizes,
+  IconRotationTypes,
+} from "../Icons/IconTypes";
+import Image from "../Image/Image";
+
+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/500/200/animals"
+          imageAlt="Alt text"
+          imageAspectRatio={CardImageRatios.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={CardImageRatios.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={CardImageRatios.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={CardImageRatios.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={CardImageRatios.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={CardImageRatios.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
+      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" />
+      <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" />
+    </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={CardImageRatios.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={CardImageRatios.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={CardImageRatios.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 { CardImageRatios } from "../Card/CardTypes";
+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={CardImageRatios.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={CardImageRatios.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={CardImageRatios.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

@@ -28,6 +28,7 @@ import { getCategory } from "../../utils/componentCategories";
     blockName: { table: { disable: true } },
     className: { table: { disable: true } },
     modifiers: { table: { disable: true } },
+    sx: { table: { disable: true } },
   }}
 />
 

package/src/components/Heading/Heading.tsx

@@ -10,8 +10,6 @@ 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;
   /** 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 +18,8 @@ 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[];
+  /** Optionally pass in additional Chakra-based styles. */
+  sx?: { [key: string]: any };
   /** 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 */
@@ -49,13 +47,16 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
     displaySize,
     id,
     level = HeadingLevels.Two,
+    sx = {},
     text,
     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 only in the `Hero` component, for now.
+  const finalStyles = { ...styles, ...sx };
   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>
   );

package/src/components/HelperErrorText/_HelperErrorText.scss

@@ -4,6 +4,6 @@
   font-size: var(--font-size--1);
 
   &--error {
-    color: var(--ui-error);
+    color: var(--ui-error-primary);
   }
 }