@kaizen/components 1.68.10 → 1.68.12

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

@@ -1,8 +1,60 @@
+.container {
+  position: relative;
+}
+
 .tabList {
   border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
-  padding: var(--spacing-xs) var(--spacing-md) 0;
+  padding: var(--spacing-6) 0 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  white-space: nowrap;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
 }
 
 .noPadding {
   padding: 0;
 }
+
+.leftArrow,
+.rightArrow {
+  --icon-size: 24;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 10000;
+  background: var(--color-white);
+  inset-block: 0 1px;
+  width: 48px;
+  cursor: default;
+  user-select: none;
+}
+
+/*
+ * Note: we're purposefully using directional properties instead of start/end for positioning and styling related to the carousel arrows
+*/
+.leftArrow {
+  left: 0;
+}
+
+.leftArrow,
+.leftArrow:hover {
+  border-right: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+}
+
+.rightArrow {
+  right: 0;
+}
+
+.rightArrow,
+.rightArrow:hover {
+  border-left: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+}
+
+.leftArrow:hover,
+.rightArrow:hover {
+  background: var(--color-gray-200);
+}

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

@@ -1,6 +1,13 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useContext, useEffect, useId, useRef, useState } from 'react'
 import classnames from 'classnames'
-import { TabList as RACTabList, TabListProps as RACTabListProps } from 'react-aria-components'
+import {
+  TabList as RACTabList,
+  TabListProps as RACTabListProps,
+  TabListStateContext,
+} from 'react-aria-components'
+import { Icon } from '~components/__future__/Icon'
+import { isRTL as isRTLCheck } from '~components/__utilities__/isRTL'
+import { SCROLL_AMOUNT } from '../../constants'
 import styles from './TabList.module.css'
 
 export type TabListProps = {
@@ -13,20 +20,141 @@ export type TabListProps = {
    */
   'noPadding'?: boolean
   'children': ReactNode
+  'data-testid'?: string
 } & RACTabListProps<HTMLElement>
 
 /**
  * Wrapper for the tabs themselves
  */
 export const TabList = (props: TabListProps): JSX.Element => {
-  const { 'aria-label': ariaLabel, noPadding = false, children, className, ...restProps } = props
+  const {
+    'aria-label': ariaLabel,
+    noPadding = false,
+    children,
+    className,
+    'data-testid': testId,
+    ...restProps
+  } = props
+  const [isDocumentReady, setIsDocumentReady] = useState<boolean>(false)
+  const [leftArrowEnabled, setLeftArrowEnabled] = useState<boolean>(false)
+  const [rightArrowEnabled, setRightArrowEnabled] = useState<boolean>(false)
+  const tabListRef = useRef<HTMLDivElement | null>(null)
+  const tabListId = useId()
+  const [isRTL, setIsRTL] = useState<boolean>(false)
+  const [containerElement, setContainerElement] = useState<HTMLElement | null>()
+  const tabListContext = useContext(TabListStateContext)
+  const selectedKey = tabListContext?.selectedKey
+
+  useEffect(() => {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true)
+      return
+    }
+
+    const container = document.getElementById(tabListId)
+    setContainerElement(container)
+    setIsRTL(container ? isRTLCheck(container) : false)
+  }, [isDocumentReady, tabListId])
+
+  useEffect(() => {
+    if (!isDocumentReady) {
+      return
+    }
+
+    const tabs = containerElement?.querySelectorAll('[data-kz-tab]')
+    if (!tabs) {
+      return
+    }
+
+    const firstTabObserver = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting) {
+          setLeftArrowEnabled(true)
+          return
+        }
+        setLeftArrowEnabled(false)
+      },
+      {
+        threshold: 0.75,
+        root: containerElement,
+      },
+    )
+    firstTabObserver.observe(isRTL ? tabs[tabs.length - 1] : tabs[0])
+
+    const lastTabObserver = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting) {
+          setRightArrowEnabled(true)
+          return
+        }
+        setRightArrowEnabled(false)
+      },
+      {
+        threshold: 0.75,
+        root: containerElement,
+      },
+    )
+    lastTabObserver.observe(isRTL ? tabs[0] : tabs[tabs.length - 1])
+
+    return () => {
+      firstTabObserver.disconnect()
+      lastTabObserver.disconnect()
+    }
+  }, [isDocumentReady, containerElement, isRTL])
+
+  useEffect(() => {
+    if (!isDocumentReady) {
+      return
+    }
+
+    // Scroll selected tab into view
+    containerElement
+      ?.querySelector('[role="tab"][data-selected=true]')
+      ?.scrollIntoView({ block: 'nearest', inline: 'center' })
+  }, [selectedKey, containerElement, isDocumentReady])
+
+  const handleArrowPress = (direction: 'left' | 'right'): void => {
+    if (tabListRef.current) {
+      const tabListScrollPos = tabListRef.current.scrollLeft
+      const newSpot =
+        direction === 'left' ? tabListScrollPos - SCROLL_AMOUNT : tabListScrollPos + SCROLL_AMOUNT
+      tabListRef.current.scrollLeft = newSpot
+    }
+  }
+
   return (
-    <RACTabList
-      aria-label={ariaLabel}
-      className={classnames(styles.tabList, className, noPadding && styles.noPadding)}
-      {...restProps}
-    >
-      {children}
-    </RACTabList>
+    <div className={styles.container} id={tabListId}>
+      {leftArrowEnabled && (
+        // making a conscious decision to use <div onClick> over <button> here, because:
+        // - <button> would add pointless noise for a screen reader user
+        // - keyboard only user can toggle through tabs with left/right arrow keys already
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        <div
+          onClick={() => handleArrowPress('left')}
+          className={styles.leftArrow}
+          data-testid={testId ? `${testId}-kz-tablist-left-arrow` : undefined}
+        >
+          <Icon name="chevron_left" isPresentational />
+        </div>
+      )}
+      <RACTabList
+        aria-label={ariaLabel}
+        ref={tabListRef}
+        className={classnames(styles.tabList, className, noPadding && styles.noPadding)}
+        {...restProps}
+      >
+        {children}
+      </RACTabList>
+      {rightArrowEnabled && (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        <div
+          onClick={() => handleArrowPress('right')}
+          className={styles.rightArrow}
+          data-testid={testId ? `${testId}-kz-tablist-right-arrow` : undefined}
+        >
+          <Icon name="chevron_right" isPresentational />
+        </div>
+      )}
+    </div>
   )
 }

