uikit-react-public 0.29.5 → 0.30.0

package/lib/components/Tabs/Tab.tsx

@@ -1,81 +1,254 @@
-import { memo, ButtonHTMLAttributes } from 'react';
+import {
+  Children,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  memo,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
-import { useTabContext } from './TabContext';
+import Text from '../Text';
+import { getTabId, getTabPanelId, useTabContext } from './TabContext';
 
 export const NAME = 'ucl-uikit-tabs__tab';
 
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type TabElementProps = HTMLAttributes<HTMLElement> & {
+  disabled?: boolean;
+  href?: string;
+  ref?: React.Ref<HTMLElement>;
+  type?: 'button' | 'submit' | 'reset';
+  'data-state'?: string;
+  'data-testid'?: string;
+  'data-ucl-tabs-value'?: string;
+};
+
+export interface TabProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
-  label: string;
   value: string;
+  children?: ReactNode;
+  count?: number;
+  /** @deprecated Use count instead. */
   counter?: number;
-  ref?: React.RefObject<HTMLButtonElement>;
+  disabled?: boolean;
+  asChild?: boolean;
+  ref?: React.Ref<HTMLElement>;
+  /** @deprecated Prefer children for the tab content. */
+  label?: ReactNode;
 }
 
+const mergeEventHandlers =
+  <EventType,>(
+    userHandler: ((event: EventType) => void) | undefined,
+    childHandler: ((event: EventType) => void) | undefined
+  ) =>
+  (event: EventType) => {
+    userHandler?.(event);
+    childHandler?.(event);
+  };
+
 const Tab = ({
   testId = NAME,
   className,
+  children,
   label,
   value,
+  count,
   counter,
+  disabled = false,
+  asChild = false,
+  onClick,
   ref,
   ...props
 }: TabProps) => {
   const [theme] = useTheme();
-  const { activeTab, setActiveTab, fullWidth, color } = useTabContext();
-  const isActive = activeTab === value;
+  const {
+    value: selectedValue,
+    setValue,
+    baseId,
+    fullWidth,
+    panelValues,
+  } = useTabContext();
+  const isSelected = selectedValue === value;
+  const labelContent = children ?? label;
+  const resolvedCount = count ?? counter;
 
   const baseStyle = css`
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-family: ${theme.font.family.primary};
-    color: ${theme.colour.text.secondary};
-    border-bottom: 4px solid transparent;
-    text-align: center;
-    font-style: normal;
-    line-height: 140%;
-    font-size: ${theme.font.size.f16};
+    all: unset;
+    box-sizing: border-box;
+    height: 40px;
+    display: inline-flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0 16px 8px 16px;
-    ${fullWidth ? 'flex: 1 0 0;' : 'width: auto;'}
+    gap: 0;
+    padding: 0 ${theme.padding.p16};
+    border-bottom: 4px solid transparent;
+    color: ${theme.colour.text.default};
+    background-color: transparent;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    position: relative;
+    outline: none;
+
+    &:visited {
+      color: ${theme.colour.text.default};
+    }
+
+    &:hover {
+      color: ${theme.colour.text.default};
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
 
     &:focus-visible {
-      outline: none;
       box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
     }
+  `;
+
+  const fullWidthStyle = css`
+    flex: 1 1 0;
+  `;
 
+  const autoWidthStyle = css`
+    flex: 0 0 auto;
+  `;
+
+  const selectedStyle = css`
+    color: ${theme.colour.text.default};
+    border-bottom-color: ${theme.colour.border.brand};
+
+    &:visited,
     &:hover {
-      text-decoration: underline;
+      color: ${theme.colour.text.default};
     }
   `;
 
-  const activeStyle = css`
-    border-bottom: 4px solid ${color || theme.colour.border.brand};
-    color: ${theme.colour.text.default};
-    margin-bottom: -1px;
-    font-weight: 700;
+  const disabledStyle = css`
+    color: ${theme.colour.text.disabled};
+    cursor: not-allowed;
 
+    &:visited,
     &:hover {
-      text-decoration: none;
+      color: ${theme.colour.text.disabled};
+      background-color: transparent;
     }
   `;
 
-  const style = cx(NAME, baseStyle, isActive && activeStyle, className);
+  const textStyle = css`
+    color: inherit;
+  `;
+
+  const hiddenTextStyle = css`
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    fullWidth ? fullWidthStyle : autoWidthStyle,
+    isSelected && selectedStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    setValue(value);
+  };
+
+  const commonProps: TabElementProps = {
+    ...props,
+    ref,
+    className: style,
+    role: 'tab',
+    id: getTabId(baseId, value),
+    ...(panelValues.has(value)
+      ? { 'aria-controls': getTabPanelId(baseId, value) }
+      : {}),
+    'aria-selected': isSelected,
+    'aria-disabled': disabled || undefined,
+    tabIndex: isSelected ? 0 : -1,
+    'data-testid': testId,
+    'data-state': isSelected ? 'active' : 'inactive',
+    'data-ucl-tabs-value': value,
+    onClick: handleClick,
+  };
+
+  if (asChild) {
+    const child = Children.only(children) as ReactElement<TabElementProps>;
+
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...commonProps,
+        className: cx(style, child.props.className),
+        tabIndex: disabled ? -1 : (props.tabIndex ?? commonProps.tabIndex),
+        onClick: disabled
+          ? (event: React.MouseEvent<HTMLElement>) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          : mergeEventHandlers(handleClick, child.props.onClick),
+        children: (
+          <>
+            <Text
+              level={isSelected ? 'md-semibold' : 'md'}
+              className={textStyle}
+            >
+              {child.props.children}
+              {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+            </Text>
+            <Text
+              aria-hidden
+              level='md-semibold'
+              className={cx(textStyle, hiddenTextStyle)}
+            >
+              {child.props.children}
+              {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+            </Text>
+          </>
+        ),
+      });
+    }
+  }
+
+  const { ref: buttonRef, ...buttonProps } = commonProps;
 
   return (
     <button
-      ref={ref}
-      className={style}
-      data-testid={testId}
-      role='tab'
-      aria-selected={isActive}
-      onClick={() => setActiveTab(value)}
-      {...props}
+      {...buttonProps}
+      ref={buttonRef as React.Ref<HTMLButtonElement>}
+      disabled={disabled}
+      type={
+        (props as { type?: 'button' | 'submit' | 'reset' }).type ?? 'button'
+      }
     >
-      {label} {counter !== undefined ? `(${counter})` : ''}
+      <Text
+        level={isSelected ? 'md-semibold' : 'md'}
+        className={textStyle}
+      >
+        {labelContent}
+        {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+      </Text>
+      <Text
+        aria-hidden
+        level='md-semibold'
+        className={cx(textStyle, hiddenTextStyle)}
+      >
+        {labelContent}
+        {resolvedCount !== undefined ? ` ${resolvedCount}` : ''}
+      </Text>
     </button>
   );
 };

