Merge pull request #1627 from NYPL/development

Release v3.1.6

.github/workflows/release.yml

@@ -22,9 +22,10 @@ jobs:
       # the tag will match the package.json version (eg. v1.0.0)
       - name: Tag
         id: autotagger
-        uses: butlerlogic/action-autotag@stable
-        with:
+        uses: butlerlogic/action-autotag@1.1.2
+        env:
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+        with:
           strategy: package
           tag_prefix: v
 

CHANGELOG.md

@@ -8,11 +8,29 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.1.6 (June 20, 2024)
+
+### Adds
+
+- Adds Storybook interaction tests for the `SearchBar` component.
+- Adds Storybook interaction tests for the `Select` component.
+- Adds Storybook interaction tests for the `Radiogroup` component.
+
+### Updates
+
+- Updates how links are styled within the `Heading` component.
+
+### Fixes
+
+- Fixes broken Github Action for release tags.
+
 ## 3.1.5 (June 6, 2024)
 
 ### Adds
 
 - Adds the following npm packages: `jest-transformer-svg`, `@storybook/addon-designs`, and `@storybook/test`.
+- Adds Storybook interaction tests for `Select`.
+- Adds Storybook interaction tests for `RadioGroup`.
 
 ### Updates
 
@@ -27,18 +45,18 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 - Removes the following packages: `downshift`, `tough-cookie`, `@storybook/testing-library`, `storybook-addon-designs`, and `@svgr/webpack`.
 
-## 3.1.4 (May 23, 2024)
-
-### Adds
-
-- Adds `showRowDividers` prop to show/hide row dividers for the `List` `"dl"` variant.
-
 ### Updates
 
 - Exports `useMediaQuery` and `chakra` from Chakra UI.
 - Updates `Accordion` to close focused panel when "esc" key is pressed.
 - Updates the `TextInput` and `SearchBar` components to better associate the input element to the entire component's helper text.
 
+## 3.1.4 (May 23, 2024)
+
+### Adds
+
+- Adds `showRowDividers` prop to show/hide row dividers for the `List` `"dl"` variant.
+
 ### Fixes
 
 - Fixes the z-index issue in the `MultiSelect` component's selected item button.

package.json

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

src/components/Heading/Heading.mdx

@@ -12,7 +12,7 @@ import { changelogData } from "./headingChangelogData";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `3.1.2`    |
+| Latest            | `3.1.6`    |
 
 ## Table of Contents
 
@@ -248,8 +248,21 @@ composed heading lockup.
 
 ## Heading with Links
 
-When the `url` prop is passed to `Heading`, a child `<a>` element is created and
-the heading text becomes an active link.
+The recommended pattern to make headings linkable is to use the `url` prop. This
+will create a child `<a>` element within the heading element. Alternatively, you
+can pass a DS `Link` component, a custom `Link` component, or an HTML `anchor`
+element as the **only child** of the `Heading` component.
+
+**Important**: Linked headings should have the link color but not be underlined.
+
+If only a specific portion of the heading should be linked, then the `url` prop
+cannot be used. Instead, use a `Link` or HTML `anchor` element to wrap the text
+that should be linked. Note that the non-linked text should be passed as a text
+node and not wrapped in span or other elements.
+
+This treatment allows for individual words within the full heading text to be
+set as a link, however, this is not a recommended pattern. While this treatment
+is possible with the `Heading` component, this pattern SHOULD NOT be used.
 
 <Canvas of={HeadingStories.Links} />
 

src/components/Heading/Heading.stories.tsx

