uikit-react-public 0.11.13

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

@@ -0,0 +1,46 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Paragraph > snapshot: custom test id 1`] = `
+<p
+  class="ucl-uikit-paragrah css-1q7fap"
+  data-testid="custom-test-id"
+>
+  This is a test
+</p>
+`;
+
+exports[`Paragraph > snapshot: emphasis 1`] = `
+<p
+  class="ucl-uikit-paragrah css-1q7fap"
+  data-testid="ucl-uikit-paragrah"
+>
+  high emphasis
+</p>
+`;
+
+exports[`Paragraph > snapshot: minimal props 1`] = `
+<p
+  class="ucl-uikit-paragrah css-1q7fap"
+  data-testid="ucl-uikit-paragrah"
+>
+  This is a test
+</p>
+`;
+
+exports[`Paragraph > snapshot: no margins 1`] = `
+<p
+  class="ucl-uikit-paragrah css-1trsbhh"
+  data-testid="ucl-uikit-paragrah"
+>
+  no margins
+</p>
+`;
+
+exports[`Paragraph > snapshot: size 1`] = `
+<p
+  class="ucl-uikit-paragrah css-u9mr1g"
+  data-testid="ucl-uikit-paragrah"
+>
+  standfirst
+</p>
+`;

package/lib/components/Paragraph/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';
+// TODO: Remove aliased export in future breaking release
+// <Paragraph> will be used in place of <Text> in the future
+export { default as Text } from './Paragraph';
+export type { ParagraphProps as TextProps } from './Paragraph';

package/lib/components/Radio/LabelledRadio.tsx

@@ -0,0 +1,111 @@
+import { memo, forwardRef, ReactNode, useId } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Radio, { RadioProps } from './Radio';
+import Label, { LabelProps } from '../Label';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-labelled-radio';
+
+export interface LabelledRadioBaseProps extends RadioProps {
+  labelProps?: LabelProps;
+  children: ReactNode;
+  testId?: string;
+}
+
+export type LabelledRadioProps = LabelledRadioBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const LabelledRadio = forwardRef<Ref, LabelledRadioProps>(
+  (
+    {
+      id,
+      labelProps,
+      testId = NAME,
+      m,
+      mv,
+      mh,
+      mt,
+      mb,
+      ml,
+      mr,
+      noMargins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const generatedId = useId();
+
+    id = id ?? generatedId;
+
+    const baseStyle = css`
+      margin-top: ${theme.margin.m16};
+      margin-bottom: ${theme.margin.m16};
+      display: flex;
+      align-items: center;
+      gap: ${theme.m16};
+      width: fit-content;
+    `;
+
+    const focusStyle = css`
+      &:focus-within {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      !props.disabled && focusStyle,
+      marginsStyle(
+        {
+          m,
+          mv,
+          mh,
+          mt,
+          mb,
+          ml,
+          mr,
+          noMargins,
+        },
+        theme
+      ),
+      className
+    );
+
+    const radioStyle = css`
+      &:focus-within {
+        box-shadow: none;
+      }
+    `;
+
+    return (
+      <div
+        className={style}
+        data-testid={testId}
+      >
+        <Radio
+          ref={ref}
+          className={radioStyle}
+          id={id}
+          data-testid={`${testId}__radio`}
+          {...props}
+        />
+        <Label
+          htmlFor={labelProps?.htmlFor ?? id}
+          data-testid={`${testId}__label`}
+          {...labelProps}
+        >
+          {children}
+        </Label>
+      </div>
+    );
+  }
+);
+
+export default memo(LabelledRadio);

package/lib/components/Radio/Radio.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+import Radio from './Radio';
+
+const meta = {
+  title: 'Components/Work in progress/Radio',
+  component: Radio,
+  argTypes: {
+    checked: { control: { type: 'boolean' } },
+    // defaultChecked: { control: { type: 'boolean' } },  // This doesn't work properly in the component as of 05/10/2024
+    disabled: { control: { type: 'boolean' } },
+  },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    const onChange = () => updateArgs({ checked: !args.checked });
+    return (
+      <Radio
+        {...args}
+        onChange={onChange}
+      />
+    );
+  },
+};

package/lib/components/Radio/Radio.tsx

