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

package/src/components/StatusBadge/StatusBadge.stories.mdx

@@ -49,10 +49,21 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.18.7`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Patterns](#patterns)
+
+## Overview
 
 <Description of={StatusBadge} />
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="StatusBadge"
@@ -73,6 +84,13 @@ export const enumValues = getStorybookEnumValues(
 
 <ArgsTable story="StatusBadge" />
 
+## Accessibility
+
+The visual aspect of the `StatusBadge` component displays three different status
+levels through the use of three different colors. It is important to assign
+the appropriate text so that the user can understand the priority level of the
+`StatusBadge`, and not rely just on the color.
+
 ## Patterns
 
 ### Higher Barrier

package/src/components/StatusBadge/StatusBadge.test.tsx

@@ -47,9 +47,25 @@ describe("StatusBadge", () => {
         </StatusBadge>
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <StatusBadge id="chakra" p="20px" color="ui.error.primary">
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <StatusBadge id="props" data-testid="props">
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
 
     expect(low).toMatchSnapshot();
     expect(medium).toMatchSnapshot();
     expect(high).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/StatusBadge/StatusBadge.tsx

@@ -1,9 +1,7 @@
+import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import { Box, useStyleConfig } from "@chakra-ui/react";
 
 import { StatusBadgeTypes } from "./StatusBadgeTypes";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface StatusBadgeProps {
   /** Additional class for the component */
   className?: string;
@@ -14,24 +12,31 @@ export interface StatusBadgeProps {
   level?: StatusBadgeTypes;
 }
 
-function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>) {
-  const {
-    children,
-    className,
-    id = generateUUID(),
-    level = StatusBadgeTypes.Low,
-  } = props;
-  const styles = useStyleConfig("StatusBadge", { variant: level });
+/**
+ * The `StatusBadge` component is used to display a visual badge for three
+ * different status levels.
+ */
+export const StatusBadge = chakra(
+  (props: React.PropsWithChildren<StatusBadgeProps>) => {
+    const {
+      children,
+      className,
+      id,
+      level = StatusBadgeTypes.Low,
+      ...rest
+    } = props;
+    const styles = useStyleConfig("StatusBadge", { variant: level });
 
-  if (!children) {
-    console.warn("NYPL Reservoir StatusBadge: No children were passed.");
-  }
+    if (!children) {
+      console.warn("NYPL Reservoir StatusBadge: No children were passed.");
+    }
 
-  return (
-    <Box id={id} className={className} __css={styles}>
-      {children}
-    </Box>
-  );
-}
+    return (
+      <Box id={id} className={className} __css={styles} {...rest}>
+        {children}
+      </Box>
+    );
+  }
+);
 
 export default StatusBadge;

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

@@ -2,7 +2,7 @@
 
 exports[`StatusBadge renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="low"
 >
   Registration Required
@@ -11,7 +11,7 @@ exports[`StatusBadge renders the UI snapshot correctly 1`] = `
 
 exports[`StatusBadge renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="medium"
 >
   Registration Required
@@ -20,9 +20,28 @@ exports[`StatusBadge renders the UI snapshot correctly 2`] = `
 
 exports[`StatusBadge renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
   id="high"
 >
   Registration Required
 </div>
 `;
+
+exports[`StatusBadge renders the UI snapshot correctly 4`] = `
+<div
+  className="css-kle7zy"
+  id="chakra"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 5`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+  id="props"
+>
+  Registration Required
+</div>
+`;

package/src/components/StructuredContent/StructuredContent.stories.mdx

@@ -77,7 +77,7 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
 
 ## Table of Contents
 
@@ -161,10 +161,18 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 
 ## Accessibility
 
