Merge pull request #1671 from NYPL/development

Release v3.3.2

CHANGELOG.md

@@ -8,6 +8,17 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.3.2 (September 19, 2024)
+
+### Updates
+
+- Updates the `CheckboxGroup`, `DatePicker`, `FeedbackBox`, `Label`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, and `TextInput` component to use a lowercase 'r' for '(required)' in labels and placeholders in order to align with sentence case typography guidelines.
+
+### Fixes
+
+- Passes the `fallbackSrc` and `onError` properties to the `Card`'s `imageProps` prop object.
+- Fixes issue with `HelperErrorText` where, if text value was not a string, necessary styles weren't applied.
+
 ## 3.3.1 (September 5, 2024)
 
 ### Updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

src/components/Card/Card.mdx

@@ -12,7 +12,7 @@ import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `3.1.2`    |
+| Latest            | `3.3.2`    |
 
 ## Table of Contents
 
@@ -22,6 +22,7 @@ import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 - {<Link href="#image-position" target="_self">Image Position</Link>}
 - {<Link href="#image-size" target="_self">Image Size</Link>}
 - {<Link href="#custom-image-component" target="_self">Custom Image Component</Link>}
+- {<Link href="#fallback-image" target="_self">Fallback Image</Link>}
 - {<Link href="#card-with-link-heading" target="_self">Card With Link Heading</Link>}
 - {<Link href="#card-with-full-click-functionality" target="_self">Card With Full-Click Functionality</Link>}
 - {<Link href="#card-with-full-click-functionality-and-tooltip" target="_self">Card With Full-Click Functionality and Tooltip</Link>}
@@ -183,6 +184,38 @@ image component in using the `imageProps.component` prop.
 
 <Canvas of={CardStories.CustomImageComponent} />
 
