@nypl/design-system-react-components 0.25.13 → 0.26.0

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

@@ -46,6 +46,7 @@ export const layoutsEnumValues = getStorybookEnumValues(
       },
       options: imageRatiosEnumValues.options,
     },
+    isBordered: { table: { defaultValue: { summary: "false" } } },
     layout: {
       table: { defaultValue: { summary: "LayoutTypes.Column" } },
       options: layoutsEnumValues.options,
@@ -62,7 +63,17 @@ export const layoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.17.3`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Card Placeholders in a Grid](#card-placeholders-in-a-grid)
+- [Text Placeholders in a List](#text-placeholders-in-a-list)
+
+## Overview
 
 <Description of={SkeletonLoader} />
 
@@ -72,15 +83,17 @@ be customized.
 Please note that the initial rendering below has the `width` prop set to `300px`
 to better view the example. The default value is `100%`.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="SkeletonLoader with Controls"
     args={{
-      border: false,
       className: undefined,
       contentSize: 3,
       headingSize: 1,
       imageAspectRatio: "SkeletonLoaderImageRatios.Square",
+      isBordered: false,
       layout: "LayoutTypes.Column",
       showButton: false,
       showContent: true,
@@ -101,40 +114,59 @@ to better view the example. The default value is `100%`.
 
 <ArgsTable story="SkeletonLoader with Controls" />
 
-# Card Placeholders in a Grid
+## Accessibility
+
+According to W3C's success criterion 2.2.2 for operable user interfaces:
+
+> For any moving, blinking or scrolling information that (1) starts automatically,
+> (2) lasts more than five seconds, and (3) is presented in parallel with other
+> content, there is a mechanism for the user to pause, stop, or hide it unless
+> the movement, blinking, or scrolling is part of an activity where it is essential;
+
+The `SkeletonLoader` component can be used as a placeholder for local content
+that is loaded in parallel but it typically does not last more than five (5)
+seconds. For the DS usage, this is purely a visual cue and should not be picked
+up by screen readers.
+
+Resources:
+
+- [W3C Perceivable Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide)
+- [More Accessible Skeletons](https://adrianroselli.com/2020/11/more-accessible-skeletons.html)
+
+## Card Placeholders in a Grid
 
 <Canvas>
   <Story name="Placeholders in a Grid">
     <SimpleGrid columns={3}>
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        border
+        isBordered
       />
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        border
+        isBordered
       />
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        border
+        isBordered
       />
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        border
+        isBordered
       />
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        border
+        isBordered
       />
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
-        border
+        isBordered
       />
     </SimpleGrid>
   </Story>
 </Canvas>
 
-# Text Placeholders in a List
+## Text Placeholders in a List
 
 <Canvas>
   <Story name="Placeholders in a List">

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

@@ -107,6 +107,12 @@ describe("SkeletonLoader", () => {
         <SkeletonLoader imageAspectRatio={SkeletonLoaderImageRatios.Square} />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(<SkeletonLoader p="20px" color="ui.error.primary" />)
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<SkeletonLoader data-testid="props" />)
+      .toJSON();
 
     expect(basic).toMatchSnapshot();
     expect(rowLayout).toMatchSnapshot();
@@ -118,5 +124,7 @@ describe("SkeletonLoader", () => {
     expect(landscape).toMatchSnapshot();
     expect(portrait).toMatchSnapshot();
     expect(square).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -1,16 +1,15 @@
-import * as React from "react";
 import {
   Box,
+  chakra,
   Skeleton as ChakraSkeleton,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
 import { LayoutTypes } from "../../helpers/enums";
 
 export interface SkeletonLoaderProps {
-  /** Optional boolean value to control visibility of border around skeleton loader. */
-  border?: boolean;
   /** Additional class name for the Skeleton component. */
   className?: string;
   /** Optional numeric value to control the number of lines for content
@@ -22,6 +21,8 @@ export interface SkeletonLoaderProps {
   /** Optional value to control the aspect ratio of the image placeholder;
    * default value is `SkeletonLoaderImageRatios.Square`. */
   imageAspectRatio?: SkeletonLoaderImageRatios;
+  /** Optional boolean value to control visibility of border around skeleton loader. */
+  isBordered?: boolean;
   /** Optional value to control the position of the image placeholder;
    * default value is `LayoutTypes.Column`. */
   layout?: LayoutTypes;
@@ -43,76 +44,79 @@ export interface SkeletonLoaderProps {
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
  */
-export default function SkeletonLoader(
-  props: React.PropsWithChildren<SkeletonLoaderProps>
-) {
-  const {
-    border = false,
-    className,
-    contentSize = 3,
-    headingSize = 1,
-    imageAspectRatio = SkeletonLoaderImageRatios.Square,
-    layout = LayoutTypes.Column,
-    showButton = false,
-    showContent = true,
-    showHeading = true,
-    showImage = true,
-    width,
-  } = props;
-  const styles = useMultiStyleConfig("SkeletonLoader", {
-    border,
-    imageAspectRatio,
-    showImage,
-    variant: layout,
-  });
-
-  /**
-   * 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>
-      );
+export const SkeletonLoader = chakra(
+  (props: React.PropsWithChildren<SkeletonLoaderProps>) => {
+    const {
+      className,
+      contentSize = 3,
+      headingSize = 1,
+      imageAspectRatio = SkeletonLoaderImageRatios.Square,
+      isBordered = false,
+      layout = LayoutTypes.Column,
+      showButton = false,
+      showContent = true,
+      showHeading = true,
+      showImage = true,
+      width,
+      ...rest
+    } = props;
+    const styles = useMultiStyleConfig("SkeletonLoader", {
+      isBordered,
+      imageAspectRatio,
+      showImage,
+      variant: layout,
     });
-  };
 
-  return (
-    <Box className={className} __css={styles} style={{ width: width }}>
-      {showImage && (
-        <ChakraSkeleton>
-          <Box __css={{ ...styles.element, ...styles.image }} />
-        </ChakraSkeleton>
-      )}
-      <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 && (
-          <Box __css={{ ...styles.section, ...styles.button }}>
-            <ChakraSkeleton borderRadius="16px">
-              <Box __css={styles.button} />
-            </ChakraSkeleton>
-          </Box>
+    /**
+     * 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 (
+      <Box className={className} __css={styles} style={{ width }} {...rest}>
+        {showImage && (
+          <ChakraSkeleton>
+            <Box __css={{ ...styles.element, ...styles.image }} />
+          </ChakraSkeleton>
         )}
+        <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 && (
+            <Box __css={{ ...styles.section, ...styles.button }}>
+              <ChakraSkeleton borderRadius="16px">
+                <Box __css={styles.button} />
+              </ChakraSkeleton>
+            </Box>
+          )}
+        </Box>
       </Box>
-    </Box>
-  );
-}
+    );
+  }
+);
+
+export default SkeletonLoader;

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

@@ -2,7 +2,7 @@
 
 exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -81,7 +81,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -160,7 +160,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -239,7 +239,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -311,7 +311,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -374,7 +374,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 6`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -413,7 +413,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 6`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -503,7 +503,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -582,7 +582,7 @@ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   style={
     Object {
       "width": undefined,
@@ -661,7 +661,166 @@ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
 
 exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="chakra-skeleton css-1twknw3"
+  >
+    <div
+      className="css-0"
+    />
+  </div>
+  <div
+    className="column css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="chakra-skeleton css-tz3wol"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": null,
+            }
+          }
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="chakra-skeleton css-1akrz52"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": null,
+            }
+          }
+        />
+      </div>
+      <div
+        className="chakra-skeleton css-1akrz52"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": null,
+            }
+          }
+        />
+      </div>
+      <div
+        className="chakra-skeleton css-qaeww3"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": "0",
+            }
+          }
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
+<div
+  className="css-kle7zy"
+  style={
+    Object {
+      "width": undefined,
+    }
+  }
+>
+  <div
+    className="chakra-skeleton css-1twknw3"
+  >
+    <div
+      className="css-0"
+    />
+  </div>
+  <div
+    className="column css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="chakra-skeleton css-tz3wol"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": null,
+            }
+          }
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="chakra-skeleton css-1akrz52"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": null,
+            }
+          }
+        />
+      </div>
+      <div
+        className="chakra-skeleton css-1akrz52"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": null,
+            }
+          }
+        />
+      </div>
+      <div
+        className="chakra-skeleton css-qaeww3"
+      >
+        <div
+          className="css-0"
+          style={
+            Object {
+              "marginBottom": "0",
+            }
+          }
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
   style={
     Object {
       "width": undefined,