@kaizen/components 1.55.2 → 1.56.0

package/src/__actions__/Button/v3/_docs/Button.spec.stories.tsx

@@ -0,0 +1,193 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, waitFor, within, expect, fn } from "@storybook/test"
+import { VisuallyHidden } from "react-aria"
+import {
+  AddIcon,
+  TrashIcon,
+  ThumbsUpOffIcon,
+  ThumbsUpOnIcon,
+} from "~components/Icon"
+import { Tooltip, TooltipTrigger } from "~components/__overlays__/v3"
+import { Button } from "../index"
+
+const onPressEvent = fn()
+
+const meta = {
+  title: "Actions/Button/v3/Tests",
+  component: Button,
+  args: {
+    children: "Label",
+    onPress: onPressEvent,
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const ButtonDefault: Story = {
+  render: ({ children, ...otherArgs }) => (
+    <Button {...otherArgs}>
+      <>
+        {children}
+        <AddIcon role="presentation" />
+      </>
+    </Button>
+  ),
+}
+
+export const IsHovered: Story = {
+  ...ButtonDefault,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+
+    await step("Hover shows", async () => {
+      await userEvent.hover(button)
+      await expect(button).toHaveAttribute("data-hovered", "true")
+    })
+  },
+}
+export const IsHoveredReversed: Story = {
+  ...IsHovered,
+  parameters: {
+    reverseColors: true,
+  },
+}
+
+export const IsFocused: Story = {
+  ...ButtonDefault,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+
+    await step("Focus shows", async () => {
+      await userEvent.tab()
+
+      await waitFor(() => expect(document.activeElement).toBe(button))
+      await expect(button).toHaveAttribute("data-focused", "true")
+    })
+  },
+}
+
+export const IsFocusedReversed: Story = {
+  ...IsFocused,
+  parameters: {
+    reverseColors: true,
+  },
+}
+
+export const IsPressed: Story = {
+  ...ButtonDefault,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+
+    await step("onPress is called", async () => {
+      await userEvent.click(button)
+
+      await expect(onPressEvent).toHaveBeenCalledTimes(1)
+    })
+  },
+}
+
+export const IconButtonWithAccessibleLabel: Story = {
+  render: ({ children: _, ...otherArgs }) => (
+    <Button {...otherArgs}>
+      <>
+        <TrashIcon role="img" aria-label="Remove" />
+        <VisuallyHidden> Highlight: 18, June, 2024</VisuallyHidden>
+      </>
+    </Button>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+
+    await step("has accessible labels", async () => {
+      await userEvent.tab()
+
+      await expect(button).toHaveAccessibleName(
+        "Remove Highlight: 18, June, 2024"
+      )
+    })
+  },
+}
+
+export const ButtonWithRACRenderPropsAsChildren: Story = {
+  render: ({ children: _, ...otherArgs }) => (
+    <Button {...otherArgs}>
+      {({ isFocused }) => (
+        <>
+          Label
+          {isFocused ? (
+            <ThumbsUpOnIcon role="img" aria-label=" is focused" />
+          ) : (
+            <ThumbsUpOffIcon role="img" aria-label=" is unfocused" />
+          )}
+        </>
+      )}
+    </Button>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+
+    await step("button icon reflects unfocused state", async () => {
+      await waitFor(() =>
+        expect(button).toHaveAccessibleName("Label is unfocused")
+      )
+    })
+
+    await step("focus on button and update icon", async () => {
+      await userEvent.tab()
+      await waitFor(() =>
+        expect(button).toHaveAccessibleName("Label is focused")
+      )
+    })
+  },
+}
+
+// While this is a less likely use case, but as it is possible to use render props to apply a class name to the button so we should test that it works with our Button implementation
+export const ButtonWithRACRenderPropsAsClassname: Story = {
+  render: ({ children: _, ...otherArgs }) => (
+    <Button
+      className={({ isFocused }) =>
+        isFocused ? "!bg-blue-500 !text-white !border-transparent" : ""
+      }
+      {...otherArgs}
+    >
+      Label
+    </Button>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+    await button.focus()
+  },
+}
+
+// A compatibility check since when we develop tooltip the v1 button was an issue
+export const ButtonWithTooltip: Story = {
+  render: ({ children: _, ...otherArgs }) => (
+    <TooltipTrigger>
+      <Button {...otherArgs}>Label</Button>
+      <Tooltip>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.getByRole("button")
+
+    await step("Focus shows", async () => {
+      await userEvent.tab()
+
+      await waitFor(() => expect(document.activeElement).toBe(button))
+    })
+
+    await step("Tooltip content show", async () => {
+      await waitFor(() => expect(canvas.getByRole("tooltip")).toBeVisible())
+    })
+  },
+}

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -0,0 +1,135 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { ArrowForwardIcon, AddIcon, TrashIcon } from "~components/Icon"
+import { LoadingSpinner } from "~components/Loading"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Button } from "../index"
+
+export default {
+  title: "Actions/Button/v3/Tests",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet heading="Button" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["Base", "Disabled", "working"]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row rowTitle="Default">
+            <Button>Label</Button>
+
+            <Button isDisabled>Label</Button>
+            <Button isDisabled>
+              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+            </Button>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Icon start">
+            <Button>
+              <AddIcon role="presentation" />
+              Label
+            </Button>
+            <Button isDisabled>
+              <AddIcon role="presentation" />
+              Label
+            </Button>
+            <Button isDisabled>
+              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+            </Button>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Icon end">
+            <Button>
+              Label
+              <ArrowForwardIcon role="presentation" />
+            </Button>
+            <Button isDisabled>
+              Label
+              <ArrowForwardIcon role="presentation" />
+            </Button>
+            <Button isDisabled>
+              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+            </Button>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Icon only">
+            <Button aria-label="Label">
+              <TrashIcon role="presentation" />
+            </Button>
+            <Button aria-label="Label" isDisabled>
+              <TrashIcon role="presentation" />
+            </Button>
+            <Button aria-label="Label" isDisabled>
+              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+            </Button>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Small">
+            <Button size="small">
+              Label
+              <ArrowForwardIcon role="presentation" />
+            </Button>
+            <Button size="small" isDisabled>
+              Label
+              <ArrowForwardIcon role="presentation" />
+            </Button>
+            <Button size="small" isDisabled>
+              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+            </Button>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Icon only small">
+            <Button size="small">
+              <TrashIcon role="img" aria-label="Remove label" />
+            </Button>
+            <Button size="small" isDisabled>
+              <TrashIcon role="img" aria-label="Remove label" />
+            </Button>
+            <Button size="small" isDisabled>
+              <LoadingSpinner size="sm" accessibilityLabel="Removing label" />
+            </Button>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+  parameters: {
+    pseudo: {
+      hover: '[data-hovered="true"]',
+      active: '[data-pressed="true"]',
+      focus: '[data-focused="true"]',
+      focusVisible: '[data-focus-visible="true"]',
+    },
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    textDirection: "rtl",
+  },
+}
+
+export const StickerSheetReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Reversed)",
+  parameters: {
+    reverseColors: true,
+  },
+  args: {
+    isReversed: true,
+  },
+}

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