-- Containers should allow font-size to be scaled to 200% without content overlapping.
-- Images should have descriptive (but not too lengthy) alt text.
-- Headings levels should not be skipped. Meaning, a `<h2>` should not be followed
-  by a `<h4>`.
+The `StructuredContent` component is a structured container around a specific
+set of content. While the main image can be controlled through the `imageProps`
+prop, the content will not always be controlled. If the content that is being
+passed is coming from a CMS, the content can contain any set of HTML elements that
+are _not_ controlled through Reservoir DS components. While this component
+attempts to style the added elements, we cannot guarantee that the content will
+be accessible. Please review your content and make sure that:
+
+- The content's font-size to be scaled to 200% without content overlapping.
+- Any additional images have descriptive (but not too lengthy) alt text.
+- Any additional heading levels should not be skipped. Meaning, a `<h2>` should
+  not be followed by a `<h4>`.
 - Any links or text with colors should have a 4.5:1 contrast ratio.
 
 ## With HTML String Text Content
@@ -173,7 +181,7 @@ The following body content is passed as a string to the `bodyContent` prop. It
 includes HTML tags in the string.
 
 <Canvas>
-  <Story name="With HTMl String Text Content">
+  <Story name="With HTML String Text Content">
     <StructuredContent
       calloutText="This is the callout text"
       headingText="Heading text"
@@ -261,12 +269,69 @@ The following content is passed as HTML DOM elements to the `bodyContent` prop.
             Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo a diam
             sollicitudin tempor id eu nisl nunc.
           </p>
-          <ul>
-            <li>one</li>
-            <li>two</li>
-            <li>three</li>
-            <li>four</li>
-          </ul>
+          <h3 id="dates-times">Dates and Times</h3>
+          <table role="table" id="times-table">
+            <thead>
+              <tr role="row">
+                <th scope="col">Day</th>
+                <th scope="col">Time</th>
+                <th scope="col">Presentation</th>
+                <th scope="col">Topic</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr role="row">
+                <td>Sunday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>Manhattan</td>
+              </tr>
+              <tr role="row">
+                <td>Monday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>The Bronx</td>
+              </tr>
+              <tr role="row">
+                <td>Tuesday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>Queens</td>
+              </tr>
+              <tr role="row">
+                <td>Wednesday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>Staten Island</td>
+              </tr>
+              <tr role="row">
+                <td>Thursday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>Brooklyn</td>
+              </tr>
+              <tr role="row">
+                <td>Friday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>Long Island</td>
+              </tr>
+              <tr role="row">
+                <td>Saturday</td>
+                <td>7:00 PM</td>
+                <td>Tom Nook</td>
+                <td>Upstate</td>
+              </tr>
+            </tbody>
+          </table>
+          <h3 id="parting-thoughts">Parting Thoughts</h3>
+          <ol id="thoughts-list">
+            <li>All text was read</li>
+            <li>The two videos were watched</li>
+            <li>All images were reviewed</li>
+            <li>Notes were taken on a small notepad</li>
+            <li>You enjoyed yourself</li>
+          </ol>
           <p>
             <i>
               Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
@@ -283,6 +348,60 @@ The following content is passed as HTML DOM elements to the `bodyContent` prop.
               pharetra.
             </i>
           </p>
+          <section id="definition-doc-list">
+            <h2>Episode Forty-Two: Readings and Resources</h2>
+            <dl>
+              <dt>Hillary Ballon and Kenneth T. Jackson, eds.</dt>
+              <dd>
+                <em>
+                  <a
+                    id="link-10"
+                    href="https://www.nypl.org/research/research-catalog/bib/b22154388"
+                  >
+                    Robert Moses and the Modern City: The Transformation of New
+                    York
+                  </a>
+                </em>{" "}
+                (W.W. Norton &amp; Co., 2007).
+              </dd>
+              <dt>The Brooklyn Battery Bridge</dt>
+              <dd>
+                "
+                <a
+                  id="link-11"
+                  href="https://www.nypap.org/preservation-history/brooklyn-battery-bridge/"
+                >
+                  The Brooklyn Battery Bridge
+                </a>
+                ," New York Preservation Archives Project.
+              </dd>
+              <dt>Robert Caro</dt>
+              <dd>
+                <em>
+                  <a
+                    id="link-12"
+                    href="https://www.nypl.org/research/research-catalog/bib/b21586756"
+                  >
+                    The Power Broker: Robert Moses and the Fall of New York
+                  </a>
+                </em>{" "}
+                (Vintage Books, 1975).&nbsp;
+              </dd>
+              <dt>Anthony Flint</dt>
+              <dd>
+                <em>
+                  <a
+                    id="link-13"
+                    href="https://www.nypl.org/research/research-catalog/bib/b20538453"
+                  >
+                    Wrestling with Moses: How Jane Jacobs Took on New York's
+                    Master Builder and Transformed the American City
+                  </a>
+                </em>{" "}
+                (Random House, 2009).
+              </dd>
+            </dl>
+          </section>
         </>
       }
     />

