Merge renovate/rollup into renovate/update/storybook-monorepo

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.68.3
+
+### Patch Changes
+
+- [#5323](https://github.com/cultureamp/kaizen-design-system/pull/5323) [`0aa9923`](https://github.com/cultureamp/kaizen-design-system/commit/0aa9923aac781577ece76858bc48c7c217e428cb) - Add infoButtonLabel prop to GenericTile and internationalise default label.
+
 ## 1.68.2
 
 ### Patch Changes

packages/components/locales/en.json

@@ -165,6 +165,14 @@
     "description": "Home button label",
     "message": "Go to Home"
   },
+  "kzGenericTile.infoButtonLabel": {
+    "description": "Prompts user to interact with button to reveal more information",
+    "message": "View more information:"
+  },
+  "kzGenericTile.infoButtonReturnLabel": {
+    "description": "Prompts user to interact with button to hide information",
+    "message": "Hide information:"
+  },
   "splitButton.dropdownButton.label": {
     "description": "Label for a dropdown menu holding additional actions",
     "message": "Additional actions"

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.2",
+  "version": "1.68.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",

packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -30,3 +30,7 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 
 ### Information
 <Canvas of={InformationTileStories.Information} />
+
+
+### Information Button Label
+<Canvas of={InformationTileStories.TileWithCustomInfoLabel} />

packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx

@@ -54,3 +54,10 @@ export const Information: Story = {
     information: "Side B",
   },
 }
+
+export const TileWithCustomInfoLabel: Story = {
+  args: {
+    infoButtonLabel: "Test",
+    information: "Side B",
+  },
+}

packages/components/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { expect, within, userEvent } from "@storybook/test"
-
+import { expect, within, waitFor } from "@storybook/test"
 import { GenericTile } from "./GenericTile"
 
 const meta: Meta<typeof GenericTile> = {
@@ -19,11 +18,72 @@ export default meta
 type Story = StoryObj<typeof GenericTile>
 
 export const Flip: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+      })
+    })
+
+    await step("Can focus to tile", async () => {
+      await waitFor(() => {
+        expect(canvas.getByText("Side B")).toBeInTheDocument()
+      })
+    })
+  },
+}
+
+export const InfoButtonLabelDefault: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+        buttonWithInfoLabel.focus()
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
+    })
+  },
+}
+
+export const InfoButtonLabel: Story = {
+  args: {
+    infoButtonLabel: "Test Label",
+  },
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
 
-    await userEvent.click(canvas.getByRole("button", { name: "Information" }))
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "Test Label",
+        })
+      })
+    })
 
-    await expect(canvas.getByText("Side B")).toBeInTheDocument()
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "Test Label",
+        })
+        buttonWithInfoLabel.focus()
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
+    })
   },
 }

packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes, useState } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
 import { Text } from "~components/Text"
@@ -22,6 +23,8 @@ export type GenericTileProps = {
   titleTag?: AllowedHeadingTags
   metadata?: string
   information?: TileInformation | React.ReactNode
+  /** Provides accessible label for the title's info button @default "View more information: [title]" */
+  infoButtonLabel?: string
   /** @deprecated Use `variant` instead */
   mood?:
     | "positive"
@@ -46,13 +49,22 @@ export const GenericTile = ({
   titleTag = "h3",
   metadata,
   information,
+  infoButtonLabel,
   mood,
   variant = "default",
   footer,
   classNameOverride,
   ...restProps
 }: GenericTileProps): JSX.Element => {
   const [isFlipped, setIsFlipped] = useState<boolean>(false)
+  const { formatMessage } = useIntl()
+
+  const translatedInfoLabel = formatMessage({
+    id: "kzGenericTile.infoButtonLabel",
+    defaultMessage: "View more information:",
+    description:
+      "Prompts user to interact with button to reveal more information",
+  })
 
   const renderTitle = (): JSX.Element => (
     <div className={styles.title}>
@@ -80,7 +92,7 @@ export const GenericTile = ({
       {information && (
         <div className={styles.informationBtn}>
           <IconButton
-            label="Information"
+            label={infoButtonLabel || `${translatedInfoLabel} ${title}`}
             icon={<Icon name="info" isPresentational isFilled />}
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
@@ -135,11 +147,17 @@ export const GenericTile = ({
   const renderBack = (): JSX.Element | void => {
     if (!information) return
 
+    const returnButtonLabel = formatMessage({
+      id: "kzGenericTile.infoButtonReturnLabel",
+      defaultMessage: "Hide information:",
+      description: "Prompts user to interact with button to hide information",
+    })
+
     return (
       <div className={classnames(styles.face, styles.faceBack)}>
         <div className={styles.informationBtn}>
           <IconButton
-            label="Information"
+            label={`${returnButtonLabel} ${title}`}
             icon={<Icon name="arrow_back" isPresentational />}
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}