uikit-react-public 0.11.13

package/lib/components/Input/Documentation.mdx

@@ -0,0 +1,94 @@
+import * as InputStories from './Input.stories';
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Canvas,
+  Controls,
+  Source,
+  ArgTypes,
+} from '@storybook/blocks';
+
+export const usage = {
+  default: `<Input />`,
+  placeholder: `<Input placeholder='Placeholder' />`,
+  disabled: `<Input disabled />`,
+  leftIcon: `<Input icon={<Icon.Settings />} iconPosition='left' />`,
+  rightIcon: `<Input icon={<Icon.Settings />} iconPosition='right' type='password' />`,
+  password: `<Input type='password' />`,
+  email: `<Input type='email' icon={<Icon.Facebook />} iconPosition='left' />`,
+};
+
+<Meta of={InputStories} />
+<Title />
+<Subtitle>
+  A styled, flexible Input component that supports icons, theming, and various
+  input types
+</Subtitle>
+
+The `<Input />` component is a customizable wrapper around the native HTML `<input>` element, supporting UCL design system styles, accessibility, and optional icon placement.
+
+Design specification available in Figma: <a href="https://www.figma.com/design/8Sm5PxWOWJYpYXAzhRzUzt/UCL-Design-System-UI-Kit?node-id=5862-4293&t=m0ZdPzYILv5R4XBj-4" target="_blank">UCL Design System UI Kit</a><br/>
+Reference for native HTML input attributes: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input" target="_blank">MDN Input Element Reference</a>
+
+<Canvas source={{ code: usage.default }} />
+
+## Usage
+
+Use the Input component wherever standard inputs are required with optional enhancements.
+
+<Source code={usage.default} />
+
+### Props
+
+- `testId`: **string** – Data-testid for testing selectors (default: `ucl-uikit-input`)
+- `icon`: **ReactElement** – Optional icon element to render inside the input wrapper
+- `iconPosition`: **'left' | 'right'** – Position of the icon relative to the input
+- `type`: **string** – Input type (e.g. `text`, `password`, `email`, etc.)
+- `disabled`: **boolean** – Disables the input field
+- `placeholder`: **string** – Placeholder text
+- All standard HTML `<input>` props are supported
+
+# Variants
+
+<Canvas
+  of={InputStories.Default}
+  sourceState='shown'
+  source={{ code: usage.default }}
+/>
+
+<Canvas
+  of={InputStories.Placeholder}
+  sourceState='shown'
+  source={{ code: usage.placeholder }}
+/>
+
+<Canvas
+  of={InputStories.Disabled}
+  sourceState='shown'
+  source={{ code: usage.disabled }}
+/>
+
+<Canvas
+  of={InputStories.LeftIcon}
+  sourceState='shown'
+  source={{ code: usage.leftIcon }}
+/>
+
+<Canvas
+  of={InputStories.RightIcon}
+  sourceState='shown'
+  source={{ code: usage.rightIcon }}
+/>
+
+<Canvas
+  of={InputStories.Password}
+  sourceState='shown'
+  source={{ code: usage.password }}
+/>
+
+<Canvas
+  of={InputStories.Email}
+  sourceState='shown'
+  source={{ code: usage.email }}
+/>

package/lib/components/Input/Input.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from '../../../lib';
+import { Icon } from '../../../lib';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Ready to use/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const LeftIcon: Story = {
+  args: {
+    icon: <Icon.Settings />,
+    iconPosition: 'left',
+  },
+};
+
+export const RightIcon: Story = {
+  args: {
+    icon: <Icon.Settings />,
+    iconPosition: 'right',
+  },
+};
+
+export const Password: Story = {
+  args: {
+    icon: <Icon.Settings />,
+    iconPosition: 'left',
+  },
+};
+
+export const Email: Story = {
+  args: {
+    icon: <Icon.Settings />,
+    iconPosition: 'left',
+  },
+};

package/lib/components/Input/Input.tsx

