@kaizen/components 1.68.10 → 1.68.11

package/src/Tag/subcomponents/LiveIcon/LiveIcon.tsx

@@ -0,0 +1,48 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from 'react'
+import { SVG } from '~components/Icon/subcomponents/SVG'
+import styles from './LiveIcon.module.css'
+
+type LiveIconSvgProps = { classNameOverride: string }
+
+const LiveIconSvg = ({ classNameOverride }: LiveIconSvgProps): JSX.Element => (
+  <SVG
+    role="presentation"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    classNameOverride={classNameOverride}
+  >
+    <path
+      stroke="currentColor"
+      d="M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+    <path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
+    <path
+      stroke="currentColor"
+      d="M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+  </SVG>
+)
+
+LiveIconSvg.displayName = 'LiveIconSvg'
+
+export const LiveIcon = (): JSX.Element => (
+  <span className={styles.liveIcon}>
+    <LiveIconSvg classNameOverride={styles.liveIcon_base} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_1} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_2} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_3} />
+  </span>
+)
+
+LiveIcon.displayName = 'LiveIcon'

package/src/Tag/subcomponents/LiveIcon/index.ts

@@ -0,0 +1 @@
+export * from './LiveIcon'

package/src/Tag/subcomponents/index.ts

@@ -0,0 +1 @@
+export * from './LiveIcon'

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

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

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

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

package/src/Workflow/_docs/ProgressStepper.stickersheet.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { ProgressStepper } from '../subcomponents'
+
+export default {
+  title: 'Layout/Workflow/Components/Progress Stepper',
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <StickerSheet layout="stretch">
+      <StickerSheet.Row header="Progress States">
+        <ProgressStepper
+          currentStepId="preview-step"
+          steps={[
+            {
+              id: 'settings-step',
+              label: 'Settings',
+            },
+            {
+              id: 'questions-step',
+              label: 'Questions',
+            },
+            {
+              id: 'preview-step',
+              label: 'Preview',
+            },
+            {
+              id: 'employees-step',
+              label: 'Employees',
+            },
+            {
+              id: 'schedule-step',
+              label: 'Schedule',
+            },
+          ]}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (Default)',
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (RTL)',
+  parameters: {
+    textDirection: 'rtl',
+  },
+}

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css

@@ -84,6 +84,12 @@
   /* sets fron the bottom to the centre of the dot */
   top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
   transform: translateX(-50%);
+
+  :dir(rtl) & {
+    left: unset;
+    right: 100%;
+    transform: translateX(50%);
+  }
 }
 
 .stepperDescription {

package/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import { Avatar } from '~components/Avatar'
-import { LiveIcon } from '~components/Icon'
-import styles from '~components/Tag/Tag.module.scss'
+import { LiveIcon } from '~components/Tag/subcomponents'
 import { Icon } from '~components/__future__/Icon'
 import { Tag, RemovableTag } from '../..'
 
@@ -23,8 +22,16 @@ const meta = {
 } satisfies Meta<typeof Tag>
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-/** * This is a stand-in component for the legacy Tag's bake in LiveIcon - we should consider adding this as an actual component or replacing it */
+export const LiveIconComponentStory: Story = {
+  render: () => <LiveIcon />,
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+        code: `
+        // component with styled with CSS modules
 const LiveIconComponent = (): JSX.Element => (
   <span className={styles.liveIcon}>
     <LiveIcon
@@ -61,68 +68,21 @@ const LiveIconComponent = (): JSX.Element => (
     />
   </span>
 )
-
-export const LiveIconComponentStory: StoryObj = {
-  render: () => <LiveIconComponent />,
-  parameters: {
-    docs: {
-      source: {
-        type: 'dynamic',
-        code: `
-  // component with styled with CSS modules
-  const LiveIconComponent = (): JSX.Element => (
-    <span className={styles.liveIcon}>
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_base}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_1}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_2}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_3}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-    </span>
-  )
-
-  // Minified SCSS from the stylesheet
-  <style>
-    .liveIcon_2,.liveIcon_3{animation-duration:3s;animation-iteration-count:3;animation-delay:1s}.liveIcon{display:inline-block;position:relative;width:20px;height:20px;color:$color-green-500}.liveIcon_1,.liveIcon_2,.liveIcon_3{display:block;position:absolute;top:0;left:$0;width:100%;height:100%;overflow:hidden}.liveIcon_base{opacity:30%;display:block}.liveIcon_1{clip-path:circle(16%)}.liveIcon_2{clip-path:circle(32%);animation-name:pulse-inner}.liveIcon_3{clip-path:circle(50%);animation-name:pulse-outer}@keyframes pulse-inner{0%,25%{opacity:0%}100%,50%,75%{opacity:100%}}@keyframes pulse-outer{0%,25%,50%{opacity:0%}100%,75%{opacity:100%}}
-  </style>
-        `,
+// Minified SCSS from the stylesheet
+<style>
+  .liveIcon_2,.liveIcon_3{animation-duration:3s;animation-iteration-count:3;animation-delay:1s}.liveIcon{display:inline-block;position:relative;width:20px;height:20px;color:$color-green-500}.liveIcon_1,.liveIcon_2,.liveIcon_3{display:block;position:absolute;top:0;left:$0;width:100%;height:100%;overflow:hidden}.liveIcon_base{opacity:30%;display:block}.liveIcon_1{clip-path:circle(16%)}.liveIcon_2{clip-path:circle(32%);animation-name:pulse-inner}.liveIcon_3{clip-path:circle(50%);animation-name:pulse-outer}@keyframes pulse-inner{0%,25%{opacity:0%}100%,50%,75%{opacity:100%}}@keyframes pulse-outer{0%,25%,50%{opacity:0%}100%,75%{opacity:100%}}
+</style>`,
       },
     },
   },
 }
 