@@ -0,0 +1,98 @@
+import React from "react"
+import { action } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/react"
+import { AddIcon, TrashIcon, ChevronUpIcon } from "~components/Icon"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Button } from "../index"
+
+const meta = {
+  title: "Actions/Button/v3",
+  component: Button,
+  args: {
+    children: "Label",
+    onPress: action("Button onPress event"),
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ children, ...otherArgs }) => (
+    <Button {...otherArgs}>{children}</Button>
+  ),
+}
+
+export const ButtonWithIcon: Story = {
+  render: ({ children, ...otherArgs }) => (
+    <Button {...otherArgs}>{children}</Button>
+  ),
+  args: {
+    children: (
+      <>
+        Label
+        <AddIcon role="presentation" />
+      </>
+    ),
+  },
+}
+
+export const ButtonWithIconStart: Story = {
+  render: ({ children, ...otherArgs }) => (
+    <Button {...otherArgs}>{children}</Button>
+  ),
+  args: {
+    children: (
+      <>
+        <TrashIcon role="presentation" />
+        Label
+      </>
+    ),
+  },
+}
+
+export const IconButton: Story = {
+  render: ({ children, ...otherArgs }) => (
+    <Button {...otherArgs}>{children}</Button>
+  ),
+  args: {
+    children: (
+      <>
+        <TrashIcon role="img" aria-label="Remove" />
+        <VisuallyHidden> Highlights: May 8, 2024</VisuallyHidden>
+      </>
+    ),
+  },
+}
+
+export const OnReversed: Story = {
+  render: ({ children, ...otherArgs }) => (
+    <Button {...otherArgs}>{children}</Button>
+  ),
+  args: {
+    children: (
+      <>
+        Label
+        <ChevronUpIcon role="presentation" />
+      </>
+    ),
+  },
+  parameters: {
+    reverseColors: true,
+    docs: {
+      source: {
+        code: `
+          <ReversedColors isReversed={true}>
+            <Button {...otherArgs}>
+              <>
+                Label
+                <ChevronUpIcon role="presentation" />
+              </>
+            </Button>
+          </ReversedColors>
+      `,
+      },
+    },
+  },
+}

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

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

package/src/{Menu → __actions__/Menu/v1}/Menu.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { Menu } from "./Menu"
 
 const user = userEvent.setup()

