@kaizen/components 1.69.2 → 1.70.1

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/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -121,10 +121,10 @@
 
 .informative {
   background: $color-blue-100;
-  border-color: var(--color-blue-400);
+  border-color: var(--color-blue-500);
   color: $color-purple-800;
 
-  --icon-color: var(--color-blue-400);
+  --icon-color: var(--color-blue-500);
 }
 
 .cautionary {

package/src/Tag/_docs/Tag.mdx

@@ -17,7 +17,7 @@ import * as TagStories from './Tag.stories'
 <Unstyled>
   <InlineNotification type="cautionary" persistent>
     {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`}
+    Import Tag from "@kaizen/components/future" for the latest version and view our migration guide in the Future folder`}
   </InlineNotification>
 </Unstyled>
 

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/__rc__/Menu/_docs/{Menu.mdx → Menu--usage-guidelines.mdx}

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, Installation, DosAndDonts, DoOrDont } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as MenuDocsStories from './Menu.docs.stories'
 import * as MenuStories from './Menu.stories'
 
@@ -16,9 +16,10 @@ Updated July 6, 2024
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
 />
 
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { MenuTrigger, Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } from "@kaizen/components/v3/actions"'
+<KAIOInstallation
+  exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
+  family="actions"
+  version="3"
 />
 
 ## Overview
@@ -55,12 +56,12 @@ A menu displays a list of actions in a popover, toggled opened with a button.
 - Menu items may be organised into sections, with a heading for each section.
 - The menu trigger button, which may be any variation of a button.
 
-  ### When to use
+### When to use
 
 - When you have a group of related actions for a page or item on the page.
 - The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
 
-  ### When not to use
+### When not to use
 
 - When you want to persist a user selection.
   - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
@@ -69,6 +70,8 @@ A menu displays a list of actions in a popover, toggled opened with a button.
   - It's recommended that you avoid this because of the complexity it adds for accessibility.
 - Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
 
+### Specs
+
 #### Do use a menu for an overflow of actions
 
 Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.

package/src/__rc__/Tooltip/_docs/Tooltip.mdx

@@ -87,7 +87,7 @@ Tooltips should never stop a user (or be a gate) from completing a task or perfo
 
 #### Do be concise
 
-Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
+Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don't use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
 
 <DosAndDonts>
   <DoOrDont story={TooltipStories.DoConcise} />
@@ -107,7 +107,7 @@ Good tooltips contain concise and helpful information, keep it short. If you nee
 ### Trigger
 
 - A tooltip trigger needs to be discoverable:
-  - E.g. something like an icon to suggest there’s a tooltip.
+  - E.g. something like an icon to suggest there&apos;s a tooltip.
   - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
 - A tooltip should be shown and accessible on hover, click or on focus events.
 

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'