package/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import { Avatar } from '~components/Avatar'
-import { LiveIcon } from '~components/Icon'
-import styles from '~components/Tag/Tag.module.scss'
+import { LiveIcon } from '~components/Tag/subcomponents'
 import { Icon } from '~components/__future__/Icon'
 import { Tag, RemovableTag } from '../..'
 
@@ -23,8 +22,16 @@ const meta = {
 } satisfies Meta<typeof Tag>
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-/** * This is a stand-in component for the legacy Tag's bake in LiveIcon - we should consider adding this as an actual component or replacing it */
+export const LiveIconComponentStory: Story = {
+  render: () => <LiveIcon />,
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+        code: `
+        // component with styled with CSS modules
 const LiveIconComponent = (): JSX.Element => (
   <span className={styles.liveIcon}>
     <LiveIcon
@@ -61,68 +68,21 @@ const LiveIconComponent = (): JSX.Element => (
     />
   </span>
 )
-
-export const LiveIconComponentStory: StoryObj = {
-  render: () => <LiveIconComponent />,
-  parameters: {
-    docs: {
-      source: {
-        type: 'dynamic',
-        code: `
-  // component with styled with CSS modules
-  const LiveIconComponent = (): JSX.Element => (
-    <span className={styles.liveIcon}>
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_base}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_1}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_2}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_3}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-    </span>
-  )
-
-  // Minified SCSS from the stylesheet
-  <style>
-    .liveIcon_2,.liveIcon_3{animation-duration:3s;animation-iteration-count:3;animation-delay:1s}.liveIcon{display:inline-block;position:relative;width:20px;height:20px;color:$color-green-500}.liveIcon_1,.liveIcon_2,.liveIcon_3{display:block;position:absolute;top:0;left:$0;width:100%;height:100%;overflow:hidden}.liveIcon_base{opacity:30%;display:block}.liveIcon_1{clip-path:circle(16%)}.liveIcon_2{clip-path:circle(32%);animation-name:pulse-inner}.liveIcon_3{clip-path:circle(50%);animation-name:pulse-outer}@keyframes pulse-inner{0%,25%{opacity:0%}100%,50%,75%{opacity:100%}}@keyframes pulse-outer{0%,25%,50%{opacity:0%}100%,75%{opacity:100%}}
-  </style>
-        `,
+// Minified SCSS from the stylesheet
+<style>
+  .liveIcon_2,.liveIcon_3{animation-duration:3s;animation-iteration-count:3;animation-delay:1s}.liveIcon{display:inline-block;position:relative;width:20px;height:20px;color:$color-green-500}.liveIcon_1,.liveIcon_2,.liveIcon_3{display:block;position:absolute;top:0;left:$0;width:100%;height:100%;overflow:hidden}.liveIcon_base{opacity:30%;display:block}.liveIcon_1{clip-path:circle(16%)}.liveIcon_2{clip-path:circle(32%);animation-name:pulse-inner}.liveIcon_3{clip-path:circle(50%);animation-name:pulse-outer}@keyframes pulse-inner{0%,25%{opacity:0%}100%,50%,75%{opacity:100%}}@keyframes pulse-outer{0%,25%,50%{opacity:0%}100%,75%{opacity:100%}}
+</style>`,
       },
     },
   },
 }
 
