Merge pull request #1661 from NYPL/development

Release v3.3.1

CHANGELOG.md

@@ -8,6 +8,16 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.3.1 (September 5, 2024)
+
+### Updates
+
+- Updates `Tooltip` component with `placement` and `offset` props for custom positioning.
+
+### Fixes
+
+- Fixes a duplicate `id` issue in the `Image` component. This happened when an aspect ratio value rendered a wrapper div with the same `id` as the `img` element. This was not picked up by internal accessibility tests but in a consuming application.
+
 ## 3.3.0 (August 29, 2024)
 
 ### Adds

package.json

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

src/components/Card/Card.mdx

@@ -24,6 +24,7 @@ import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 - {<Link href="#custom-image-component" target="_self">Custom Image Component</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>}
 - {<Link href="#card-with-right-side-cardactions" target="_self">Card with Right Side CardActions</Link>}
 - {<Link href="#cards-in-a-grid" target="_self">Cards in a Grid</Link>}
 - {<Link href="#cards-in-a-stack" target="_self">Cards in a Stack</Link>}
@@ -208,6 +209,15 @@ This example can be found in the [Turbine homepage](https://nypl-ds-test-app.ver
 
 <Canvas of={CardStories.CardFullClickTurbineExample} />
 
+## Card With Full-Click Functionality and Tooltip
+
+When the `Card` is fully clickable, an internal component wraps everything in a link, which in turn overrides the pointer events that trigger a `Tooltip`.
+
+If you need a tooltip within a clickable `Card`, wrap the entire `Card` component inside the `Tooltip` and use the `placement` and `offset` props to move the `Tooltip` to display next to the intended reference.
+Keep in mind that `offset` is static pixel values, so check where the `Tooltip` displays on all breakpoints. You may need to keep track of the offset values through state, and update them conditionally with the `useNYPLBreakpoints` hook.
+
+<Canvas of={CardStories.FullClickWithTooltip} />
+
 ## Card with Right Side CardActions
 
 It's possible to set only the `CardActions` component on the right side of the

src/components/Card/Card.stories.tsx

@@ -9,6 +9,8 @@ import Link from "../Link/Link";
 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";
 
 const meta: Meta<typeof Card> = {
   title: "Components/Basic Elements/Card",
@@ -98,6 +100,7 @@ export const WithControls: Story = {
         alt: args["imageProps.alt"],
         aspectRatio: args["imageProps.aspectRatio"],
         component: args["imageProps.component"],
+        id: "card-image-id",
         isAtEnd: args["imageProps.isAtEnd"],
         isLazy: args["imageProps.isLazy"],
         size: args["imageProps.size"],
@@ -727,6 +730,78 @@ export const CardFullClickTurbineExample: Story = {
   ),
   name: "Full-Click Turbine Example",
 };
+
+function FullClickWithTooltipExample() {
+  const [currentOffset, setCurrentOffset] = useState<[number, number]>([
+    -350, -450,
+  ]);
+  const [tooltipText, setTooltipText] = useState("Default offset");
+
+  useEffect(() => {
+    const updateOffset = () => {
+      if (window.innerWidth < 600) {
+        setCurrentOffset([-200, -250]);
+        setTooltipText("Less than 600 offset");
+      } else if (window.innerWidth < 960) {
+        setCurrentOffset([-400, -375]);
+        setTooltipText("Less than 960 offset");
+      } else if (window.innerWidth < 1280) {
+        setCurrentOffset([-450, -450]);
+        setTooltipText("Less than 1280 offset");
+      } else {
+        setCurrentOffset([-850, -650]);
+        setTooltipText("Greater than 1280 offset");
+      }
+    };
+    updateOffset();
+    window.addEventListener("resize", updateOffset);
+    return () => {
+      window.removeEventListener("resize", updateOffset);
+    };
+  }, []);
+
+  return (
+    <Tooltip offset={currentOffset} content={tooltipText}>
+      <Card
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: "twoByOne",
+          src: getPlaceholderImage("smaller"),
+        }}
+        mainActionLink="http://nypl.org"
+      >
+        <CardHeading
+          level="h3"
+          id="fullclick1-heading1"
+          size="heading5"
+          subtitle="Some other subtitle."
+        >
+          Tooltip displays over me
+        </CardHeading>
+        <CardContent>
+          This entire `Card` component is clickable, but the links below are
+          still accessible by tabbing through the `Card` and pressing `enter` or
+          clicking with a mouse.
+          <br />
+          <Tooltip content={"Tooltippable"}>Tooltippable text</Tooltip>
+        </CardContent>
+        <CardActions>
+          <Link href="#" type="buttonPrimary">
+            Link Button
+          </Link>
+          <Link href="#" type="buttonSecondary">
+            Other Link
+          </Link>
+        </CardActions>
+      </Card>
+    </Tooltip>
+  );
+}
+export const FullClickWithTooltip: Story = {
+  name: "Full-Click With Tooltip",
+  render: () => <FullClickWithTooltipExample />,
+};
+
 export const CardWithRightSideCardActions: Story = {
   render: () => (
     <Card

src/components/Card/Card.tsx

@@ -1,3 +1,4 @@
+import React, { forwardRef } from "react";
 import {
   Box,
   chakra,
@@ -7,8 +8,6 @@ import {
   useMultiStyleConfig,
   useStyleConfig,
 } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
-
 import { LayoutTypes } from "../../helpers/types";
 import Heading from "../Heading/Heading";
 import Image, { ComponentImageProps, ImageProps } from "../Image/Image";

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

@@ -18,6 +18,7 @@ exports[`Renders the UI snapshot correctly 1`] = `
         <img
           alt="Image example"
           className="css-0"
+          id={null}
           onError={[Function]}
           src="https://images.nypl.org/index.php?id=swope_243048&t=r"
         />
@@ -80,6 +81,7 @@ exports[`Renders the UI snapshot correctly 2`] = `
         <img
           alt="Image example"
           className="css-0"
+          id={null}
           onError={[Function]}
           src="https://images.nypl.org/index.php?id=swope_243048&t=r"
         />
@@ -142,6 +144,7 @@ exports[`Renders the UI snapshot correctly 3`] = `
         <img
           alt="Image example"
           className="css-0"
+          id={null}
           onError={[Function]}
           src="https://images.nypl.org/index.php?id=swope_243048&t=r"
         />
@@ -204,6 +207,7 @@ exports[`Renders the UI snapshot correctly 4`] = `
         <img
           alt="Image example"
           className="css-0"
+          id={null}
           onError={[Function]}
           src="https://images.nypl.org/index.php?id=swope_243048&t=r"
         />
@@ -266,6 +270,7 @@ exports[`Renders the UI snapshot correctly 5`] = `
         <img
           alt="Image example"
           className="css-0"
+          id={null}
           onError={[Function]}
           src="https://images.nypl.org/index.php?id=swope_243048&t=r"
         />
@@ -328,6 +333,7 @@ exports[`Renders the UI snapshot correctly 6`] = `
         <img
           alt="Image example"
           className="css-0"
+          id={null}
           onError={[Function]}
           src="https://images.nypl.org/index.php?id=swope_243048&t=r"
         />

src/components/Image/Image.mdx

@@ -12,7 +12,7 @@ import { changelogData } from "./imageChangelogData";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `3.3.0`    |
+| Latest            | `3.3.1`    |
 
 ## Table of Contents
 

src/components/Image/Image.stories.tsx

@@ -146,7 +146,7 @@ export const WithControls: Story = {
     sizeBasedOn: "width",
     src: getPlaceholderImage(),
   },
-  render: (args) => <Image {...args} />,
+  render: (args) => <Image {...args} id="image-id" />,
   parameters: {
     design: {
       type: "figma",

src/components/Image/Image.test.tsx

@@ -13,6 +13,13 @@ describe("Image Accessibility", () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 
+  it("passes axe accessibility with an aspect ratio and id", async () => {
+    const { container } = render(
+      <Image alt="" src="test.png" aspectRatio="oneByTwo" id="test-id" />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
   it("passes axe accessibility for regular lazy loading img element", async () => {
     const { container } = render(<Image alt="" isLazy src="test.png" />);
 

src/components/Image/Image.tsx

@@ -31,9 +31,9 @@ export const imageSizesArray = [
   "large",
 ] as const;
 export const imageTypesArray = ["default", "circle"] as const;
-export type ImageRatios = typeof imageRatiosArray[number];
-export type ImageSizes = typeof imageSizesArray[number];
-export type ImageTypes = typeof imageTypesArray[number];
+export type ImageRatios = (typeof imageRatiosArray)[number];
+export type ImageSizes = (typeof imageSizesArray)[number];
+export type ImageTypes = (typeof imageTypesArray)[number];
 
 // Used for components that have an `imageProps` prop.
 export interface ComponentImageProps extends Partial<HTMLImageElement> {
@@ -51,6 +51,8 @@ export interface ComponentImageProps extends Partial<HTMLImageElement> {
   credit?: string;
   /** Fallback image path or URL. */
   fallbackSrc?: string;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
   /** Flag to set the internal `Image` component to `isLazy` mode. */
   isLazy?: boolean;
   /** Additional action to perform in the `img`'s `onerror` attribute function. */
@@ -68,6 +70,8 @@ interface ImageWrapperProps {
   additionalWrapperStyles?: { [key: string]: any };
   /** ClassName you can add in addition to 'image' */
   className?: string;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
   /** Optional value to control the aspect ratio of the card image; default
    * value is `"original"` */
   ratio?: ImageRatios;
@@ -113,6 +117,7 @@ const ImageWrapper = chakra(
       additionalWrapperStyles = {},
       className = "",
       children,
+      id,
       ratio = "original",
       size = "default",
       sizeBasedOn = "width",
@@ -126,6 +131,7 @@ const ImageWrapper = chakra(
     return (
       <Box
         className={`the-wrap ${className}`}
+        id={id}
         __css={{ ...styles.base, ...additionalWrapperStyles }}
         {...rest}
       >
@@ -155,6 +161,7 @@ export const Image: ChakraComponent<
       component,
       credit,
       fallbackSrc,
+      id,
       imageType = "default",
       isLazy = false,
       onError,
@@ -220,6 +227,7 @@ export const Image: ChakraComponent<
       <Box
         as="img"
         alt={alt}
+        id={id ? id : null}
         loading={isLazy ? "lazy" : undefined}
         onError={onImageError}
         {...srcProp}
@@ -230,8 +238,9 @@ export const Image: ChakraComponent<
     const finalImage = useImageWrapper ? (
       <ImageWrapper
         additionalWrapperStyles={additionalWrapperStyles}
-        ratio={aspectRatio}
         className={className}
+        id={id ? `${id}-wrapper` : null}
+        ratio={aspectRatio}
         size={size}
         sizeBasedOn={sizeBasedOn}
         {...(caption || credit ? {} : rest)}