@kaizen/components 1.55.2 → 1.56.1

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

@@ -5,7 +5,10 @@ import {
   EndIcon,
   StartIcon,
 } from "~components/Icon"
-import { GenericButton, GenericProps } from "../../../Button/GenericButton"
+import {
+  GenericButton,
+  GenericProps,
+} from "~components/__actions__/Button/v2/GenericButton"
 
 export type DirectionalLinkProps = {
   label: string

package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss

@@ -2,8 +2,8 @@
 @import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/spacing";
-@import "../../../Button/utils/mixins";
-@import "../../../Button/utils/variables";
+@import "../../../__actions__/Button/v1/utils/mixins";
+@import "../../../__actions__/Button/v1/utils/variables";
 
 %circle-button {
   width: 40px;

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

@@ -1,5 +1,8 @@
 import React from "react"
-import { GenericProps, GenericButton } from "../../../Button/GenericButton"
+import {
+  GenericProps,
+  GenericButton,
+} from "~components/__actions__/Button/v2/GenericButton"
 
 export type PaginationLinkProps = GenericProps & {
   pageNumber: number

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import {
   EditorContentArray,
   RichTextEditor,

package/src/RichTextEditor/utils/core/createRichTextEditor.ts

@@ -31,6 +31,8 @@ export const createRichTextEditor = ({
   attributes,
   isEditable = () => true,
 }: EditorArgs): EditorAPI => {
+  let editorView: ProseMirrorEditorView | null = null
+
   // Handle transactions eminating from the EditorView instance
   const dispatch = (tx: Transaction): void => {
     const newEditorState = editorView && editorView.state.apply(tx)
@@ -52,7 +54,7 @@ export const createRichTextEditor = ({
     }
   }
 
-  const editorView = new ProseMirrorEditorView(node, {
+  editorView = new ProseMirrorEditorView(node, {
     state: initialEditorState,
     dispatchTransaction: dispatchCommandOrTransaction,
     attributes,

package/src/SplitButton/SplitButton.spec.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { renderWithIntl } from "~tests"
-import { MenuItem, MenuList } from "~components/Menu"
+import { MenuItem, MenuList } from "~components/__actions__/v2"
 import { SplitButton, SplitButtonProps } from "./SplitButton"
 
 const user = userEvent.setup()

package/src/SplitButton/SplitButton.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { Menu } from "~components/Menu"
+import { Menu } from "~components/__actions__/v2"
 import { DataAttributes } from "~types/DataAttributes"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { ActionButton, ActionButtonProps } from "./subcomponents/ActionButton"

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

@@ -4,7 +4,7 @@ import {
   exampleActionButtonPropsAnchor,
   exampleActionButtonPropsButton,
   exampleDropdownContentEnabled,
-} from "~components/Menu/_docs/examples"
+} from "~components/__actions__/Menu/v1/_docs/examples"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/SplitButton/_docs/SplitButton.stories.tsx

@@ -4,7 +4,7 @@ import {
   exampleActionButtonPropsButton,
   exampleDropdownContentEnabled,
   exampleDropdownContentOneDisabled,
-} from "~components/Menu/_docs/examples"
+} from "~components/__actions__/Menu/v1/_docs/examples"
 import { SplitButton } from "../index"
 
 const meta = {

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

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { Card } from "~components/Card"
 import { Text } from "~components/Text"
+import { Button } from "~components/__actions__/v2"
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "../index"
 
 const meta = {

package/src/Tile/subcomponents/GenericTile/Action.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { TileAction } from "./GenericTile"
 
 type ActionProps = {

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes, useState } from "react"
 import classnames from "classnames"
-import { IconButton } from "~components/Button"
-import { GenericButtonProps } from "~components/Button/GenericButton"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
 import { ArrowBackwardIcon, InformationIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericButton"
+import { IconButton } from "~components/__actions__/v2"
 import { OverrideClassName } from "~types/OverrideClassName"
 import Action from "./Action"
 import { Moods } from "./types"

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import classnames from "classnames"
 import { Avatar } from "~components/Avatar"
-import { IconButton } from "~components/Button"
 import { Heading } from "~components/Heading"
 import { ArrowLeftIcon, ArrowRightIcon, HamburgerIcon } from "~components/Icon"
 import { Select } from "~components/Select"
 import { Tag } from "~components/Tag"
+import { IconButton } from "~components/__actions__/v2"
 import { useMediaQueries } from "~utils/useMediaQueries"
 import { MainActions } from "./subcomponents/MainActions"
 import { MobileActions } from "./subcomponents/MobileActions"

package/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -1,7 +1,6 @@
 import React from "react"
-import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
-import { Menu, MenuList } from "~components/Menu"
+import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import {
   DefaultActionProps,

package/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -1,9 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react"
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
-import { ButtonProps } from "~components/Button"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import { MenuItem, MenuList, MenuHeading } from "~components/Menu"
+import {
+  MenuItem,
+  MenuList,
+  MenuHeading,
+  ButtonProps,
+} from "~components/__actions__/v2"
 import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
 import {
   DefaultActionProps,

package/src/TitleBlockZen/subcomponents/SecondaryActions.tsx

@@ -1,7 +1,6 @@
 import React from "react"
-import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
-import { Menu, MenuList } from "~components/Menu"
+import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
 import styles from "../TitleBlockZen.module.scss"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types"

package/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { MenuItem } from "~components/Menu"
+import { MenuItem } from "~components/__actions__/v2"
 import { TitleBlockMenuItemProps } from "../types"
 import styles from "./TitleBlockMenuItem.module.scss"
 

package/src/TitleBlockZen/subcomponents/Toolbar.tsx

@@ -4,8 +4,7 @@
 
 import React from "react"
 import classnames from "classnames"
-import { ButtonProps } from "~components/Button"
-import { MenuProps } from "~components/Menu"
+import { MenuProps, ButtonProps } from "~components/__actions__/v2"
 import styles from "./Toolbar.module.scss"
 
 type ToolbarProps = {

package/src/TitleBlockZen/types.ts

@@ -1,7 +1,10 @@
 import { CompanyAvatarProps, GenericAvatarProps } from "~components/Avatar"
-import { ButtonProps, CustomButtonProps } from "~components/Button"
-import { MenuItemProps } from "~components/Menu"
 import { Select } from "~components/Select"
+import {
+  ButtonProps,
+  CustomButtonProps,
+  MenuItemProps,
+} from "~components/__actions__/v2"
 import { NavigationTabProps } from "./subcomponents/NavigationTabs"
 
 /**

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

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { TextField } from "~components/TextField"
+import { Button } from "~components/__actions__/v2"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { ArgTypes } from "@storybook/react"
-import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {

package/src/{Button → __actions__/Button/v1}/Button/Button.module.scss

@@ -2,7 +2,7 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/typography";
-@import "../../../styles/utils/button-reset";
+@import "../../../../../styles/utils/button-reset";
 @import "../utils/mixins";
 @import "../utils/variables";
 

package/src/{Button → __actions__/Button/v1}/Button/_docs/Button.mdx

@@ -4,7 +4,7 @@ import * as ButtonStories from "./Button.stories"
 
 <Meta of={ButtonStories} />
 
-# Button
+# Button (v1)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/Button"
@@ -14,7 +14,7 @@ import * as ButtonStories from "./Button.stories"
 />
 
 
-<KAIOInstallation exportNames="Button" />
+<KAIOInstallation exportNames="Button" family="actions" version="1" />
 
 ## Overview
 

package/src/{Button → __actions__/Button/v1}/Button/_docs/Button.stickersheet.stories.tsx

@@ -8,7 +8,7 @@ import {
 import { Button, ButtonProps } from "../index"
 
 export default {
-  title: "Components/Buttons/Button",
+  title: "Actions/Button/v1",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{Button → __actions__/Button/v1}/Button/_docs/Button.stories.tsx

@@ -6,7 +6,7 @@ import { TextField } from "~components/TextField"
 import { Button } from "../index"
 
 const meta = {
-  title: "Components/Buttons/Button",
+  title: "Actions/Button/v1",
   component: Button,
   args: {
     label: "Label",

package/src/{Button → __actions__/Button/v1}/GenericButton/GenericButton.module.scss

@@ -1,8 +1,8 @@
 @import "../utils/variables";
 @import "../Button/Button.module";
 @import "../IconButton/IconButton.module";
-@import "../../Pagination/subcomponents/PaginationLink/PaginationLink.module";
-@import "../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module";
+@import "../../../../Pagination/subcomponents/PaginationLink/PaginationLink.module";
+@import "../../../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module";
 
 .container {
   display: inline-block;

package/src/{Button → __actions__/Button/v1}/IconButton/_docs/IconButton.mdx

@@ -4,7 +4,7 @@ import * as IconButtonStories from "./IconButton.stories"
 
 <Meta of={IconButtonStories} />
 
-# IconButton
+# IconButton (v1)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/IconButton"
@@ -13,7 +13,7 @@ import * as IconButtonStories from "./IconButton.stories"
 
 />
 
-<KAIOInstallation exportNames="IconButton" />
+<KAIOInstallation exportNames="IconButton" family="actions" version="1" />
 
 ## Overview
 

package/src/{Button → __actions__/Button/v1}/IconButton/_docs/IconButton.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { ButtonProps } from "~components/Button"
 import { FilterIcon, MeatballsIcon, TrashIcon } from "~components/Icon"
+import { ButtonProps } from "~components/__actions__/v2"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -9,7 +9,7 @@ import {
 import { IconButton, IconButtonProps } from "../index"
 
 export default {
-  title: "Components/Buttons/IconButton",
+  title: "Actions/IconButton/v1",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{Button → __actions__/Button/v1}/IconButton/_docs/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import { AddIcon, MeatballsIcon } from "~components/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Components/Buttons/IconButton",
+  title: "Actions/IconButton/v1",
   component: IconButton,
   argTypes: {
     icon: {

package/src/{Button → __actions__/Button/v1}/utils/_variables.scss

@@ -1,7 +1,7 @@
 @import "~@kaizen/design-tokens/sass/spacing";
 @import "~@kaizen/design-tokens/sass/border";
-@import "../../../styles/utils/legacy/color";
-@import "../../../styles/utils/legacy/layout";
+@import "../../../../../styles/utils/legacy/color";
+@import "../../../../../styles/utils/legacy/layout";
 
 $button-height: $spacing-xl;
 $button-small-height: calc(#{$spacing-md} * 5 / 3);

package/src/__actions__/Button/v2/Button/_docs/Button.mdx

@@ -0,0 +1,98 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
+import * as ButtonStories from "./Button.stories"
+
+<Meta of={ButtonStories} />
+
+# Button (v2)
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/Button"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
+
+/>
+
+
+<KAIOInstallation exportNames="Button" family="actions" version="2" />
+
+## Overview
+
+Buttons perform actions.
+If it needs to navigate somewhere and can be opened in a new tab, use a link instead.
+
+<Canvas of={ButtonStories.Playground} />
+<Controls of={ButtonStories.Playground} />
+
+## API
+
+### Variants
+
+`Default`, `Primary`, `Destructive`, `Secondary`
+If no `variant` is specified, a `Default` button will be rendered.
+
+<Canvas of={ButtonStories.Variants} />
+
+#### Reversed
+
+<Canvas of={ButtonStories.Reversed} />
+
+### Disabled
+
+A disabled Button prevents user interaction. It doesn't appear in the tab order, can't receive focus, and may not read aloud by a screenreader.
+
+<Canvas of={ButtonStories.Disabled} />
+
+### Icon
+
+Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
+
+<Canvas of={ButtonStories.Icon} />
+
+#### Icon position
+
+Change the icon placement with the `iconPosition` prop.
+Default position is `start`.
+
+<Canvas of={ButtonStories.IconPosition} />
+
+### Badge
+
+You can display a `Badge` component within the button using the `badge` prop.
+
+<Canvas of={ButtonStories.Badge} />
+
+### Full width
+
+Buttons can be stretched to fill the full width of their container.
+
+<Canvas of={ButtonStories.FullWidth} />
+
+### Working
+
+The `working` prop should be used in situations where a button action triggers a change in UI state but needs to wait for a server response, such as submitting a form.
+
+In conjuction use the `workingLabel` prop to update the label of the button when the working state is triggered.
+
+Alternatively use the `workingLabelHidden` prop to hide the button label all together.
+
+<Canvas of={ButtonStories.Working} />
+
+### Controlling the working state
+Here is an example of controlling whether the button is 'working' or not, using state.
+
+<Canvas of={ButtonStories.ResolveWorking} />
+
+### Loading
+
+Use the <LinkTo pageId="components-loading-states-loadinginput">LoadingInput</LinkTo> component for button placeholders.
+
+<Canvas of={ButtonStories.Loading} />
+
+### Native `form` attribute
+
+Button extends native HTML "form" attributes for `button`.
+
+You can use this to submit a `form` using `Button` with a matching form id.
+
+<Canvas of={ButtonStories.NativeFormButton} />

package/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from "react"
+import { StoryObj, Meta } from "@storybook/react"
+import { ArrowForwardIcon, ArrowRightIcon } from "~components/Icon"
+import { LoadingInput } from "~components/Loading"
+import { TextField } from "~components/TextField"
+import { Button } from "../index"
+
+const meta = {
+  title: "Actions/Button/v2",
+  component: Button,
+  args: {
+    label: "Label",
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Variants: Story = {
+  render: ({ reversed }) => (
+    <>
+      <Button label="Default" reversed={reversed} />
+      <Button label="Primary" primary reversed={reversed} />
+      <Button label="Destructive" destructive reversed={reversed} />
+      <Button label="Secondary" secondary reversed={reversed} />
+      {!reversed && (
+        <Button label="Secondary Destructive" secondary destructive />
+      )}
+    </>
+  ),
+  decorators: [
+    Story => (
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: { controls: { disable: true } },
+}
+
+export const Reversed: Story = {
+  ...Variants,
+  args: { reversed: true },
+  parameters: {
+    ...Variants.parameters,
+    backgrounds: { default: "Purple 700" },
+  },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+}
+
+const sourceCodeIcon = `
+import { Button, ArrowForwardIcon } from "@kaizen/components"
+
+<Button label="Label" icon={<ArrowForwardIcon role="presentation" />} />
+`
+
+export const Icon: Story = {
+  args: {
+    icon: <ArrowForwardIcon role="presentation" />,
+  },
+  parameters: {
+    docs: { source: { code: sourceCodeIcon } },
+  },
+}
+
+export const IconPosition: Story = {
+  args: {
+    icon: <ArrowRightIcon role="presentation" />,
+    iconPosition: "end",
+  },
+}
+
+export const Badge: Story = {
+  args: {
+    badge: { text: "3", variant: "active" },
+    secondary: true,
+  },
+}
+
+export const FullWidth: Story = {
+  args: { fullWidth: true },
+}
+
+export const Working: Story = {
+  render: () => (
+    <>
+      <Button label="Label" working workingLabel="Submitting" />
+      <Button
+        label="Label"
+        working
+        workingLabel="Submitting"
+        workingLabelHidden
+      />
+    </>
+  ),
+  decorators: [
+    Story => (
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: { controls: { disable: true } },
+}
+
+export const Loading: Story = {
+  render: () => <LoadingInput isAnimated width={13} />,
+  parameters: { controls: { disable: true } },
+}
+
+export const NativeFormButton: Story = {
+  render: () => (
+    <>
+      <form className="mb-6" id="unique-form-id">
+        <TextField labelText="Sample text field" defaultValue="content" />
+      </form>
+      <Button
+        label="Submit"
+        type="submit"
+        form="unique-form-id"
+        formTarget="_blank"
+        formAction="/"
+        formMethod="get"
+        formEncType="text/plain"
+        formNoValidate={false}
+      />
+    </>
+  ),
+  parameters: { controls: { disable: true } },
+}
+
+export const ResolveWorking: Story = {
+  render: () => {
+    const [state, setState] = useState<"Ready" | "Working" | "Completed">(
+      "Ready"
+    )
+    const handleClick = (): void => {
+      if (state === "Ready") {
+        setState("Working")
+        setTimeout(() => setState("Completed"), 3000)
+      } else {
+        setState("Ready")
+      }
+    }
+
+    return (
+      <Button
+        label={state}
+        working={state === "Working"}
+        workingLabel="Button is doing some work"
+        workingLabelHidden
+        onClick={handleClick}
+      />
+    )
+  },
+}

package/src/__actions__/Button/v2/Button/index.ts

@@ -0,0 +1 @@
+export * from "../../v1/Button"

package/src/__actions__/Button/v2/GenericButton/index.ts

@@ -0,0 +1 @@
+export * from "../../v1/GenericButton"