From d3ae52d3a1a7885551ab46f99a400a724561b000 Mon Sep 17 00:00:00 2001
From: Christian Moore <33382564+Zystix@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:54:07 +1100
Subject: [PATCH] Mark up Tiles in TileGrid as List (#5368)

* TileGrid changes

* Add tests

* Add changeset

* FIx styling, render Tiles as <li> inline, clarify test purpose

* Simply Tile <li> key

* Account for non fragments

* Covered edgecases, added tests to stickersheet.

* Remove comments

---------

Co-authored-by: Christian Moore <christian.moore@cultureamp.com>
---
 .changeset/afraid-dolls-visit.md              |  5 ++
 .../src/Tile/TileGrid/TileGrid.module.scss    |  1 +
 .../components/src/Tile/TileGrid/TileGrid.tsx | 39 +++++++--
 .../_docs/TileGrid.stickersheet.stories.tsx   | 40 ++++++++++
 .../Tile/TileGrid/_docs/TileGrid.stories.tsx  | 79 ++++++++++++++++++-
 5 files changed, 156 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/afraid-dolls-visit.md

diff --git a/.changeset/afraid-dolls-visit.md b/.changeset/afraid-dolls-visit.md
new file mode 100644
index 00000000000..a0cf17c051b
--- /dev/null
+++ b/.changeset/afraid-dolls-visit.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+TileGrid renders Tiles in a <ul>, wrapping each Tile in an <li>
diff --git a/packages/components/src/Tile/TileGrid/TileGrid.module.scss b/packages/components/src/Tile/TileGrid/TileGrid.module.scss
index d30c1948a3f..3d5b7dea070 100644
--- a/packages/components/src/Tile/TileGrid/TileGrid.module.scss
+++ b/packages/components/src/Tile/TileGrid/TileGrid.module.scss
@@ -3,6 +3,7 @@
 @import '../subcomponents/GenericTile/variables';
 
 .grid {
+  list-style-type: none;
   display: grid;
   // the more we shave off the width here,
   // the less the tiles will grow when they lose one from the row
diff --git a/packages/components/src/Tile/TileGrid/TileGrid.tsx b/packages/components/src/Tile/TileGrid/TileGrid.tsx
index 351e73de995..cdb6672cb8f 100644
--- a/packages/components/src/Tile/TileGrid/TileGrid.tsx
+++ b/packages/components/src/Tile/TileGrid/TileGrid.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactElement } from 'react'
+import React, { HTMLAttributes, ReactElement, ReactNode } from 'react'
 import classnames from 'classnames'
 import { OverrideClassName } from '~components/types/OverrideClassName'
 import { InformationTileProps } from '../InformationTile'
@@ -9,7 +9,7 @@ type TileProps = InformationTileProps | MultiActionTileProps
 
 export type TileElement = ReactElement<TileProps>
 
-export interface TileGridProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+export interface TileGridProps extends OverrideClassName<HTMLAttributes<HTMLUListElement>> {
   children: TileElement[] | TileElement
 }
 
@@ -21,10 +21,35 @@ export const TileGrid = ({
   children,
   classNameOverride,
   ...restProps
-}: TileGridProps): JSX.Element => (
-  <div className={classnames(styles.grid, classNameOverride)} data-tile-grid {...restProps}>
-    {children}
-  </div>
-)
+}: TileGridProps): JSX.Element => {
+  const isFragment = !Array.isArray(children) && children.type === React.Fragment
 
+  return (
+    <ul className={classnames(styles.grid, classNameOverride)} data-tile-grid {...restProps}>
+      {isFragment ? (
+        children?.props?.children ? (
+          <TileListItem tiles={children.props.children} />
+        ) : null
+      ) : (
+        <TileListItem tiles={children} />
+      )}
+    </ul>
+  )
+}
 TileGrid.displayName = 'TileGrid'
+
+type TileListItemProps = { tiles: ReactNode }
+
+const TileListItem = ({ tiles }: TileListItemProps): JSX.Element => {
+  if (Array.isArray(tiles)) {
+    return (
+      <>
+        {tiles.map((tile: TileElement, index) => (
+          <li key={`${tile.props.title}-${index}`}>{tile}</li>
+        ))}
+      </>
+    )
+  }
+
+  return <li>{tiles}</li>
+}
diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx
index 59fedc60ee6..caf5e90d692 100644
--- a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx
+++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx
@@ -105,6 +105,46 @@ const StickerSheetTemplate: StickerSheetStory = {
           />
         </TileGrid>
       </StickerSheet.Row>
+      <StickerSheet.Row header="Single Tile">
+        <TileGrid>
+          <InformationTile
+            title="Title"
+            metadata="Side A"
+            information="Side B"
+            footer={<>Footer</>}
+          />
+        </TileGrid>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Fragment">
+        <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>
   ),
 }
diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx
index 507057ad1d2..90ec0d8a346 100644
--- a/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx
+++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.stories.tsx
@@ -47,7 +47,6 @@ 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)
@@ -78,3 +77,81 @@ export const FlipOneNotOthers: Story = {
     })
   },
 }
+
+export const OneTile: Story = {
+  args: {
+    children: (
+      <InformationTile
+        title="Title A"
+        metadata="Side A"
+        information="Side A - Back"
+        footer={<>Footer</>}
+      />
+    ),
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('Tile renders as <li>', async () => {
+      await waitFor(() => {
+        expect(canvas.getByRole('listitem')).toBeInTheDocument()
+      })
+    })
+  },
+}
+
+export const MultipleTiles: Story = {
+  render: () => {
+    return (
+      <TileGrid>
+        <InformationTile
+          title="Title A"
+          metadata="Side A"
+          information="Side A - Back"
+          footer={<>Footer</>}
+        />
+        <InformationTile
+          title="Title B"
+          metadata="Side B"
+          information="Side B - Back"
+          footer={<>Footer</>}
+        />
+        <InformationTile
+          title="Title C"
+          metadata="Side C"
+          information="Side C - Back"
+          footer={<>Footer</>}
+        />
+      </TileGrid>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('All Tiles marked up as individual <li> elements', async () => {
+      await waitFor(() => {
+        const listOfTiles = canvas.getByRole('list')
+        const { getAllByRole } = within(listOfTiles)
+        const tiles = getAllByRole('listitem')
+
+        expect(tiles.length).toBe(3)
+      })
+    })
+  },
+}
+
+export const Fragment: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('All Tiles marked up as individual <li> elements', async () => {
+      await waitFor(() => {
+        const listOfTiles = canvas.getByRole('list')
+        const { getAllByRole } = within(listOfTiles)
+        const tiles = getAllByRole('listitem')
+
+        expect(tiles.length).toBe(3)
+      })
+    })
+  },
+}