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

package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx

@@ -3,18 +3,18 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { action } from "@storybook/addon-actions";
 
+import { getCategory } from "../../utils/componentCategories";
 import SkeletonLoader from "./SkeletonLoader";
 import {
   SkeletonLoaderLayouts,
   SkeletonLoaderImageRatios,
 } from "./SkeletonLoaderTypes";
-import { action } from "@storybook/addon-actions";
-import { getCategory } from "../../utils/componentCategories";
+import SimpleGrid from "../Grid/SimpleGrid";
 
 <Meta
   title={getCategory("SkeletonLoader")}
@@ -29,33 +29,15 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["SkeletonLoader.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    layout: {
-      table: { defaultValue: { summary: "column" } },
-    },
-    showImage: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showHeading: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showContent: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showButton: {
-      table: { defaultValue: { summary: "false" } },
-    },
-    headingSize: {
-      table: { defaultValue: { summary: "1" } },
-    },
-    contentSize: {
-      table: { defaultValue: { summary: "3" } },
-    },
-    imageAspectRatio: {
-      table: { defaultValue: { summary: "square" } },
-    },
+    contentSize: { table: { defaultValue: { summary: "3" } } },
+    headingSize: { table: { defaultValue: { summary: "1" } } },
+    imageAspectRatio: { table: { defaultValue: { summary: "square" } } },
+    layout: { table: { defaultValue: { summary: "column" } } },
+    showButton: { table: { defaultValue: { summary: "false" } } },
+    showContent: { table: { defaultValue: { summary: "true" } } },
+    showHeading: { table: { defaultValue: { summary: "true" } } },
+    showImage: { table: { defaultValue: { summary: "true" } } },
   }}
 />
 
