@kaizen/components 1.68.4 → 1.68.5

package/locales/km-KH.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "ទៅកាន់ទំព័រដើម"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "មើលព័ត៌មានបន្ថែម៖"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "លាក់ព័ត៌មាន៖"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "សកម្មភាពបន្ថែម"

package/locales/ko.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "홈으로 이동하기"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "자세한 정보 보기:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "정보 숨기기:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "추가 작업"

package/locales/lt.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Eiti į pagrindinį puslapį"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Žiūrėti daugiau informacijos:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Paslėpti informaciją:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Papildomi veiksmai"

package/locales/lv.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Doties uz sākumlapu"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Skatīt vairāk informācijas:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Paslēpt informāciju:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Papildu darbības"

package/locales/mi.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Go to Home"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Tirohia etahi atu korero:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Huna mōhiohio:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ngā mahi tāpiri"

package/locales/ms.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Pergi kepada Laman Utama"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Lihat maklumat lanjut:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Sembunyikan maklumat:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Tindakan tambahan"

package/locales/nb.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Gå til Hjem"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Vis mer informasjon:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Skjul informasjon:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ytterligere handlinger"

package/locales/nl.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Naar startpagina"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Bekijk meer informatie:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Informatie verbergen:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Meer acties"

package/locales/pl.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Przejdź do strony głównej"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Zobacz więcej informacji:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ukryj informacje:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Dodatkowe działania"

package/locales/pt-BR.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Acessar página inicial"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Ver mais informações:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ocultar informações:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Mais ações"

package/locales/pt.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Acessar página inicial"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Ver mais informações:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ocultar informações:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Mais ações"

package/locales/ro.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Mergeți la pagina principală"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Vedeți mai multe informații:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ascundeți informațiile:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Acțiuni suplimentare"

package/locales/ru.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Перейти на главную"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Показать дополнительную информацию:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Скрыть информацию:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Дополнительные действия"

package/locales/si-LK.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "ගෙදර යන්න"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "වැඩි විස්තර බලන්න:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "තොරතුරු සඟවන්න:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "අතිරේක ක්‍රියාමාර්ග"

package/locales/sk.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Prejsť na Úvod"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Zobraziť viac informácií:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Skryť informácie:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ďalšie činnosti"

package/locales/sr.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Idite na Početnu stranicu"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Pogledaj više informacija:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Sakrij informacije:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Dodatne radnje"

package/locales/sv.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Gå till startsidan"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Visa mer information:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Dölj information:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ytterligare åtgärder"

package/locales/th.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "ไปที่หน้าแรก"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "ดูข้อมูลเพิ่มเติม:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "ซ่อนข้อมูล:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "การดำเนินการเพิ่มเติม"

package/locales/tl.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Pumunta sa Home"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Tingnan ang iba pang impormasyon"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Itago ang impormasyon:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Karagdagang mga aksiyon"

package/locales/tr.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Ana Sayfaya Git"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Daha fazla bilgi görüntüleyin:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Bilgileri gizleyin:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ek eylemler"

package/locales/uk.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Перейти на головну"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Переглянути додаткову інформацію:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Приховати інформацію:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Додаткові дії"

package/locales/vi.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Vào Trang chủ"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Xem thêm thông tin:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ẩn thông tin:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Các hành động bổ sung"

package/locales/zh-TW.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "前往首頁"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "檢視更多資訊："
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "隱藏資訊："
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "其他行動"

package/locales/zh.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "转到主页"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "查看更多信息："
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "隐藏信息："
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "附加操作"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.4",
+  "version": "1.68.5",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

@@ -1,5 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, waitFor, within } from "@storybook/test"
 import { InformationTile } from "~components/Tile"
 import { TileGrid } from "../index"
 
@@ -10,21 +11,21 @@ const meta = {
     children: (
       <>
         <InformationTile
-          title="Title"
+          title="Title A"
           metadata="Side A"
-          information="Side B"
+          information="Side A - Back"
           footer={<>Footer</>}
         />
         <InformationTile
-          title="Title"
-          metadata="Side A"
-          information="Side B"
+          title="Title B"
+          metadata="Side B"
+          information="Side B - Back"
           footer={<>Footer</>}
         />
         <InformationTile
-          title="Title"
-          metadata="Side A"
-          information="Side B"
+          title="Title C"
+          metadata="Side C"
+          information="Side C - Back"
           footer={<>Footer</>}
         />
       </>
@@ -45,3 +46,35 @@ export const Playground: Story = {
     },
   },
 }
+
+// Test for multiple tiles, flipping one doesn't flip others
+export const FlipOneNotOthers: 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 A",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title A",
+        })
+        buttonWithInfoLabel.click()
+      })
+    })
+
+    await step("Check other tiles", async () => {
+      await waitFor(() => {
+        expect(canvas.getByText("Side A - Back")).toBeInTheDocument()
+        expect(canvas.getByText("Title B")).toBeInTheDocument()
+        expect(canvas.getByText("Title C")).toBeInTheDocument()
+      })
+    })
+  },
+}

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -87,3 +87,61 @@ export const InfoButtonLabel: Story = {
     })
   },
 }
+
+export const DoesNotStealFocusOnInitialRender: 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",
+        })
+        expect(buttonWithInfoLabel).not.toHaveFocus()
+      })
+    })
+  },
+}
+
+export const FocusOnFlip: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+    const buttonWithInfoLabel = await canvas.findByRole("button", {
+      name: "View more information: Title",
+    })
+
+    await step("initial render complete", async () => {
+      expect(buttonWithInfoLabel).toBeInTheDocument()
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        buttonWithInfoLabel.click()
+      })
+    })
+
+    const returnButton = canvas.getByRole("button", {
+      name: "Hide information: Title",
+    })
+
+    await step("Can click on info button again", async () => {
+      await waitFor(() => {
+        returnButton.click()
+      })
+    })
+
+    await step("Info button has focus again", async () => {
+      await waitFor(() => {
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
+    })
+  },
+}

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from "react"
+import React, { HTMLAttributes, useState, useRef, useEffect } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
@@ -57,7 +57,28 @@ export const GenericTile = ({
   ...restProps
 }: GenericTileProps): JSX.Element => {
   const [isFlipped, setIsFlipped] = useState<boolean>(false)
+  const [isDocumentReady, setIsDocumentReady] = useState<boolean>(false)
+
   const { formatMessage } = useIntl()
+  const infoButtonRef = useRef<HTMLButtonElement>(null)
+  const infoButtonReturnRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    setIsDocumentReady(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true)
+      return
+    }
+
+    if (isFlipped) {
+      infoButtonReturnRef.current!.focus()
+    } else {
+      infoButtonRef.current!.focus()
+    }
+  }, [isFlipped])
 
   const translatedInfoLabel = formatMessage({
     id: "kzGenericTile.infoButtonLabel",
@@ -97,6 +118,7 @@ export const GenericTile = ({
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
             aria-hidden={isFlipped}
+            ref={infoButtonRef}
           />
         </div>
       )}
@@ -162,6 +184,7 @@ export const GenericTile = ({
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}
             aria-hidden={!isFlipped}
+            ref={infoButtonReturnRef}
           />
         </div>
         <div className={styles.information}>