uikit-react-public 0.11.13

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

@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tabs > snapshot: Auto width 1`] = `
+<div
+  class="ucl-uikit-tabs css-kfvqex"
+  data-testid="ucl-uikit-tabs"
+  role="tablist"
+>
+  <button
+    aria-selected="true"
+    class="ucl-uikit-tab css-u8nay3"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 1
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-eoe29w"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 2
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-eoe29w"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 3
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-eoe29w"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    A longer tab item showing auto width
+     
+  </button>
+</div>
+`;
+
+exports[`Tabs > snapshot: Counter 1`] = `
+<div
+  class="ucl-uikit-tabs css-kfvqex"
+  data-testid="ucl-uikit-tabs"
+  role="tablist"
+>
+  <button
+    aria-selected="true"
+    class="ucl-uikit-tab css-1gzur5d"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 1
+     
+    (12)
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 2
+     
+    (6)
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 3
+     
+    (9)
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 4
+     
+    (0)
+  </button>
+</div>
+`;
+
+exports[`Tabs > snapshot: Custom test id 1`] = `
+<div
+  class="ucl-uikit-tabs css-kfvqex"
+  data-testid="custom-test-id"
+  role="tablist"
+>
+  <button
+    aria-selected="true"
+    class="ucl-uikit-tab css-1gzur5d"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 1
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 2
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 3
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 4
+     
+  </button>
+</div>
+`;
+
+exports[`Tabs > snapshot: Minimal props 1`] = `
+<div
+  class="ucl-uikit-tabs css-kfvqex"
+  data-testid="ucl-uikit-tabs"
+  role="tablist"
+>
+  <button
+    aria-selected="true"
+    class="ucl-uikit-tab css-1gzur5d"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 1
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 2
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 3
+     
+  </button>
+  <button
+    aria-selected="false"
+    class="ucl-uikit-tab css-b3abfp"
+    data-testid="ucl-uikit-tab"
+    role="tab"
+  >
+    Tab Item 4
+     
+  </button>
+</div>
+`;

package/lib/components/Tabs/index.ts

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

package/lib/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Textarea from './Textarea';
+
+const meta = {
+  title: 'Components/Ready to use/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const ResizeNone: Story = {
+  name: 'Resize: none',
+  args: {
+    resize: 'none',
+    disabled: false,
+  },
+};
+
+export const ResizeHorizontal: Story = {
+  name: 'Resize: horizontal',
+  args: {
+    resize: 'horizontal',
+    disabled: false,
+  },
+};
+
+export const ResizeVertical: Story = {
+  name: 'Resize: vertical',
+  args: {
+    resize: 'vertical',
+    disabled: false,
+  },
+};
+
+export const ResizeBoth: Story = {
+  name: 'Resize: both',
+  args: {
+    resize: 'both',
+    disabled: false,
+  },
+};

package/lib/components/Textarea/Textarea.tsx

@@ -0,0 +1,107 @@
+import {
+  memo,
+  forwardRef,
+  TextareaHTMLAttributes,
+  use,
+  useEffect,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { FieldContext } from '../Field';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-textarea';
+
+export interface TextareaBaseProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  testId?: string;
+}
+
+export type TextareaProps = TextareaBaseProps & MarginProps;
+
+export type Ref = HTMLTextAreaElement;
+
+const Textarea = forwardRef<Ref, TextareaProps>(
+  ({ value, resize = 'vertical', testId = NAME, className, ...props }, ref) => {
+    const [theme] = useTheme();
+
+    const {
+      disabled: contextDisabled,
+      id: contextId,
+      setCharCount,
+    } = use(FieldContext);
+    const disabled = props.disabled ?? contextDisabled;
+    const id = props.id ?? contextId;
+
+    useEffect(() => {
+      setCharCount(
+        value !== undefined && typeof value === 'string' ? value.length : 0
+      );
+    }, [value, setCharCount]);
+
+    const baseStyle = css`
+      line-height: ${theme.font.lineHeight.h150};
+      box-sizing: border-box;
+      padding: ${theme.padding.p16};
+      font-family: ${theme.font.family.primary};
+      font-size: ${theme.font.size.f16};
+      color: ${theme.color.text.primary};
+      background-color: ${theme.color.neutral.white};
+      border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
+      outline: none;
+      box-sizing: border-box;
+      width: 100%;
+      min-width: 50px;
+      max-width: 660px;
+      height: 106px;
+      min-height: 64px;
+
+      // Note: resize property is not supported in Safari on iOS
+      ${resize === 'none' && 'resize: none;'}
+      ${resize === 'horizontal' && 'resize: horizontal;'}
+      ${resize === 'vertical' && 'resize: vertical;'}
+      ${resize === 'both' && 'resize: both;'}
+
+      &::placeholder {
+        color: ${theme.color.text.muted};
+      }
+    `;
+
+    const activeAndFocusStyle = css`
+      &:focus-visible {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const disabledStyle = css`
+      color: ${theme.color.text.disabled};
+      border-color: ${theme.color.neutral.grey20};
+      cursor: not-allowed;
+      resize: none;
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      marginsStyle(props, theme),
+      !disabled && activeAndFocusStyle,
+      disabled && disabledStyle,
+      className
+    );
+
+    return (
+      <textarea
+        ref={ref}
+        value={value}
+        id={id}
+        className={style}
+        data-testid={testId}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  }
+);
+
+export default memo(Textarea);

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

@@ -0,0 +1,125 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Textarea from '../Textarea';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Textarea', () => {
+  // Snapshot tests
+
+  test('snapshot: minimal props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Textarea />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: custom test id', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Textarea testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: Placeholder', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Textarea placeholder='test' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: Disabled', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Textarea disabled />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('Test ID: Default', () => {
+    render(
+      <ThemeContextProvider>
+        <Textarea />
+      </ThemeContextProvider>
+    );
+    const textarea = screen.getByTestId('ucl-uikit-textarea');
+    expect(textarea).toBeDefined();
+  });
+
+  test('Test ID: Custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Textarea testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const customTestId = screen.getByTestId('custom-test-id');
+    expect(customTestId).toBeDefined();
+  });
+
+  test('Placeholder', () => {
+    render(
+      <ThemeContextProvider>
+        <Textarea placeholder='Test' />
+      </ThemeContextProvider>
+    );
+    const textarea = screen.getByTestId(
+      'ucl-uikit-textarea'
+    ) as HTMLTextAreaElement;
+    expect(textarea.placeholder).toBe('Test');
+  });
+
+  test('Typing in Textarea', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Textarea />
+      </ThemeContextProvider>
+    );
+    const textarea = screen.getByTestId(
+      'ucl-uikit-textarea'
+    ) as HTMLTextAreaElement;
+    expect(textarea.value).toBe('');
+    await user.type(textarea, 'a');
+    expect(textarea.value).toBe('a');
+    await user.type(textarea, 'b');
+    expect(textarea.value).toBe('ab');
+  });
+
+  test('Typing in Textarea: Disabled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Textarea disabled />
+      </ThemeContextProvider>
+    );
+    const textarea = screen.getByTestId(
+      'ucl-uikit-textarea'
+    ) as HTMLTextAreaElement;
+    expect(textarea.value).toBe('');
+    await user.type(textarea, 'a');
+    expect(textarea.value).toBe('');
+    await user.type(textarea, 'b');
+    expect(textarea.value).toBe('');
+  });
+
+  test('Can accept id prop', () => {
+    render(
+      <ThemeContextProvider>
+        <Textarea id='custom-id' />
+      </ThemeContextProvider>
+    );
+    const textarea = screen.getByTestId(
+      'ucl-uikit-textarea'
+    ) as HTMLTextAreaElement;
+    expect(textarea.id).toBe('custom-id');
+  });
+});

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

@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Textarea > snapshot: Disabled 1`] = `
+<textarea
+  class="ucl-uikit-textarea css-1o8pbxe"
+  data-testid="ucl-uikit-textarea"
+  disabled=""
+  id=""
+/>
+`;
+
+exports[`Textarea > snapshot: Placeholder 1`] = `
+<textarea
+  class="ucl-uikit-textarea css-19nnvor"
+  data-testid="ucl-uikit-textarea"
+  id=""
+  placeholder="test"
+/>
+`;
+
+exports[`Textarea > snapshot: custom test id 1`] = `
+<textarea
+  class="ucl-uikit-textarea css-19nnvor"
+  data-testid="custom-test-id"
+  id=""
+/>
+`;
+
+exports[`Textarea > snapshot: minimal props 1`] = `
+<textarea
+  class="ucl-uikit-textarea css-19nnvor"
+  data-testid="ucl-uikit-textarea"
+  id=""
+/>
+`;

