@nypl/design-system-react-components 0.25.11 → 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

@@ -24,7 +24,9 @@ describe("StatusBadge", () => {
   it("throws a warning when no children are passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(<StatusBadge></StatusBadge>);
-    expect(warn).toHaveBeenCalledWith("Status Badge has no children.");
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir StatusBadge: No children were passed."
+    );
   });
 
   it("renders the UI snapshot correctly", () => {
@@ -45,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("Status Badge has no children.");
-  }
+    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

@@ -41,25 +41,34 @@ export const imageSizeEnumValues = getStorybookEnumValues(
   argTypes={{
     className: { control: false },
     id: { control: false },
-    imageAspectRatio: {
+    "imageProps.aspectRatio": {
+      control: {
+        type: "select",
+      },
       table: {
         defaultValue: { summary: "ImageRatios.Square" },
       },
       options: imageAspectRatioEnumValues.options,
     },
-    imagePosition: {
+    "imageProps.component": { control: false },
+    "imageProps.position": {
+      control: {
+        type: "select",
+      },
       table: {
         defaultValue: { summary: "StructuredContentImagePosition.Left" },
       },
       options: imagePositionEnumValues.options,
     },
-    imageSize: {
+    "imageProps.size": {
+      control: {
+        type: "select",
+      },
       table: {
         defaultValue: { summary: "ImageSizes.Medium" },
       },
       options: imageSizeEnumValues.options,
     },
-    imageComponent: { control: false },
   }}
 />
 
@@ -68,25 +77,27 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [With HTML String Text Content](#with-html-string-text-content)
+- [With HTML Element Text Content](#with-html-element-text-content)
+- [Examples](#examples)
+
+## Overview
 
 <Description of={StructuredContent} />
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="StructuredContent with Controls"
     args={{
-      calloutText: "This is the callout text",
-      className: undefined,
-      headingText: "Heading text",
-      id: "structured-content",
-      imageAlt: "Image alt text",
-      imageAspectRatio: "ImageRatios.Square",
-      imageCaption: "Image caption",
-      imageCredit: "Image credit",
-      imagePosition: "StructuredContentImagePosition.Left",
-      imageSize: "ImageSizes.Medium",
-      imageSrc: "https://placeimg.com/400/300/animals",
       bodyContent:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod" +
         " tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa" +
@@ -111,16 +122,36 @@ export const imageSizeEnumValues = getStorybookEnumValues(
         "Nullam non nisi est sit. Turpis egestas integer eget aliquet nibh " +
         "praesent. Tortor at risus viverra adipiscing at. Eu augue ut lectus " +
         "arcu bibendum at varius vel pharetra.",
+      calloutText: "This is the callout text",
+      className: undefined,
+      headingText: "Heading text",
+      id: "structured-content",
+      "imageProps.alt": "Image alt text",
+      "imageProps.aspectRatio": "ImageRatios.Square",
+      "imageProps.caption": "Image caption",
+      "imageProps.component": undefined,
+      "imageProps.credit": "Image credit",
+      "imageProps.position": "StructuredContentImagePosition.Left",
+      "imageProps.size": "ImageSizes.Medium",
+      "imageProps.src": "https://placeimg.com/400/300/animals",
     }}
   >
     {(args) => (
       <StructuredContent
         {...args}
-        imageAspectRatio={imageAspectRatioEnumValues.getValue(
-          args.imageAspectRatio
-        )}
-        imagePosition={imagePositionEnumValues.getValue(args.imagePosition)}
-        imageSize={imageSizeEnumValues.getValue(args.imageSize)}
+        imageProps={{
+          alt: args["imageProps.alt"],
+          aspectRatio: imageAspectRatioEnumValues.getValue(
+            args["imageProps.aspectRatio"]
+          ),
+          caption: args["imageProps.caption"],
+          credit: args["imageProps.credit"],
+          position: imagePositionEnumValues.getValue(
+            args["imageProps.position"]
+          ),
+          size: imageSizeEnumValues.getValue(args["imageProps.size"]),
+          src: args["imageProps.src"],
+        }}
       />
     )}
   </Story>
@@ -128,23 +159,41 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 
 <ArgsTable story="StructuredContent with Controls" />
 
+## Accessibility
+
+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
 
 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"
-      imageAlt="Image alt text"
-      imageAspectRatio={ImageRatios.Original}
-      imageCaption="Image caption"
-      imageCredit="Image credit"
-      imagePosition={StructuredContentImagePosition.Left}
-      imageSize={ImageSizes.Medium}
-      imageSrc="https://placeimg.com/400/300/animals"
+      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={
         "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
         "eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
@@ -185,13 +234,15 @@ The following content is passed as HTML DOM elements to the `bodyContent` prop.
     <StructuredContent
       calloutText="This is the callout text"
       headingText="Heading text"
-      imageAlt="Image alt text"
-      imageAspectRatio={ImageRatios.Original}
-      imageCaption="Image caption"
-      imageCredit="Image credit"
-      imagePosition={StructuredContentImagePosition.Left}
-      imageSize={ImageSizes.Medium}
-      imageSrc="https://placeimg.com/400/300/animals"
+      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={
         <>
           <p>
@@ -218,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
@@ -240,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>
         </>
       }
     />
@@ -255,13 +417,15 @@ but no callout content. The second component does not have an image.
   <DSProvider>
     <StructuredContent
       headingText="Heading text"
-      imageAlt="Image alt text"
-      imageAspectRatio={ImageRatios.Original}
-      imageCaption="Image caption"
-      imageCredit="Image credit"
-      imagePosition={StructuredContentImagePosition.Left}
-      imageSize={ImageSizes.Medium}
-      imageSrc="https://placeimg.com/400/300/animals"
+      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={
         "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
         "eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
@@ -319,13 +483,15 @@ The third one does not contain an image.
     />
     <StructuredContent
       headingText="Heading text"
-      imageAlt="Image alt text"
-      imageAspectRatio={ImageRatios.Original}
-      imageCaption="Image caption"
-      imageCredit="Image credit"
-      imagePosition={StructuredContentImagePosition.Left}
-      imageSize={ImageSizes.Medium}
-      imageSrc="https://placeimg.com/400/300/animals"
+      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={
         "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
         "eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
@@ -390,11 +556,13 @@ text content. The second one has a callout content and image spanning full width
     <StructuredContent
       calloutText="This is the callout text"
       headingText="Heading text"
-      imageAlt="Image alt text"
-      imageAspectRatio={ImageRatios.Original}
-      imagePosition={StructuredContentImagePosition.Center}
-      imageSize={ImageSizes.Medium}
-      imageSrc="https://placeimg.com/400/300/animals"
+      imageProps={{
+        alt: "Image alt text",
+        aspectRatio: ImageRatios.Original,
+        position: StructuredContentImagePosition.Center,
+        size: ImageSizes.Medium,
+        src: "https://placeimg.com/400/300/animals",
+      }}
       bodyContent={
         "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
         "eiusmod tempor incididunt ut labore et dolore magna aliqua." +