@kaizen/components 1.68.2 → 1.68.3

package/src/TextField/_docs/TextField.stickersheet.stories.tsx

@@ -32,56 +32,53 @@ const TextFieldExampleGroup = (props: TextFieldProps): JSX.Element => (
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        {InputStatus.map(status => (
-          <StickerSheet.Row key={status} rowTitle={status}>
-            <TextFieldExampleGroup
-              reversed={isReversed}
-              labelText="TextField"
-              description="A short description"
-              status={status}
-              validationMessage="A valid question"
-            />
-            <TextFieldExampleGroup
-              reversed={isReversed}
-              labelText="TextField"
-              description="A short description"
-              status={status}
-              validationMessage="A valid question"
-              data-sb-pseudo-styles="hover"
-            />
-            <TextFieldExampleGroup
-              reversed={isReversed}
-              labelText="TextField"
-              description="A short description"
-              status={status}
-              validationMessage="A valid question"
-              data-sb-pseudo-styles="active"
-            />
-            <TextFieldExampleGroup
-              reversed={isReversed}
-              labelText="TextField"
-              description="A short description"
-              status={status}
-              validationMessage="A valid question"
-              data-sb-pseudo-styles="focus"
-            />
-            <TextFieldExampleGroup
-              reversed={isReversed}
-              labelText="TextField"
-              description="A short description"
-              status={status}
-              validationMessage="A valid question"
-              disabled
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Hover", "Active", "Focus", "Disabled"]}
+    >
+      {InputStatus.map(status => (
+        <StickerSheet.Row key={status} header={status}>
+          <TextFieldExampleGroup
+            reversed={isReversed}
+            labelText="TextField"
+            description="A short description"
+            status={status}
+            validationMessage="A valid question"
+          />
+          <TextFieldExampleGroup
+            reversed={isReversed}
+            labelText="TextField"
+            description="A short description"
+            status={status}
+            validationMessage="A valid question"
+            data-sb-pseudo-styles="hover"
+          />
+          <TextFieldExampleGroup
+            reversed={isReversed}
+            labelText="TextField"
+            description="A short description"
+            status={status}
+            validationMessage="A valid question"
+            data-sb-pseudo-styles="active"
+          />
+          <TextFieldExampleGroup
+            reversed={isReversed}
+            labelText="TextField"
+            description="A short description"
+            status={status}
+            validationMessage="A valid question"
+            data-sb-pseudo-styles="focus"
+          />
+          <TextFieldExampleGroup
+            reversed={isReversed}
+            labelText="TextField"
+            description="A short description"
+            status={status}
+            validationMessage="A valid question"
+            disabled
+          />
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
   parameters: {

package/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} />

package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx

@@ -38,29 +38,23 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="InformationTile">
-          <StickerSheet.Body>
-            {variants.map(variant => (
-              <StickerSheet.Row key={variant} rowTitle={variant}>
-                <InformationTile {...defaultProps} variant={variant} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet title="InformationTile">
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} header={variant}>
+              <InformationTile {...defaultProps} variant={variant} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
-        <StickerSheet heading="Mood (deprecated)">
-          <StickerSheet.Body>
-            <>
-              <StickerSheet.Row rowTitle="default">
-                <InformationTile {...defaultProps} />
-              </StickerSheet.Row>
-              {moods.map(mood => (
-                <StickerSheet.Row key={mood} rowTitle={mood}>
-                  <InformationTile {...defaultProps} mood={mood} />
-                </StickerSheet.Row>
-              ))}
-            </>
-          </StickerSheet.Body>
+        <StickerSheet title="Mood (deprecated)">
+          <StickerSheet.Row header="default">
+            <InformationTile {...defaultProps} />
+          </StickerSheet.Row>
+          {moods.map(mood => (
+            <StickerSheet.Row key={mood} header={mood}>
+              <InformationTile {...defaultProps} mood={mood} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

package/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",
+  },
+}

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx

@@ -43,29 +43,23 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="MultiActionTile">
-          <StickerSheet.Body>
-            {variants.map(variant => (
-              <StickerSheet.Row key={variant} rowTitle={variant}>
-                <MultiActionTile {...defaultProps} variant={variant} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet title="MultiActionTile">
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} header={variant}>
+              <MultiActionTile {...defaultProps} variant={variant} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
-        <StickerSheet heading="Mood (deprecated)">
-          <StickerSheet.Body>
-            <>
-              <StickerSheet.Row rowTitle="default">
-                <MultiActionTile {...defaultProps} />
-              </StickerSheet.Row>
-              {moods.map(mood => (
-                <StickerSheet.Row key={mood} rowTitle={mood}>
-                  <MultiActionTile {...defaultProps} mood={mood} />
-                </StickerSheet.Row>
-              ))}
-            </>
-          </StickerSheet.Body>
+        <StickerSheet title="Mood (deprecated)">
+          <StickerSheet.Row header="default">
+            <MultiActionTile {...defaultProps} />
+          </StickerSheet.Row>
+          {moods.map(mood => (
+            <StickerSheet.Row key={mood} header={mood}>
+              <MultiActionTile {...defaultProps} mood={mood} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

package/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx

@@ -17,105 +17,97 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="One row">
-          <StickerSheet.Cell width={1000}>
-            <TileGrid>
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-            </TileGrid>
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Two rows">
-          <StickerSheet.Cell width={1000}>
-            <TileGrid>
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-            </TileGrid>
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Partial complete rows">
-          <StickerSheet.Cell width={1000}>
-            <TileGrid>
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-              <InformationTile
-                title="Title"
-                metadata="Side A"
-                information="Side B"
-                footer={<>Footer</>}
-              />
-            </TileGrid>
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet layout="stretch">
+      <StickerSheet.Row header="One row">
+        <TileGrid>
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+        </TileGrid>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Two rows">
+        <TileGrid>
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+        </TileGrid>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Partial complete rows">
+        <TileGrid>
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+        </TileGrid>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/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()
+      })
+    })
   },
 }

package/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<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}

package/src/Tile/subcomponents/GenericTile/_docs/GenericTile.stickersheet.stories.tsx

@@ -38,29 +38,23 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="GenericTile">
-          <StickerSheet.Body>
-            {variants.map(variant => (
-              <StickerSheet.Row key={variant} rowTitle={variant}>
-                <GenericTile {...defaultProps} variant={variant} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet title="GenericTile">
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} header={variant}>
+              <GenericTile {...defaultProps} variant={variant} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
-        <StickerSheet heading="Mood (deprecated)">
-          <StickerSheet.Body>
-            <>
-              <StickerSheet.Row rowTitle="default">
-                <GenericTile {...defaultProps} />
-              </StickerSheet.Row>
-              {moods.map(mood => (
-                <StickerSheet.Row key={mood} rowTitle={mood}>
-                  <GenericTile {...defaultProps} mood={mood} />
-                </StickerSheet.Row>
-              ))}
-            </>
-          </StickerSheet.Body>
+        <StickerSheet title="Mood (deprecated)">
+          <StickerSheet.Row header="default">
+            <GenericTile {...defaultProps} />
+          </StickerSheet.Row>
+          {moods.map(mood => (
+            <StickerSheet.Row key={mood} header={mood}>
+              <GenericTile {...defaultProps} mood={mood} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )