@kaizen/components 1.45.0 → 1.45.1

package/src/Filter/FilterDateRangePicker/_docs/controls/disabledDaysControls.ts

@@ -1,42 +1,46 @@
-export const disabledDaysControls = {
-  options: [
-    "None",
-    "bool",
-    "Date",
-    "DateMultiple",
-    "Range",
-    "DateBefore",
-    "DateAfter",
-    "DateInterval",
-    "DayOfWeek",
-  ],
-  control: {
-    type: "select",
-    labels: {
-      None: "undefined",
-      bool: "true",
-      Date: "new Date()",
-      DateMultiple: '[new Date("2022-05-01"), new Date("2022-05-22")]',
-      Range: '{ from: new Date("2022-05-01"), to: new Date("2022-05-12") }',
-      DateBefore: '{ before: new Date("2022-05-16") }',
-      DateAfter: '{ after: new Date("2022-05-21") }',
-      DateInterval:
-        '{ before: new Date("2022-05-30"), after: new Date("2022-05-15") }',
-      DayOfWeek: "{ dayOfWeek: [6, 0] } (Saturday and Sunday)",
+import { ArgTypes } from "@storybook/react"
+
+export const disabledDaysControls: Partial<ArgTypes> = {
+  disabledDays: {
+    options: [
+      "None",
+      "bool",
+      "Date",
+      "DateMultiple",
+      "Range",
+      "DateBefore",
+      "DateAfter",
+      "DateInterval",
+      "DayOfWeek",
+    ],
+    control: {
+      type: "select",
+      labels: {
+        None: "undefined",
+        bool: "true",
+        Date: "new Date()",
+        DateMultiple: '[new Date("2022-05-01"), new Date("2022-05-22")]',
+        Range: '{ from: new Date("2022-05-01"), to: new Date("2022-05-12") }',
+        DateBefore: '{ before: new Date("2022-05-16") }',
+        DateAfter: '{ after: new Date("2022-05-21") }',
+        DateInterval:
+          '{ before: new Date("2022-05-30"), after: new Date("2022-05-15") }',
+        DayOfWeek: "{ dayOfWeek: [6, 0] } (Saturday and Sunday)",
+      },
     },
-  },
-  mapping: {
-    None: undefined,
-    bool: true,
-    Date: new Date(),
-    DateMultiple: [new Date("2022-05-01"), new Date("2022-05-22")],
-    Range: { from: new Date("2022-05-01"), to: new Date("2022-05-12") },
-    DateBefore: { before: new Date("2022-05-16") },
-    DateAfter: { after: new Date("2022-05-21") },
-    DateInterval: {
-      before: new Date("2022-05-30"),
-      after: new Date("2022-05-15"),
+    mapping: {
+      None: undefined,
+      bool: true,
+      Date: new Date(),
+      DateMultiple: [new Date("2022-05-01"), new Date("2022-05-22")],
+      Range: { from: new Date("2022-05-01"), to: new Date("2022-05-12") },
+      DateBefore: { before: new Date("2022-05-16") },
+      DateAfter: { after: new Date("2022-05-21") },
+      DateInterval: {
+        before: new Date("2022-05-30"),
+        after: new Date("2022-05-15"),
+      },
+      DayOfWeek: { dayOfWeek: [6, 0] },
     },
-    DayOfWeek: { dayOfWeek: [6, 0] },
   },
 }

package/src/Filter/FilterDateRangePicker/_docs/controls/validationControls.ts

@@ -1,6 +1,7 @@
 import { action } from "@storybook/addon-actions"
+import { ArgTypes } from "@storybook/react"
 
-export const validationControls = {
+export const validationControls: Partial<ArgTypes> = {
   onValidate: {
     options: ["dateStart", "dateEnd", "dateRange"],
     control: {

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { renderHook, act } from "@testing-library/react-hooks"
+import React, { act } from "react"
+import { renderHook } from "@testing-library/react-hooks"
 import { LabelledMessage } from "~components/LabelledMessage"
 import { useEndDateValidation } from "./useEndDateValidation"
 

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { renderHook, act } from "@testing-library/react-hooks"
+import React, { act } from "react"
+import { renderHook } from "@testing-library/react-hooks"
 import { LabelledMessage } from "~components/LabelledMessage"
 import { useStartDateValidation } from "./useStartDateValidation"
 

package/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx

@@ -11,9 +11,9 @@ const meta = {
   title: "Components/Filter Select",
   component: FilterSelect,
   argTypes: {
-    isOpen: { control: "disabled" },
-    setIsOpen: { control: "disabled" },
-    renderTrigger: renderTriggerControls,
+    ...renderTriggerControls,
+    isOpen: { control: false },
+    setIsOpen: { control: false },
     items: {
       options: ["Single", "Grouped"],
       control: { type: "radio" },

package/src/Filter/_docs/controls/renderTriggerControls.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
+import { ArgTypes } from "@storybook/react"
 import {
   FilterButton,
   FilterButtonProps,
@@ -10,21 +11,25 @@ import {
  * This helper is for consumers of Filter, not for Filter itself
  * (the type is slightly different)!
  */
-export const renderTriggerControls = {
-  description: "Element is a variation of a FilterButton",
-  options: ["Filter Button", "Filter Button Removable"],
-  control: { type: "radio" },
-  mapping: {
-    "Filter Button": (triggerButtonProps: FilterButtonProps): JSX.Element => (
-      <FilterButton {...triggerButtonProps} />
-    ),
-    "Filter Button Removable": (
-      triggerButtonProps: FilterButtonProps
-    ): JSX.Element => (
-      <FilterButtonRemovable
-        triggerButtonProps={{ ...triggerButtonProps }}
-        removeButtonProps={{ onClick: action("remove button onClick") }}
-      />
-    ),
+export const renderTriggerControls: Partial<ArgTypes> = {
+  renderTrigger: {
+    description: "Element is a variation of a FilterButton",
+    options: ["Filter Button", "Filter Button Removable"],
+    control: {
+      type: "radio",
+    },
+    mapping: {
+      "Filter Button": (triggerButtonProps: FilterButtonProps): JSX.Element => (
+        <FilterButton {...triggerButtonProps} />
+      ),
+      "Filter Button Removable": (
+        triggerButtonProps: FilterButtonProps
+      ): JSX.Element => (
+        <FilterButtonRemovable
+          triggerButtonProps={{ ...triggerButtonProps }}
+          removeButtonProps={{ onClick: action("remove button onClick") }}
+        />
+      ),
+    },
   },
 }

package/src/Illustration/utils/usePausePlay.spec.tsx

@@ -1,6 +1,6 @@
-import React, { RefObject } from "react"
+import React, { RefObject, act } from "react"
 import { render } from "@testing-library/react"
-import { renderHook, act } from "@testing-library/react-hooks"
+import { renderHook } from "@testing-library/react-hooks"
 import { LaunchIcon, PauseIcon } from "~components/Icon"
 import { usePausePlay, usePausePlayHook } from "./usePausePlay"
 

package/src/LikertScaleLegacy/LikertScaleLegacy.spec.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { render, screen, waitFor, act } from "@testing-library/react"
+import React, { act } from "react"
+import { render, screen, waitFor } from "@testing-library/react"
 import { LikertScaleLegacy, LikertScaleProps } from "./LikertScaleLegacy"
 import { Scale } from "./types"
 

package/src/Menu/_docs/Menu.stories.tsx

@@ -37,8 +37,8 @@ const meta = {
     ),
   },
   argTypes: {
-    children: { control: "disabled" },
-    button: { control: "disabled" },
+    children: { control: false },
+    button: { control: false },
   },
 } satisfies Meta<typeof Menu>
 

package/src/Notification/subcomponents/GenericNotification/GenericNotification.spec.tsx

@@ -1,6 +1,6 @@
-import React from "react"
+import React, { act } from "react"
 import { fireEvent, waitFor } from "@testing-library/dom"
-import { act, render } from "@testing-library/react"
+import { render } from "@testing-library/react"
 import ReactTestUtils from "react-dom/test-utils"
 import { GenericNotification } from "./GenericNotification"
 

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx

@@ -24,18 +24,19 @@ const iconMap = {
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-buttons-directionallink--docs Storybook}
  */
-export const DirectionalLink = (props: DirectionalLinkProps): JSX.Element => (
+export const DirectionalLink = ({
+  reversed = false,
+  disabled = false,
+  ...otherProps
+}: DirectionalLinkProps): JSX.Element => (
   <GenericButton
-    {...props}
+    reversed={reversed}
+    disabled={disabled}
+    {...otherProps}
     iconButton
     directionalLink
-    icon={iconMap[props.direction]}
+    icon={iconMap[otherProps.direction]}
   />
 )
 
-DirectionalLink.defaultProps = {
-  reversed: false,
-  disabled: false,
-}
-
 DirectionalLink.displayName = "DirectionalLink"

package/src/Pagination/subcomponents/PaginationLink/PaginationLink.tsx

@@ -14,14 +14,17 @@ export type PaginationLinkProps = GenericProps & {
  */
 export const PaginationLink = ({
   pageNumber,
+  reversed = false,
+  isActive = false,
   ...restProps
 }: PaginationLinkProps): JSX.Element => (
-  <GenericButton {...restProps} paginationLink label={`${pageNumber}`} />
+  <GenericButton
+    {...restProps}
+    paginationLink
+    reversed={reversed}
+    isActive={isActive}
+    label={`${pageNumber}`}
+  />
 )
 
-PaginationLink.defaultProps = {
-  reversed: false,
-  isActive: false,
-}
-
 PaginationLink.displayName = "PaginationLink"

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
     onClick: fn(),
   },
   argTypes: {
-    content: { control: "disabled" },
+    content: { control: false },
     onClick: { action: "onClick" },
   },
 } satisfies Meta<typeof EditableRichTextContent>

package/src/RichTextEditor/RichTextContent/_docs/RichTextContent.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
     content: dummyContent,
   },
   argTypes: {
-    content: { control: "disable" },
+    content: { control: false },
   },
 } satisfies Meta<typeof RichTextContent>
 

package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
-import "@testing-library/jest-dom"
 import { EditorContentArray } from "../types"
 import { RichTextEditor, RichTextEditorProps } from "."
 

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
     label: "Bold",
   },
   argTypes: {
-    icon: { control: "disable" },
+    icon: { control: false },
   },
 } satisfies Meta<typeof ToggleIconButton>
 

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx

@@ -47,7 +47,7 @@ const meta = {
     ),
   },
   argTypes: {
-    children: { control: "disable" },
+    children: { control: false },
   },
   decorators: [
     Story => (

package/src/Skirt/_docs/Skirt.stories.tsx

@@ -31,7 +31,7 @@ const meta = {
     ),
   },
   argTypes: {
-    children: { control: "disabled" },
+    children: { control: false },
   },
 } satisfies Meta<typeof Skirt>
 

package/src/Well/_docs/Well.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
     ),
   },
   argTypes: {
-    children: { control: "disable" },
+    children: { control: false },
   },
 } satisfies Meta<typeof Well>
 

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

@@ -29,7 +29,7 @@ const MockContent = (): JSX.Element => (
 const meta = {
   title: "Pages/Workflow",
   component: Workflow,
-  argTypes: WorkflowControls,
+  argTypes: { ...WorkflowControls },
   args: {
     workflowName: "Create a self-reflection cycle",
     stepName: "Settings",

package/src/Workflow/_docs/WorkflowFooter.stories.tsx

@@ -8,8 +8,8 @@ const meta = {
   title: "Pages/Workflow/Components/Footer",
   component: Workflow.Footer,
   argTypes: {
-    nextAction: WorkflowControls.nextAction,
-    previousAction: WorkflowControls.previousAction,
+    ...WorkflowControls.nextAction,
+    ...WorkflowControls.previousAction,
   },
   args: {
     stepName: "Preview",

package/src/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   title: "Pages/Workflow/Components/Header",
   component: Workflow.Header,
   argTypes: {
-    headerActions: WorkflowControls.headerActions,
+    ...WorkflowControls.headerActions,
   },
   args: {
     workflowName: "Create a self-reflection cycle",

package/src/Workflow/_docs/controls/controls.tsx

@@ -1,13 +1,15 @@
 import React from "react"
+import { ArgTypes } from "@storybook/react"
 import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
 
-export const WorkflowControls = {
+export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {
     control: {
       type: "radio",
     },
-    options: {
+    options: ["Single action", "Multiple actions", "No actions"],
+    mapping: {
       "Single action": [
         <Button
           key="would-use-uui-1"
@@ -40,7 +42,8 @@ export const WorkflowControls = {
     control: {
       type: "radio",
     },
-    options: {
+    options: ["Next active", "Next disabled", "Next submit", "No next action"],
+    mapping: {
       "Next active": <Button reversed label="Next" />,
       "Next disabled": <Button reversed disabled label="Next" />,
       "Next submit": (
@@ -53,7 +56,13 @@ export const WorkflowControls = {
     control: {
       type: "radio",
     },
-    options: {
+    options: [
+      "Previous active",
+      "Previous disabled",
+      "Previous submit",
+      "No Previous action",
+    ],
+    mapping: {
       "Previous active": <Button reversed label="Back" />,
       "Previous disabled": <Button reversed disabled label="Back" />,
       "Previous submit": (
@@ -66,7 +75,14 @@ export const WorkflowControls = {
     control: {
       type: "select",
     },
-    options: {
+    options: [
+      "settings-step",
+      "questions-step",
+      "preview-step",
+      "employees-step",
+      "schedule-step",
+    ],
+    mapping: {
       "settings-step": "settings-step",
       "questions-step": "questions-step",
       "preview-step": "preview-step",

package/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx

@@ -8,9 +8,9 @@ const meta = {
   title: "Pages/Workflow/Future/Components/Footer",
   component: Workflow.Footer,
   argTypes: {
-    nextAction: WorkflowControls.nextAction,
-    previousAction: WorkflowControls.previousAction,
-    currentStepId: WorkflowControls.currentStepId,
+    ...WorkflowControls.nextAction,
+    ...WorkflowControls.previousAction,
+    ...WorkflowControls.currentStepId,
   },
   args: {
     currentStepId: "preview-step",

package/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   title: "Pages/Workflow/Future/Components/Header",
   component: Workflow.Header,
   argTypes: {
-    headerActions: WorkflowControls.headerActions,
+    ...WorkflowControls.headerActions,
   },
   args: {
     workflowName: "Create a self-reflection cycle",

package/src/__future__/Workflow/_docs/controls/controls.tsx

@@ -1,13 +1,15 @@
 import React from "react"
+import { ArgTypes } from "@storybook/react"
 import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
 
-export const WorkflowControls = {
+export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {
     control: {
       type: "radio",
     },
-    options: {
+    options: ["Single action", "Multiple actions", "No actions"],
+    mapping: {
       "Single action": [
         <Button
           key="would-use-uui-1"
@@ -40,7 +42,8 @@ export const WorkflowControls = {
     control: {
       type: "radio",
     },
-    options: {
+    options: ["Next active", "Next disabled", "Next submit", "No next action"],
+    mapping: {
       "Next active": <Button reversed label="Next" />,
       "Next disabled": <Button reversed disabled label="Next" />,
       "Next submit": (
@@ -53,7 +56,13 @@ export const WorkflowControls = {
     control: {
       type: "radio",
     },
-    options: {
+    options: [
+      "Previous active",
+      "Previous disabled",
+      "Previous submit",
+      "No Previous action",
+    ],
+    mapping: {
       "Previous active": <Button reversed label="Back" />,
       "Previous disabled": <Button reversed disabled label="Back" />,
       "Previous submit": (
@@ -66,7 +75,14 @@ export const WorkflowControls = {
     control: {
       type: "select",
     },
-    options: {
+    options: [
+      "settings-step",
+      "questions-step",
+      "preview-step",
+      "employees-step",
+      "schedule-step",
+    ],
+    mapping: {
       "settings-step": "settings-step",
       "questions-step": "questions-step",
       "preview-step": "preview-step",

package/dist/types/BrandMoment/_docs/ExampleHeaders.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const MinimalBasic: () => JSX.Element;
-export declare const MinimalCustomerFocused: () => JSX.Element;
-export declare const FakeNavBar: () => JSX.Element;

package/dist/types/Button/GenericButton/GenericButton.d.ts

@@ -1,65 +0,0 @@
-import React, { ComponentType, MouseEvent, FocusEvent } from "react";
-export type CustomButtonProps = {
-    id?: string;
-    className: string;
-    href?: string;
-    disabled?: boolean;
-    onClick?: (e: MouseEvent<any>) => void;
-    onFocus?: (e: FocusEvent<HTMLElement>) => void;
-    onBlur?: (e: FocusEvent<HTMLElement>) => void;
-    children?: React.ReactNode;
-    "data-testid"?: string;
-};
-export type ButtonFormAttributes = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "form" | "formAction" | "formMethod" | "formEncType" | "formTarget" | "formNoValidate">;
-export type GenericProps = {
-    id?: string;
-    reversed?: boolean;
-    onClick?: (e: MouseEvent) => void;
-    onMouseDown?: (e: MouseEvent) => void;
-    href?: string;
-    newTabAndIUnderstandTheAccessibilityImplications?: boolean;
-    disableTabFocusAndIUnderstandTheAccessibilityImplications?: boolean;
-    onFocus?: (e: FocusEvent<HTMLElement>) => void;
-    onBlur?: (e: FocusEvent<HTMLElement>) => void;
-    component?: ComponentType<CustomButtonProps>;
-    classNameOverride?: string;
-};
-export type WorkingProps = {
-    working: true;
-    workingLabel: string;
-    workingLabelHidden?: boolean;
-};
-export type WorkingUndefinedProps = {
-    working?: false;
-};
-export type ButtonBadgeProps = {
-    text: string;
-    animateChange?: boolean;
-    variant?: "default" | "dark" | "active";
-    reversed?: boolean;
-};
-export type RenderProps = GenericButtonProps & {
-    additionalContent?: React.ReactNode;
-    iconButton?: boolean;
-    directionalLink?: boolean;
-    paginationLink?: boolean;
-    isActive?: boolean;
-};
-export type ButtonRef = {
-    focus: () => void;
-};
-export type GenericButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
-    label: string;
-    primary?: boolean;
-    destructive?: boolean;
-    secondary?: boolean;
-    /** @default "regular" */
-    size?: "small" | "regular";
-    badge?: ButtonBadgeProps;
-    type?: "submit" | "reset" | "button";
-    fullWidth?: boolean;
-    iconPosition?: "start" | "end";
-    icon?: JSX.Element;
-    disabled?: boolean;
-};
-export declare const GenericButton: React.ForwardRefExoticComponent<RenderProps & React.RefAttributes<ButtonRef | undefined>>;

package/dist/types/Button/IconButton/IconButton.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import { GenericProps, ButtonFormAttributes, WorkingProps, WorkingUndefinedProps, ButtonBadgeProps, ButtonRef } from "../GenericButton";
-export type IconButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
-    label: string;
-    primary?: boolean;
-    destructive?: boolean;
-    secondary?: boolean;
-    /** @default "regular" */
-    size?: "small" | "regular";
-    badge?: ButtonBadgeProps;
-    type?: "submit" | "reset" | "button";
-    fullWidth?: boolean;
-    icon?: JSX.Element;
-    disabled?: boolean;
-};
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
- */
-export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<ButtonRef | undefined>>;

package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { DayPickerRangeProps } from "react-day-picker";
-import { OverrideClassName } from "../../types/OverrideClassName";
-export type CalendarRangeElement = HTMLDivElement;
-export type CalendarRangeProps = {
-    id?: string;
-    onMount?: (calendarElement: CalendarRangeElement) => void;
-    hasDivider?: boolean;
-} & OverrideClassName<Omit<DayPickerRangeProps, "mode">>;
-export declare const CalendarRange: {
-    ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, locale, ...restProps }: CalendarRangeProps): JSX.Element;
-    displayName: string;
-};

package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { DayPickerSingleProps } from "react-day-picker";
-import { OverrideClassName } from "../../types/OverrideClassName";
-export type CalendarSingleElement = HTMLDivElement;
-export type CalendarSingleProps = {
-    id?: string;
-    onMount?: (calendarElement: CalendarSingleElement) => void;
-} & OverrideClassName<Omit<DayPickerSingleProps, "mode">>;
-export declare const CalendarSingle: {
-    ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
-    displayName: string;
-};