@kaizen/components 0.0.0-canary-debug-kaizenprovider-20241223004555 → 0.0.0-canary-debug-kaizen-provider-take-2-20241223005900

package/src/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -1,58 +1,60 @@
-import React from 'react'
-import { render, screen, within } from '@testing-library/react'
-import { format } from 'date-fns'
-import { enUS } from 'date-fns/locale'
-import { vi } from 'vitest'
-import { CalendarSingle, type CalendarSingleProps } from '../CalendarSingle'
-import { setFocusInCalendar } from './setFocusInCalendar'
+import React from "react"
+import { render, screen, within } from "@testing-library/react"
+import { format } from "date-fns"
+import { enUS } from "date-fns/locale"
+import { vi } from "vitest"
+import { CalendarSingle, CalendarSingleProps } from "../CalendarSingle"
+import { setFocusInCalendar } from "./setFocusInCalendar"
 const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
   <CalendarSingle
     id="calendar-dialog"
     onDayClick={vi.fn()}
     locale={enUS}
-    onMount={(calendarElement) => setFocusInCalendar(calendarElement, props.selected)}
+    onMount={calendarElement =>
+      setFocusInCalendar(calendarElement, props.selected)
+    }
     {...props}
   />
 )
 
 const today = new Date()
-const todayMonth = format(today, 'MMMM yyyy') // e.g "June 2023"
+const todayMonth = format(today, "MMMM yyyy") // e.g "June 2023"
 const todayDay = today.getDate().toString() // e.g "6"
 
