Skip to content

Commit

Permalink
Merge renovate/rollup into renovate/update/vite-5.x
Browse files Browse the repository at this point in the history
  • Loading branch information
cultureamp-renovate[bot] authored Nov 28, 2024
2 parents 86db091 + 4b6f2a0 commit bded690
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 10 deletions.
2 changes: 0 additions & 2 deletions .changeset/twelve-fans-notice.md

This file was deleted.

6 changes: 6 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
8 changes: 8 additions & 0 deletions packages/components/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,10 @@ export const Information: Story = {
information: "Side B",
},
}

export const TileWithCustomInfoLabel: Story = {
args: {
infoButtonLabel: "Test",
information: "Side B",
},
}
Original file line number Diff line number Diff line change
@@ -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> = {
Expand All @@ -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()
})
})
},
}
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand All @@ -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}>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit bded690

Please sign in to comment.