Merge pull request #1474 from NYPL/development

Release v2.1.3

CHANGELOG.md

@@ -8,6 +8,33 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 2.1.3 (December 7, 2023)
+
+### Adds
+
+- Adds the `hasVisitedStyles` prop to `Link` which is used to include or omit the visited state styles. Default value is true.
+- Adds the `useDSHeading` hook to render a default H2 heading or a custom heading element.
+- Adds the `sizeBasedOn` prop to the `Image` component.
+- Adds the `isDarkBackgroundImage` prop to the `Hero` component.
+
+### Updates
+
+- Removes `disabled` variant from `Link` theme file, as it isn't being used.
+- Updates the `font-weight` to `"regular"` for the `subtitle1` and `subtitle2` text styles.
+- Updates the `"digitalCollectionsBlack"` variant of the `Logo` component to use NYPL color design tokens.
+- Updates the following components to accept `JSX.Element` type values into their `"title"` prop: `List`, `NewsletterSignup`,
+- Updates the following components to accept `JSX.Element` type values into their `"headingText"` prop: `AlphabetFilter`, `AudioPlayer`, `ComponentWrapper`, `SearchBar`, `VideoPlayer`
+- Updates the `Notification` component to accept `JSX.Element` type values into its `"notificationHeading"` prop.
+- Updates the `StructuredContent` component to accept `JSX.Element` type values into its `"headingText"` and `"calloutText"` props.
+- Updates the `FeaturedContent` component by adjusting the spacing in the `"fullScreen"` variant to better align the component text content with the page text content.
+- Updates the `"campaign"` variant of the `Hero` component to improve the spacing around the component.
+- Updates the `Card` component so that it accepts the `imageProps.isLazy` prop and passes it to its internal `Image` component.
+
+## Fixes
+
+- Adds z-index on hover to the `SearchBar`'s select icon so it no longer disappears.
+- Adds z-index to the `DatePicker`'s calendar container so that the helper text does not shift when the calendar opens.
+
 ## 2.1.2 (November 9, 2023)
 
 ### Adds

package.json

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

src/components/AlphabetFilter/AlphabetFilter.mdx

@@ -2,6 +2,8 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
 import * as AlphabetFilterStories from "./AlphabetFilter.stories";
 import Link from "../Link/Link";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import { changelogData } from "./alphabetFilterChangelogData";
 
 <Meta of={AlphabetFilterStories} />
 