@@ -64,41 +46,34 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.17.3`   |
-| Latest            | `0.23.4`   |
+| Latest            | `0.25.3`   |
 
 <Description of={SkeletonLoader} />
 
-The `SkeletonLoader` component renders a placeholder to be used while dynamic
-content is loading. The `layout`, `width` and placeholder elements within the
-`SkeletonLoader` can be customized.
+The `layout`, `width`, and placeholder elements within the `SkeletonLoader` can
+be customized.
 
-Please note that the initial rendering below has the `width` prop set to `300px`.
-The default value is `100%`.
+Please note that the initial rendering below has the `width` prop set to `300px`
+to better view the example. The default value is `100%`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
-    name="SkeletonLoader"
+    name="Basic with Props"
     args={{
       width: "300px",
     }}
   >
     {(args) => <SkeletonLoader {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
-<ArgsTable story="SkeletonLoader" />
+<ArgsTable story="Basic with Props" />
 
 # Card Placeholders in a Grid
 
-<Preview>
+<Canvas>
   <Story name="Placeholders in a Grid">
-    <div
-      style={{
-        display: "grid",
-        gap: "2rem",
-        gridTemplateColumns: "repeat(3, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={3}>
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         border
@@ -123,26 +98,20 @@ The default value is `100%`.
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         border
       />
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
 # Text Placeholders in a List
 
-<Preview>
+<Canvas>
   <Story name="Placeholders in a List">
-    <div
-      style={{
-        display: "grid",
-        gap: "2rem",
-        gridTemplateColumns: "repeat(1, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={1}>
       <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
       <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
       <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
       <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
       <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>

package/src/components/SkeletonLoader/SkeletonLoader.test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import SkeletonLoader from "./SkeletonLoader";
 import {
@@ -16,189 +17,108 @@ describe("SkeletonLoader Accessibility", () => {
 });
 
 describe("SkeletonLoader", () => {
-  let container;
-
-  describe("layout", () => {
-    it("renders default layout", () => {
-      const utils = render(<SkeletonLoader />);
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(container.querySelector(".skeleton-loader")).toHaveAttribute(
-        "class",
-        "skeleton-loader skeleton-loader--column "
-      );
-      expect(container.querySelector(".skeleton-loader")).not.toHaveAttribute(
-        "class",
-        "skeleton-loader skeleton-loader--portrait "
-      );
-    });
-
-    it("renders column layout", () => {
-      const utils = render(
-        <SkeletonLoader layout={SkeletonLoaderLayouts.Column} />
-      );
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader--column")
-      ).toBeInTheDocument();
-    });
-
-    it("renders row layout", () => {
-      const utils = render(
-        <SkeletonLoader layout={SkeletonLoaderLayouts.Row} />
-      );
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader--row")
-      ).toBeInTheDocument();
-    });
+  it("renders default layout", () => {
+    const { container } = render(
+      <SkeletonLoader className="skeleton-loader" />
+    );
+
+    expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
   });
 
-  describe("UI elements", () => {
-    it("renders default elements", () => {
-      const utils = render(<SkeletonLoader />);
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-heading")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-content")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-button")
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders without image", () => {
-      const utils = render(<SkeletonLoader showImage={false} />);
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image")
-      ).not.toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-heading")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-content")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-button")
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders without heading", () => {
-      const utils = render(<SkeletonLoader showHeading={false} />);
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-heading")
-      ).not.toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-content")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-button")
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders without content", () => {
-      const utils = render(<SkeletonLoader showContent={false} />);
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-heading")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-content")
-      ).not.toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-button")
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders with button", () => {
-      const utils = render(<SkeletonLoader showButton={true} />);
-      container = utils.container;
-
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-heading")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-content")
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-button")
-      ).toBeInTheDocument();
-    });
-
-    it("renders with border", () => {
-      const utils = render(<SkeletonLoader border />);
-      container = utils.container;
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader--border")
-      ).toBeInTheDocument();
-    });
+  it("renders in the column or row layout", () => {
+    const { container, rerender } = render(
+      <SkeletonLoader layout={SkeletonLoaderLayouts.Column} />
+    );
+
+    expect(container.querySelector(".column")).toBeInTheDocument();
+
+    rerender(<SkeletonLoader layout={SkeletonLoaderLayouts.Row} />);
+    expect(container.querySelector(".row")).toBeInTheDocument();
   });
 
-  describe("image aspect ratio", () => {
-    it("renders square image", () => {
-      const utils = render(
-        <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Square} />
-      );
-      container = utils.container;
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image--square")
-      ).toBeInTheDocument();
-    });
-
-    it("renders portrait image", () => {
-      const utils = render(
-        <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Portrait} />
-      );
-      container = utils.container;
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image--portrait")
-      ).toBeInTheDocument();
-    });
-
-    it("renders landscape image", () => {
-      const utils = render(
+  it("renders default elements", () => {
+    const { container } = render(<SkeletonLoader />);
+
+    // By default, the `SkeletonLoader` renders one image, one heading, and
+    // three content elements.
+    expect(container.querySelectorAll(".chakra-skeleton")).toHaveLength(5);
+  });
+
+  it("renders without image", () => {
+    const { container } = render(<SkeletonLoader showImage={false} />);
+
+    // Only one image is rendered by default.
+    expect(container.querySelectorAll(".chakra-skeleton")).toHaveLength(4);
+  });
+
+  it("renders without heading", () => {
+    const { container } = render(<SkeletonLoader showHeading={false} />);
+
+    // Only one heading is rendered by default.
+    expect(container.querySelectorAll(".chakra-skeleton")).toHaveLength(4);
+  });
+
+  it("renders without content", () => {
+    const { container } = render(<SkeletonLoader showContent={false} />);
+
+    // Three content placeholders are rendered by default.
+    expect(container.querySelectorAll(".chakra-skeleton")).toHaveLength(2);
+  });
+
+  it("renders with button", () => {
+    const { container } = render(<SkeletonLoader showButton={true} />);
+
+    // Only one button is rendered by default.
+    expect(container.querySelectorAll(".chakra-skeleton")).toHaveLength(6);
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer.create(<SkeletonLoader />).toJSON();
+    const rowLayout = renderer
+      .create(<SkeletonLoader layout={SkeletonLoaderLayouts.Row} />)
+      .toJSON();
+    const columnLayout = renderer
+      .create(<SkeletonLoader layout={SkeletonLoaderLayouts.Column} />)
+      .toJSON();
+    const noImage = renderer
+      .create(<SkeletonLoader showImage={false} />)
+      .toJSON();
+    const noHeading = renderer
+      .create(<SkeletonLoader showHeading={false} />)
+      .toJSON();
+    const noContent = renderer
+      .create(<SkeletonLoader showContent={false} />)
+      .toJSON();
+    const withButton = renderer
+      .create(<SkeletonLoader showButton={true} />)
+      .toJSON();
+    const landscape = renderer
+      .create(
         <SkeletonLoader
           imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         />
-      );
-      container = utils.container;
-      expect(container.querySelector(".skeleton-loader")).toBeInTheDocument();
-      expect(
-        container.querySelector(".skeleton-loader-image--landscape")
-      ).toBeInTheDocument();
-    });
+      )
+      .toJSON();
+    const portrait = renderer
+      .create(
+        <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Portrait} />
+      )
+      .toJSON();
+    const square = renderer
+      .create(
+        <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Square} />
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(rowLayout).toMatchSnapshot();
+    expect(columnLayout).toMatchSnapshot();
+    expect(noImage).toMatchSnapshot();
+    expect(noHeading).toMatchSnapshot();
+    expect(noContent).toMatchSnapshot();
+    expect(withButton).toMatchSnapshot();
+    expect(landscape).toMatchSnapshot();
+    expect(portrait).toMatchSnapshot();
+    expect(square).toMatchSnapshot();
   });
 });

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -1,42 +1,51 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import {
+  Box,
+  Skeleton as ChakraSkeleton,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+
 import {
   SkeletonLoaderImageRatios,
   SkeletonLoaderLayouts,
 } from "./SkeletonLoaderTypes";
 
 export interface SkeletonLoaderProps {
-  /** Optional boolean value to control visibility of border around skeleton loader */
+  /** Optional boolean value to control visibility of border around skeleton loader. */
   border?: boolean;
-  /** ClassName you can add in addition to `skeleton-loader` */
+  /** Additional class name for the Skeleton component. */
   className?: string;
-  /** Optional numeric value to control the number of lines for content placeholder; default value is `3` */
+  /** Optional numeric value to control the number of lines for content placeholder; default value is `3`. */
   contentSize?: number;
-  /** Optional numeric value to control the number of lines for heading placeholder; default value is `1` */
+  /** Optional numeric value to control the number of lines for heading placeholder; default value is `1`. */
   headingSize?: number;
-  /** Optional value to control the aspect ratio of the image placeholder; default value is `square` */
+  /** Optional value to control the aspect ratio of the image placeholder; default value is `square`. */
   imageAspectRatio?: SkeletonLoaderImageRatios;
-  /** Optional value to control the position of the image placeholder; default value is `column` */
+  /** Optional value to control the position of the image placeholder; default value is `column`. */
   layout?: SkeletonLoaderLayouts;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** Optional boolean value to control visibility of button placeholder */
+  /** Optional boolean value to control visibility of button placeholder. */
   showButton?: boolean;
-  /** Optional boolean value to control visibility of content placeholder */
+  /** Optional boolean value to control visibility of content placeholder. */
   showContent?: boolean;
-  /** Optional boolean value to control visibility of image placeholder */
-  showImage?: boolean;
-  /** Optional boolean value to control visibility of heading placeholder */
+  /** Optional boolean value to control visibility of heading placeholder. */
   showHeading?: boolean;
-  /** Optional width value.  This value should be entered with the same formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).  If omitted, the skeleton loader will have a default width of 100%. */
+  /** Optional boolean value to control visibility of image placeholder. */
+  showImage?: boolean;
+  /** Optional width value. This value should be entered with the same
+   * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).
+   * If omitted, the skeleton loader will have a default width of 100%. */
   width?: string;
 }
 
+/**
+ * The `SkeletonLoader` component renders a placeholder to be used while
+ * dynamic content is loading.
+ */
 export default function SkeletonLoader(
   props: React.PropsWithChildren<SkeletonLoaderProps>
 ) {
   const {
-    border,
+    border = false,
     className,
     contentSize = 3,
     headingSize = 1,
@@ -44,70 +53,64 @@ export default function SkeletonLoader(
     layout = SkeletonLoaderLayouts.Column,
     showButton = false,
     showContent = true,
-    showImage = true,
     showHeading = true,
+    showImage = true,
     width,
-    modifiers = [],
   } = props;
+  const styles = useMultiStyleConfig("SkeletonLoader", {
+    border,
+    imageAspectRatio,
+    showImage,
+    variant: layout,
+  });
 
-  modifiers.push(layout);
-  {
-    border && modifiers.push("border");
-  }
-
-  const imageModifiers = [imageAspectRatio];
-
-  const headingItems = [];
-  for (let i = 0; i < headingSize; i++) {
-    headingItems.push(
-      <div
-        key={`heading-${i}`}
-        className={bem("skeleton-loader-heading", imageModifiers, "", [
-          "skeleton-element",
-        ])}
-      ></div>
-    );
-  }
-
-  const contentItems = [];
-  for (let i = 0; i < contentSize; i++) {
-    contentItems.push(
-      <div
-        key={`content-${i}`}
-        className={bem("skeleton-loader-content", imageModifiers, "", [
-          "skeleton-element",
-        ])}
-      ></div>
-    );
-  }
+  /**
+   * Generates the Chakra skeleton loader `size` number of times for the
+   * "heading" and "content" areas defined by the `type` argument. The last
+   * element will have width of `lastWidth`.
+   */
+  const getSkeletonElements = (type, size = 1, lastWidth = "80%") => {
+    return new Array(size).fill(null).map((_, i) => {
+      const width = i === size - 1 ? lastWidth : "100%";
+      const marginBottomValue =
+        i === size - 1 && type === "content" ? "0" : null;
+      return (
+        <ChakraSkeleton key={`${type}-${i}`} width={width}>
+          <Box
+            __css={styles[type]}
+            style={{ marginBottom: marginBottomValue }}
+          />
+        </ChakraSkeleton>
+      );
+    });
+  };
 
   return (
-    <div
-      className={bem("skeleton-loader", modifiers, "", [className])}
-      style={{ width: width }}
-    >
+    <Box className={className} __css={styles} style={{ width: width }}>
       {showImage && (
-        <div className="skeleton-section">
-          <div
-            className={bem("skeleton-loader-image", imageModifiers, "", [
-              "skeleton-element",
-            ])}
-          ></div>
-        </div>
+        <ChakraSkeleton>
+          <Box __css={{ ...styles.element, ...styles.image }} />
+        </ChakraSkeleton>
       )}
-      <div style={{ width: "100%" }}>
-        {showHeading && <div className="skeleton-section">{headingItems}</div>}
-        {showContent && <div className="skeleton-section">{contentItems}</div>}
+      <Box className={layout} __css={styles.container}>
+        {showHeading && (
+          <Box __css={styles.section}>
+            {getSkeletonElements("heading", headingSize, "80%")}
+          </Box>
+        )}
+        {showContent && (
+          <Box __css={styles.section}>
+            {getSkeletonElements("content", contentSize, "30%")}
+          </Box>
+        )}
         {showButton && (
-          <div className="skeleton-section">
-            <div
-              className={bem("skeleton-loader-button", imageModifiers, "", [
-                "skeleton-element",
-              ])}
-            ></div>
-          </div>
+          <Box __css={{ ...styles.section, ...styles.button }}>
+            <ChakraSkeleton borderRadius="16px">
+              <Box __css={styles.button} />
+            </ChakraSkeleton>
+          </Box>
         )}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }