@kaizen/components 1.79.6 → 1.79.8

package/src/__alpha__/SingleSelect/SingleSelect.tsx

@@ -0,0 +1,27 @@
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react'
+import { Popover as RACPopover, Select as RACSelect } from 'react-aria-components'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { List, ListItem, ListSection, Trigger } from './subcomponents'
+import styles from './SingleSelect.module.css'
+
+export type SingleSelectProps = {
+  children?: React.ReactNode
+} & OverrideClassName<HTMLAttributes<Element>>
+
+export const SingleSelect = ({
+  classNameOverride,
+  children,
+  ...restProps
+}: PropsWithChildren<SingleSelectProps>): JSX.Element => {
+  return (
+    <RACSelect className={classNameOverride} placeholder="" {...restProps}>
+      <Trigger />
+      <RACPopover className={styles.popover}>{children}</RACPopover>
+    </RACSelect>
+  )
+}
+
+SingleSelect.displayName = 'SingleSelect'
+SingleSelect.List = List
+SingleSelect.ListItem = ListItem
+SingleSelect.ListSection = ListSection

package/src/__alpha__/SingleSelect/_docs/SingleSelect.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, AlphaNotice } from '~storybook/components'
+import * as SingleSelectStories from './SingleSelect.stories'
+
+<Meta of={SingleSelectStories} />
+
+# SingleSelect
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__alpha__/SingleSelect"
+  figma=""
+  designGuidelines=""
+/>
+
+<AlphaNotice />
+
+<KAIOInstallation exportNames="SingleSelect" isAlpha />
+
+## Overview
+
+{/* @todo: Update summary. */}
+Brief summary of the component here.
+
+<Canvas of={SingleSelectStories.Playground} />
+<Controls of={SingleSelectStories.Playground} />
+
+## API

package/src/__alpha__/SingleSelect/_docs/SingleSelect.stickersheet.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { type Meta } from '@storybook/react'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
+import { SingleSelect } from '../index'
+import { groupedMockItems, singleMockItems } from './mockData'
+
+export default {
+  title: 'Components/SingleSelect/SingleSelect (alpha)',
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => {
+    return (
+      <StickerSheet isReversed={isReversed} title="SingleSelect" headers={['Items', 'Grouped']}>
+        <StickerSheet.Row>
+          <SingleSelect>
+            <SingleSelect.List>
+              {singleMockItems.map((item) => (
+                <SingleSelect.ListItem key={item.value} value={{ value: item.value }}>
+                  {item.label}
+                </SingleSelect.ListItem>
+              ))}
+            </SingleSelect.List>
+          </SingleSelect>
+
+          <SingleSelect>
+            <SingleSelect.List>
+              {groupedMockItems.map((section) => (
+                <SingleSelect.ListSection name={section.label} key={section.label}>
+                  {section.options.map((item) => (
+                    <SingleSelect.ListItem key={item.value} value={{ value: item.value }}>
+                      {item.label}
+                    </SingleSelect.ListItem>
+                  ))}
+                </SingleSelect.ListSection>
+              ))}
+            </SingleSelect.List>
+          </SingleSelect>
+        </StickerSheet.Row>
+      </StickerSheet>
+    )
+  },
+  /** @note: Only required if you have pseudo states, otherwise this can be removed */
+  parameters: {
+    /** @todo: Remove any inapplicable pseudo states */
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      active: '[data-sb-pseudo-styles="active"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (Default)',
+}
+
+export const StickerSheetReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (Reversed)',
+  parameters: {
+    /** @note: Only required if template has parameters, otherwise this spread can be removed */
+    ...StickerSheetTemplate.parameters,
+    backgrounds: { default: 'Purple 700' },
+  },
+  args: { isReversed: true },
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (RTL)',
+  parameters: {
+    /** @note: Only required if template has parameters, otherwise this spread can be removed */
+    ...StickerSheetTemplate.parameters,
+    textDirection: 'rtl',
+  },
+}

package/src/__alpha__/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -0,0 +1,23 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { SingleSelect } from '../index'
+
+const meta = {
+  title: 'Components/SingleSelect/SingleSelect (alpha)',
+  component: SingleSelect,
+  args: {},
+} satisfies Meta<typeof SingleSelect>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+}

package/src/__alpha__/SingleSelect/_docs/mockData.ts

@@ -0,0 +1,92 @@
+export const singleMockItems = [
+  { label: 'Short black', value: 'short-black' },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Flat white', value: 'flat-white' },
+  { label: 'Mocha', value: 'mocha' },
+  { label: 'Cappuccino', value: 'cappuccino' },
+  { label: 'Magic', value: 'magic' },
+]
+
+export const groupedMockItems = [
+  {
+    label: 'Colours',
+    options: [
+      { label: 'Blue', value: 'blue' },
+      { label: 'Red', value: 'red' },
+      { label: 'Green', value: 'green' },
+    ],
+  },
+  {
+    label: 'Flavours',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Chocolate', value: 'chocolate' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+  },
+]
+
+export const mixedMockItemsDisabled = [
+  { label: 'Short black', value: 'short-black', disabled: true },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew', disabled: true },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large', disabled: true },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla', disabled: true },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUngroupedFirst = [
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUnordered = [
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]

package/src/__alpha__/SingleSelect/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/List/List.module.css

@@ -0,0 +1,7 @@
+@layer kz-components {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/List/List.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBox as RACListBox, type ListBoxProps } from 'react-aria-components'
+import styles from './List.module.css'
+
+export const List = ({
+  children,
+  className,
+  ...props
+}: ListBoxProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBox className={classNames(styles.list, className)} {...props}>
+      {children}
+    </RACListBox>
+  )
+}
+List.displayName = 'SingleSelect.List'

package/src/__alpha__/SingleSelect/subcomponents/List/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listItem {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBoxItem as RACListBoxItem, type ListBoxItemProps } from 'react-aria-components'
+import styles from './ListItem.module.css'
+
+export const ListItem = ({
+  children,
+  className,
+  ...props
+}: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBoxItem className={classNames(styles.listItem, className)} {...props}>
+      {children}
+    </RACListBoxItem>
+  )
+}
+ListItem.displayName = 'SingleSelect.ListItem'

package/src/__alpha__/SingleSelect/subcomponents/ListItem/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listSectionHeader {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.tsx

@@ -0,0 +1,23 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import {
+  Header as RACHeader,
+  ListBoxSection as RACListBoxSection,
+  type ListBoxSectionProps,
+} from 'react-aria-components'
+import styles from './ListSection.module.css'
+
+export const ListSection = ({
+  name,
+  className,
+  children,
+  ...props
+}: ListBoxSectionProps<object> & PropsWithChildren & { name: string }): React.ReactElement => {
+  return (
+    <RACListBoxSection {...props}>
+      <RACHeader className={classNames(styles.listSectionHeader, className)}>{name}</RACHeader>
+      {children}
+    </RACListBoxSection>
+  )
+}
+ListSection.displayName = 'SingleSelect.ListSection'

package/src/__alpha__/SingleSelect/subcomponents/ListSection/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css

@@ -0,0 +1,18 @@
+@layer kz-components {
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button as RACButton, SelectValue } from 'react-aria-components'
+import { Icon } from '~components/__next__/Icon'
+import styles from './Trigger.module.css'
+
+export const Trigger = (): JSX.Element => {
+  return (
+    <RACButton className={styles.button}>
+      <SelectValue />
+      <Icon name="keyboard_arrow_down" isPresentational />
+    </RACButton>
+  )
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export * from './List'
+export * from './ListSection'
+export * from './ListItem'
+export * from './Trigger'

package/src/__alpha__/index.ts

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