@@ -0,0 +1,138 @@
+import {
+  memo,
+  InputHTMLAttributes,
+  forwardRef,
+  useState,
+  ChangeEvent,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-radio';
+
+export interface RadioBaseProps extends InputHTMLAttributes<HTMLInputElement> {
+  testId?: string;
+}
+
+export type RadioProps = RadioBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const Radio = forwardRef<Ref, RadioProps>(
+  (
+    { checked, defaultChecked, disabled, testId = NAME, className, ...props },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(
+      defaultChecked ?? false
+    );
+    const isChecked = isControlled ? checked : internalChecked;
+
+    const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalChecked(ev.target.checked);
+      }
+      props.onChange?.(ev);
+    };
+
+    const baseStyle = css`
+      position: relative;
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      border-radius: 50%;
+      border-width: ${theme.border.b1};
+      border-style: solid;
+      outline: none;
+      box-sizing: border-box;
+      color: ${theme.color.neutral.white};
+      transition:
+        background-color 0.15s ease-out,
+        border-color 0.15s ease-out;
+      cursor: pointer;
+    `;
+
+    const focusStyle = css`
+      &:focus-within {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const checkedStyle = css`
+      background-color: ${theme.color.interaction.blue70};
+      border-color: ${theme.color.interaction.blue70};
+      color: ${theme.color.neutral.white};
+    `;
+
+    const uncheckedStyle = css`
+      background-color: ${theme.color.neutral.white};
+      border-color: ${theme.color.neutral.grey60};
+    `;
+
+    const disabledStyle = css`
+      background-color: ${theme.color.neutral.grey20};
+      border-color: ${theme.color.neutral.grey20};
+      cursor: not-allowed;
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      marginsStyle(props, theme),
+      !disabled && focusStyle,
+      isChecked && checkedStyle,
+      !isChecked && uncheckedStyle,
+      disabled && disabledStyle,
+      className
+    );
+
+    const hiddenInputStyle = css`
+      cursor: inherit;
+      position: absolute;
+      opacity: 0;
+      left: -1px;
+      top: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      border-radius: 50%;
+      border: none;
+      margin: 0;
+      padding: 0;
+    `;
+
+    const checkStyle = css`
+      position: absolute;
+      left: 5px;
+      top: 5px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: ${theme.color.neutral.white};
+      user-select: none;
+      pointer-events: none;
+    `;
+
+    return (
+      <span className={style}>
+        <input
+          type='radio'
+          ref={ref}
+          className={hiddenInputStyle}
+          data-testid={testId}
+          disabled={disabled}
+          onChange={handleChange}
+          {...props}
+          {...(isControlled ? { checked } : { defaultChecked })}
+        />
+        {isChecked && <div className={checkStyle} />}
+      </span>
+    );
+  }
+);
+
+export default memo(Radio);

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