package/lib/components/Textarea/index.ts

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

package/lib/components/Toggle/Documentation.mdx

@@ -0,0 +1,114 @@
+import * as ToggleStories from './Toggle.stories';
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Canvas,
+  Controls,
+  Source,
+  ArgTypes,
+} from '@storybook/blocks';
+
+export const usage = {
+  default: `<Toggle />`,
+  checked: `<Toggle checked={true} />`,
+  disabled: `<Toggle disabled={true} />`,
+  disabledChecked: `<Toggle disabled={true} checked={true} />`,
+  interactive: `<Toggle onClick={() => console.log('Toggle clicked')} />`,
+};
+
+<Meta of={ToggleStories} />
+<Title />
+<Subtitle>A toggle switch component with UCL branded styling</Subtitle>
+
+The `<Toggle>` component provides a switch control that allows users to turn an option on or off. It's designed following the UCL Design System guidelines and provides visual feedback through different states.
+
+Design specification available in Figma: <a href="https://www.figma.com/design/8Sm5PxWOWJYpYXAzhRzUzt/UCL-Design-System-UI-Kit" target="_blank">UCL Design System UI Kit | Toggle</a>
+
+The component includes responsive styling with smooth transitions between states. The toggle handle moves from left to right when the component changes from unchecked to checked state.
+
+<Canvas
+  source={{
+    code: usage.default,
+  }}
+/>
+
+<Controls />
+
+## Usage
+
+Use the `<Toggle>` component when you need to provide users with a binary choice that can be toggled on or off. The toggle provides an immediate visual indication of its state.
+
+<Source code={usage.default} />
+
+### Props
+
+- `checked`: A **boolean** value determining whether the toggle is in the on (true) or off (false) state. Default is `false`.
+- `disabled`: A **boolean** value. If `true`, the toggle will be non-interactive. Default is `false`.
+- `onClick`: A **function** that will be called when the toggle is clicked (if not disabled).
+- All other standard button props are also supported.
+
+The component uses a `data-test-id` attribute with value `ucl-uikit-toggle` for testing purposes.
+
+<ArgTypes />
+
+## Variants
+
+### Default (Unchecked)
+
+<Canvas
+  of={ToggleStories.Default}
+  sourceState='shown'
+  source={{
+    code: usage.default,
+  }}
+/>
+
+### Checked
+
+<Canvas
+  of={ToggleStories.Checked}
+  sourceState='shown'
+  source={{
+    code: usage.checked,
+  }}
+/>
+
+### Disabled
+
+<Canvas
+  of={ToggleStories.Disabled}
+  sourceState='shown'
+  source={{
+    code: usage.disabled,
+  }}
+/>
+
+### Disabled and Checked
+
+<Canvas
+  of={ToggleStories.DisabledChecked}
+  sourceState='shown'
+  source={{
+    code: usage.disabledChecked,
+  }}
+/>
+
+### Interactive Example
+
+<Canvas
+  of={ToggleStories.Interactive}
+  sourceState='shown'
+  source={{
+    code: usage.interactive,
+  }}
+/>
+
+## Accessibility
+
+The Toggle component implements the following accessibility features:
+
+- Uses appropriate ARIA attributes (`role="toggle"`, `aria-checked`, `aria-disabled`)
+- Supports keyboard navigation
+- Provides visual focus indicators
+- Color contrast meets WCAG AA standards

package/lib/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Toggle from './Toggle';
+
+const meta = {
+  title: 'Components/Ready to use/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  name: 'Disabled and Checked',
+  args: {
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'This toggle can be interacted with. Try clicking it!',
+      },
+    },
+  },
+};