@kaizen/components 1.64.14 → 1.66.0

package/src/Loading/LoadingSpinner/LoadingSpinner.module.css

@@ -0,0 +1,32 @@
+.loadingSpinner {
+  --loading-spinner-size: 48px;
+
+  display: flex;
+  width: var(--loading-spinner-size);
+  height: var(--loading-spinner-size);
+}
+
+.xs {
+  --loading-spinner-size: 16px;
+}
+
+.sm {
+  --loading-spinner-size: 24px;
+}
+
+.md {
+  --loading-spinner-size: 48px;
+}
+
+.spinner {
+  animation: spinner var(--animation-duration-deliberate)
+    var(--animation-easing-function-ease-in-out) infinite;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/Loading/LoadingSpinner/LoadingSpinner.tsx

@@ -2,14 +2,15 @@ import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./LoadingSpinner.module.scss"
+import { SpinnerIcon } from "./subcomponents"
+import styles from "./LoadingSpinner.module.css"
 
 export type LoadingSpinnerProps = {
   accessibilityLabel: string
   /**
-   * Generally use "md" unless spinner is inside a form field
+   * Generally use "md" unless spinner is inside a form field.  @default "md"
    */
-  size?: "sm" | "md"
+  size?: "xs" | "sm" | "md"
 } & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
 
 /**
@@ -23,61 +24,16 @@ export const LoadingSpinner = ({
   ...props
 }: LoadingSpinnerProps): JSX.Element => (
   <div
-    data-automation-id="loading-spinner"
-    className={classnames(styles.loadingSpinner, classNameOverride)}
+    className={classnames(
+      styles.loadingSpinner,
+      styles[size],
+      classNameOverride
+    )}
     role="status"
     {...props}
   >
     <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
-    {size === "md" ? (
-      <svg
-        className={styles.spinner}
-        aria-hidden="true"
-        viewBox="0 0 48 48"
-        width={48} // Ideally we'd use spacing tokens converted to unitless values
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="24"
-          cy="24"
-          r="22.5"
-          stroke="currentColor"
-          strokeWidth="3"
-          strokeOpacity="0.3"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill="currentColor"
-          d="M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
-        />
-      </svg>
-    ) : (
-      <svg
-        className={styles.spinner}
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        width={24} // Ideally we'd use spacing tokens converted to unitless values
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="9"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeOpacity="0.3"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill="currentColor"
-          d="M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
-        />
-      </svg>
-    )}
+    <SpinnerIcon size={size} />
   </div>
 )
 

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx

@@ -31,12 +31,17 @@ When inside a button, it is intended to have the same color as the label text.
 
 ### ClassNameOverride
 
-Override styles such as the colour of the spinner using `classNameOverride`.
+Override styles, such as the colour of the spinner using `classNameOverride`.
 
 <Canvas of={LoadingSpinnerStories.ClassNameOverride} />
 
+Below is an example of how to apply the current color tokens used in designs.
+
+<Canvas of={LoadingSpinnerStories.Colors} />
+
 ### Size
 
-Generally use `"md"` (default value) unless spinner is inside a form field.
+Generally use `"md"` (default value) unless spinner is inside a form field, in which case use `sm`. The `xs` size is for buttons or content dense layouts.
 
 <Canvas of={LoadingSpinnerStories.Size} />
+

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx

@@ -18,10 +18,11 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={['Size "sm"', 'Size "md"', "Custom colour"]}
+        headings={['Size "xs"', 'Size "sm"', 'Size "md"', "Custom color"]}
       />
       <StickerSheet.Body>
         <StickerSheet.Row>
+          <LoadingSpinner accessibilityLabel="Loading" size="xs" />
           <LoadingSpinner accessibilityLabel="Loading" size="sm" />
           <LoadingSpinner accessibilityLabel="Loading" size="md" />
           <LoadingSpinner

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stories.tsx

@@ -28,9 +28,28 @@ export const ClassNameOverride: Story = {
   args: { classNameOverride: "text-green-400" },
 }
 
+export const Colors: Story = {
+  render: args => (
+    <>
+      <LoadingSpinner {...args} classNameOverride="text-green-400" />
+      <LoadingSpinner {...args} classNameOverride="text-purple-800" />
+      <LoadingSpinner {...args} classNameOverride="text-blue-500" />
+      <LoadingSpinner {...args} classNameOverride="text-red-500" />
+    </>
+  ),
+  decorators: [
+    Story => (
+      <div className="flex gap-24">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
 export const Size: Story = {
   render: args => (
     <>
+      <LoadingSpinner {...args} size="xs" />
       <LoadingSpinner {...args} size="sm" />
       <LoadingSpinner {...args} size="md" />
     </>

package/src/Loading/LoadingSpinner/subcomponents/SpinnerIcon.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import styles from "../LoadingSpinner.module.css"
+
+const SmallSpinnerIcon = (): JSX.Element => (
+  <svg
+    className={styles.spinner}
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="9"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeOpacity="0.3"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      fill="currentColor"
+      d="M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
+    />
+  </svg>
+)
+
+const MediumSpinnerIcon = (): JSX.Element => (
+  <svg
+    className={styles.spinner}
+    aria-hidden="true"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="24"
+      cy="24"
+      r="22.5"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeOpacity="0.3"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      fill="currentColor"
+      d="M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
+    />
+  </svg>
+)
+
+const ExtraSmallSpinnerIcon = (): JSX.Element => (
+  <svg
+    className={styles.spinner}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      opacity="0.3"
+      cx="8"
+      cy="8"
+      r="6"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="M14 8C14 4.68629 11.3137 2 8 2"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+type SpinnerIconProps = {
+  size: "xs" | "sm" | "md"
+}
+
+export const SpinnerIcon = ({ size }: SpinnerIconProps): JSX.Element => {
+  if (size === "xs") return <ExtraSmallSpinnerIcon />
+  if (size === "sm") return <SmallSpinnerIcon />
+  return <MediumSpinnerIcon />
+}

package/src/Loading/LoadingSpinner/subcomponents/index.ts

@@ -0,0 +1 @@
+export * from "./SpinnerIcon"

package/src/Tabs/subcomponents/index.ts

@@ -2,4 +2,3 @@ export * from "./Tab"
 export * from "./TabList"
 export * from "./TabPanel"
 export * from "./TabPanels"
-export * from "./Tab"

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -82,7 +82,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <ArrowForwardIcon role="presentation" />
             </Button>
             <Button size="small" isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
+              <LoadingSpinner size="xs" accessibilityLabel="submitting label" />
             </Button>
           </StickerSheet.Row>
           <StickerSheet.Row rowTitle="Icon only small">
@@ -93,7 +93,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <TrashIcon role="img" aria-label="Remove label" />
             </Button>
             <Button size="small" isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="Removing label" />
+              <LoadingSpinner size="xs" accessibilityLabel="Removing label" />
             </Button>
           </StickerSheet.Row>
         </StickerSheet.Body>

package/src/__future__/Tabs/Tabs.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import {
+  Tabs as RACTabs,
+  TabsProps as RACTabsProps,
+  Key as RACKey,
+} from "react-aria-components"
+
+export type TabsProps = Omit<RACTabsProps, "orientation">
+export type Key = RACKey
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
+ *
+ * Wrapper around all of the tab subcomponents
+ * Holds a TabList and TabPanels
+ */
+export const Tabs = (props: TabsProps): JSX.Element => <RACTabs {...props} />

package/src/__future__/Tabs/_docs/Tabs--api-specification.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as TabsStories from "./Tabs.stories"
+
+<Meta title="Components/Tabs/Tabs (Future)/API Specification" />
+
+# Tabs
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A28886&mode=design&t=AGMmnoJia9RscurE-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs"
+
+/>
+
+<KAIOInstallation
+  exportNames={["Tabs", "TabList", "Tab", "TabPanel"]}
+  isFuture
+/>
+
+## Overview
+
+<Canvas of={TabsStories.Playground} />
+<Controls of={TabsStories.Playground} />
+
+## Uncontrolled vs controlled
+
+This component is uncontrolled by default. You can specify a default active tab on load with `defaultSelectedKey`.
+
+If you need to control the state of the active tabs on the consuming side, use the `selectedKey` prop instead of `defaultSelectedKey`, and hook into `onSelectionChange`.
+
+<Canvas of={TabsStories.Controlled} />
+
+
+## `tablist|tab` role vs `nav|link`
+
+This component implements the `tablist` role and WAI ARIA guidelines for tabs:
+https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role
+https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+
+It's not intended to be used for a navigation bar where you need links wrapped in a `<nav>` instead.
+
+If you really need to, you can add a URL history change here (using onChange), but that's probably a sign that this component is being misused.

package/src/__future__/Tabs/_docs/Tabs--migration-guide.mdx

@@ -0,0 +1,93 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Components/Tabs/Tabs (Future)/Migration Guide" />
+
+# Future Tabs migration guide
+
+A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `future` release.
+
+## Why the change?
+
+Current Tabs uses the Reach UI library under the hood, which is no longer actively maintained. This switches the library used internally to React Aria Components.
+
+## Component and API changes at a glance
+
+The Reach UI and React Aria APIs are fairly similar so there's not too much to adjust.
+
+The biggest adjustment is that you now need to provide an `id` for each `<Tab>` and match it with the one on `<TabPanel>`
+
+Additionally:
+- `<TabPanel>`s no longer needs to be wrapped in a `<TabPanels>` component
+- `classNameOverride` changes to `className`
+- `<Tabs defaultIndex={}>` changes to `<Tabs defaultSelectedKey={}>`
+- `<Tabs index={}>` changes to `<Tabs selectedKey={}>`
+- `<Tabs onChange={}>` changes to `<Tabs onSelectionChange={}>`
+- `<Tab disabled>` changes to `<Tab isDisabled>`
+
+## Migration examples
+
+### Uncontrolled
+
+#### Before
+
+```tsx
+<Tabs defaultIndex={1}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel classNameOverride="p-4">Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+  </TabPanels>
+</Tabs>
+```
+
+#### After
+
+```tsx
+<Tabs defaultSelectedKey="two">
+  <TabList>
+    <Tab id="one">Tab 1</Tab>
+    <Tab id="two">Tab 2</Tab>
+    <Tab id="three" isDisabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanel id="one" className="p-4">Content 1</TabPanel>
+  <TabPanel id="two">Content 2</TabPanel>
+</Tabs>
+```
+
+### Controlled
+
+#### Before
+
+```tsx
+<Tabs onChange={setSelectedTab} defaultIndex={1}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+  </TabPanels>
+</Tabs>
+```
+
+#### After
+
+```tsx
+<Tabs onSelectionChange={setSelectedTab} selectedKey="two">
+  <TabList>
+    <Tab id="one">Tab 1</Tab>
+    <Tab id="two">Tab 2</Tab>
+    <Tab id="three" isDisabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanel id="one">Content 1</TabPanel>
+  <TabPanel id="two">Content 2</TabPanel>
+</Tabs>
+```

package/src/__future__/Tabs/_docs/Tabs.stories.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Text } from "~components/Text"
+import { Button } from "~components/__actions__/v2"
+import { Tab, TabList, TabPanel, Tabs, Key } from "../index"
+
+const meta = {
+  title: "Components/Tabs/Tabs (Future)",
+  component: Tabs,
+  args: {
+    children: (
+      <>
+        <TabList aria-label="Tabs">
+          <Tab id="one">Tab 1</Tab>
+          <Tab id="two">Tab 2</Tab>
+          <Tab id="three" badge="3">
+            Tab 3
+          </Tab>
+          <Tab id="four" isDisabled>
+            Disabled Tab
+          </Tab>
+        </TabList>
+        <TabPanel id="one" className="p-24">
+          <Text variant="body">Content 1</Text>
+        </TabPanel>
+        <TabPanel id="two" className="p-24">
+          <Text variant="body">Content 2</Text>
+        </TabPanel>
+        <TabPanel id="three" className="p-24">
+          <Text variant="body">Content 3</Text>
+        </TabPanel>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    chromatic: { disable: false },
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  args: {
+    defaultSelectedKey: "one",
+    // eslint-disable-next-line no-console
+    onSelectionChange: (key): void => console.log("Tab changed to ", key),
+  },
+}
+
+export const Controlled: Story = {
+  render: args => {
+    const [selectedKey, setSelectedKey] = useState<Key>(0)
+    return (
+      <>
+        <Tabs
+          {...args}
+          selectedKey={selectedKey}
+          onSelectionChange={setSelectedKey}
+        />
+        <Button
+          label="Switch to tab 2"
+          onClick={(): void => setSelectedKey("two")}
+        />
+      </>
+    )
+  },
+}

package/src/__future__/Tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs"
+export * from "./subcomponents"

package/src/__future__/Tabs/subcomponents/Tab/Tab.module.css

@@ -0,0 +1,94 @@
+.tab {
+  display: inline-flex;
+  align-items: center;
+  border: 2px solid transparent;
+  border-bottom: 0;
+  border-top-left-radius: var(--border-borderless-border-radius);
+  border-top-right-radius: var(--border-borderless-border-radius);
+  background: var(--color-white);
+  white-space: nowrap;
+  text-decoration: none;
+  padding: var(--spacing-md) var(--spacing-md);
+  margin: 0;
+  font-family: var(--typography-heading-4-font-family);
+  font-size: var(--typography-heading-4-font-size);
+  font-weight: var(--typography-heading-4-font-weight);
+  line-height: var(--typography-heading-4-line-height);
+  letter-spacing: var(--typography-heading-4-letter-spacing);
+  color: var(--color-purple-800);
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+    border-color: var(--color-blue-500);
+  }
+
+  &[data-disabled] {
+    opacity: 0.3;
+  }
+
+  &:not(:first-child) {
+    margin-inline-start: var(--spacing-xs);
+  }
+
+  &:not([data-disabled]):hover {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+  }
+}
+
+.tab[data-selected] {
+  position: relative;
+  color: var(--color-blue-500);
+
+  &::before {
+    content: "";
+    display: block;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background-color: currentcolor;
+    height: 5px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.badge {
+  margin-inline-start: var(--spacing-sm);
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (forced-colors: active) {
+  .tab {
+    border: 2px solid transparent;
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-radius: var(--border-focus-ring-border-radius);
+      border-width: var(--border-focus-ring-border-width);
+      border-style: var(--border-focus-ring-border-style);
+      border-color: transparent;
+      inset: -2px;
+    }
+  }
+
+  .tab[data-selected]::before {
+    /* High contrast also doesn't see the pseudo element created to show the active tab. */
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+  }
+}

package/src/__future__/Tabs/subcomponents/Tab/Tab.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import classnames from "classnames"
+import { Tab as RACTab, TabProps as RACTabProps } from "react-aria-components"
+import { Badge } from "~components/Badge"
+import styles from "./Tab.module.css"
+
+export type TabProps = {
+  /**
+   * Adds a Kaizen Badge component to the tab.
+   * Comes with some logic baked in - changes variant based on active/focus/hover state.
+   */
+  badge?: string
+} & Omit<
+  RACTabProps,
+  // omitting link functionality because it goes against WAI ARIA standards https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+  | "href"
+  | "hrefLang"
+  | "target"
+  | "rel"
+  | "download"
+  | "ping"
+  | "referrerPolicy"
+>
+
+/**
+ * A tab button
+ */
+export const Tab = (props: TabProps): JSX.Element => {
+  const { badge, children, className, ...restProps } = props
+
+  const tabProps = {
+    className: classnames(styles.tab, className),
+    ...restProps,
+  }
+
+  return (
+    <RACTab {...tabProps}>
+      {({ isSelected, isFocusVisible, isHovered }) => (
+        <>
+          {children}
+          {badge && (
+            <span className={styles.badge}>
+              <Badge
+                variant={
+                  isSelected || isFocusVisible || isHovered
+                    ? "active"
+                    : "default"
+                }
+              >
+                {badge}
+              </Badge>
+            </span>
+          )}
+        </>
+      )}
+    </RACTab>
+  )
+}