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

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -5,10 +5,8 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
-import {
-  SkeletonLoaderImageRatios,
-  SkeletonLoaderLayouts,
-} from "./SkeletonLoaderTypes";
+import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
+import { LayoutTypes } from "../../helpers/enums";
 
 export interface SkeletonLoaderProps {
   /** Optional boolean value to control visibility of border around skeleton loader. */
@@ -25,8 +23,8 @@ export interface SkeletonLoaderProps {
    * default value is `SkeletonLoaderImageRatios.Square`. */
   imageAspectRatio?: SkeletonLoaderImageRatios;
   /** Optional value to control the position of the image placeholder;
-   * default value is `SkeletonLoaderLayouts.Column`. */
-  layout?: SkeletonLoaderLayouts;
+   * default value is `LayoutTypes.Column`. */
+  layout?: LayoutTypes;
   /** Optional boolean value to control visibility of button placeholder. */
   showButton?: boolean;
   /** Optional boolean value to control visibility of content placeholder. */
@@ -54,7 +52,7 @@ export default function SkeletonLoader(
     contentSize = 3,
     headingSize = 1,
     imageAspectRatio = SkeletonLoaderImageRatios.Square,
-    layout = SkeletonLoaderLayouts.Column,
+    layout = LayoutTypes.Column,
     showButton = false,
     showContent = true,
     showHeading = true,

package/src/components/SkeletonLoader/SkeletonLoaderTypes.tsx

@@ -1,8 +1,3 @@
-export enum SkeletonLoaderLayouts {
-  Row = "row",
-  Column = "column",
-}
-
 export enum SkeletonLoaderImageRatios {
   Landscape = "landscape",
   Portrait = "portrait",

package/src/components/Slider/Slider.stories.mdx

@@ -76,13 +76,26 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [RangeSlider](#rangeslider)
+- [Examples](#examples)
+- [Get Input Values](#get-input-values)
+
+## Overview
 
 <Description of={Slider} />
 
 The text input component doubles as a display for the slider's current value.
 For this type of component, the `value` prop must be a single number.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Slider with Controls"
@@ -123,7 +136,25 @@ For this type of component, the `value` prop must be a single number.
 
 <ArgsTable story="Slider with Controls" />
 
-### Accessibility
+## Accessibility
+
+- UI component should be accessible via keyboard. In addition to the text fields,
+  a keyboard user should be able to tab to the blue circle and then with left and
+  right arrows increase or decrease the value.
+- The color contrast between foreground color and background color should be
+  4.5:1 contrast ratio.
+- If text size is 200%, the button should scale with text so there is no overlap.
+- A `Slider` is an input component, so it should have a label. A `Slider` without a
+  label is ambiguous and not accessible.
+
+Resources:
+
+- [W3C WAI-Aria Practices - Slider](https://www.w3.org/TR/wai-aria-practices-1.1/#slider)
+- [W3C WAI-Aria Practices - Slider (Multi-Thumb)](https://www.w3.org/TR/wai-aria-practices-1.1/#slidertwothumb)
+- [Chakra Slider](https://chakra-ui.com/docs/components/form/slider)
+- [Chakra RangeSlider](https://chakra-ui.com/docs/components/form/range-slider)
+
+### Slider Accessibility Implementation
 
 Chakra's `Slider` component is accessible and, as recommended, we pass in an
 `aria-label` to their `Slider` component. On top of that, the DS `Slider`
@@ -134,7 +165,7 @@ is hidden, the `for` attribute in the `label` element is removed.
 Note that Chakra handles its single slider thumb aria attributes: `aria-valuemin`,
 `aria-valuemax`, `aria-valuenow`, and `aria-orientation`.
 
-## Range Slider
+## RangeSlider
 
 Set `isRangeSlider` to `true` to create a range slider. The text input
 components double as displays for the slider's current minimum and maximum
@@ -143,7 +174,7 @@ numbers. This signifies the starting and ending values of the range slider.
 
 <Canvas withToolbar>
   <Story
-    name="Range Slider with Props"
+    name="RangeSlider with Controls"
     args={{
       className: undefined,
       defaultValue: [25, 75],
@@ -179,7 +210,7 @@ numbers. This signifies the starting and ending values of the range slider.
   </Story>
 </Canvas>
 
-### Accessibility
+### RangeSlider Accessibility Implementation
 
 Chakra's `RangeSlider` component is accessible and, as recommended, we pass in
 two `aria-label`s to their `RangeSlider` component. The syntax is different than
@@ -192,6 +223,8 @@ When the input boxes are hidden, the `for` attribute in the `label` element is r
 Note that Chakra handles its two slider thumbs aria attributes: `aria-valuemin`,
 `aria-valuemax`, `aria-valuenow`, and `aria-orientation`.
 
+## Examples
+
 ### Single Slider States
 
 Note: In the following examples, the "Required"/"Optional" text in the label is
@@ -483,7 +516,7 @@ In the following examples, all the labels are hidden.
   </DSProvider>
 </Canvas>
 
-### Get Data Values
+## Get Input Values
 
 Pass a callback function to the `onChange` prop to get the current number value
 of the `Slider` component or an array of two numbers when it is a range slider.
@@ -492,7 +525,7 @@ value or values. Once the value(s) is updated, the `onChange` callback will be
 called and the values will be passed. If no `onChange` callback is provided,
 you won't be able to get the updated value(s) of the `Slider` component.
 
-#### Single Slider Value
+### Single Slider Value
 
 Open up the browser's developer console to see the value of the `Slider`
 after updating it.
@@ -532,7 +565,7 @@ export function SliderExample() {
   </DSProvider>
 </Canvas>
 
-#### Range Slider Values
+### Range Slider Values
 
 Open up the browser's developer console to see the values of the `Slider`
 after updating it in the `isRangeSlider` state.

package/src/components/Slider/Slider.tsx

@@ -133,10 +133,10 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     max,
     min,
     name,
-    onChange: (val) => setCurrentValue(val),
-    // Call the passed in `onChange` function prop to get the
-    // *final* value once a user stops dragging the slider.
-    onChangeEnd: (val) => onChange && onChange(val),
+    onChange: (val) => {
+      setCurrentValue(val);
+      onChange && onChange(val);
+    },
     step,
     // Additional margins so slider thumbs don't overflow past the
     // edge when the value boxes or min/max values are hidden.

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", () => {

package/src/components/StatusBadge/StatusBadge.tsx

@@ -24,7 +24,7 @@ function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>) {
   const styles = useStyleConfig("StatusBadge", { variant: level });
 
   if (!children) {
-    console.warn("Status Badge has no children.");
+    console.warn("NYPL Reservoir StatusBadge: No children were passed.");
   }
 
   return (

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.25.13`  |
+
+## 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,6 +159,14 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 
 <ArgsTable story="StructuredContent with Controls" />
 
+## 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>`.
+- 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
@@ -138,13 +177,15 @@ includes HTML tags in the string.
     <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 +226,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>
@@ -255,13 +298,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 +364,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 +437,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." +