diff --git a/.changeset/twelve-fans-notice.md b/.changeset/twelve-fans-notice.md deleted file mode 100644 index a845151cc84..00000000000 --- a/.changeset/twelve-fans-notice.md +++ /dev/null @@ -1,2 +0,0 @@ ---- ---- diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8425f62d77c..af9e7a7c7b4 100644 --- a/packages/components/CHANGELOG.md +++ b/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 diff --git a/packages/components/locales/en.json b/packages/components/locales/en.json index 92b58478f20..4756a31628d 100644 --- a/packages/components/locales/en.json +++ b/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" diff --git a/packages/components/package.json b/packages/components/package.json index 80a3d170ffe..fe39a61d70a 100644 --- a/packages/components/package.json +++ b/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 ", "homepage": "https://cultureamp.design", diff --git a/packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx b/packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx index 9f7ba3fc1af..aa42372f656 100644 --- a/packages/components/src/Tile/InformationTile/_docs/InformationTile.mdx +++ b/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 + + +### Information Button Label + diff --git a/packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx b/packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx index feee62c3625..9a83f5dd160 100644 --- a/packages/components/src/Tile/InformationTile/_docs/InformationTile.stories.tsx +++ b/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", + }, +} diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx index 7bb3719603c..85e5ded23d5 100644 --- a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx +++ 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 = { @@ -19,11 +18,72 @@ export default meta type Story = StoryObj 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() + }) + }) }, } diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx index 47ae00f2e43..957e7d592f3 100644 --- a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx +++ b/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,6 +49,7 @@ export const GenericTile = ({ titleTag = "h3", metadata, information, + infoButtonLabel, mood, variant = "default", footer, @@ -53,6 +57,14 @@ export const GenericTile = ({ ...restProps }: GenericTileProps): JSX.Element => { const [isFlipped, setIsFlipped] = useState(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 => (
@@ -80,7 +92,7 @@ export const GenericTile = ({ {information && (
} 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 (
} onClick={(): void => setIsFlipped(false)} disabled={!isFlipped}