uikit-react-public 0.11.13

package/lib/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap

@@ -0,0 +1,73 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SpinnerSvg > Snapshot: custom className 1`] = `
+<svg
+  class="ucl-uikit-spinner css-1dy6s6p"
+  data-testid="ucl-uikit-spinner"
+  height="24"
+  viewBox="0 0 50 50"
+  width="24"
+>
+  <g
+    class="css-1tl81jg"
+  >
+    <circle
+      class="css-lyzf49"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      stroke="currentColor"
+      stroke-width="8"
+    />
+  </g>
+</svg>
+`;
+
+exports[`SpinnerSvg > snapshot: custom size 1`] = `
+<svg
+  class="ucl-uikit-spinner"
+  data-testid="ucl-uikit-spinner"
+  height="32"
+  viewBox="0 0 50 50"
+  width="32"
+>
+  <g
+    class="css-1tl81jg"
+  >
+    <circle
+      class="css-lyzf49"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      stroke="currentColor"
+      stroke-width="8"
+    />
+  </g>
+</svg>
+`;
+
+exports[`SpinnerSvg > snapshot: default props 1`] = `
+<svg
+  class="ucl-uikit-spinner"
+  data-testid="ucl-uikit-spinner"
+  height="24"
+  viewBox="0 0 50 50"
+  width="24"
+>
+  <g
+    class="css-1tl81jg"
+  >
+    <circle
+      class="css-lyzf49"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      stroke="currentColor"
+      stroke-width="8"
+    />
+  </g>
+</svg>
+`;

package/lib/components/Spinner/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Spinner';
+export type { SpinnerProps } from './Spinner';

package/lib/components/Table/Table.tsx

@@ -0,0 +1,68 @@
+import {
+  memo,
+  TableHTMLAttributes,
+  forwardRef,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-table';
+
+export interface TableProps
+  extends TableHTMLAttributes<HTMLTableElement> {
+  testId?: string;
+}
+
+export type Ref = HTMLTableElement;
+
+const Table = forwardRef<Ref, TableProps>(
+  (
+    { testId = NAME, className, children, ...props },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const baseStyle = css`
+      border-collapse: collapse;
+      font-family: ${theme.font.family.primary};
+      color: ${theme.color.text.primary};
+      text-align: left;
+
+      th,
+      td {
+        padding: ${theme.padding.p8};
+        border-bottom: 1px solid
+          ${theme.color.neutral.grey20};
+      }
+
+      thead {
+        th {
+          padding-bottom: ${theme.padding.p2};
+          font-weight: 400;
+          color: ${theme.color.text.secondary};
+        }
+      }
+
+      tbody {
+        th {
+          font-weight: 700;
+        }
+      }
+    `;
+
+    const style = cx(NAME, baseStyle, className);
+
+    return (
+      <table
+        ref={ref}
+        className={style}
+        data-testid={testId}
+        {...props}
+      >
+        {children}
+      </table>
+    );
+  }
+);
+
+export default memo(Table);

package/lib/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export type { TableProps } from './Table';

package/lib/components/Tabs/Tab.tsx

@@ -0,0 +1,83 @@
+import { memo, ButtonHTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { useTabContext } from './TabContext';
+
+export const NAME = 'ucl-uikit-tab';
+
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  testId?: string;
+  label: string;
+  value: string;
+  counter?: number;
+  ref?: React.RefObject<HTMLButtonElement>;
+}
+
+const Tab = ({
+  testId = NAME,
+  className,
+  label,
+  value,
+  counter,
+  ref,
+  ...props
+}: TabProps) => {
+  const [theme] = useTheme();
+  const { activeTab, setActiveTab, fullWidth } = useTabContext();
+  const isActive = activeTab === value;
+
+  const baseStyle = css`
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-family: ${theme.font.family.primary};
+    color: ${theme.color.text.secondary};
+    border-bottom: 4px solid transparent;
+    text-align: center;
+    font-style: normal;
+    line-height: 140%;
+    font-size: ${theme.font.size.f16};
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px 8px 16px;
+    ${fullWidth ? 'flex: 1 0 0;' : 'width: auto;'}
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `;
+
+  const activeStyle = css`
+    border-bottom: 4px solid ${theme.color.interaction.blue70};
+    color: ${theme.color.text.primary};
+    margin-bottom: -1px;
+    font-weight: 700;
+
+    &:hover {
+      text-decoration: none;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, isActive && activeStyle, className);
+
+  return (
+    <button
+      ref={ref}
+      className={style}
+      data-testid={testId}
+      role='tab'
+      aria-selected={isActive}
+      onClick={() => setActiveTab(value)}
+      {...props}
+    >
+      {label} {counter !== undefined ? `(${counter})` : ''}
+    </button>
+  );
+};
+
+export default memo(Tab);