@@ -10,14 +12,16 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `1.2.0`    |
-| Latest            | `2.0.0`    |
+| Latest            | `2.1.3`    |
 
 ## Table of Contents
 
 - {<Link href="#overview" target="_self">Overview</Link>}
 - {<Link href="#component-props" target="_self">Component Props</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
+- {<Link href="#with-custom-heading" target="_self">With Custom Heading</Link>}
 - {<Link href="#examples" target="_self">Examples</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -76,6 +80,24 @@ the updated filter results must be the child of an element that has the
 `role=”alert”` attribute applied or as a child of a Live Region container with
 the `aria-live="polite"` attribute applied.
 
+## With Custom Heading
+
+By default, the `AlphabetFilter` will render an `h2` element when a string is
+passed to the `headingText` component. If this is an accessibility issue, it's
+possible to pass in a custom heading element.
+
+In the following example, an `h4` is rendered through the DS `Heading` component.
+
+<Source
+  code={`
+
+const customH4 = <Heading level="h4">Custom H4 Heading</Heading>;
+
+<AlphabetFilter headingText={customH4} {...props} />
+`} language="tsx" />
+
+<Canvas of={AlphabetFilterStories.WithCustomHeading} />
+
 ## Examples
 
 ### AlphabetFilter with activeLetters set
@@ -122,3 +144,7 @@ change.
 />
 
 <Canvas of={AlphabetFilterStories.UsingOnClick} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/AlphabetFilter/AlphabetFilter.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 
 import AlphabetFilter from "./AlphabetFilter";
+import Heading from "../Heading/Heading";
 
 const meta: Meta<typeof AlphabetFilter> = {
   title: "Components/Navigation/AlphabetFilter",
@@ -69,6 +70,14 @@ export const SetActiveLetters: Story = {
     />
   ),
 };
+export const WithCustomHeading: Story = {
+  render: () => (
+    <AlphabetFilter
+      onClick={undefined}
+      headingText={<Heading level="h4">Custom H4 Heading</Heading>}
+    />
+  ),
+};
 export const SetCurrentLetter: Story = {
   render: () => <AlphabetFilter currentLetter="c" onClick={undefined} />,
 };

src/components/AlphabetFilter/AlphabetFilter.test.tsx

@@ -1,9 +1,11 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-import AlphabetFilter from "./AlphabetFilter";
 import userEvent from "@testing-library/user-event";
 import renderer from "react-test-renderer";
+import { axe } from "jest-axe";
+import React from "react";
+
+import AlphabetFilter from "./AlphabetFilter";
+import Heading from "../Heading/Heading";
 
 const onClick = jest.fn();
 describe("AlphabetFilter accessibility", () => {
@@ -59,6 +61,19 @@ describe("AlphabetFilter", () => {
     expect(description).toBeInTheDocument();
   });
 
+  it("should render a custom heading level", () => {
+    render(
+      <AlphabetFilter
+        onClick={onClick}
+        id="alphabet-filter-id"
+        headingText={<Heading level="h4">Custom H4 Heading</Heading>}
+        descriptionText="This is a description."
+      />
+    );
+    const heading = screen.getByRole("heading", { level: 4 });
+    expect(heading).toBeInTheDocument();
+  });
+
   it("should disable buttons with values not passed through activeLetters", () => {
     render(
       <AlphabetFilter

src/components/AlphabetFilter/AlphabetFilter.tsx

@@ -20,8 +20,10 @@ export interface AlphabetFilterProps {
   currentLetter?: string;
   /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
   descriptionText?: string | JSX.Element;
-  /** Value used to set the text for a `Heading` component. */
-  headingText?: string;
+  /** Optional string value used to set the text for a `Heading` component, or
+   * a DS Heading component that can be passed in.
+   */
+  headingText?: string | JSX.Element;
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
   /** Adds the `disabled` prop to the AlphabetFilter when true. */

src/components/AlphabetFilter/alphabetFilterChangelogData.ts

@@ -0,0 +1,21 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-12-07",
+    version: "2.1.3",
+    type: "Update",
+    affects: ["Accessibility", "Documentation"],
+    notes: [
+      "Updated the `headingText` prop to allow JSX to render custom heading elements for accessible heading hierarchy.",
+    ],
+  },
+];

src/components/AudioPlayer/AudioPlayer.mdx

@@ -2,6 +2,8 @@ import { ArgTypes, Canvas, Meta, Source } from "@storybook/blocks";
 
 import * as AudioPlayerStories from "./AudioPlayer.stories";
 import Link from "../Link/Link";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import { changelogData } from "./audioPlayerChangelogData";
 
 <Meta of={AudioPlayerStories} />
 
@@ -10,15 +12,17 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `1.2.0`    |
-| Latest            | `2.0.0`    |
+| Latest            | `2.1.3`    |
 
 ## Table of Contents
 
 - {<Link href="#overview" target="_self">Overview</Link>}
 - {<Link href="#component-props" target="_self">Component Props</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
+- {<Link href="#with-custom-heading" target="_self">With Custom Heading</Link>}
 - {<Link href="#example-embed-code-snippets" target="_self">Example Embed Code Snippets</Link>}
 - {<Link href="#errored" target="_self">Errored</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -67,6 +71,24 @@ Resources:
 - [MDN iframe: The Inline Frame element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
 - [Deque University Be Sure to Provide Titles for Iframes](https://dequeuniversity.com/tips/provide-iframe-titles)
 
+## With Custom Heading
+
+By default, the `AudioPlayer` will render an `h2` element when a string is
+passed to the `headingText` component. If this is an accessibility issue, it's
+possible to pass in a custom heading element.
+
+In the following example, an `h4` is rendered through the DS `Heading` component.
+
+<Source
+  code={`
+
+const customH4 = <Heading level="h4">Custom H4 Heading</Heading>;
+
+<AudioPlayer headingText={customH4} {...props} />
+`} language="tsx" />
+
+<Canvas of={AudioPlayerStories.WithCustomHeading} />
+
 ## Example Embed Code Snippets
 
 The examples below are shown with precise HTML formatting. However, often the
@@ -166,3 +188,7 @@ If the necessary props are not passed to the `AudioPlayer` component, the
 component UI will display an error message.
 
 <Canvas of={AudioPlayerStories.ErroredExample} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/AudioPlayer/AudioPlayer.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 
 import AudioPlayer from "./AudioPlayer";
+import Heading from "../Heading/Heading";
 
 const meta: Meta<typeof AudioPlayer> = {
   title: "Components/Media & Icons/AudioPlayer",
@@ -20,6 +21,9 @@ const meta: Meta<typeof AudioPlayer> = {
 export default meta;
 type Story = StoryObj<typeof AudioPlayer>;
 
+const libsynPlayerEmbedCode =
+  '<iframe title="Libsyn Player" style="border: none" src="//html5-player.libsyn.com/embed/episode/id/18268511/height/90/theme/custom/thumbnail/yes/direction/backward/render-playlist/no/custom-color/87A93A/" height="90" width="100%" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>';
+
 /**
  * Main Story for the AudioPlayer component. This must contains the `args`
  * and `parameters` properties in this object.
@@ -30,7 +34,7 @@ export const WithControls: Story = {
     className: undefined,
     descriptionText:
       "Audio description lorem ipsum dolor simet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.",
-    embedCode: `<iframe title="Libsyn Player" style="border: none" src="//html5-player.libsyn.com/embed/episode/id/18268511/height/90/theme/custom/thumbnail/yes/direction/backward/render-playlist/no/custom-color/87A93A/" height="90" width="100%" scrolling="no"  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>`,
+    embedCode: libsynPlayerEmbedCode,
     headingText: "Audio Title",
     helperText: "Audio helper text lorem ipsum dolor simet.",
     id: "audioplayer-id",
@@ -45,15 +49,22 @@ export const WithControls: Story = {
   },
 };
 
-// The following are additional AudioPlayer example Stories.
-export const LibsynExample: Story = {
+export const WithCustomHeading: Story = {
   render: () => (
     <AudioPlayer
-      embedCode='<iframe title="Libsyn Player" style="border: none" src="//html5-player.libsyn.com/embed/episode/id/18268511/height/90/theme/custom/thumbnail/yes/direction/backward/render-playlist/no/custom-color/87A93A/" height="90" width="100%" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen ></iframe>'
+      headingText={<Heading level="h4">Custom H4 Heading</Heading>}
+      embedCode={libsynPlayerEmbedCode}
       audioType="libsyn"
     />
   ),
 };
+
+// The following are additional AudioPlayer example Stories.
+export const LibsynExample: Story = {
+  render: () => (
+    <AudioPlayer embedCode={libsynPlayerEmbedCode} audioType="libsyn" />
+  ),
+};
 export const SoundcloudExample: Story = {
   render: () => (
     <AudioPlayer

src/components/AudioPlayer/AudioPlayer.test.tsx

@@ -1,8 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
-import * as React from "react";
 import renderer from "react-test-renderer";
+
 import AudioPlayer from "./AudioPlayer";
+import Heading from "../Heading/Heading";
 
 const libsynCode = `<iframe title="Libsyn Player" style="border: none" src="//html5-player.libsyn.com/embed/episode/id/18268511/height/90/theme/custom/thumbnail/yes/direction/backward/render-playlist/no/custom-color/87A93A/" height="90" width="100%" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen ></iframe> `;
 const soundCloudCode = ` <iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/311382449&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" ></iframe> <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;" > <a href="https://soundcloud.com/nypl" title="New York Public Library" target="_blank" style="color: #cccccc; text-decoration: none;" >New York Public Library</a > · <a href="https://soundcloud.com/nypl/journalism-in-the-age-of-trump" title="Journalism in the Age of Trump" target="_blank" style="color: #cccccc; text-decoration: none;" >Journalism in the Age of Trump</a > </div> `;
@@ -76,6 +77,17 @@ describe("AudioPlayer valid render", () => {
     expect(screen.getByText("Audio Player Heading")).toBeInTheDocument();
   });
 
+  it("Renders a custom heading level", () => {
+    render(
+      <AudioPlayer
+        embedCode={libsynCode}
+        audioType="libsyn"
+        headingText={<Heading level="h4">Custom H4 Heading</Heading>}
+      />
+    );
+    expect(screen.getByRole("heading", { level: 4 })).toBeInTheDocument();
+  });
+
   it("Renders descriptionText", () => {
     expect(
       screen.getByText("Audio Player description text.")

src/components/AudioPlayer/AudioPlayer.tsx

@@ -28,8 +28,10 @@ export interface AudioPlayerProps {
    * TODO: This prop won't be used until a future version.
    */
   /*  filePath?: string; */
-  /** Optional string to set the text for a `Heading` component. */
-  headingText?: string;
+  /** Optional string value used to set the text for a `Heading` component, or
+   * a DS Heading component that can be passed in.
+   */
+  headingText?: string | JSX.Element;
   /** Optional string to set the text for a `HelperErrorText` component. */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes. */

src/components/AudioPlayer/audioPlayerChangelogData.ts

@@ -0,0 +1,21 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-12-07",
+    version: "2.1.3",
+    type: "Update",
+    affects: ["Accessibility", "Documentation"],
+    notes: [
+      "Updated the `headingText` prop to allow JSX to render custom heading elements for accessible heading hierarchy.",
+    ],
+  },
+];