@kaizen/components 3.0.6 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -131,7 +131,8 @@
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
     "@cultureamp/i18n-react-intl": "^4.1.0",
-    "@cultureamp/package-bundler": "^2.4.4",
+    "@cultureamp/package-bundler": "^4.0.1",
+    "cssnano": "^7.1.3",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",

package/src/Avatar/Avatar.module.css

@@ -74,7 +74,7 @@
     border-radius: var(--spacing-4);
   }
 
-  .fallbackIcon {
+  .wrapper .fallbackIcon {
     color: rgb(var(--color-purple-800-rgb), 0.7);
     font-size: calc(var(--avatar-x-y) * 0.7);
   }

package/src/Link/Link.module.css

@@ -21,7 +21,7 @@
     border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
   }
 
-  .icon > * {
+  .link .icon > * {
     vertical-align: text-bottom;
     font-size: var(--icon-font-size, 1em);
   }

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css

@@ -1,5 +1,6 @@
 @layer kz-components {
-  .notificationIcon {
+  /* Doubled class raises specificity to (0,2,0) to override Icon's own font-size rule */
+  .notificationIcon.notificationIcon {
     font-size: inherit;
   }
 }

package/src/TimeField/TimeField.module.css

@@ -16,7 +16,8 @@
     color: var(--color-purple-800);
   }
 
-  .label {
+  /* Doubled class raises specificity to (0,2,0) to override Label's own display rule */
+  .label.label {
     display: block;
     margin-bottom: var(--spacing-6);
   }

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

@@ -51,7 +51,7 @@
     background-color: var(--color-gray-100);
   }
 
-  .disabledText {
+  .trigger .disabledText {
     color: var(--color-gray-500);
   }
 

package/dist/types/TabsV1/Tabs.d.ts

@@ -1,29 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export type TabsProps = {
-    /**
-     * Index of tab to show by default
-     * Only works in uncontrolled mode (when no selectedIndex is provided)
-     */
-    defaultIndex?: number;
-    /**
-     * Set the selected tab explictly.
-     * Enabled controlled mode, meaning you're also responsible for updating this using the onChange callback
-     */
-    selectedIndex?: number;
-    /**
-     * Callback on tab change
-     */
-    onChange?: (index: number) => void;
-    children: ReactNode;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
-/**
- * {@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 declare const Tabs: {
-    (props: TabsProps): JSX.Element;
-    displayName: string;
-};

package/dist/types/TabsV1/index.d.ts

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

package/dist/types/TabsV1/subcomponents/Tab.d.ts

@@ -1,21 +0,0 @@
-import { type HTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabProps = {
-    /**
-     * Gets injected by TabList, no need to specify yourself
-     */
-    isSelected?: boolean;
-    /**
-     * Adds a Kaizen Badge component to the tab.
-     * Comes with some logic baked in - changes variant based on active/focus/hover state.
-     */
-    badge?: string;
-    disabled?: boolean;
-    children: ReactNode;
-    onBlur?: (e: SyntheticEvent) => void;
-    onFocus?: (e: SyntheticEvent) => void;
-} & OverrideClassName<Omit<HTMLAttributes<HTMLButtonElement>, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'>>;
-/**
- * A tab button
- */
-export declare const Tab: (props: TabProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/TabList.d.ts

@@ -1,17 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabListProps = {
-    /**
-     * Accessible name for the set of tabs
-     */
-    'aria-label': string;
-    /**
-     * Removes the built in padding
-     */
-    'noPadding'?: boolean;
-    'children': ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-/**
- * Wrapper for the tabs themselves
- */
-export declare const TabList: (props: TabListProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/TabPanel.d.ts

@@ -1,9 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabPanelProps = {
-    children: ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-/**
- * Wrapper for the content that shows when tab is active
- */
-export declare const TabPanel: (props: TabPanelProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/TabPanels.d.ts

@@ -1,9 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabPanelsProps = {
-    children: ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-/**
- * Wrapper for the content panels
- */
-export declare const TabPanels: (props: TabPanelsProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Tab';
-export * from './TabList';
-export * from './TabPanel';
-export * from './TabPanels';

package/src/TabsV1/Tabs.tsx

@@ -1,38 +0,0 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react'
-import { Tabs as ReachTabs } from '@reach/tabs'
-
-export type TabsProps = {
-  /**
-   * Index of tab to show by default
-   * Only works in uncontrolled mode (when no selectedIndex is provided)
-   */
-  defaultIndex?: number
-  /**
-   * Set the selected tab explictly.
-   * Enabled controlled mode, meaning you're also responsible for updating this using the onChange callback
-   */
-  selectedIndex?: number
-  /**
-   * Callback on tab change
-   */
-  onChange?: (index: number) => void
-  children: ReactNode
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
-
-/**
- * {@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 => {
-  const { defaultIndex, selectedIndex, onChange, children, ...restProps } = props
-  return (
-    <ReachTabs defaultIndex={defaultIndex} index={selectedIndex} onChange={onChange} {...restProps}>
-      {children}
-    </ReachTabs>
-  )
-}
-
-Tabs.displayName = 'Tabs'

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

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Button } from '~components/ButtonV1'
-import { Card } from '~components/Card'
-import { Text } from '~components/Text'
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../index'
-
-const meta = {
-  title: 'Components/Tabs/Tabs (deprecated)',
-  component: Tabs,
-  args: {
-    children: (
-      <>
-        <TabList aria-label="Tabs">
-          <Tab>Tab 1</Tab>
-          <Tab>Tab 2</Tab>
-          <Tab badge="3">Tab 3</Tab>
-          <Tab disabled>Disabled Tab</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel classNameOverride="p-24">
-            <Text variant="body">Content 1</Text>
-          </TabPanel>
-          <TabPanel classNameOverride="p-24">
-            <Text variant="body">Content 2</Text>
-          </TabPanel>
-          <TabPanel classNameOverride="p-24">
-            <Text variant="body">Content 3</Text>
-          </TabPanel>
-        </TabPanels>
-      </>
-    ),
-  },
-  tags: ['!dev'],
-} 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: {
-    defaultIndex: 1,
-
-    onChange: (index): void => console.log('Tab changed to ', index),
-  },
-}
-
-export const Controlled: Story = {
-  render: (args) => {
-    const [selectedIndex, setSelectedIndex] = useState<number>(0)
-    return (
-      <>
-        <Tabs {...args} selectedIndex={selectedIndex} onChange={setSelectedIndex} />
-        <Button label="Switch to tab 2" onClick={(): void => setSelectedIndex(1)} />
-      </>
-    )
-  },
-}
-
-export const UsageInCard: Story = {
-  parameters: {
-    backgrounds: { default: 'Gray 100' },
-  },
-  render: (args) => (
-    <Card>
-      <Tabs {...args} />
-    </Card>
-  ),
-}

package/src/TabsV1/index.ts

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

package/src/TabsV1/subcomponents/Tab.module.scss

@@ -1,105 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/typography';
-
-@layer kz-components {
-  .tab {
-    display: inline-flex;
-    align-items: center;
-    border: 0;
-    border-top: 2px solid transparent;
-    border-left: 2px solid transparent;
-    border-right: 2px solid transparent;
-    border-top-left-radius: $border-borderless-border-radius;
-    border-top-right-radius: $border-borderless-border-radius;
-    background: $color-white;
-    white-space: nowrap;
-    text-decoration: none;
-    padding: $spacing-md $spacing-md;
-    margin: 0;
-    font-family: $typography-heading-4-font-family;
-    font-size: $typography-heading-4-font-size;
-    font-weight: $typography-heading-4-font-weight;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    color: $color-purple-800;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      background: $color-blue-100;
-      color: $color-blue-500;
-      border-color: $color-blue-500;
-    }
-
-    &:disabled {
-      opacity: 30%;
-    }
-
-    &:not(:first-child) {
-      margin-inline-start: $spacing-xs;
-    }
-
-    &:not(:disabled):hover {
-      background: $color-blue-100;
-      color: $color-blue-500;
-    }
-  }
-
-  .tab[data-selected] {
-    position: relative;
-    color: $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: $spacing-sm;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  @media (forced-colors: active) {
-    .tab {
-      border: 2px solid transparent;
-
-      &:focus-visible::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-radius: $border-focus-ring-border-radius;
-        border-width: $border-focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        border-color: transparent;
-        inset: calc(-1 * #{$focus-ring-offset});
-      }
-    }
-
-    .tab.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/TabsV1/subcomponents/Tab.tsx

@@ -1,78 +0,0 @@
-import React, {
-  useRef,
-  useState,
-  type HTMLAttributes,
-  type ReactNode,
-  type SyntheticEvent,
-} from 'react'
-import { Tab as ReachTab } from '@reach/tabs'
-import classnames from 'classnames'
-import { useFocusable } from 'react-aria'
-import { Badge } from '~components/Badge'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Tab.module.scss'
-
-export type TabProps = {
-  /**
-   * Gets injected by TabList, no need to specify yourself
-   */
-  isSelected?: boolean
-  /**
-   * Adds a Kaizen Badge component to the tab.
-   * Comes with some logic baked in - changes variant based on active/focus/hover state.
-   */
-  badge?: string
-  disabled?: boolean
-  children: ReactNode
-  onBlur?: (e: SyntheticEvent) => void
-  onFocus?: (e: SyntheticEvent) => void
-} & OverrideClassName<
-  Omit<
-    HTMLAttributes<HTMLButtonElement>,
-    // These props are used in the component internals, but could be extended if needed
-    'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'
-  >
->
-
-/**
- * A tab button
- */
-export const Tab = (props: TabProps): JSX.Element => {
-  const { isSelected, badge, disabled, children, classNameOverride, ...restProps } = props
-  const ref = useRef<HTMLButtonElement>(null)
-  const [isHovered, setIsHovered] = useState<boolean>(false)
-  const [isFocused, setIsFocused] = useState<boolean>(false)
-  const showActiveBadge = Boolean(isSelected || isHovered || isFocused)
-
-  const tabProps = {
-    disabled,
-    className: classnames(styles.tab, classNameOverride, isSelected && styles.selected),
-    onFocus: (event: SyntheticEvent): void => {
-      setIsFocused(true)
-      props.onFocus?.(event)
-    },
-    onBlur: (event: SyntheticEvent): void => {
-      setIsFocused(false)
-      props.onBlur?.(event)
-    },
-    onMouseEnter: (): void => setIsHovered(true),
-    onMouseLeave: (): void => setIsHovered(false),
-    ...restProps,
-  }
-
-  const { focusableProps } = useFocusable(tabProps, ref)
-
-  // Reach is setting and managing tabIndex for us here, so we remove it from the focusableProps (also it needs to be non-defined, undefined is not enough)
-  delete focusableProps.tabIndex
-
-  return (
-    <ReachTab ref={ref} {...tabProps} {...focusableProps}>
-      {children}
-      {badge && (
-        <span className={styles.badge}>
-          <Badge variant={showActiveBadge ? 'active' : 'default'}>{badge}</Badge>
-        </span>
-      )}
-    </ReachTab>
-  )
-}

package/src/TabsV1/subcomponents/TabList.module.scss

@@ -1,13 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-
-@layer kz-components {
-  .tabList {
-    border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
-    padding: $spacing-xs $spacing-md 0;
-  }
-
-  .tabList.noPadding {
-    padding: 0;
-  }
-}

package/src/TabsV1/subcomponents/TabList.tsx

@@ -1,39 +0,0 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react'
-import { TabList as ReachTabList } from '@reach/tabs'
-import classnames from 'classnames'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './TabList.module.scss'
-
-export type TabListProps = {
-  /**
-   * Accessible name for the set of tabs
-   */
-  'aria-label': string
-  /**
-   * Removes the built in padding
-   */
-  'noPadding'?: boolean
-  'children': ReactNode
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
-
-/**
- * Wrapper for the tabs themselves
- */
-export const TabList = (props: TabListProps): JSX.Element => {
-  const {
-    'aria-label': ariaLabel,
-    noPadding = false,
-    children,
-    classNameOverride,
-    ...restProps
-  } = props
-  return (
-    <ReachTabList
-      aria-label={ariaLabel}
-      className={classnames(styles.tabList, classNameOverride, noPadding && styles.noPadding)}
-      {...restProps}
-    >
-      {children}
-    </ReachTabList>
-  )
-}

package/src/TabsV1/subcomponents/TabPanel.module.scss

@@ -1,17 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-
-@layer kz-components {
-  .tabPanel {
-    border: 2px solid transparent;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      border-color: $color-blue-500;
-      border-radius: $border-focus-ring-border-radius;
-    }
-  }
-}

package/src/TabsV1/subcomponents/TabPanel.tsx

@@ -1,20 +0,0 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react'
-import { TabPanel as ReachTabPanel } from '@reach/tabs'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './TabPanel.module.scss'
-
-export type TabPanelProps = {
-  children: ReactNode
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
-
-/**
- * Wrapper for the content that shows when tab is active
- */
-export const TabPanel = (props: TabPanelProps): JSX.Element => {
-  const { classNameOverride, children, ...restProps } = props
-  return (
-    <ReachTabPanel className={(styles.tabPanel, classNameOverride)} {...restProps}>
-      {children}
-    </ReachTabPanel>
-  )
-}

package/src/TabsV1/subcomponents/TabPanels.tsx

@@ -1,15 +0,0 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react'
-import { TabPanels as ReachTabPanels } from '@reach/tabs'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-
-export type TabPanelsProps = {
-  children: ReactNode
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
-
-/**
- * Wrapper for the content panels
- */
-export const TabPanels = (props: TabPanelsProps): JSX.Element => {
-  const { children, ...restProps } = props
-  return <ReachTabPanels {...restProps}>{children}</ReachTabPanels>
-}

package/src/TabsV1/subcomponents/index.ts

@@ -1,4 +0,0 @@
-export * from './Tab'
-export * from './TabList'
-export * from './TabPanel'
-export * from './TabPanels'