@kaizen/components 1.71.0 → 1.73.0

package/dist/esm/__rc__/Tag/RemovableTag/RemovableTag.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "removableTag": "RemovableTag-module_removableTag__QcpqV"
-};
-export { styles as default };

package/dist/esm/__rc__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "removeButton": "RemoveButton-module_removeButton__Gu9DM"
-};
-export { styles as default };

package/dist/esm/__rc__/Tag/Tag/Tag.module.scss.mjs

@@ -1,12 +0,0 @@
-var styles = {
-  "tag": "Tag-module_tag__I-0Un",
-  "iconContainer": "Tag-module_iconContainer__kmy7-",
-  "gray": "Tag-module_gray__NW5JF",
-  "blue": "Tag-module_blue__YOnbG",
-  "green": "Tag-module_green__Pv-pK",
-  "yellow": "Tag-module_yellow__LLHds",
-  "orange": "Tag-module_orange__U14os",
-  "red": "Tag-module_red__rZ2NN",
-  "purple": "Tag-module_purple__Jx-Il"
-};
-export { styles as default };

package/dist/esm/__rc__/Tooltip/OverlayArrow.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "overlayArrow": "OverlayArrow-module_overlayArrow__iXF0w",
-  "reversed": "OverlayArrow-module_reversed__XZmUF"
-};
-export { styles as default };

package/dist/esm/__rc__/Tooltip/Tooltip.module.scss.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "tooltip": "Tooltip-module_tooltip__XhCpu",
-  "reversed": "Tooltip-module_reversed__EEjNF",
-  "slide": "Tooltip-module_slide__kSXdP"
-};
-export { styles as default };

package/dist/esm/__rc__/Tooltip/subcomponents/Focusable/Focusable.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__LTYGq"
-};
-export { styles as default };

package/dist/types/__utilities__/v3.d.ts

@@ -1 +0,0 @@
-export * from './ReversedColors/v3';

package/src/Button/Button/_docs/v2/Button.mdx

@@ -1,98 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
-import * as ButtonStories from './Button.stories'
-
-<Meta of={ButtonStories} />
-
-# Button (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/Button"
-  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
-
-/>
-
-<KAIOInstallation exportNames="Button" family="actions" version="2" />
-
-## Overview
-
-Buttons perform actions.
-If it needs to navigate somewhere and can be opened in a new tab, use a link instead.
-
-<Canvas of={ButtonStories.Playground} />
-<Controls of={ButtonStories.Playground} />
-
-## API
-
-### Variants
-
-`Default`, `Primary`, `Destructive`, `Secondary`
-If no `variant` is specified, a `Default` button will be rendered.
-
-<Canvas of={ButtonStories.Variants} />
-
-#### Reversed
-
-<Canvas of={ButtonStories.Reversed} />
-
-### Disabled
-
-A disabled Button prevents user interaction. It doesn't appear in the tab order, can't receive focus, and may not read aloud by a screenreader.
-
-<Canvas of={ButtonStories.Disabled} />
-
-### Icon
-
-Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
-
-<Canvas of={ButtonStories.IconStory} />
-
-#### Icon position
-
-Change the icon placement with the `iconPosition` prop.
-Default position is `start`.
-
-<Canvas of={ButtonStories.IconPosition} />
-
-### Badge
-
-You can display a `Badge` component within the button using the `badge` prop.
-
-<Canvas of={ButtonStories.Badge} />
-
-### Full width
-
-Buttons can be stretched to fill the full width of their container.
-
-<Canvas of={ButtonStories.FullWidth} />
-
-### Working
-
-The `working` prop should be used in situations where a button action triggers a change in UI state but needs to wait for a server response, such as submitting a form.
-
-In conjuction use the `workingLabel` prop to update the label of the button when the working state is triggered.
-
-Alternatively use the `workingLabelHidden` prop to hide the button label all together.
-
-<Canvas of={ButtonStories.Working} />
-
-### Controlling the working state
-
-Here is an example of controlling whether the button is 'working' or not, using state.
-
-<Canvas of={ButtonStories.ResolveWorking} />
-
-### Loading
-
-Use the <LinkTo pageId="components-loading-states-loadinginput">LoadingInput</LinkTo> component for button placeholders.
-
-<Canvas of={ButtonStories.Loading} />
-
-### Native `form` attribute
-
-Button extends native HTML "form" attributes for `button`.
-
-You can use this to submit a `form` using `Button` with a matching form id.
-
-<Canvas of={ButtonStories.NativeFormButton} />