-describe('setFocusInCalendar', () => {
-  it('should focus on today when no date is selected', () => {
+describe("setFocusInCalendar", () => {
+  it("should focus on today when no date is selected", () => {
     render(<CalendarWrapper />)
 
-    const targetMonth = screen.getByRole('grid', { name: todayMonth })
-    const targetDay = within(targetMonth).getByRole('gridcell', {
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
       name: todayDay,
     })
     expect(targetDay).toHaveFocus()
   })
 
-  it('should focus on the selected day', () => {
-    render(<CalendarWrapper selected={new Date('2022-08-15')} />)
+  it("should focus on the selected day", () => {
+    render(<CalendarWrapper selected={new Date("2022-08-15")} />)
 
-    const targetMonth = screen.getByRole('grid', { name: 'August 2022' })
-    const targetDay = within(targetMonth).getByRole('gridcell', { name: '15' })
+    const targetMonth = screen.getByRole("grid", { name: "August 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "15" })
     expect(targetDay).toHaveFocus()
   })
 
-  it('should focus on today when selected date is invalid', () => {
-    render(<CalendarWrapper selected={new Date('potato')} />)
+  it("should focus on today when selected date is invalid", () => {
+    render(<CalendarWrapper selected={new Date("potato")} />)
 
-    const targetMonth = screen.getByRole('grid', { name: todayMonth })
-    const targetDay = within(targetMonth).getByRole('gridcell', {
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
       name: todayDay,
     })
     expect(targetDay).toHaveFocus()
   })
 
-  it('should focus on the first of the month when there is no selected day nor in the current month', () => {
-    render(<CalendarWrapper defaultMonth={new Date('2022-05-01')} />)
+  it("should focus on the first of the month when there is no selected day nor in the current month", () => {
+    render(<CalendarWrapper defaultMonth={new Date("2022-05-01")} />)
 
-    const targetMonth = screen.getByRole('grid', { name: 'May 2022' })
-    const targetDay = within(targetMonth).getByRole('gridcell', { name: '1' })
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
     expect(targetDay).toHaveFocus()
   })
 })

package/src/Calendar/utils/setFocusInCalendar.ts

@@ -1,23 +1,24 @@
-import { type CalendarRangeElement } from '../CalendarRange'
-import { type CalendarSingleElement } from '../CalendarSingle'
-import calendarStyles from '../baseCalendarClassNames.module.scss'
-import { isInvalidDate } from './isInvalidDate'
+import { CalendarRangeElement } from "../CalendarRange"
+import { CalendarSingleElement } from "../CalendarSingle"
+import calendarStyles from "../baseCalendarClassNames.module.scss"
+import { isInvalidDate } from "./isInvalidDate"
 
 const isHTMLElement = (element: Element | undefined): element is HTMLElement =>
   element instanceof HTMLElement
 
 export const setFocusInCalendar = (
   calendarElement: CalendarSingleElement | CalendarRangeElement,
-  selectedDay: Date | undefined,
+  selectedDay: Date | undefined
 ): void => {
   const daySelectedOrToday = calendarElement.getElementsByClassName(
     selectedDay && !isInvalidDate(selectedDay)
       ? calendarStyles.daySelected
-      : calendarStyles.dayToday,
+      : calendarStyles.dayToday
   )[0]
 
   const dayToFocus =
-    daySelectedOrToday ?? calendarElement.getElementsByClassName(calendarStyles.day)[0]
+    daySelectedOrToday ??
+    calendarElement.getElementsByClassName(calendarStyles.day)[0]
 
   if (isHTMLElement(dayToFocus)) dayToFocus.focus()
 }

package/src/Card/Card.tsx

@@ -1,33 +1,33 @@
-import React, { type HTMLAttributes } from 'react'
-import classnames from 'classnames'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Card.module.css'
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Card.module.css"
 
 export type CardVariants =
-  | 'default'
-  | 'informative'
-  | 'positive'
-  | 'cautionary'
-  | 'destructive'
-  | 'assertive'
-  | 'highlight'
+  | "default"
+  | "informative"
+  | "positive"
+  | "cautionary"
+  | "destructive"
+  | "assertive"
+  | "highlight"
 
 export type CardColors =
-  | 'blue'
-  | 'green'
-  | 'gray'
-  | 'orange'
-  | 'purple'
-  | 'red'
-  | 'white'
-  | 'yellow'
+  | "blue"
+  | "green"
+  | "gray"
+  | "orange"
+  | "purple"
+  | "red"
+  | "white"
+  | "yellow"
 
 export type CardProps = {
   children?: React.ReactNode
   /**
    * HTML elements that are allowed on Card.
    */
-  tag?: 'div' | 'article' | 'header' | 'main' | 'section' | 'li'
+  tag?: "div" | "article" | "header" | "main" | "section" | "li"
   /**
    * Adds a larger box shadow to to the card container.
    */
@@ -48,7 +48,7 @@ export type CardProps = {
    * @deprecated Please use color instead
    */
   variant?: CardVariants
-} & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, 'color'>>
+} & OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "color">>
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |
@@ -56,9 +56,9 @@ export type CardProps = {
  */
 export const Card = ({
   children,
-  tag = 'div',
+  tag = "div",
   variant,
-  color = 'white',
+  color = "white",
   isElevated = false,
   classNameOverride,
   ...props
@@ -71,7 +71,7 @@ export const Card = ({
         styles.wrapper,
         variant ? styles[variant] : styles[color],
         classNameOverride,
-        isElevated && styles.elevated,
+        isElevated && styles.elevated
       )}
       {...props}
     >
@@ -80,4 +80,4 @@ export const Card = ({
   )
 }
 
-Card.displayName = 'Card'
+Card.displayName = "Card"

package/src/Card/_docs/Card.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import * as CardStories from './Card.stories'
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as CardStories from "./Card.stories"
 
 <Meta of={CardStories} />
 
@@ -23,9 +23,8 @@ The `Card` component is a flexible container used to wrap primary content. It ha
 ## API
 
 ### Colors
-
 <Canvas of={CardStories.Colors} />
 
 ### Elevation
-
 <Canvas of={CardStories.Elevation} />
+

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

@@ -1,12 +1,15 @@
-import React from 'react'
-import { type Meta } from '@storybook/react'
-import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
-import { Card, type CardProps } from '../index'
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Card, CardProps } from "../index"
 
 export default {
-  title: 'Components/Card',
+  title: "Components/Card",
   args: {
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   },
   parameters: {
     chromatic: { disable: false },
@@ -15,42 +18,46 @@ export default {
 } satisfies Meta
 
 const colors = [
-  'blue',
-  'green',
-  'gray',
-  'orange',
-  'purple',
-  'red',
-  'white',
-  'yellow',
-] satisfies CardProps['color'][]
+  "blue",
+  "green",
+  "gray",
+  "orange",
+  "purple",
+  "red",
+  "white",
+  "yellow",
+] satisfies Array<CardProps["color"]>
 
 const variants = [
-  'default',
-  'informative',
-  'positive',
-  'cautionary',
-  'destructive',
-  'assertive',
-  'highlight',
-] satisfies CardProps['variant'][]
+  "default",
+  "informative",
+  "positive",
+  "cautionary",
+  "destructive",
+  "assertive",
+  "highlight",
+] satisfies Array<CardProps["variant"]>
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed, ...args }) => (
     <>
-      <StickerSheet isReversed={isReversed} title="Colors">
-        {colors.map((color) => (
-          <StickerSheet.Row key={color} header={color}>
-            <Card {...args} color={color} />
-          </StickerSheet.Row>
-        ))}
+      <StickerSheet isReversed={isReversed} heading="Colors">
+        <StickerSheet.Body>
+          {colors.map(color => (
+            <StickerSheet.Row key={color} rowTitle={color}>
+              <Card {...args} color={color} />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
       </StickerSheet>
-      <StickerSheet isReversed={isReversed} title="Variants (deprecated)">
-        {variants.map((variant) => (
-          <StickerSheet.Row key={variant} header={variant}>
-            <Card {...args} variant={variant} />
-          </StickerSheet.Row>
-        ))}
+      <StickerSheet isReversed={isReversed} heading="Variants (deprecated)">
+        <StickerSheet.Body>
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} rowTitle={variant}>
+              <Card {...args} variant={variant} />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
       </StickerSheet>
     </>
   ),
@@ -58,11 +65,11 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: 'Sticker Sheet (Default)',
+  name: "Sticker Sheet (Default)",
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: 'Sticker Sheet (RTL)',
-  parameters: { textDirection: 'rtl' },
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
 }

package/src/Card/_docs/Card.stories.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Card, type CardProps } from '../index'
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Card, CardProps } from "../index"
 
 const meta = {
-  title: 'Components/Card',
+  title: "Components/Card",
   component: Card,
   args: {
-    children: 'This is a default container',
+    children: "This is a default container",
   },
   argTypes: {
     variant: {
@@ -23,27 +23,27 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: 'shown',
+        sourceState: "shown",
       },
     },
   },
 }
 
 const colors = [
-  'blue',
-  'green',
-  'gray',
-  'orange',
-  'purple',
-  'red',
-  'white',
-  'yellow',
-] satisfies CardProps['color'][]
+  "blue",
+  "green",
+  "gray",
+  "orange",
+  "purple",
+  "red",
+  "white",
+  "yellow",
+] satisfies Array<CardProps["color"]>
 
 export const Colors: Story = {
   render: () => (
     <ul className="flex list-none gap-16">
-      {colors.map((color) => (
+      {colors.map(color => (
         <li key={color}>
           <Card color={color}>This is a default container</Card>
         </li>

package/src/Card/index.ts

@@ -1 +1 @@
-export * from './Card'
+export * from "./Card"

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -1,7 +1,7 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-@import '../../../styles/utils/forms';
-@import '../../../styles/utils/form-variables';
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "../../../styles/utils/forms";
+@import "../../../styles/utils/form-variables";
 
 $checkbox-size: 24px;
 $focus-ring-offset: 2px;
@@ -10,11 +10,11 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 
 // override bootstrap styles
 .checkbox.checkbox {
+  @include form-input-visually-hidden;
+
   width: $checkbox-size;
   height: $checkbox-size;
   margin: 0;
-
-  @include form-input-visually-hidden;
 }
 
 .checkbox:disabled {
@@ -38,7 +38,8 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   height: $checkbox-size;
   width: $checkbox-size;
   top: 0;
-  border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
+  border: $border-solid-border-width $border-solid-border-style
+    $dt-color-form-border-color;
   border-radius: $border-solid-border-radius;
   box-sizing: border-box;
   background-color: white;
@@ -72,7 +73,7 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   }
 
   .checkbox:focus + &::after {
-    content: '';
+    content: "";
     box-sizing: border-box;
     position: absolute;
     background: transparent;
@@ -82,13 +83,20 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     border-color: $dt-color-form-border-color-focus;
     top: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
     left: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    width: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-    height: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
+    width: calc(
+      #{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} *
+        2
+    );
+    height: calc(
+      #{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} *
+        2
+    );
   }
 }
 
 .box.reversed {
-  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
+  border: $border-solid-border-width $border-solid-border-style
+    rgba($color-white-rgb, 0.65);
   background: transparent;
 
   .checkbox:checked + &,

package/src/Checkbox/Checkbox/Checkbox.spec.tsx

@@ -1,23 +1,25 @@
-import React from 'react'
-import { render, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
-import { type CheckboxProps } from './Checkbox'
-import { Checkbox } from '.'
+import React from "react"
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
+import { CheckboxProps } from "./Checkbox"
+import { Checkbox } from "."
 const user = userEvent.setup()
 
 const defaultProps = {
-  id: 'someCheckboxId',
-  checkedStatus: 'off',
+  id: "someCheckboxId",
+  checkedStatus: "off",
   disabled: false,
-  name: 'someCheckboxName',
+  name: "someCheckboxName",
   onCheck: vi.fn(),
 } satisfies CheckboxProps
 
-describe('<Checkbox />', () => {
-  it('calls the `onCheck` event when clicked', async () => {
-    const { getByTestId } = render(<Checkbox {...defaultProps} data-testid="checkbox" />)
-    const checkbox = getByTestId('checkbox')
+describe("<Checkbox />", () => {
+  it("calls the `onCheck` event when clicked", async () => {
+    const { getByTestId } = render(
+      <Checkbox {...defaultProps} data-testid="checkbox" />
+    )
+    const checkbox = getByTestId("checkbox")
 
     await user.click(checkbox)
     await waitFor(() => {

package/src/Checkbox/Checkbox/Checkbox.tsx

@@ -1,34 +1,40 @@
-import React, { type InputHTMLAttributes } from 'react'
-import classnames from 'classnames'
-import { Icon } from '~components/__rc__/Icon'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Checkbox.module.scss'
+import React, { InputHTMLAttributes } from "react"
+import classnames from "classnames"
+import { Icon } from "~components/__future__/Icon"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Checkbox.module.scss"
 
-export type CheckedStatus = 'on' | 'off' | 'mixed'
+export type CheckedStatus = "on" | "off" | "mixed"
 
 export type CheckboxProps = {
   checkedStatus?: CheckedStatus
   onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any
   reversed?: boolean
   value?: string
-} & OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'checked'>>
+} & OverrideClassName<
+  Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "checked">
+>
 
-const renderCheckOrMixedIcon = (status: CheckedStatus, reversed: boolean): React.ReactNode => {
-  if (status === 'off') return
+const renderCheckOrMixedIcon = (
+  status: CheckedStatus,
+  reversed: boolean
+): React.ReactNode => {
+  if (status === "off") return
 
   return (
     <Icon
-      name={status === 'on' ? 'check' : 'remove'}
+      name={status === "on" ? "check" : "remove"}
       isPresentational
       className={classnames(styles.icon, reversed && styles.reversed)}
     />
   )
 }
 
-const getCheckedFromStatus = (checkedStatus: CheckedStatus): boolean => checkedStatus === 'on'
+const getCheckedFromStatus = (checkedStatus: CheckedStatus): boolean =>
+  checkedStatus === "on"
 
 export const Checkbox = ({
-  checkedStatus = 'off',
+  checkedStatus = "off",
   onCheck,
   reversed = false,
   value,
@@ -39,16 +45,20 @@ export const Checkbox = ({
     <input
       ref={(node): void => {
         if (node) {
-          node.indeterminate = checkedStatus === 'mixed'
+          node.indeterminate = checkedStatus === "mixed"
         }
       }}
       // This is only used as a handle for unit testing
-      data-indeterminate={checkedStatus === 'mixed'}
+      data-indeterminate={checkedStatus === "mixed"}
       type="checkbox"
-      className={classnames(styles.checkbox, classNameOverride, reversed && styles.reversed)}
+      className={classnames(
+        styles.checkbox,
+        classNameOverride,
+        reversed && styles.reversed
+      )}
       checked={getCheckedFromStatus(checkedStatus)}
       onChange={onCheck}
-      value={value ?? checkedStatus}
+      value={value || checkedStatus}
       readOnly={onCheck === undefined}
       {...restProps}
     />
@@ -58,4 +68,4 @@ export const Checkbox = ({
   </span>
 )
 
-Checkbox.displayName = 'Checkbox'
+Checkbox.displayName = "Checkbox"

package/src/Checkbox/Checkbox/_docs/Checkbox.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import { LinkTo } from '~storybook/components/LinkTo'
-import * as CheckboxStories from './Checkbox.stories'
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import { LinkTo } from "~storybook/components/LinkTo"
+import * as CheckboxStories from "./Checkbox.stories"
 
 <Meta of={CheckboxStories} />
 
@@ -20,5 +20,6 @@ A primitive, not to be used alone.
 
 Commonly used via <LinkTo pageId="components-checkbox-controls-checkboxfield">CheckboxField</LinkTo> or <LinkTo pageId="components-checkbox-controls-checkboxgroup">CheckboxGroup</LinkTo>.
 
+
 <Canvas of={CheckboxStories.Playground} />
 <Controls of={CheckboxStories.Playground} />