package/lib/components/Tabs/TabContext.tsx

@@ -1,20 +1,33 @@
 import { createContext, use } from 'react';
 
-interface TabContextType {
-  activeTab: string;
-  setActiveTab: (value: string) => void;
-  onChange?: (value: string) => void;
-  fullWidth?: boolean;
-  color?: string;
+export type TabsActivationMode = 'automatic' | 'manual';
+export type TabsOrientation = 'horizontal' | 'vertical';
+
+export interface TabsContextType {
+  value: string | undefined;
+  setValue: (value: string) => void;
+  baseId: string;
+  activationMode: TabsActivationMode;
+  orientation: TabsOrientation;
+  fullWidth: boolean;
+  panelValues: Set<string>;
 }
 
-const TabContext = createContext<TabContextType | undefined>(undefined);
+const TabContext = createContext<TabsContextType | undefined>(undefined);
+
+export const getTabId = (baseId: string, value: string) =>
+  `${baseId}-tab-${value}`.replace(/[^a-zA-Z0-9_-]/g, '-');
+
+export const getTabPanelId = (baseId: string, value: string) =>
+  `${baseId}-panel-${value}`.replace(/[^a-zA-Z0-9_-]/g, '-');
 
 export const useTabContext = () => {
   const context = use(TabContext);
+
   if (!context) {
     throw new Error('Tab components must be used within a Tabs component');
   }
+
   return context;
 };
 

package/lib/components/Tabs/Tabs.stories.tsx

@@ -1,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Tabs from './Tabs';
 
 const meta = {
@@ -7,89 +8,107 @@ const meta = {
   parameters: {
     layout: 'padded',
   },
-  args: {
-    activeTab: '',
-  },
 } satisfies Meta<typeof Tabs>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FullWidth: Story = {
-  name: 'Full width',
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('overview');
+
+    return (
+      <Tabs
+        value={value}
+        onValueChange={setValue}
+      >
+        <Tabs.List fullWidth>
+          <Tabs.Tab value='overview'>Overview</Tabs.Tab>
+          <Tabs.Tab value='modules'>Modules</Tabs.Tab>
+          <Tabs.Tab value='people'>People</Tabs.Tab>
+          <Tabs.Tab value='settings'>Settings</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='overview'>Overview content</Tabs.Panel>
+        <Tabs.Panel value='modules'>Modules content</Tabs.Panel>
+        <Tabs.Panel value='people'>People content</Tabs.Panel>
+        <Tabs.Panel value='settings'>Settings content</Tabs.Panel>
+      </Tabs>
+    );
+  },
+};
+
+export const AutoWidth: Story = {
+  name: 'Auto width',
   render: () => (
-    <Tabs activeTab='1'>
-      <Tabs.Tab
-        label='Tab Item 1'
-        value='1'
-      />
-      <Tabs.Tab
-        label='Tab Item 2'
-        value='2'
-      />
-      <Tabs.Tab
-        label='Tab Item 3'
-        value='3'
-      />
-      <Tabs.Tab
-        label='Tab Item 4'
-        value='4'
-      />
+    <Tabs defaultValue='overview'>
+      <Tabs.List>
+        <Tabs.Tab value='overview'>Overview</Tabs.Tab>
+        <Tabs.Tab value='modules'>Modules</Tabs.Tab>
+        <Tabs.Tab value='people'>People</Tabs.Tab>
+        <Tabs.Tab value='long-label'>
+          A longer tab item showing auto width
+        </Tabs.Tab>
+      </Tabs.List>
     </Tabs>
   ),
 };
 
-export const AutoWidth: Story = {
-  name: 'Auto width',
+export const Count: Story = {
   render: () => (
-    <Tabs
-      activeTab='1'
-      fullWidth={false}
-    >
-      <Tabs.Tab
-        label='Tab Item 1'
-        value='1'
-      />
-      <Tabs.Tab
-        label='Tab Item 2'
-        value='2'
-      />
-      <Tabs.Tab
-        label='Tab Item 3'
-        value='3'
-      />
-      <Tabs.Tab
-        label='A longer tab item showing auto width'
-        value='4'
-      />
+    <Tabs defaultValue='overview'>
+      <Tabs.List fullWidth>
+        <Tabs.Tab
+          count={12}
+          value='overview'
+        >
+          Overview
+        </Tabs.Tab>
+        <Tabs.Tab
+          count={6}
+          value='modules'
+        >
+          Modules
+        </Tabs.Tab>
+        <Tabs.Tab
+          count={9}
+          value='people'
+        >
+          People
+        </Tabs.Tab>
+        <Tabs.Tab
+          count={0}
+          value='settings'
+        >
+          Settings
+        </Tabs.Tab>
+      </Tabs.List>
     </Tabs>
   ),
 };
 
-export const Counter: Story = {
-  name: 'Counter',
+export const Links: Story = {
   render: () => (
-    <Tabs activeTab='1'>
-      <Tabs.Tab
-        counter={12}
-        label='Tab Item 1'
-        value='1'
-      />
-      <Tabs.Tab
-        counter={6}
-        label='Tab Item 2'
-        value='2'
-      />
-      <Tabs.Tab
-        counter={9}
-        label='Tab Item 3'
-        value='3'
-      />
-      <Tabs.Tab
-        counter={0}
-        label='Tab Item 4'
-        value='4'
-      />
+    <Tabs value='overview'>
+      <Tabs.List>
+        <Tabs.Tab
+          value='overview'
+          asChild
+        >
+          <a href='#overview'>Overview</a>
+        </Tabs.Tab>
+        <Tabs.Tab
+          value='modules'
+          asChild
+        >
+          <a href='#modules'>Modules</a>
+        </Tabs.Tab>
+        <Tabs.Tab
+          value='people'
+          asChild
+        >
+          <a href='#people'>People</a>
+        </Tabs.Tab>
+      </Tabs.List>
     </Tabs>
   ),
 };