-export const StatusMigration: StoryObj = {
+export const StatusMigration: Story = {
   render: () => (
     <>
       <Tag classNameOverride="gap-4" color="green">
         <span>Tag</span>
-        <LiveIconComponent />
+        <LiveIcon />
       </Tag>
       <Tag color="blue">Tag</Tag>
       <Tag color="red">Tag</Tag>
@@ -138,7 +98,7 @@ export const StatusMigration: StoryObj = {
   ],
 }
 
-export const ValidationMigration: StoryObj = {
+export const ValidationMigration: Story = {
   render: () => (
     <>
       <Tag color="green" icon={<Icon name="check_circle" isFilled alt="Success," />}>
@@ -164,7 +124,7 @@ export const ValidationMigration: StoryObj = {
   ],
 }
 
-export const SentimentsMigration: StoryObj = {
+export const SentimentsMigration: Story = {
   render: () => (
     <>
       <Tag color="green">Tag</Tag>
@@ -184,7 +144,7 @@ export const SentimentsMigration: StoryObj = {
   ],
 }
 
-export const SentimentNone: StoryObj = {
+export const SentimentNone: Story = {
   render: () => (
     <Tag color="gray" classNameOverride="bg-white border-default-color border-solid border">
       Tag
@@ -192,7 +152,7 @@ export const SentimentNone: StoryObj = {
   ),
 }
 
-export const DismissibleMigration: StoryObj = {
+export const DismissibleMigration: Story = {
   render: () => (
     <RemovableTag
       removeButtonProps={{
@@ -205,7 +165,7 @@ export const DismissibleMigration: StoryObj = {
   ),
 }
 
-export const AvatarMigration: StoryObj = {
+export const AvatarMigration: Story = {
   render: () => (
     <>
       <Tag classNameOverride="ps-4">
@@ -241,7 +201,7 @@ export const AvatarMigration: StoryObj = {
   ],
 }
 
-export const AvatarRemovableMigration: StoryObj = {
+export const AvatarRemovableMigration: Story = {
   render: () => (
     <>
       <RemovableTag
@@ -295,7 +255,7 @@ export const AvatarRemovableMigration: StoryObj = {
   ],
 }
 
-export const InlineMigration: StoryObj = {
+export const InlineMigration: Story = {
   render: () => (
     <div className="flex gap-12">
       <Tag>Tag</Tag>
@@ -305,4 +265,4 @@ export const InlineMigration: StoryObj = {
   ),
 }
 
-export const SizesMigration: StoryObj = {}
+export const SizesMigration: Story = {}

package/src/__utilities__/isRTL/index.ts

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

package/src/__utilities__/isRTL/isRTL.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { isRTL } from './isRTL'
+
+describe('isRTL', () => {
+  it('returns false when no element with dir found', () => {
+    const Example = (): JSX.Element => <button type="button">Test</button>
+    render(<Example />)
+    const button = screen.getByRole('button')
+    expect(isRTL(button)).toBe(false)
+  })
+
+  it('returns false when greater parent is dir=rtl, but closer parent is dir=ltr', () => {
+    const Example = (): JSX.Element => (
+      <div dir="rtl">
+        <div dir="ltr">
+          <button type="button">Test</button>
+        </div>
+      </div>
+    )
+    render(<Example />)
+    const button = screen.getByRole('button')
+    expect(isRTL(button)).toBe(false)
+  })
+
+  it('returns true when greater parent is dir=ltr, but closer parent is dir=rtl', () => {
+    const Example = (): JSX.Element => (
+      <div dir="ltr">
+        <div dir="rtl">
+          <button type="button">Test</button>
+        </div>
+      </div>
+    )
+    render(<Example />)
+    const button = screen.getByRole('button')
+    expect(isRTL(button)).toBe(true)
+  })
+})

package/src/__utilities__/isRTL/isRTL.ts

@@ -0,0 +1,6 @@
+/**
+ * Finds the first ancestor with a `dir` property on it
+ * Returning true is that is `dir=rtl` and returning false in all other cases
+ */
+export const isRTL = (element: Element): boolean =>
+  !!element.closest('[dir]')?.matches('[dir="rtl"]')