package/src/{Menu → __actions__/Menu/v1}/Menu.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { ButtonProps } from "~components/Button"
+import { ButtonProps } from "~components/__actions__/v2"
 import {
   StatelessMenu,
   StatelessMenuProps,

package/src/__actions__/Menu/v1/_docs/Menu.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, Installation } from "~storybook/components"
+import * as MenuStories from "./Menu.stories"
+
+<Meta of={MenuStories} />
+
+# Menu (v1)
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39909&t=P1w10jr2cpPuaayw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu"
+  className="!mb-8"
+/>
+
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Menu, MenuDropdown, MenuList, MenuItem } from "@kaizen/components/v1/actions"'
+/>
+
+It is recommended that you import from the `v2` entry point.
+
+## Overview
+
+A menu contains links to places or button actions. It does NOT show a selected item at all and the menu button text never changes.
+
+<Canvas of={MenuStories.Playground} />
+<Controls of={MenuStories.Playground} />
+

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { Button } from "~components/Button"
 import { ChevronDownIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -10,7 +10,7 @@ import { Menu } from "../index"
 import { MenuContentExample } from "./MenuContentExample"
 
 export default {
-  title: "Components/Menu",
+  title: "Actions/Menu/v1",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

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

@@ -1,14 +1,14 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import { Menu } from "../index"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
 import { MenuList } from "../subcomponents/MenuList"
 
 const meta = {
-  title: "Components/Menu",
+  title: "Actions/Menu/v1",
   component: Menu,
   args: {
     button: (

package/src/{Menu → __actions__/Menu/v1}/_docs/examples.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
 import { DuplicateIcon, EditIcon } from "~components/Icon"
-import { MenuItem, MenuList } from "~components/Menu"
+import { MenuItem, MenuList } from "../"
 
 export const exampleActionButtonPropsButton = {
   label: "Edit Survey",

package/src/__actions__/Menu/v1/index.ts

@@ -0,0 +1,35 @@
+// Since we can't add a deprecation flag on a * export
+import { Menu as MenuV1, MenuProps as MenuPropsV1 } from "./Menu"
+import {
+  MenuHeading as MenuHeadingV1,
+  MenuHeadingProps as MenuHeadingPropsV1,
+} from "./subcomponents/MenuHeading"
+import {
+  MenuItem as MenuItemV1,
+  MenuItemProps as MenuItemPropsV1,
+} from "./subcomponents/MenuItem"
+import {
+  MenuList as MenuListV1,
+  MenuListProps as MenuListPropsV1,
+} from "./subcomponents/MenuList"
+import {
+  StatelessMenu as StatelessMenuV1,
+  StatelessMenuProps as StatelessMenuPropsV1,
+} from "./subcomponents/StatelessMenu"
+
+// Note: deprecate all of these once we have Button v3
+
+export const Menu = MenuV1
+export type MenuProps = MenuPropsV1
+
+export const MenuHeading = MenuHeadingV1
+export type MenuHeadingProps = MenuHeadingPropsV1
+
+export const MenuItem = MenuItemV1
+export type MenuItemProps = MenuItemPropsV1
+
+export const MenuList = MenuListV1
+export type MenuListProps = MenuListPropsV1
+
+export const StatelessMenu = StatelessMenuV1
+export type StatelessMenuProps = StatelessMenuPropsV1

package/src/{Menu → __actions__/Menu/v2}/_docs/Menu.mdx

@@ -4,7 +4,7 @@ import * as MenuStories from "./Menu.stories"
 
 <Meta of={MenuStories} />
 
-# Menu
+# Menu (v2)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
@@ -13,7 +13,7 @@ import * as MenuStories from "./Menu.stories"
 
 />
 
-<KAIOInstallation exportNames="Menu" />
+<KAIOInstallation exportNames={["Menu", "MenuDropdown", "MenuList", "MenuItem"]} family="actions" version="2" />
 
 ## Overview
 

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

@@ -0,0 +1,54 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
+import * as MenuV1Stories from "../../v1/_docs/Menu.stories"
+import { Menu, MenuList, MenuItem, MenuHeading } from "../index"
+
+const meta = {
+  title: "Actions/Menu/v2",
+  component: Menu,
+  args: {
+    button: (
+      <Button
+        label="Actions"
+        icon={<ChevronDownIcon role="presentation" />}
+        iconPosition="end"
+      />
+    ),
+    children: (
+      <MenuList>
+        <MenuItem
+          onClick={() => {
+            alert("Duplicated!")
+          }}
+          icon={<DuplicateIcon role="presentation" />}
+          label="Duplicate item"
+        />
+        <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>
+          <MenuItem
+            href="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu"
+            label="Learn more about Menu"
+            destructive
+          />
+        </MenuList>
+      </MenuList>
+    ),
+  },
+  decorators: [
+    Story => (
+      <div className="flex mt-[60px] gap-12">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Menu>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = MenuV1Stories.Playground

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

@@ -0,0 +1,6 @@
+export * from "../v1/Menu"
+export * from "../v1/subcomponents/MenuList"
+export * from "../v1/subcomponents/MenuDropdown"
+export * from "../v1/subcomponents/MenuItem"
+export * from "../v1/subcomponents/MenuHeading"
+export * from "../v1/subcomponents/StatelessMenu"

package/src/__actions__/Menu/v3/Menu.module.scss

@@ -0,0 +1,32 @@
+.menu {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
+
+.menu :global(.react-aria-Header) {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
+
+.menu section:not(:last-of-type) {
+  &::after {
+    width: 100%;
+    height: 1px;
+    background-color: var(--border-solid-border-color);
+    content: "";
+    display: block;
+    margin-block: var(--spacing-6);
+  }
+}