+## Fallback Image
+
+Following the same pattern as the `Image` component, the `Card` component can
+also render a fallback image when the main image fails to load. Set a fallback
+image source through the `fallbackSrc` property in the `imageProps` prop. If an
+_additional_ action needs to be performed when the fallback image is
+loaded, pass a callback function to the `onError` property.
+
+For more details, see the [Image component documentation](./?path=/docs/components-media-icons-image--docs#fallback-image).
+
+Note that the following example renders a fallback image used in
+Digital Collections and is not from `loremflickr`. The code snippet below is
+a general example.
+
+<Source
+  code={`
+<Card
+  imageProps={{
+    alt: "Alt text",
+    fallbackSrc="https://loremflickr.com/540/420/cat"
+    onError: (_event) => console.log("Card fallback image loaded"),
+    src: "some-broken-image-url",
+  }}
+>
+  // ...
+</Card>
+  `}
+  language="jsx"
+/>
+
+<Canvas of={CardStories.FallbackImage} />
+
 ## Card with Link Heading
 
 The `CardHeading` component works just like the DS `Heading` component. This

src/components/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
 
 import Button from "../Button/Button";
 import Card, { CardHeading, CardContent, CardActions } from "./Card";
@@ -10,7 +11,9 @@ import SimpleGrid from "../Grid/SimpleGrid";
 import { layoutTypesArray } from "../../helpers/types";
 import { getPlaceholderImage } from "../../utils/utils";
 import Tooltip from "../Tooltip/Tooltip";
-import { useEffect, useState } from "react";
+// The image file is in the repo but ts doesn't pick it up as a module.
+// @ts-ignore
+import imageFile from "../../../static/noImage.png";
 
 const meta: Meta<typeof Card> = {
   title: "Components/Basic Elements/Card",
@@ -31,12 +34,14 @@ const meta: Meta<typeof Card> = {
     "imageProps.caption": { control: false },
     "imageProps.component": { control: false },
     "imageProps.credit": { control: false },
+    "imageProps.fallbackSrc": { control: false },
     "imageProps.isAtEnd": {
       table: { defaultValue: { summary: "false" } },
     },
     "imageProps.isLazy": {
       table: { defaultValue: { summary: "false" } },
     },
+    "imageProps.onError": { control: false },
     "imageProps.size": {
       table: { defaultValue: { summary: "default" } },
     },
@@ -558,6 +563,35 @@ export const CustomImageComponent: Story = {
         odio, dapibus ac facilisis in, egestas eget quam. Sed posuere
         consectetur est at lobortis.
       </CardContent>
+    </Card>
+  ),
+};
+
+export const FallbackImage: Story = {
+  render: () => (
+    <Card
+      imageProps={{
+        alt: "Alt text",
+        fallbackSrc: imageFile,
+        onError: (_event) => console.log("Card fallback image loaded"),
+        src: "foobar.jpg",
+      }}
+    >
+      <CardHeading
+        level="h3"
+        id="img1-heading1"
+        size="heading5"
+        subtitle="Subtitle on the card"
+      >
+        Card component displaying a fallback image
+      </CardHeading>
+      <CardContent>
+        Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet,
+        consectetur adipiscing elit. Aenean lacinia bibendum nulla sed
+        consectetur. Vestibulum id ligula porta felis euismod semper. Cras justo
+        odio, dapibus ac facilisis in, egestas eget quam. Sed posuere
+        consectetur est at lobortis.
+      </CardContent>
       <CardActions>
         <Link type="button" href="#">
           Reserve
@@ -569,6 +603,7 @@ export const CustomImageComponent: Story = {
     </Card>
   ),
 };
+
 export const HeadingAsLink: Story = {
   render: () => (
     <Card

src/components/Card/Card.tsx

@@ -86,11 +86,13 @@ function CardImage(
     caption,
     component,
     credit,
+    fallbackSrc,
     id,
     isAtEnd,
     isCentered,
     isLazy,
     layout,
+    onError,
     size,
     src,
   } = props;
@@ -110,8 +112,10 @@ function CardImage(
         caption={caption}
         component={component}
         credit={credit}
+        fallbackSrc={fallbackSrc}
         id={id}
         isLazy={isLazy}
+        onError={onError}
         size={size}
         src={src}
       />
@@ -219,9 +223,11 @@ export const Card: ChakraComponent<
           caption: undefined,
           component: undefined,
           credit: undefined,
+          fallbackSrc: undefined,
           id: undefined,
           isAtEnd: false,
           isLazy: false,
+          onError: undefined,
           size: "default",
           src: "",
         },
@@ -332,9 +338,11 @@ export const Card: ChakraComponent<
               caption={imageProps.caption}
               component={imageProps.component}
               credit={imageProps.credit}
+              fallbackSrc={imageProps.fallbackSrc}
               id={imageProps.id}
               isAtEnd={imageProps.isAtEnd}
               isLazy={imageProps.isLazy}
+              onError={imageProps.onError}
               layout={layout}
               size={imageProps.size}
               src={imageProps.src ? imageProps.src : undefined}

src/components/Card/cardChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-09-19",
+    version: "3.3.2",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: ["Adds `fallbackSrc` and `onError` to the `imageProps` prop."],
+  },
   {
     date: "2024-05-09",
     version: "3.1.2",

src/components/CheckboxGroup/CheckboxGroup.mdx

@@ -12,7 +12,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `3.1.7`    |
+| Latest            | `3.3.2`    |
 
 ## Table of Contents
 

src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -48,7 +48,7 @@ export interface CheckboxGroupProps {
   /** Offers the ability to show the group's legend onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
-  /** Whether or not to display the "(Required)" text in the label text.
+  /** Whether or not to display the "(required)" text in the label text.
    * True by default. */
   showRequiredLabel?: boolean;
   /** The values to programmatically update the selected `Checkbox`es. */

src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -128,7 +128,11 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="column-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -260,7 +264,11 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="row-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -392,7 +400,11 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="noLabel-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -665,7 +677,11 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="invalidText-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -797,7 +813,11 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="noRequiredLabel-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -809,7 +829,7 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
   <legend>
     required
     <span>
-       (Required)
+       (required)
     </span>
   </legend>
   <div
@@ -932,7 +952,11 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="required-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -1070,7 +1094,11 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
     className="css-1xdhyk6"
     data-isinvalid={true}
     id="invalid-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -1208,7 +1236,11 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="disabled-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -1364,7 +1396,11 @@ exports[`Checkbox renders the UI snapshot correctly 10`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="jsxLabels-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -1496,7 +1532,11 @@ exports[`Checkbox renders the UI snapshot correctly 11`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="chakraProps-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;
 
@@ -1629,6 +1669,10 @@ exports[`Checkbox renders the UI snapshot correctly 12`] = `
     className="css-1xdhyk6"
     data-isinvalid={false}
     id="otherProps-helperErrorText"
-  />
+  >
+    <div
+      className="css-0"
+    />
+  </div>
 </fieldset>
 `;