package/src/Button/Button/_docs/v2/Button.stories.tsx

@@ -1,162 +0,0 @@
-import React, { useState } from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { LoadingInput } from '~components/Loading'
-import { TextField } from '~components/TextField'
-import { Icon } from '~components/__rc__/Icon'
-import { Button } from '../../index'
-
-const meta = {
-  title: 'Components/Button/Button (v2)',
-  component: Button,
-  args: {
-    label: 'Label',
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-  },
-}
-
-export const Variants: Story = {
-  render: ({ reversed }) => (
-    <>
-      <Button label="Default" reversed={reversed} />
-      <Button label="Primary" primary reversed={reversed} />
-      <Button label="Destructive" destructive reversed={reversed} />
-      <Button label="Secondary" secondary reversed={reversed} />
-      {!reversed && <Button label="Secondary Destructive" secondary destructive />}
-    </>
-  ),
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: { controls: { disable: true } },
-}
-
-export const Reversed: Story = {
-  ...Variants,
-  args: { reversed: true },
-  parameters: {
-    ...Variants.parameters,
-    backgrounds: { default: 'Purple 700' },
-  },
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-}
-
-const sourceCodeIcon = `
-import { Button, ArrowForwardIcon } from "@kaizen/components"
-
-<Button label="Label" icon={<Icon name="arrow_forward" isPresentational shouldMirrorInRTL />} />
-`
-
-export const IconStory: Story = {
-  name: 'Icon',
-  args: {
-    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
-  },
-  parameters: {
-    docs: { source: { code: sourceCodeIcon } },
-  },
-}
-
-export const IconPosition: Story = {
-  args: {
-    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
-    iconPosition: 'end',
-  },
-}
-
-export const Badge: Story = {
-  args: {
-    badge: { text: '3', variant: 'active' },
-    secondary: true,
-  },
-}
-
-export const FullWidth: Story = {
-  args: { fullWidth: true },
-}
-
-export const Working: Story = {
-  render: () => (
-    <>
-      <Button label="Label" working workingLabel="Submitting" />
-      <Button label="Label" working workingLabel="Submitting" workingLabelHidden />
-    </>
-  ),
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: { controls: { disable: true } },
-}
-
-export const Loading: Story = {
-  render: () => <LoadingInput isAnimated width={13} />,
-  parameters: { controls: { disable: true } },
-}
-
-export const NativeFormButton: Story = {
-  render: () => (
-    <>
-      <form className="mb-6" id="unique-form-id">
-        <TextField labelText="Sample text field" defaultValue="content" />
-      </form>
-      <Button
-        label="Submit"
-        type="submit"
-        form="unique-form-id"
-        formTarget="_blank"
-        formAction="/"
-        formMethod="get"
-        formEncType="text/plain"
-        formNoValidate={false}
-      />
-    </>
-  ),
-  parameters: { controls: { disable: true } },
-}
-
-export const ResolveWorking: Story = {
-  render: () => {
-    const [state, setState] = useState<'Ready' | 'Working' | 'Completed'>('Ready')
-    const handleClick = (): void => {
-      if (state === 'Ready') {
-        setState('Working')
-        setTimeout(() => setState('Completed'), 3000)
-      } else {
-        setState('Ready')
-      }
-    }
-
-    return (
-      <Button
-        label={state}
-        working={state === 'Working'}
-        workingLabel="Button is doing some work"
-        workingLabelHidden
-        onClick={handleClick}
-      />
-    )
-  },
-}

package/src/Button/IconButton/_docs/v2/IconButton.mdx

@@ -1,24 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
-import * as IconButtonStories from './IconButton.stories'
-
-<Meta of={IconButtonStories} />
-
-# IconButton (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/IconButton"
-  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=5-539&mode=design&t=HKGcnRVyIDipQ2OI-0"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
-
-/>
-
-<KAIOInstallation exportNames="IconButton" family="actions" version="2" />
-
-## Overview
-
-A button with an icon and no visible text (a label is required for accessibility).
-Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
-
-<Canvas of={IconButtonStories.Playground} />
-<Controls of={IconButtonStories.Playground} />