@@ -0,0 +1,87 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Radio from '../Radio';
+
+describe('Radio', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Radio />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: checked prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Radio
+          checked
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Radio testId='test123' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Radio />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByTestId('ucl-uikit-radio');
+    expect(checkbox).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Radio testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByTestId('custom-test-id');
+    expect(checkbox).toBeDefined();
+  });
+
+  test('click: uncontrolled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Radio />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByRole('radio') as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+    await user.click(checkbox);
+    expect(checkbox.checked).toBe(true);
+  });
+
+  test('click: disabled', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Radio disabled />
+      </ThemeContextProvider>
+    );
+    const checkbox = screen.getByRole('radio') as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+    await user.click(checkbox);
+    expect(checkbox.checked).toBe(false);
+  });
+});

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

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Radio > snapshot: checked prop 1`] = `
+<span
+  class="ucl-uikit-radio css-1q95rl4"
+>
+  <input
+    checked=""
+    class="css-19qtec1"
+    data-testid="ucl-uikit-radio"
+    type="radio"
+  />
+  <div
+    class="css-qvbxw4"
+  />
+</span>
+`;
+
+exports[`Radio > snapshot: no props 1`] = `
+<span
+  class="ucl-uikit-radio css-12hblv5"
+>
+  <input
+    class="css-19qtec1"
+    data-testid="ucl-uikit-radio"
+    type="radio"
+  />
+</span>
+`;
+
+exports[`Radio > snapshot: testId prop 1`] = `
+<span
+  class="ucl-uikit-radio css-12hblv5"
+>
+  <input
+    class="css-19qtec1"
+    data-testid="test123"
+    type="radio"
+  />
+</span>
+`;

package/lib/components/Radio/index.ts

@@ -0,0 +1,4 @@
+export { default } from './Radio';
+export type { RadioProps } from './Radio';
+export { default as LabelledRadio } from './LabelledRadio';
+export type { LabelledRadioProps } from './LabelledRadio';

package/lib/components/Select/Select.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Select from './Select';
+
+const meta = {
+  title: 'Components/Work in progress/Select',
+  component: Select,
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <option value='1'>Option 1</option>
+      <option value='2'>Option 2</option>
+      <option value='3'>Option 3</option>
+    </Select>
+  ),
+};
+
+export const NoOptions: Story = {
+  name: 'No options',
+  render: () => <Select />,
+};

package/lib/components/Select/Select.tsx

@@ -0,0 +1,82 @@
+import {
+  memo,
+  SelectHTMLAttributes,
+  forwardRef,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import { dataUri as chevronDownSvgDataUri } from '../Icon/svgs/ChevronDownSvg';
+
+export const NAME = 'ucl-uikit-select';
+
+export interface SelectProps
+  extends SelectHTMLAttributes<HTMLSelectElement> {
+  testId?: string;
+}
+
+export type Ref = HTMLSelectElement;
+
+const Select = forwardRef<Ref, SelectProps>(
+  ({ testId = NAME, className, ...props }, ref) => {
+    const [theme] = useTheme();
+
+    const baseStyle = css`
+      height: ${theme.padding.p48};
+      line-height: ${theme.padding.p48};
+      font-family: ${theme.font.family.primary};
+      padding: 0 ${theme.padding.p40} 0 ${theme.padding.p16};
+      background-color: ${theme.color.neutral.white};
+      border: ${theme.border.b1} solid
+        ${theme.color.neutral.grey40};
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      outline: none;
+      cursor: pointer;
+
+      background-image: url(${chevronDownSvgDataUri(
+        theme.color.interaction.blue70
+      )});
+      background-size: 24px 24px;
+      background-position: right 8px center;
+      background-repeat: no-repeat;
+    `;
+
+    const hoverStyle = css`
+      &:hover {
+        border-color: ${theme.color.neutral.grey60};
+        background-color: ${theme.color.neutral.grey5};
+      }
+    `;
+
+    const focusStyle = css`
+      &:focus {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const disabledStyle = css`
+      cursor: not-allowed;
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      !props.disabled && hoverStyle,
+      !props.disabled && focusStyle,
+      props.disabled && disabledStyle,
+      className
+    );
+
+    return (
+      <select
+        ref={ref}
+        className={style}
+        data-testid={testId}
+        {...props}
+      />
+    );
+  }
+);
+
+export default memo(Select);

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

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import Select from '../Select';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Select', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select>
+          <option>Option 1</option>
+          <option>Option 2</option>
+          <option>Option 3</option>
+          <option>Option 4</option>
+        </Select>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+
+  test('snapshot: disabled', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select disabled>
+          <option>Option 1</option>
+          <option>Option 2</option>
+          <option>Option 3</option>
+          <option>Option 4</option>
+        </Select>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Select > snapshot: disabled 1`] = `
+<select
+  class="ucl-uikit-select css-1k92o15"
+  data-testid="ucl-uikit-select"
+  disabled=""
+>
+  <option>
+    Option 1
+  </option>
+  <option>
+    Option 2
+  </option>
+  <option>
+    Option 3
+  </option>
+  <option>
+    Option 4
+  </option>
+</select>
+`;
+
+exports[`Select > snapshot: no props 1`] = `
+<select
+  class="ucl-uikit-select css-mbwdbz"
+  data-testid="ucl-uikit-select"
+>
+  <option>
+    Option 1
+  </option>
+  <option>
+    Option 2
+  </option>
+  <option>
+    Option 3
+  </option>
+  <option>
+    Option 4
+  </option>
+</select>
+`;

package/lib/components/Select/index.ts

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