@kaizen/components 0.0.0-canary-package-bundler-v2-20241113055116 → 0.0.0-canary-link-button-wip-canary-20241121010628

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/__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 };

package/src/EmptyState/EmptyState.module.scss

@@ -1,177 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "./mixins";
-
-.container {
-  --empty-state-border-width: var(--border-width-1);
-
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  padding: calc(2% - var(--empty-state-border-width))
-    calc(var(--spacing-24) - var(--empty-state-border-width));
-  color: $color-purple-800;
-  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
-  border-radius: var(--border-solid-border-radius);
-  background-color: var(--empty-state-background-color);
-
-  @include small {
-    flex-direction: column;
-    align-items: center;
-    padding-block: calc(var(--spacing-24) - var(--empty-state-border-width));
-  }
-
-  &.straightCorners {
-    border-radius: 0;
-  }
-
-  // These class names must match the possible values of the component's layoutContext prop
-  &.sidebarAndContent {
-    @include large-sidebar-and-content {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-
-  &.contentOnly {
-    @include large-content-only {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-}
-
-/** @deprecated */
-.positive {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.negative,
-.action {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.neutral {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
-
-/** end @deprecated */
-.success {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.warning {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.informative {
-  --empty-state-border-color: var(--color-blue-400);
-  --empty-state-background-color: var(--color-blue-100);
-}
-
-.expert-advice {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
-
-.illustrationSide,
-.textSide {
-  display: inline-block;
-}
-
-.illustrationSide {
-  min-width: 224px;
-  flex-grow: 0;
-  flex-shrink: 1;
-  margin-bottom: $spacing-md;
-
-  @include small {
-    width: 224px;
-  }
-
-  @include medium {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0;
-    min-width: 40%;
-    max-width: 50%;
-    flex-grow: 1;
-    box-sizing: border-box;
-    padding-inline-end: $spacing-md;
-  }
-
-  .sidebarAndContent & {
-    @include large-sidebar-and-content {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-
-  .contentOnly & {
-    @include large-content-only {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-}
-
-.illustration,
-.illustrationSide video {
-  max-width: 100%;
-  max-height: 366px;
-  width: auto;
-
-  // Fixes for IE11 Flexbox issues
-  min-height: 196px;
-
-  @include small {
-    max-height: 196px;
-  }
-}
-
-.textSide {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  align-items: center;
-  -webkit-font-smoothing: antialiased;
-
-  @include medium {
-    flex-basis: 50%;
-    flex-grow: 0;
-  }
-}
-
-.textSideInner {
-  flex-grow: 0;
-  height: auto;
-  margin: 0 $spacing-sm;
-
-  @include small {
-    margin-bottom: 0;
-  }
-
-  @include medium {
-    max-width: 426px;
-  }
-}
-
-.heading {
-  margin-bottom: $spacing-md;
-
-  @media (max-width: (375px)) {
-    @include typography-heading-3-sm;
-  }
-}
-
-.description {
-  margin-bottom: $spacing-md;
-}

package/src/EmptyState/EmptyState.spec.tsx

@@ -1,48 +0,0 @@
-import React from "react"
-import { cleanup, render } from "@testing-library/react"
-import { EmptyState, EmptyStateProps } from "./EmptyState"
-
-vi.mock("~components/Illustration", () => ({
-  EmptyStatesPositive: (): JSX.Element => (
-    <div>EmptyStatesPositive_Component</div>
-  ),
-  EmptyStatesNeutral: (): JSX.Element => (
-    <div>EmptyStatesNeutral_Component</div>
-  ),
-  EmptyStatesNegative: (): JSX.Element => (
-    <div>EmptyStatesNegative_Component</div>
-  ),
-  EmptyStatesInformative: (): JSX.Element => (
-    <div>EmptyStatesInformative_Component</div>
-  ),
-  EmptyStatesAction: (): JSX.Element => <div>EmptyStatesAction_Component</div>,
-}))
-
-describe("<EmptyState />", () => {
-  afterEach(cleanup)
-
-  const defaultProps: EmptyStateProps = {
-    id: "someId",
-    headingProps: {
-      children: "Some heading",
-      variant: "heading-1",
-    },
-    bodyText: "Lorem ipsum dolor...",
-  }
-
-  it("renders an `id` attribute", () => {
-    const { container } = render(<EmptyState {...defaultProps} />)
-
-    expect(container.querySelector("#someId")).toBeTruthy()
-  })
-
-  it("renders given children", () => {
-    const { getByText } = render(
-      <EmptyState {...defaultProps}>
-        <h1>Child Heading</h1>
-      </EmptyState>
-    )
-
-    expect(getByText("Child Heading")).toBeTruthy()
-  })
-})

package/src/EmptyState/_mixins.scss

@@ -1,44 +0,0 @@
-@import "~@kaizen/design-tokens/sass/layout";
-
-$small: 300px;
-$medium: $layout-breakpoints-medium;
-$large: $layout-breakpoints-large;
-
-// comes from ca-layout-padding x2 which is no longer used
-$side-padding: 48px;
-$sidebarWidth: 240px;
-$sidebarWithPadding: $sidebarWidth + $side-padding;
-
-$typography-heading-3-font-size-small: 1.25rem;
-$typography-heading-3-font-weight-small: 700;
-$typography-heading-3-line-height-small: 1.5rem;
-
-@mixin large-sidebar-and-content {
-  @media (min-width: ($large + $sidebarWithPadding + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin large-content-only {
-  @media (min-width: ($large + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin medium {
-  @media (min-width: ($medium + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin small {
-  @media (max-width: ($medium + $side-padding - 1px)) {
-    @content;
-  }
-}
-
-@mixin typography-heading-3-sm {
-  font-size: $typography-heading-3-font-size-small;
-  line-height: $typography-heading-3-line-height-small;
-  font-weight: $typography-heading-3-font-weight-small;
-}

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

@@ -1,104 +0,0 @@
-.button {
-  --button-min-height-width: var(--spacing-48);
-  --button-padding-x: calc(
-    #{var(--spacing-12)} - #{var(--border-solid-border-width)}
-  );
-  --button-padding-y: calc(
-    #{var(--spacing-8)} - #{var(--border-solid-border-width)}
-  );
-  --button-icon-size: var(--spacing-24);
-
-  // RESET
-  appearance: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  border: none;
-  // RESET
-  border: var(--border-solid-border-width) var(--border-solid-border-style);
-  border-radius: var(--border-solid-border-radius);
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: left;
-  gap: var(--spacing-8);
-  font-family: var(--typography-button-primary-font-family);
-  font-weight: var(--typography-button-primary-font-weight);
-  font-size: var(--typography-button-primary-font-size);
-  line-height: var(--typography-button-primary-line-height);
-  min-height: var(--button-min-height-width);
-  min-width: var(--button-min-height-width);
-  outline: none;
-  position: relative;
-  padding: var(--button-padding-y) var(--button-padding-x);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &[data-focus-visible]::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-color: var(--color-blue-500);
-    border-radius: var(--border-focus-ring-border-radius);
-    border-width: var(--border-focus-ring-border-width);
-    border-style: var(--border-focus-ring-border-style);
-    inset: calc(-1 * ((#{var(--border-focus-ring-border-width)} * 2) + 1px));
-  }
-
-  svg {
-    height: var(--button-icon-size);
-    width: var(--button-icon-size);
-  }
-}
-
-.default {
-  border-color: var(--color-gray-500);
-  color: var(--color-purple-800);
-
-  &[data-hovered],
-  &[data-focus-visible],
-  &[data-pressed] {
-    background-color: var(--color-gray-200);
-    border-color: var(--color-purple-800);
-  }
-
-  &[data-disabled] {
-    opacity: 0.3;
-  }
-
-  &.reversed {
-    background-color: transparent;
-    border-color: rgba(var(--color-white-rgb), 0.65);
-    color: var(--color-white);
-
-    &[data-hovered],
-    &[data-focus-visible] {
-      background-color: rgba(var(--color-white-rgb), 0.1);
-      border-color: var(--color-white);
-    }
-
-    &[data-focus-visible]::after {
-      border-color: var(--color-blue-300);
-    }
-
-    &[data-disabled]::after {
-      border-color: var(--color-gray-400);
-    }
-  }
-}
-
-.small {
-  // spacing-40 does not currently exist. Holding on adding this until the button rfc has been signed off
-  --button-min-height-width: 2.5rem;
-  --button-padding-x: calc(
-    #{var(--spacing-8)} - #{var(--border-solid-border-width)}
-  );
-  --button-padding-y: calc(
-    #{var(--spacing-8)} - #{var(--border-solid-border-width)}
-  );
-  --button-icon-size: var(--spacing-16);
-
-  gap: var(--spacing-8);
-}