package/src/Button/IconButton/_docs/v2/IconButton.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
-import { IconButton } from '../../index'
-
-const meta = {
-  title: 'Components/IconButton/IconButton (v2)',
-  component: IconButton,
-  argTypes: {
-    icon: {
-      options: ['MeatballsIcon', 'AddIcon'],
-      control: { type: 'radio' },
-      mapping: {
-        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
-        AddIcon: <Icon name="add" isPresentational />,
-      },
-    },
-  },
-  args: {
-    label: 'icon button',
-    icon: <Icon name="more_horiz" isPresentational />,
-  },
-} satisfies Meta<typeof IconButton>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-  },
-}

package/src/Menu/_docs/v2/Menu.mdx

@@ -1,31 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import * as MenuStories from './Menu.stories'
-
-<Meta of={MenuStories} />
-
-# Menu (v2)
-
-<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"
-
-/>
-
-<KAIOInstallation
-  exportNames={['Menu', 'MenuDropdown', 'MenuList', 'MenuItem']}
-  family="actions"
-  version="2"
-/>
-
-## 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} />
-
-## API
-
-Coming soon.

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

@@ -1,54 +0,0 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
-import { Menu, MenuHeading, MenuItem, MenuList } from '../../index'
-import * as MenuV1Stories from '../Menu.stories'
-
-const meta = {
-  title: 'Components/Menu/Menu (v2)',
-  component: Menu,
-  args: {
-    button: (
-      <Button
-        label="Actions"
-        icon={<Icon name="keyboard_arrow_down" isPresentational />}
-        iconPosition="end"
-      />
-    ),
-    children: (
-      <MenuList>
-        <MenuItem
-          onClick={() => {
-            alert('Duplicated!')
-          }}
-          icon={<Icon name="content_copy" isPresentational isFilled />}
-          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/Tooltip/_docs/v2/Tooltip.mdx

@@ -1,130 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import * as TooltipStories from './Tooltip.stories'
-
-<Meta of={TooltipStories} />
-
-# Tooltip (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
-  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
-/>
-
-<KAIOInstallation exportNames="Tooltip" family="overlays" version="2" />
-
-## Overview
-
-Adds a popover that will show on hover or focus of the child element, with simple text content.
-
-<Canvas of={TooltipStories.Playground} />
-<Controls of={TooltipStories.Playground} />
-
-## Accessibility
-
-This component wasn't built with accessibility in mind, as a result it's quite easy to implement a tooltip in a non-accessible way. A rethink and rewrite is likely for the future.
-
-There's two major accessibility concerns here:
-
-- Keyboard only users
-- Screen reader (or similar assistive tech) users
-
-Failure to meet either of these requirements will result in a critical issue where some people are completely unable to access the information.
-
-### Keyboard accessibility
-
-For keyboard accessibility, you need to make sure the child you are passing is a focusable element. It's best to keep the contents of this component simple. E.g. just a button:
-
-```jsx
-<Tooltip text="Opens in a new tab">
-  <Button href="/path" label="Go somewhere" />
-</Tooltip>
-```
-
-### Screen reader accessibility
-
-Though it won't guarantee the best screen reader accessibility, a good start is to make sure your _direct_ children element is semantic (not a div or span).
-
-When your direct child element is semantic, this component will add an `aria-describedby` to that element. E.g. for the link example above, the resulting mark up will be:
-
-```html
-<a href="path" aria-describedby="tooltip">Go somewhere</a>
-<!-- (in a portal) -->
-<div id="tooltip-id">Opens in a new tab</div>
-```
-
-Resulting in a screen reader announcement like:
-`Go somewhere, link, Opens in a new tab`
-
-Again, try to keep the contents of your children as simple as possible, ideally only a single natively focusable element like the example above.
-
-When your direct child is not semantic, you will get a console warning like this:
-`<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info.`
-
-### Tooltips, Kaizen components and avoiding common pitfalls
-
-While technically any Kaizen component can be wrapped by a `Tooltip`, as called out previously, only those with [accessible roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) like `button`, `link` or `heading`, will be readable to assistive technologies.
-
-We've created some guidance below with the most common cases for `Tooltip` and how to ensure the additional context is read to the user.
-
-#### Button and IconButton
-
-<Canvas of={TooltipStories.ButtonsWithTooltip} />
-
-While Kaizen buttons are compatible with `Tooltip`, caution is advised when using the custom `component` render prop.
-
-```JSX
-  <Tooltip text="Contact customer support.">
-    <Button
-      {...buttonProps}
-      component={() => (
-        // The most immediate child is a `div`, which has no `role`.
-        <div>
-          <button type="button">
-            Help
-          </button>
-        </div>
-      )}
-    />
-  </Tooltip>
-```
-
-In the example above, the `div` in now the direct descendant of `Tooltip`, therefore will no longer be accessible to assistive technologies.
-
-#### ButtonGroup
-
-The `Tooltip` component must wrap the children of `ButtonGroup` to be accessible to screen readers.
-
-<Canvas of={TooltipStories.ButtonGroupWithTooltip} />
-
-#### Table headers and tooltips
-
-While the composable `Tooltip` is not exposed in the Kaizen `Table`, it is important to call out that the `tooltipInfo` prop in `TableHeaderRowCell` must also have an `onClick` or `href` to be announced to assistive technologies.
-
-<Canvas of={TooltipStories.TableHeadersWithTooltips} />
-
-Without either of these, the `Tooltip` content will not be readable to keyboard users or assistive technologies.
-
-#### Tags
-
-Seen in the example below simple `Tag`s with plain text as `children` will not accessible to keyboard users or assistive technologies as it's direct descendant is a `div` with no semantic `role`.
-
-<Canvas of={TooltipStories.TagWithHoverOnlyTooltip} />
-
-While `Tooltip` should be avoided if there are no interactive states within the `Tag`, internal elements like buttons or links can be wrapped in a `Tooltip` component to add necessary context.
-
-<Canvas of={TooltipStories.TagWithTooltip} />
-
-The [future Tag](?path=/docs/components-tag-future--docs#overview) offers a composable solution for those needing to add more context to an interactive `Tag`.
-
-#### Form components and tooltips
-
-While a `Tooltip` can seem like a natural pairing when space is a commodity, form elements still require a concise label that is _ideally_ visible (See MDN's guide on [Tooltip best practices](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role#best_practices)).
-
-<Canvas of={TooltipStories.CheckboxFieldTooltip} />
-
-In the example above, the `Tooltip` content `"Select all users"` is accessible to screen readers via keyboard navigation, however will not be announced when the input receives focus. This a limitation of `CheckboxField` and form components where the immediate `children` of `Tooltip` is a wrapper.
-
-<Canvas of={TooltipStories.CheckboxFieldWithDescriptionTooltip} />
-
-In these instances, `aria-describedby` can be leveraged to provide a description to the input.

package/src/Tooltip/_docs/v2/Tooltip.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Tooltip } from '../../index'
-import * as TooltipV1Stories from '../Tooltip.stories'
-
-const meta = {
-  title: 'Components/Tooltip/Tooltip (v2)',
-  component: Tooltip,
-  args: {
-    text: 'Example tooltip text.',
-  },
-  decorators: [
-    (Story) => (
-      <div className="flex mt-[60px] gap-12">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Tooltip>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = TooltipV1Stories.Playground
-
-export const OverflowScroll: Story = TooltipV1Stories.OverflowScroll
-
-export const ButtonsWithTooltip: Story = TooltipV1Stories.ButtonsWithTooltip
-
-export const ButtonGroupWithTooltip: Story = TooltipV1Stories.ButtonsWithTooltip
-
-export const TableHeadersWithTooltips: Story = TooltipV1Stories.TableHeadersWithTooltips
-
-export const TagWithHoverOnlyTooltip: Story = TooltipV1Stories.TagWithHoverOnlyTooltip
-
-export const TagWithTooltip: Story = TooltipV1Stories.TagWithTooltip
-
-export const TagWithCheckboxField: Story = TooltipV1Stories.TagWithCheckboxField
-
-export const CheckboxFieldTooltip: Story = TooltipV1Stories.CheckboxFieldTooltip
-
-export const CheckboxFieldWithDescriptionTooltip: Story =
-  TooltipV1Stories.CheckboxFieldWithDescriptionTooltip

package/src/__rc__/index.ts

@@ -1,7 +0,0 @@
-export * from './Button'
-export * from './Icon'
-export * from './Menu'
-export * from './Select'
-export * from './Tag'
-export * from './Tabs'
-export * from './Tooltip'

package/src/__utilities__/v3.ts

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