package/src/components/StructuredContent/StructuredContent.test.tsx

@@ -380,6 +380,15 @@ describe("StructuredContent", () => {
           bodyContent={htmlStringBodyContent}
           headingText="Heading text"
           id="withoutCalloutText"
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <StructuredContent
+          calloutText="This is the callout text"
+          headingText="Heading text"
+          id="withChakraProps"
           imageProps={{
             alt: "Image alt text",
             aspectRatio: ImageRatios.Original,
@@ -389,6 +398,29 @@ describe("StructuredContent", () => {
             size: ImageSizes.Medium,
             src: "https://placeimg.com/400/300/animals",
           }}
+          bodyContent={htmlStringBodyContent}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <StructuredContent
+          calloutText="This is the callout text"
+          headingText="Heading text"
+          id="withOtherProps"
+          imageProps={{
+            alt: "Image alt text",
+            aspectRatio: ImageRatios.Original,
+            caption: "Image caption",
+            credit: "Image credit",
+            position: StructuredContentImagePosition.Left,
+            size: ImageSizes.Medium,
+            src: "https://placeimg.com/400/300/animals",
+          }}
+          bodyContent={htmlStringBodyContent}
+          data-testid="props"
         />
       )
       .toJSON();
@@ -399,5 +431,7 @@ describe("StructuredContent", () => {
     expect(withImageWithoutCaptionOrCredit).toMatchSnapshot();
     expect(withoutHeading).toMatchSnapshot();
     expect(withoutCalloutText).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/StructuredContent/StructuredContent.tsx

@@ -1,12 +1,11 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Heading from "../Heading/Heading";
 import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Image, { ComponentImageProps, ImageProps } from "../Image/Image";
 import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import { StructuredContentImagePosition } from "./StructuredContentTypes";
-import generateUUID from "../../helpers/generateUUID";
 
 interface StructuredContentImageProps extends ComponentImageProps {
   /** Optional value to control the positioning of the internal `Image` component.
@@ -33,7 +32,7 @@ export interface StructuredContentProps {
  * Internal component used in the `StructuredContent` component
  * that renders the DS `Image` component.
  */
-function StructuredContentImage(props: ImageProps) {
+const StructuredContentImage = chakra((props: ImageProps) => {
   const {
     additionalFigureStyles,
     additionalImageStyles,
@@ -60,84 +59,90 @@ function StructuredContentImage(props: ImageProps) {
       src={src}
     />
   );
-}
+});
 
 /**
  * The `StructuredContent` component that displays a heading, callout content,
  * an image, and body content. All are optional except for body content.
  */
-export default function StructuredContent(
-  props: React.PropsWithChildren<StructuredContentProps>
-) {
-  const {
-    calloutText,
-    className,
-    headingText,
-    id = generateUUID(),
-    imageProps = {
-      alt: "",
-      aspectRatio: ImageRatios.Square,
-      caption: undefined,
-      component: undefined,
-      credit: undefined,
-      position: StructuredContentImagePosition.Left,
-      size: ImageSizes.Medium,
-      src: "",
-    },
-    bodyContent,
-  } = props;
-  const hasImage = imageProps.src || imageProps.component;
-  const hasFigureImage = imageProps.caption || imageProps.credit;
-  const styles = useMultiStyleConfig("StructuredContent", {
-    hasFigureImage,
-    imageAspectRatio: imageProps.aspectRatio,
-    imagePosition: imageProps.position,
-  });
-  const finalBodyContent =
-    typeof bodyContent === "string" ? (
-      <div dangerouslySetInnerHTML={{ __html: bodyContent }} />
-    ) : (
-      <Box>{bodyContent}</Box>
-    );
+export const StructuredContent = chakra(
+  (props: React.PropsWithChildren<StructuredContentProps>) => {
+    const {
+      calloutText,
+      className,
+      headingText,
+      id,
+      imageProps = {
+        alt: "",
+        aspectRatio: ImageRatios.Square,
+        caption: undefined,
+        component: undefined,
+        credit: undefined,
+        position: StructuredContentImagePosition.Left,
+        size: ImageSizes.Medium,
+        src: "",
+      },
+      bodyContent,
+      ...rest
+    } = props;
+    const hasImage = imageProps.src || imageProps.component;
+    const hasFigureImage = imageProps.caption || imageProps.credit;
+    const styles = useMultiStyleConfig("StructuredContent", {
+      hasFigureImage,
+      imageAspectRatio: imageProps.aspectRatio,
+      imagePosition: imageProps.position,
+    });
+    const finalBodyContent =
+      typeof bodyContent === "string" ? (
+        <div
+          className="structuredcontent-body"
+          dangerouslySetInnerHTML={{ __html: bodyContent }}
+        />
+      ) : (
+        <Box className="structuredcontent-body">{bodyContent}</Box>
+      );
 
-  if (hasImage && !imageProps.alt) {
-    console.warn(
-      "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
-        "when using an image."
+    if (hasImage && !imageProps.alt) {
+      console.warn(
+        "NYPL Reservoir StructuredContent: The `imageProps.alt` prop is required " +
+          "when using an image."
+      );
+    }
+
+    return (
+      <Box id={id} className={className} __css={styles} {...rest}>
+        {headingText && (
+          <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
+            {headingText}
+          </Heading>
+        )}
+        {calloutText && (
+          <Heading
+            id={`${id}-callout`}
+            level={HeadingLevels.Three}
+            size={HeadingSizes.Callout}
+          >
+            {calloutText}
+          </Heading>
+        )}
+        {hasImage && (
+          <StructuredContentImage
+            additionalFigureStyles={styles.imageFigure}
+            additionalImageStyles={styles.image}
+            additionalWrapperStyles={styles.imageWrapper}
+            alt={imageProps.alt}
+            component={imageProps.component}
+            aspectRatio={imageProps.aspectRatio}
+            caption={imageProps.caption}
+            credit={imageProps.credit}
+            size={imageProps.size}
+            src={imageProps.src ? imageProps.src : null}
+          />
+        )}
+        {finalBodyContent}
+      </Box>
     );
   }
+);
 
-  return (
-    <Box id={id} className={className} __css={styles}>
-      {headingText && (
-        <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
-          {headingText}
-        </Heading>
-      )}
-      {calloutText && (
-        <Heading
-          id={`${id}-callout`}
-          level={HeadingLevels.Three}
-          size={HeadingSizes.Callout}
-        >
-          {calloutText}
-        </Heading>
-      )}
-      {hasImage && (
-        <StructuredContentImage
-          additionalFigureStyles={styles.imageFigure}
-          additionalImageStyles={styles.image}
-          additionalWrapperStyles={styles.imageWrapper}
-          alt={imageProps.alt}
-          component={imageProps.component}
-          aspectRatio={imageProps.aspectRatio}
-          caption={imageProps.caption}
-          credit={imageProps.credit}
-          size={imageProps.size}
-          src={imageProps.src ? imageProps.src : null}
-        />
-      )}
-      {finalBodyContent}
-    </Box>
-  );
-}
+export default StructuredContent;