@kaizen/components 3.0.6 → 3.0.8

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'