-export const StatusMigration: StoryObj = {
+export const StatusMigration: Story = {
   render: () => (
     <>
       <Tag classNameOverride="gap-4" color="green">
         <span>Tag</span>
-        <LiveIconComponent />
+        <LiveIcon />
       </Tag>
       <Tag color="blue">Tag</Tag>
       <Tag color="red">Tag</Tag>
@@ -138,7 +98,7 @@ export const StatusMigration: StoryObj = {
   ],
 }
 
-export const ValidationMigration: StoryObj = {
+export const ValidationMigration: Story = {
   render: () => (
     <>
       <Tag color="green" icon={<Icon name="check_circle" isFilled alt="Success," />}>
@@ -164,7 +124,7 @@ export const ValidationMigration: StoryObj = {
   ],
 }
 
-export const SentimentsMigration: StoryObj = {
+export const SentimentsMigration: Story = {
   render: () => (
     <>
       <Tag color="green">Tag</Tag>
@@ -184,7 +144,7 @@ export const SentimentsMigration: StoryObj = {
   ],
 }
 
-export const SentimentNone: StoryObj = {
+export const SentimentNone: Story = {
   render: () => (
     <Tag color="gray" classNameOverride="bg-white border-default-color border-solid border">
       Tag
@@ -192,7 +152,7 @@ export const SentimentNone: StoryObj = {
   ),
 }
 
-export const DismissibleMigration: StoryObj = {
+export const DismissibleMigration: Story = {
   render: () => (
     <RemovableTag
       removeButtonProps={{
@@ -205,7 +165,7 @@ export const DismissibleMigration: StoryObj = {
   ),
 }
 
-export const AvatarMigration: StoryObj = {
+export const AvatarMigration: Story = {
   render: () => (
     <>
       <Tag classNameOverride="ps-4">
@@ -241,7 +201,7 @@ export const AvatarMigration: StoryObj = {
   ],
 }
 
-export const AvatarRemovableMigration: StoryObj = {
+export const AvatarRemovableMigration: Story = {
   render: () => (
     <>
       <RemovableTag
@@ -295,7 +255,7 @@ export const AvatarRemovableMigration: StoryObj = {
   ],
 }
 
-export const InlineMigration: StoryObj = {
+export const InlineMigration: Story = {
   render: () => (
     <div className="flex gap-12">
       <Tag>Tag</Tag>
@@ -305,4 +265,4 @@ export const InlineMigration: StoryObj = {
   ),
 }
 
-export const SizesMigration: StoryObj = {}
+export const SizesMigration: Story = {}