@@ -1,7 +1,8 @@
+import { VStack } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Heading, { headingLevelsArray, headingSizesArray } from "./Heading";
-import { VStack } from "@chakra-ui/react";
+import Link from "../Link/Link";
 import { argsBooleanType } from "../../helpers/storybookUtils";
 
 const meta: Meta<typeof Heading> = {
@@ -412,16 +413,38 @@ export const Links: Story = {
   render: () => (
     <VStack align="left" spacing="l">
       <Heading
-        id="heading-with-link-url"
-        level="h2"
+        id="heading-with-text-url-values"
+        level="h3"
         noSpace
-        text="Heading with URL Props"
+        text="Heading with `url` and `text` props"
         url="http://apple.com"
         urlClass="special-link"
       />
-      <Heading id="heading-with-link-child" level="h2">
+      <Heading
+        id="heading-with-link-url"
+        level="h3"
+        noSpace
+        url="http://apple.com"
+        urlClass="special-link"
+      >
+        Heading with `url` prop value
+      </Heading>
+      <Heading id="heading-with-anchor" level="h3" noSpace>
+        <a href="#hello">Link from HTML anchor element</a>
+      </Heading>
+      <Heading id="heading-with-DS-link" level="h3" noSpace>
+        <Link href="#hello">Link using DS `Link` component</Link>
+      </Heading>
+      <Heading id="heading-with-link-child" level="h3" noSpace>
+        <>
+          Not acceptable. Do not use. <a href="#hello">Link</a>
+        </>
+      </Heading>
+      <Heading id="heading-with-DS-link-child" level="h3" noSpace>
         <>
-          Heading with a Word <a href="#hello">Link</a>
+          <span>Text wrapped in a span </span>
+          <Link href="#hello">Link</Link>
+          <span> Not a recommended pattern</span>
         </>
       </Heading>
     </VStack>

src/components/Heading/headingChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-06-20",
+    version: "3.1.6",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Updates the styles for links within the heading."],
+  },
   {
     date: "2024-05-09",
     version: "3.1.2",

src/components/Modal/Modal.mdx

@@ -21,6 +21,7 @@ import Link from "../Link/Link";
 - {<Link href="#nypl-patterns" target="_self">NYPL Patterns</Link>}
 - {<Link href="#best-practices" target="_self">Best Practices</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
+- {<Link href="#using-the-modal-usemodal-vs-modaltrigger" target="_self">Usage</Link>}
 - {<Link href="#modaltrigger" target="_self">ModalTrigger</Link>}
 - {<Link href="#modaltrigger-component-props" target="_self">ModalTrigger Component Props</Link>}
 - {<Link href="#usemodal" target="_self">useModal</Link>}
@@ -84,13 +85,13 @@ It’s OK to ask a question in a modal description to confirm if a user wants to
 However, even when a question is used in a modal description, distinct button action labels should be used to show that
 a user has control over what happens next.
 
-### Example text
+### Example text (for a `confirmation` modal)
 
 Modal title: Confirm reservation cancellation
 
 Modal description: Your upcoming reservation will be cancelled.
 
-Action buttons: [Cancel] [Confirm]
+Action button: [Cancel] [Confirm]
 
 ## Accessibility
 
@@ -111,6 +112,14 @@ In addition to having a cancel button, users should be able to exit a modal by p
 
 https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
+## Using the modal: useModal vs. ModalTrigger
+
+`ModalTrigger` is a component that contains both the "trigger", or the button that opens the modal, and the modal itself. When you use `ModalTrigger`,
+you pass only the modal props and the button text, and the `ModalTrigger` calls the `onClose` and `onOpen` functions internally.
+
+Or, you can call `useModal()`. `useModal()` returns the Modal component, the `onClose` function, and the `onOpen` function, giving you the responsibility to
+pass `onOpen` and `onClose` to your custom open and close functions.
+
 ## ModalTrigger
 
 <Description of={ModalTrigger} />
@@ -175,7 +184,7 @@ create and render your own button.**
 <Source
   code={`
 import { useModal } from "@nypl/design-system-react-components";
-// ...
+// useModal example with default props
 export const ModalStory = (args) => {
   const { onClose, onOpen, Modal } = useModal();
   const modalProps = {
@@ -239,28 +248,30 @@ the `ESC` button.
 
 Notes:
 
-- The `onConfirm`, `onCancel`, `confirmButtonLabel`, and `type` props are required for this variant.
-- The `onClose` prop should never be passed with `onConfirm` and `onCancel`.
+- The `onConfirm`, `onCancel`, and `confirmButtonLabel` props are required for this variant.
+- The `onClose` modal prop should NOT be passed.
 - When using the `ModalTrigger`, `onConfirm` and `onCancel` will call the `onClose` from the `useModal` hook internally.
 - When using the `useModal` hook, as with the `onClose` prop, pass the `onClose` function from the hook to `onCancel` and `onConfirm`:
   for example, `onCancel: () => { onClose(); }`.
 
 <Source
   code={`
-// Example for the Confirmation variant with ModalTrigger. 
+// ModalTrigger example with confirmation props
   <ModalTrigger
     buttonText="Confirm"
     id="modal-confirmation"
     modalProps={{
       type: "confirmation",
       bodyContent: "The action is happening",
-      cancelButtonLabel: "Cancel action",
+      closeButtonLabel: "Cancel action",
       confirmButtonLabel: "Confirm action",
       onCancel: () => {
         console.log("Custom cancel");
+        // Calls onClose internally.
       },
       onConfirm: () => {
         console.log("Custom confirm");
+        // Calls onClose internally.
       },
       headingText: (
         <Heading

src/components/Modal/Modal.stories.tsx

@@ -20,7 +20,7 @@ const meta: Meta<typeof ModalTrigger> = {
       description:
         "Props to update the internal `Modal` component. This contains the" +
         "`bodyContent`, `closeButtonLabel`, `confirmButtonLabel`, `headingText`, `isOpen`," +
-        "`onClose`, `onCancel`,`onConfirm`, and `type` props",
+        "`onClose`, or `onCancel` and `onConfirm`, and `type` props",
     },
   },
 };
@@ -161,7 +161,8 @@ export const useModalStory: Story = {
     },
     closeButtonLabel: {
       control: { type: "text" },
-      description: "The label for the close or cancel button.",
+      description:
+        "The label for the close button OR the label for the cancel button in the confirmation variant.",
     },
     confirmButtonLabel: {
       control: { type: "text" },
@@ -179,15 +180,18 @@ export const useModalStory: Story = {
     },
     onClose: {
       control: false,
-      description: "Function to call when the modal is closed.",
+      description:
+        "Function to call when the modal is closed. Do not pass this prop with the confirmation variant.",
     },
     onConfirm: {
       control: false,
-      description: "Function to call when the modal action is confirmed.",
+      description:
+        "Function to call when the modal action is confirmed. Do not pass this prop with the default variant.",
     },
     onCancel: {
       control: false,
-      description: "Function to call when the modal action is canceled.",
+      description:
+        "Function to call when the modal action is canceled. Do not pass this prop with the default variant.",
     },
     modalProps: { table: { disable: true } },
   },

src/components/Modal/Modal.tsx

@@ -244,7 +244,7 @@ export const ModalTrigger: ChakraComponent<
 /**
  * This hook function can be used to render the `Modal` component with a custom
  * open button(s) and optional custom close button(s). You must render your own
- * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ * button and pass the appropriate `onOpen` and `onClose` handler for the modal to open.
  */
 export function useModal(): any {
   const { isOpen, onClose, onOpen } = useDisclosure();

src/components/RadioGroup/RadioGroup.mdx

@@ -12,7 +12,7 @@ import { changelogData } from "./radioGroupChangelogData";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.0`   |
-| Latest            | `3.0.0`    |
+| Latest            | `3.1.6`    |
 
 ## Table of Contents
 

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,15 +1,16 @@
 import { Box, Flex, Spacer, VStack } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import { createRef } from "react";
 
-import { argsBooleanType } from "../../helpers/storybookUtils";
 import Button from "../Button/Button";
 import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import Form from "../Form/Form";
 import Radio from "../Radio/Radio";
 import RadioGroup from "./RadioGroup";
 import SimpleGrid from "../Grid/SimpleGrid";
 import Heading from "../Heading/Heading";
+import { argsBooleanType } from "../../helpers/storybookUtils";
 
 const meta: Meta<typeof RadioGroup> = {
   title: "Components/Form Elements/RadioGroup",
@@ -75,6 +76,25 @@ export const Controls: Story = {
     },
     jest: ["RadioGroup.test.tsx"],
   },
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement);
+
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+
+    expect(screen.getByLabelText("Radio 4")).toBeChecked();
+
+    await userEvent.click(screen.getByLabelText("Radio 3"));
+    await userEvent.click(screen.getByLabelText("Radio 2"));
+    await userEvent.click(screen.getByLabelText("Radio 5"));
+    expect(screen.getByLabelText("Radio 5")).toBeChecked();
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowleft}");
+    await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowright}");
+    await userEvent.keyboard("{arrowdown}");
+    expect(screen.getByLabelText("Radio 2")).toBeChecked();
+  },
 };
 
 // The following are additional RadioGroup example Stories.

src/components/RadioGroup/radioGroupChangelogData.tsx

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-06-20",
+    version: "3.1.6",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Adds interaction tests for the Controls story."],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",

src/components/SearchBar/SearchBar.mdx

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