@kaizen/components 0.0.0-canary-package-bundler-v2-20241113071536 → 0.0.0-canary-link-button-wip-canary-20241121043208

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

@@ -0,0 +1,176 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { within } from "@storybook/test"
+import { Icon } from "~components/__future__/Icon"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { LinkButton, LinkButtonProps } from "../index"
+
+export default {
+  title: "Actions/LinkButton/LinkButton (v3)",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const variants = ["primary", "secondary", "tertiary"] satisfies Array<
+  LinkButtonProps["variant"]
+>
+const sizes = ["small", "medium", "large"] satisfies Array<
+  LinkButtonProps["size"]
+>
+
+const RowTemplate = ({
+  isReversed = false,
+}: {
+  isReversed?: boolean
+}): JSX.Element => (
+  <>
+    {variants.map(variant =>
+      sizes.map(size => (
+        <StickerSheet.Row
+          key={size + variant}
+          isReversed={isReversed}
+          rowTitle={`${variant} (${size})`}
+        >
+          <LinkButton variant={variant} size={size}>
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={<Icon name="add" isPresentational />}
+            variant={variant}
+            size={size}
+          >
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            size={size}
+          >
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={<Icon name="delete" isPresentational />}
+            variant={variant}
+            hasHiddenLabel
+            size={size}
+          >
+            Label
+          </LinkButton>
+          <LinkButton
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            size={size}
+            isDisabled
+          >
+            Label
+          </LinkButton>
+        </StickerSheet.Row>
+      ))
+    )}
+  </>
+)
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet heading="Button" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={[
+            "Base",
+            "Icon start",
+            "Icon end",
+            "hasHiddenLabel",
+            "isDisabled",
+          ]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          <RowTemplate isReversed={isReversed} />
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet heading="Pseudo states" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["isHovered", "isFocusVisible", "isPressed"]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          {variants.map(variant => (
+            <StickerSheet.Row
+              key={variant}
+              isReversed={isReversed}
+              rowTitle={variant}
+            >
+              <LinkButton data-testid="testid__button-hover" variant={variant}>
+                Label
+              </LinkButton>
+              <LinkButton data-testid="testid__button-focus" variant={variant}>
+                Label
+              </LinkButton>
+              <LinkButton
+                data-testid="testid__button-pressed"
+                variant={variant}
+              >
+                Label
+              </LinkButton>
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const focusButtons = canvas.getAllByTestId("testid__button-focus")
+    const hoverButtons = canvas.getAllByTestId("testid__button-hover")
+    const pressedButton = canvas.getAllByTestId("testid__button-pressed")
+
+    focusButtons.forEach(button => {
+      button.setAttribute("data-focus-visible", "true")
+    })
+    hoverButtons.forEach(button => {
+      button.setAttribute("data-hovered", "true")
+    })
+    pressedButton.forEach(button => {
+      button.setAttribute("data-pressed", "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__/LinkButton/v3/index.ts

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

package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx

@@ -41,8 +41,12 @@ const DefaultMenuItems = (): ReactNode => (
 export const Actions: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -59,8 +63,12 @@ export const Actions: Story = {
 export const ItemsDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -74,8 +82,12 @@ export const ItemsDo: Story = {
 export const ItemsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -171,8 +183,12 @@ export const LabelDont: Story = {
 export const IconsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -193,8 +209,12 @@ export const IconsDont: Story = {
 export const MenuItemLabelsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -210,8 +230,12 @@ export const MenuItemLabelsDont: Story = {
 export const SentenceCaseDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -227,8 +251,12 @@ export const SentenceCaseDo: Story = {
 export const SentenceCaseDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -244,8 +272,12 @@ export const SentenceCaseDont: Story = {
 export const ElipsesDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -261,8 +293,12 @@ export const ElipsesDo: Story = {
 export const ElipsesDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>

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

@@ -36,8 +36,12 @@ export const KitchenSink: Story = {
   ],
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -84,9 +88,14 @@ export const KitchenSink: Story = {
 export const Basic: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
+
       <Popover>
         <Menu>
           <MenuItem
@@ -165,8 +174,12 @@ const mockOnClick = fn()
 export const DisabledItems: Story = {
   render: () => (
     <MenuTrigger>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -205,8 +218,12 @@ export const DisabledItems: Story = {
 export const WithSections: Story = {
   render: () => (
     <MenuTrigger>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -237,8 +254,11 @@ export const Controlled: Story = {
           Toggle open
         </button>
         <MenuTrigger isOpen={isOpen} onOpenChange={setOpen}>
-          <Button>
-            <Icon name="more_horiz" alt="Additional actions" />
+          <Button
+            icon={<Icon name="more_horiz" isPresentational />}
+            hasHiddenLabel
+          >
+            Additional actions
           </Button>
           <Popover>
             <Menu>

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

@@ -25,8 +25,12 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -68,8 +72,12 @@ export const Controlled: Story = {
 export const RichContent: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>

package/src/__actions__/v3.ts

@@ -1,2 +1,3 @@
 export * from "./Menu/v3"
 export * from "./Button/v3"
+export * from "./LinkButton/v3"

package/src/__future__/Icon/_docs/Icon.docs.stories.tsx

@@ -124,20 +124,20 @@ export const Size: Story = {
 
 export const MeaningfulIcon: Story = {
   render: args => (
-    <Button>
-      <Icon {...args} />
-    </Button>
+    <Tag color="blue" icon={<Icon {...args} />}>
+      Meaningful icons can be helpful
+    </Tag>
   ),
-  args: { isPresentational: false, alt: "Favourite" },
+  args: { isPresentational: false, alt: "Info:", name: "info", isFilled: true },
 }
 
 export const PresentationalIcon: Story = {
   render: args => (
-    <Button>
-      <Icon {...args} /> Favourite
+    <Button icon={<Icon {...args} />} hasHiddenLabel>
+      Label
     </Button>
   ),
-  args: { isPresentational: true },
+  args: { isPresentational: true, name: "add" },
 }
 
 const IconSetButton = ({

package/src/__overlays__/Tooltip/v3/Tooltip.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, useContext, useLayoutEffect, useState } from "react"
-import { VisuallyHidden } from "react-aria"
 import {
   Tooltip as RACTooltip,
   TooltipContext,
@@ -7,6 +6,7 @@ import {
   TooltipTriggerStateContext,
   useContextProps,
 } from "react-aria-components"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { useReversedColors } from "~components/__utilities__/v3"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
 import { OverlayArrow } from "./OverlayArrow"

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx

@@ -33,6 +33,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+// TODO: update this to use the new button component v3
+
 export const OnButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>

package/dist/cjs/EmptyState/EmptyState.module.scss.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-var styles = {
-  "container": "EmptyState-module_container__-B5OU",
-  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
-  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
-  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
-  "positive": "EmptyState-module_positive__o3dXR",
-  "negative": "EmptyState-module_negative__e5ci6",
-  "action": "EmptyState-module_action__OdsgJ",
-  "neutral": "EmptyState-module_neutral__L6fBb",
-  "success": "EmptyState-module_success__y7jKP",
-  "warning": "EmptyState-module_warning__-PrRp",
-  "informative": "EmptyState-module_informative__x0GSr",
-  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
-  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
-  "textSide": "EmptyState-module_textSide__tv54w",
-  "illustration": "EmptyState-module_illustration__HyD2k",
-  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
-  "heading": "EmptyState-module_heading__y-yvC",
-  "description": "EmptyState-module_description__fsJOc"
-};
-module.exports = styles;

package/dist/cjs/GuidanceBlock/GuidanceBlock.module.scss.cjs

@@ -1,33 +0,0 @@
-'use strict';
-
-var styles = {
-  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
-  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
-  "banner": "GuidanceBlock-module_banner__FxKcd",
-  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
-  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
-  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
-  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
-  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
-  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
-  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
-  "hidden": "GuidanceBlock-module_hidden__CbgXn",
-  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
-  "cancel": "GuidanceBlock-module_cancel__UaIA-",
-  "icon": "GuidanceBlock-module_icon__y2xz8",
-  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
-  "hover": "GuidanceBlock-module_hover__7V9x1",
-  "active": "GuidanceBlock-module_active__YJaZt",
-  "default": "GuidanceBlock-module_default__Ffblg",
-  "positive": "GuidanceBlock-module_positive__yENlT",
-  "negative": "GuidanceBlock-module_negative__E-Jvh",
-  "assertive": "GuidanceBlock-module_assertive__6PZlM",
-  "informative": "GuidanceBlock-module_informative__ZUH4j",
-  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
-  "prominent": "GuidanceBlock-module_prominent__nn-r4",
-  "inline": "GuidanceBlock-module_inline__GwOWR",
-  "stacked": "GuidanceBlock-module_stacked__rDupX",
-  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
-  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
-};
-module.exports = styles;

package/dist/cjs/__actions__/Button/v3/Button.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "button": "Button-module_button__QOSYH",
-  "default": "Button-module_default__gSx3e",
-  "reversed": "Button-module_reversed__DT-Id",
-  "small": "Button-module_small__S-t5B"
-};
-module.exports = styles;

package/dist/esm/EmptyState/EmptyState.module.scss.mjs

@@ -1,21 +0,0 @@
-var styles = {
-  "container": "EmptyState-module_container__-B5OU",
-  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
-  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
-  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
-  "positive": "EmptyState-module_positive__o3dXR",
-  "negative": "EmptyState-module_negative__e5ci6",
-  "action": "EmptyState-module_action__OdsgJ",
-  "neutral": "EmptyState-module_neutral__L6fBb",
-  "success": "EmptyState-module_success__y7jKP",
-  "warning": "EmptyState-module_warning__-PrRp",
-  "informative": "EmptyState-module_informative__x0GSr",
-  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
-  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
-  "textSide": "EmptyState-module_textSide__tv54w",
-  "illustration": "EmptyState-module_illustration__HyD2k",
-  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
-  "heading": "EmptyState-module_heading__y-yvC",
-  "description": "EmptyState-module_description__fsJOc"
-};
-export { styles as default };

package/dist/esm/GuidanceBlock/GuidanceBlock.module.scss.mjs

@@ -1,31 +0,0 @@
-var styles = {
-  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
-  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
-  "banner": "GuidanceBlock-module_banner__FxKcd",
-  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
-  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
-  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
-  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
-  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
-  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
-  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
-  "hidden": "GuidanceBlock-module_hidden__CbgXn",
-  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
-  "cancel": "GuidanceBlock-module_cancel__UaIA-",
-  "icon": "GuidanceBlock-module_icon__y2xz8",
-  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
-  "hover": "GuidanceBlock-module_hover__7V9x1",
-  "active": "GuidanceBlock-module_active__YJaZt",
-  "default": "GuidanceBlock-module_default__Ffblg",
-  "positive": "GuidanceBlock-module_positive__yENlT",
-  "negative": "GuidanceBlock-module_negative__E-Jvh",
-  "assertive": "GuidanceBlock-module_assertive__6PZlM",
-  "informative": "GuidanceBlock-module_informative__ZUH4j",
-  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
-  "prominent": "GuidanceBlock-module_prominent__nn-r4",
-  "inline": "GuidanceBlock-module_inline__GwOWR",
-  "stacked": "GuidanceBlock-module_stacked__rDupX",
-  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
-  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
-};
-export { styles as default };

package/dist/esm/__actions__/Button/v3/Button.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "button": "Button-module_button__QOSYH",
-  "default": "Button-module_default__gSx3e",
-  "reversed": "Button-module_reversed__DT-Id",
-  "small": "Button-module_small__S-t5B"
-};
-export { styles as default };