@kaizen/components 1.68.10 → 1.68.12

package/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css

@@ -0,0 +1,91 @@
+.liveIcon {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: 0.25rem;
+  color: var(--color-green-500);
+}
+
+.liveIcon_base {
+  opacity: 0.3;
+  display: block;
+}
+
+.liveIcon_1,
+.liveIcon_2,
+.liveIcon_3 {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.liveIcon_1 {
+  clip-path: circle(16%);
+}
+
+.liveIcon_2,
+.liveIcon_3 {
+  animation-duration: 3s;
+  animation-iteration-count: 3;
+  animation-delay: 1s;
+}
+
+.liveIcon_2 {
+  clip-path: circle(32%);
+  animation-name: pulse-inner;
+}
+
+.liveIcon_3 {
+  clip-path: circle(50%);
+  animation-name: pulse-outer;
+}
+
+@keyframes pulse-inner {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-outer {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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__/Tabs/_docs/Tabs.spec.stories.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { within, userEvent, expect } from '@storybook/test'
+import { Text } from '~components/Text'
+import { Tab, TabList, TabPanel, Tabs } from '../index'
+
+const meta = {
+  title: 'Components/Tabs/Tabs (Future)/Tests',
+  parameters: {
+    controls: { disable: true },
+  },
+  args: {
+    children: (
+      <>
+        <TabList aria-label="Tabs" data-testid="sb-arrows">
+          <Tab id="one">Tab 1</Tab>
+          <Tab id="two">Tab 2</Tab>
+          <Tab id="three" badge="3">
+            Tab 3
+          </Tab>
+          <Tab id="disabled" isDisabled>
+            Disabled Tab
+          </Tab>
+          <Tab id="four">Tab 4</Tab>
+          <Tab id="five">Tab 5</Tab>
+        </TabList>
+        <TabPanel id="one" className="p-24">
+          <Text variant="body">Content 1</Text>
+        </TabPanel>
+        <TabPanel id="two" className="p-24">
+          <Text variant="body">Content 2</Text>
+        </TabPanel>
+        <TabPanel id="three" className="p-24">
+          <Text variant="body">Content 3</Text>
+        </TabPanel>
+        <TabPanel id="disabled" className="p-24">
+          <Text variant="body">Disabled content</Text>
+        </TabPanel>
+        <TabPanel id="four" className="p-24">
+          <Text variant="body">Content 4</Text>
+        </TabPanel>
+        <TabPanel id="five" className="p-24">
+          <Text variant="body">Content 5</Text>
+        </TabPanel>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const ArrowsShowingAndHiding: Story = {
+  render: (args) => {
+    return (
+      <div style={{ maxWidth: '500px' }}>
+        <Tabs {...args} />
+      </div>
+    )
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    expect(canvas.queryByTestId('kz-tablist-left-arrow')).not.toBeInTheDocument()
+
+    const rightArrow = await canvas.findByTestId('sb-arrows-kz-tablist-right-arrow')
+
+    await userEvent.click(rightArrow)
+    await new Promise((r) => setTimeout(r, 500))
+
+    const leftArrow = await canvas.findByTestId('sb-arrows-kz-tablist-left-arrow')
+
+    expect(leftArrow).toBeInTheDocument()
+    expect(rightArrow).toBeInTheDocument()
+
+    await userEvent.click(rightArrow)
+    await new Promise((r) => setTimeout(r, 500))
+
+    expect(leftArrow).toBeInTheDocument()
+    expect(rightArrow).not.toBeInTheDocument()
+  },
+}
+
+export const ArrowsShowingAndHidingRTL: Story = {
+  name: 'Arrows Showing and Hiding (RTL)',
+  parameters: {
+    textDirection: 'rtl',
+  },
+  render: (args) => {
+    return (
+      <div style={{ maxWidth: '500px' }}>
+        <Tabs {...args} />
+      </div>
+    )
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    expect(canvas.queryByTestId('kz-tablist-right-arrow')).not.toBeInTheDocument()
+
+    const leftArrow = await canvas.findByTestId('sb-arrows-kz-tablist-left-arrow')
+
+    await userEvent.click(leftArrow)
+    await new Promise((r) => setTimeout(r, 500))
+
+    const rightArrow = await canvas.findByTestId('sb-arrows-kz-tablist-right-arrow')
+
+    expect(leftArrow).toBeInTheDocument()
+    expect(rightArrow).toBeInTheDocument()
+
+    await userEvent.click(leftArrow)
+    await new Promise((r) => setTimeout(r, 500))
+
+    expect(rightArrow).toBeInTheDocument()
+    expect(leftArrow).not.toBeInTheDocument()
+  },
+}

package/src/__future__/Tabs/_docs/Tabs.stickersheet.stories.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { Text } from '~components/Text'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { Tab, TabList, TabPanel, Tabs } from '../index'
+
+export default {
+  title: 'Components/Tabs/Tabs (Future)',
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const ExampleTabs = ({ id }: { id: string }): JSX.Element => (
+  <Tabs>
+    <TabList aria-label="Tabs">
+      <Tab id={`${id}-1`}>Tab 1</Tab>
+      <Tab id={`${id}-2`}>Tab 2</Tab>
+      <Tab id={`${id}-3`} badge="3">
+        Tab 3
+      </Tab>
+      <Tab id={`${id}-disabled`} isDisabled>
+        Disabled Tab
+      </Tab>
+      <Tab id={`${id}-4`}>Tab 4</Tab>
+      <Tab id={`${id}-5`}>Tab 5</Tab>
+    </TabList>
+    <TabPanel id={`${id}-1`} className="p-24">
+      <Text variant="body">Content 1</Text>
+    </TabPanel>
+    <TabPanel id={`${id}-2`} className="p-24">
+      <Text variant="body">Content 2</Text>
+    </TabPanel>
+    <TabPanel id={`${id}-3`} className="p-24">
+      <Text variant="body">Content 3</Text>
+    </TabPanel>
+    <TabPanel id={`${id}-disabled`} className="p-24">
+      <Text variant="body">Disabled content</Text>
+    </TabPanel>
+    <TabPanel id={`${id}-4`} className="p-24">
+      <Text variant="body">Content 4</Text>
+    </TabPanel>
+    <TabPanel id={`${id}-5`} className="p-24">
+      <Text variant="body">Content 5</Text>
+    </TabPanel>
+  </Tabs>
+)
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => {
+    return (
+      <>
+        <StickerSheet title="Tabs" layout="stretch">
+          <StickerSheet.Row>
+            <ExampleTabs id="fullwidth" />
+          </StickerSheet.Row>
+        </StickerSheet>
+
+        <StickerSheet title="Overflow (container 500px)" layout="stretch">
+          <StickerSheet.Row>
+            <div style={{ maxWidth: '500px' }}>
+              <ExampleTabs id="overflow" />
+            </div>
+          </StickerSheet.Row>
+        </StickerSheet>
+      </>
+    )
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (Default)',
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (RTL)',
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    textDirection: 'rtl',
+  },
+}

package/src/__future__/Tabs/_docs/Tabs.stories.tsx

@@ -16,9 +16,11 @@ const meta = {
           <Tab id="three" badge="3">
             Tab 3
           </Tab>
-          <Tab id="four" isDisabled>
+          <Tab id="disabled" isDisabled>
             Disabled Tab
           </Tab>
+          <Tab id="four">Tab 4</Tab>
+          <Tab id="five">Tab 5</Tab>
         </TabList>
         <TabPanel id="one" className="p-24">
           <Text variant="body">Content 1</Text>
@@ -29,6 +31,15 @@ const meta = {
         <TabPanel id="three" className="p-24">
           <Text variant="body">Content 3</Text>
         </TabPanel>
+        <TabPanel id="disabled" className="p-24">
+          <Text variant="body">Content 4</Text>
+        </TabPanel>
+        <TabPanel id="four" className="p-24">
+          <Text variant="body">Content 4</Text>
+        </TabPanel>
+        <TabPanel id="five" className="p-24">
+          <Text variant="body">Content 5</Text>
+        </TabPanel>
       </>
     ),
   },

package/src/__future__/Tabs/constants.ts

@@ -0,0 +1 @@
+export const SCROLL_AMOUNT = 120

package/src/__future__/Tabs/subcomponents/Tab/Tab.tsx

@@ -28,7 +28,7 @@ export const Tab = (props: TabProps): JSX.Element => {
   }
 
   return (
-    <RACTab {...tabProps}>
+    <RACTab data-kz-tab {...tabProps}>
       {({ isSelected, isFocusVisible, isHovered }) => (
         <>
           {children}