@@ -0,0 +1,150 @@
+import {
+  memo,
+  InputHTMLAttributes,
+  forwardRef,
+  use,
+  ReactElement,
+} from 'react';
+import useTheme from '../../theme/useTheme';
+import { css, cx } from '@emotion/css';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import { FieldContext } from '../Field';
+import { IconProps } from '../Icon';
+import { IconButtonProps } from '../IconButton/IconButton';
+
+export const NAME = 'ucl-uikit-input';
+export const INPUT_NAME = 'ucl-uikit-input__input';
+
+export interface InputBaseProps extends InputHTMLAttributes<HTMLInputElement> {
+  icon?: ReactElement<IconProps>;
+  iconPosition?: 'left' | 'right';
+  iconButton?: ReactElement<IconButtonProps>;
+  inputClassName?: string;
+  testId?: string;
+}
+
+export type InputProps = InputBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const Input = forwardRef<Ref, InputProps>(
+  (
+    {
+      testId = NAME,
+      icon,
+      iconPosition = 'left',
+      iconButton,
+      inputClassName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const { disabled: contextDisabled, id: contextId } = use(FieldContext);
+    const disabled = props.disabled ?? contextDisabled;
+    const id = props.id ?? contextId;
+
+    const inputBaseStyle = css`
+      height: 48px;
+      width: 100%;
+      padding: 0 ${theme.padding.p16};
+      line-height: ${theme.padding.p48};
+      box-sizing: border-box;
+      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;
+
+      &::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;
+    `;
+
+    const padLeftStyle = css`
+      padding-left: ${theme.padding.p48};
+    `;
+
+    const padRightStyle = css`
+      padding-right: ${theme.padding.p48};
+    `;
+
+    const inputStyle = cx(
+      INPUT_NAME,
+      inputBaseStyle,
+      !disabled && activeAndFocusStyle,
+      disabled && disabledStyle,
+      icon && iconPosition === 'left' && padLeftStyle,
+      ((icon && iconPosition === 'right') || iconButton) && padRightStyle,
+      inputClassName
+    );
+
+    const containerBase = css`
+      position: relative;
+      display: flex;
+      align-items: center;
+    `;
+
+    const wrapperClass = cx(
+      NAME,
+      containerBase,
+      marginsStyle(props, theme),
+      className
+    );
+
+    const iconWrapperBaseStyle = css`
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+
+    const leftPositionStyle = css`
+      left: ${theme.padding.p16};
+    `;
+
+    const rightPositionStyle = css`
+      right: ${theme.padding.p16};
+    `;
+
+    const iconWrapperStyle = cx(
+      iconWrapperBaseStyle,
+      iconPosition === 'left' && leftPositionStyle,
+      iconPosition === 'right' && rightPositionStyle
+    );
+
+    const iconButtonStyle = cx(iconWrapperBaseStyle, rightPositionStyle);
+
+    return (
+      <span className={wrapperClass}>
+        <input
+          ref={ref}
+          id={id}
+          className={inputStyle}
+          data-testid={testId}
+          disabled={disabled}
+          {...props}
+        />
+        {icon && <span className={iconWrapperStyle}>{icon}</span>}
+        {iconButton && <span className={iconButtonStyle}>{iconButton}</span>}
+      </span>
+    );
+  }
+);
+
+export default memo(Input);

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

@@ -0,0 +1,108 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Input from '../Input';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Input', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Input />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: value prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Input
+          value='abc'
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: placeholder prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Input placeholder='Type your value...' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Input testId='test123' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Input />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByTestId('ucl-uikit-input');
+    expect(input).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Input testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByTestId('custom-test-id');
+    expect(input).toBeDefined();
+  });
+
+  test('text entry: uncontrolled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Input />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.value).toBe('');
+    await user.type(input, 'a');
+    expect(input.value).toBe('a');
+    await user.type(input, 'b');
+    expect(input.value).toBe('ab');
+  });
+
+  test('text entry: disabled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Input disabled />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.value).toBe('');
+    await user.type(input, 'a');
+    expect(input.value).toBe('');
+  });
+
+  test('Can accept id prop', () => {
+    render(
+      <ThemeContextProvider>
+        <Input id='custom-id' />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.id).toBe('custom-id');
+  });
+});

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

@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Input > snapshot: no props 1`] = `
+<span
+  class="ucl-uikit-input css-1bpb1dw"
+>
+  <input
+    class="ucl-uikit-input__input css-1nizqet"
+    data-testid="ucl-uikit-input"
+    id=""
+  />
+</span>
+`;
+
+exports[`Input > snapshot: placeholder prop 1`] = `
+<span
+  class="ucl-uikit-input css-1bpb1dw"
+>
+  <input
+    class="ucl-uikit-input__input css-1nizqet"
+    data-testid="ucl-uikit-input"
+    id=""
+    placeholder="Type your value..."
+  />
+</span>
+`;
+
+exports[`Input > snapshot: testId prop 1`] = `
+<span
+  class="ucl-uikit-input css-1bpb1dw"
+>
+  <input
+    class="ucl-uikit-input__input css-1nizqet"
+    data-testid="test123"
+    id=""
+  />
+</span>
+`;
+
+exports[`Input > snapshot: value prop 1`] = `
+<span
+  class="ucl-uikit-input css-1bpb1dw"
+>
+  <input
+    class="ucl-uikit-input__input css-1nizqet"
+    data-testid="ucl-uikit-input"
+    id=""
+    value="abc"
+  />
+</span>
+`;

package/lib/components/Input/index.ts

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

package/lib/components/Label/Label.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Label from './Label';
+
+const meta = {
+  title: 'Components/Ready to use/Label',
+  component: Label,
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default label',
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    children: 'Inline label',
+    type: 'inline',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled label',
+    disabled: true,
+  },
+};
+
+export const Optional: Story = {
+  args: {
+    children: 'Optional label',
+    optional: true,
+  },
+};
+
+export const WithLongText: Story = {
+  name: 'With long text',
+  args: {
+    children:
+      "This is the form field which you should use if you are going to the event at UCL this spring and you want to register for the event. It's a very long label. The event will be a lot of fun and you should definitely come along.",
+  },
+};

package/lib/components/Label/Label.tsx

@@ -0,0 +1,99 @@
+import { LabelHTMLAttributes, forwardRef, memo, use } 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-label';
+
+export interface LabelBaseProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  type?: 'block' | 'inline';
+  disabled?: boolean;
+  optional?: boolean;
+  testId?: string;
+}
+
+export type LabelProps = LabelBaseProps & MarginProps;
+
+export type Ref = HTMLLabelElement;
+
+const Label = forwardRef<Ref, LabelProps>(
+  (
+    {
+      type = 'block',
+      disabled,
+      optional,
+      testId = NAME,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const {
+      disabled: contextDisabled,
+      optional: contextOptional,
+      id: contextId,
+    } = use(FieldContext);
+    disabled = disabled ?? contextDisabled;
+    optional = optional ?? contextOptional;
+    const htmlFor = props.htmlFor ?? contextId;
+
+    const baseStyle = css`
+      width: 100%;
+      min-width: 50px;
+      max-width: 660px;
+      color: ${theme.color.neutral.grey90};
+      font-family: ${theme.font.family.primary};
+      font-size: ${theme.font.size.f16};
+    `;
+
+    const blockStyle = css`
+      display: block;
+      font-weight: ${theme.font.weight.bold};
+      line-height: ${theme.font.lineHeight.h140};
+    `;
+
+    const inlineStyle = css`
+      display: inline;
+      font-weight: ${theme.font.weight.regular};
+      line-height: ${theme.font.lineHeight.h150};
+    `;
+
+    const disabledStyle = css`
+      color: ${theme.color.neutral.grey20};
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      marginsStyle(props, theme),
+      type === 'block' && blockStyle,
+      type === 'inline' && inlineStyle,
+      disabled && disabledStyle,
+      className
+    );
+
+    const optionalStyle = css`
+      font-weight: ${theme.font.weight.regular};
+      font-style: italic;
+    `;
+
+    return (
+      <label
+        ref={ref}
+        htmlFor={htmlFor}
+        className={style}
+        data-testid={testId}
+        {...props}
+      >
+        {children}
+        {optional && <span className={optionalStyle}> (optional)</span>}
+      </label>
+    );
+  }
+);
+
+export default memo(Label);