@kaizen/components 1.69.1 → 1.70.0

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

@@ -0,0 +1,130 @@
+import React from 'react'
+import { type Meta } from '@storybook/react'
+import { within } from '@storybook/test'
+import { Icon } from '~components/__rc__/Icon'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
+import { LinkButton, type LinkButtonProps } from '../index'
+
+export default {
+  title: 'Components/LinkButton',
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const variants = ['primary', 'secondary', 'tertiary'] satisfies LinkButtonProps['variant'][]
+const sizes = ['small', 'medium', 'large'] satisfies LinkButtonProps['size'][]
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet
+        title="Button"
+        headers={['Base', 'Icon start', 'Icon end', 'hasHiddenLabel', 'isDisabled']}
+        isReversed={isReversed}
+      >
+        {variants.map((variant) =>
+          sizes.map((size) => (
+            <StickerSheet.Row
+              key={size + variant}
+              isReversed={isReversed}
+              header={`${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>
+          )),
+        )}
+      </StickerSheet>
+      <StickerSheet
+        title="Pseudo states"
+        headers={['isHovered', 'isFocusVisible', 'isPressed']}
+        isReversed={isReversed}
+      >
+        {variants.map((variant) => (
+          <StickerSheet.Row key={variant} isReversed={isReversed} header={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>
+    </>
+  ),
+  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/LinkButton/index.ts

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

package/src/__rc__/Button/Button.module.css

@@ -114,6 +114,12 @@
     --button-bg-color: var(--color-gray-300);
     --button-border-color: var(--color-black);
   }
+
+  &.isDisabled {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-gray-400);
+  }
 }
 
 .tertiary {
@@ -121,19 +127,31 @@
   --button-border-color: transparent;
   --button-text-color: var(--color-purple-800);
 
+  &[data-hovered],
+  &[data-pressed],
+  &[data-pending] {
+    --button-text-color: var(--color-blue-500);
+  }
+
   &[data-hovered] {
-    --button-bg-color: var(--color-gray-200);
-    --button-border-color: var(--color-gray-200);
+    --button-bg-color: var(--color-blue-200);
+    --button-border-color: var(--color-blue-200);
   }
 
   &[data-pressed] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
   }
 
   &[data-pending] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
+  }
+
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: var(--color-gray-400);
   }
 }
 
@@ -151,19 +169,25 @@
   --button-text-color: var(--color-purple-800);
 
   &[data-hovered] {
-    --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-white);
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
   }
 
   &[data-pressed] {
-    --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-white);
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
   }
 
   &[data-pending] {
     --button-bg-color: var(--color-white);
     --button-border-color: var(--color-white);
   }
+
+  &.isDisabled {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-purple-800-rgb), 0.7);
+  }
 }
 
 .secondaryReversed {
@@ -185,6 +209,12 @@
     --button-bg-color: rgba(var(--color-white-rgb), 0.1);
     --button-border-color: var(--color-white);
   }
+
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: rgba(var(--color-white), 0.2);
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
+  }
 }
 
 .tertiaryReversed {
@@ -206,16 +236,11 @@
     --button-bg-color: rgba(var(--color-white-rgb), 0.1);
     --button-border-color: transparent;
   }
-}
 
-.isDisabled {
-  --button-bg-color: var(--color-gray-400);
-  --button-border-color: var(--color-gray-400);
-  --button-text-color: var(--color-white);
-
-  &[data-hovered] {
-    --button-bg-color: var(--color-gray-400);
-    --button-border-color: var(--color-gray-400);
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
   }
 }
 

package/src/__rc__/Button/Button.tsx

@@ -6,9 +6,8 @@ import { ButtonContent, PendingContent } from './subcomponents'
 import { type ButtonSizes, type ButtonVariants, type PendingButtonProps } from './types'
 import styles from './Button.module.css'
 
-type ButtonBaseProps = Omit<RACButtonProps, 'children'> & {
-  /** Used as the label for the button. */
-  children: RACButtonProps['children']
+/** Shared UI props between Button and LinkButton */
+export type ButtonUIProps = {
   /** Visually hides the Button's child content used as the label and the `pendingLabel`. Use for icon-only `Button`. @default "false" */
   hasHiddenLabel?: boolean
   /** The visual style of the button.
@@ -30,7 +29,12 @@ type ButtonBaseProps = Omit<RACButtonProps, 'children'> & {
   isReversed?: boolean
 }
 
-export type ButtonProps = ButtonBaseProps & PendingButtonProps
+export type ButtonProps = ButtonUIProps &
+  PendingButtonProps &
+  Omit<RACButtonProps, 'children'> & {
+    /** Used as the label for the button. */
+    children: RACButtonProps['children']
+  }
 
 export const Button = forwardRef(
   (

package/src/__rc__/Button/_docs/Button--api-specification.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls, ArgTypes, DocsStory } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
 import * as exampleStories from './Button.docs.stories'
 import * as specStories from './Button.spec.stories'
 
@@ -15,11 +15,11 @@ Updated Nov 19, 2024
   designGuidelines="/?path=/docs/actions-button-button-v3-usage-guidelines--docs"
 />
 
-<KAIOInstallation exportNames={['Button']} family="actions" version="3" />
+<KAIOInstallation exportNames={'Button'} family="actions" version="3" />
 
 ## Overview
 
-`Button` allows users to perform an action. If the component needs to navigate somewhere and can be opened in a new tab, use a [link instead](#buttons-and-links).
+`Button` allows users to perform an action. If the component needs to navigate somewhere and can be opened in a new tab, use a <LinkTo pageId="components-linkbutton-api-specification--docs">LinkButton</LinkTo> instead.
 
 The following example and table showcases the essential props that enable the core functionality of `Button`. For the remaining suite of API options refer to [this section](#additional-api-options).
 
@@ -50,7 +50,7 @@ The following example and table showcases the essential props that enable the co
 
 The `Button` component does not support the `href` property or have any inbuilt routing support. This component is intended as a semantic button and should only be used to perform actions on a page. We advise against passing in an `anchor` tag as a child of the `Button` as this can lead to accessibility issues.
 
-A `LinkButton` component will be provided in the future to handle routing and navigation use cases. In the meantime, we recommend staying on [Button V1](/docs/actions-button-button-v1--docs) if an `href` is needed.
+A separate <LinkTo pageId="components-linkbutton-api-specification--docs">LinkButton</LinkTo> component has been created to handle page navigation and client side routing.
 
 ## API
 
@@ -93,7 +93,7 @@ One key change to the `Button`&apos;s API is the shift from `onClick` to React A
 Functionally this does not change the way we pass actions into `Button`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
 
 ```tsx
-<Button label="Submit" onClick={(e) => sumbit(e)} />
+<Button label="Submit" onClick={(e) => submit(e)} />
 ```
 
 Can safely be replaced with the following:

package/src/__rc__/Button/_docs/Button--usage-guidelines.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, Installation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
 import * as Button from './Button.docs.stories'
 
 <Meta title="Components/Button/Button (v3)/Usage Guidelines" />
@@ -14,10 +14,7 @@ Updated July 12, 2024
   apiSpecification="/?path=/docs/actions-button-button-v3-api-specification--docs"
 />
 
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Button } from "@kaizen/components/v3/actions"'
-/>
+<KAIOInstallation exportNames={['Button']} family="actions" version="3" />
 
 ## Overview
 

package/src/index.ts

@@ -30,6 +30,7 @@ export * from './KaizenProvider'
 export * from './Label'
 export * from './LabelledMessage'
 export * from './LikertScaleLegacy'
+export * from './LinkButton'
 export * from './Loading'
 export * from './Menu'
 export * from './Modal'
@@ -61,5 +62,3 @@ export * from './utils'
 export * from './VisuallyHidden'
 export * from './Well'
 export * from './Workflow'
-export * from './Menu'
-export * from './Button'