package/lib/components/Tabs/TabContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, use } from 'react';
+
+interface TabContextType {
+  activeTab: string;
+  setActiveTab: (value: string) => void;
+  onChange?: (value: string) => void;
+  fullWidth?: boolean;
+}
+
+const TabContext = createContext<TabContextType | undefined>(undefined);
+
+export const useTabContext = () => {
+  const context = use(TabContext);
+  if (!context) {
+    throw new Error('Tab components must be used within a Tabs component');
+  }
+  return context;
+};
+
+export default TabContext;

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Tabs from './Tabs';
+
+const meta = {
+  title: 'Components/Work in progress/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FullWidth: Story = {
+  name: 'Full width',
+  render: () => (
+    <Tabs>
+      <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>
+  ),
+};
+
+export const AutoWidth: Story = {
+  name: 'Auto width',
+  render: () => (
+    <Tabs 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>
+  ),
+};
+
+export const Counter: Story = {
+  name: 'Counter',
+  render: () => (
+    <Tabs>
+      <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>
+  ),
+};

package/lib/components/Tabs/Tabs.tsx

@@ -0,0 +1,98 @@
+import {
+  memo,
+  HTMLAttributes,
+  useState,
+  Children,
+  isValidElement,
+  useEffect,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import TabContext from './TabContext';
+import Tab, { TabProps } from './Tab';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-tabs';
+
+export interface TabsBaseProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  testId?: string;
+  onChange?: (value: string) => void;
+  fullWidth?: boolean;
+  ref?: React.RefObject<HTMLDivElement>;
+}
+
+export type TabsProps = TabsBaseProps & MarginProps;
+
+type TabsComponent = React.FC<TabsProps> & {
+  Tab: typeof Tab;
+};
+
+const TabsBase = ({
+  testId = NAME,
+  className,
+  children,
+  onChange,
+  fullWidth = true,
+  ref,
+  ...props
+}: TabsProps) => {
+  const [theme] = useTheme();
+  const [activeTab, setActiveTab] = useState<string>('');
+
+  useEffect(() => {
+    if (!activeTab) {
+      const firstValidTab = Children.toArray(children).find((child) => {
+        return (
+          isValidElement<TabProps>(child) &&
+          child.type === Tab &&
+          typeof child.props.value === 'string'
+        );
+      });
+
+      if (firstValidTab && isValidElement<TabProps>(firstValidTab)) {
+        const firstValue = firstValidTab.props.value;
+        setActiveTab(firstValue);
+        onChange?.(firstValue);
+      }
+    }
+  }, [activeTab, children, onChange]);
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    if (onChange) onChange(value);
+  };
+
+  const baseStyle = css`
+    display: flex;
+    border-bottom: 1px solid ${theme.color.neutral.grey20};
+  `;
+
+  const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+  return (
+    <TabContext.Provider
+      value={{
+        activeTab,
+        setActiveTab: handleTabChange,
+        onChange,
+        fullWidth,
+      }}
+    >
+      <div
+        ref={ref}
+        className={style}
+        data-testid={testId}
+        role='tablist'
+        {...props}
+      >
+        {children}
+      </div>
+    </TabContext.Provider>
+  );
+};
+
+const Tabs = memo(TabsBase) as unknown as TabsComponent;
+Tabs.Tab = Tab;
+
+export default Tabs;

package/lib/components/Tabs/__tests__/Tabs.test.tsx

@@ -0,0 +1,116 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import Tabs from '../Tabs';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Tabs', () => {
+  // Snapshot tests
+
+  test('snapshot: Minimal props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Tabs>
+          <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>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: Custom test id', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Tabs data-testid='custom-test-id'>
+          <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>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: Auto width', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Tabs 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>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: Counter', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Tabs>
+          <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>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+});