uikit-react-public 0.27.2 → 0.29.1

package/lib/components/BaseCheckbox/BaseCheckbox.tsx

@@ -116,11 +116,7 @@ const BaseCheckbox = ({
     grid-area: 1 / 1;
     line-height: 0;
     pointer-events: none;
-
-    input:focus-visible + & {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
+    outline: none;
   `;
 
   const style = cx(NAME, rootStyle, className);

package/lib/components/BreadcrumbsNew/BaseBreadcrumbsItem.tsx

@@ -0,0 +1,69 @@
+import { LiHTMLAttributes, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
+import Icon from '../Icon';
+import { useTheme } from '../../theme';
+import type { BreadcrumbsSize } from './Breadcrumbs';
+
+export const NAME = 'ucl-uikit-breadcrumbs__item';
+
+export interface BaseBreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+  testId?: string;
+  children?: ReactNode;
+}
+
+const BaseBreadcrumbsItem = ({
+  separator = false,
+  back = false,
+  size = 'medium',
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BaseBreadcrumbsItemProps) => {
+  const [theme] = useTheme();
+
+  const style = cx(
+    NAME,
+    css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${theme.margin.m8};
+      min-width: 0;
+    `,
+    className
+  );
+
+  const iconStyle = css`
+    flex: 0 0 auto;
+    color: ${theme.colour.icon.brandPrimary};
+  `;
+
+  return (
+    <li
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {back && (
+        <Icon.ArrowLeft
+          aria-hidden
+          className={iconStyle}
+          size={size === 'small' ? 16 : 20}
+        />
+      )}
+      {children}
+      {separator && (
+        <Icon.ChevronRight
+          aria-hidden
+          className={iconStyle}
+          size={size === 'small' ? 12 : 16}
+        />
+      )}
+    </li>
+  );
+};
+
+export default BaseBreadcrumbsItem;

package/lib/components/BreadcrumbsNew/Breadcrumbs.tsx

@@ -0,0 +1,118 @@
+import {
+  Children,
+  HTMLAttributes,
+  NamedExoticComponent,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+  memo,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import BaseBreadcrumbsItem, {
+  BaseBreadcrumbsItemProps,
+} from './BaseBreadcrumbsItem';
+import BreadcrumbsCurrent, {
+  BreadcrumbsCurrentProps,
+} from './BreadcrumbsCurrent';
+import BreadcrumbsLink, { BreadcrumbsLinkProps } from './BreadcrumbsLink';
+
+export const NAME = 'ucl-uikit-breadcrumbs';
+
+export type BreadcrumbsSize = 'small' | 'medium';
+
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+  size?: BreadcrumbsSize;
+  testId?: string;
+}
+
+type BreadcrumbChild = ReactElement<{
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+}>;
+
+const Breadcrumbs = ({
+  size = 'medium',
+  testId = NAME,
+  className,
+  children,
+  'aria-label': ariaLabel = 'Breadcrumb',
+  ...props
+}: BreadcrumbsProps) => {
+  const [theme] = useTheme();
+  const items = Children.toArray(children).filter(isValidElement);
+  const parentItem = items[items.length - 2] as BreadcrumbChild | undefined;
+
+  const listStyle = css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.margin.m8};
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  `;
+
+  const desktopStyle = css`
+    display: none;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: flex;
+    }
+  `;
+
+  const mobileStyle = css`
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: none;
+    }
+  `;
+
+  const style = cx(NAME, className);
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <ol className={cx(listStyle, desktopStyle)}>
+        {items.map((item, index) =>
+          cloneElement(item as BreadcrumbChild, {
+            separator: index < items.length - 1,
+            size,
+          })
+        )}
+      </ol>
+      {parentItem && (
+        <ol className={cx(listStyle, mobileStyle)}>
+          {cloneElement(parentItem, {
+            back: true,
+            separator: false,
+            size,
+          })}
+        </ol>
+      )}
+    </nav>
+  );
+};
+
+interface BreadcrumbsComponent extends NamedExoticComponent<BreadcrumbsProps> {
+  BaseItem: typeof BaseBreadcrumbsItem;
+  Link: typeof BreadcrumbsLink;
+  Current: typeof BreadcrumbsCurrent;
+}
+
+const MemoBreadcrumbs: BreadcrumbsComponent = Object.assign(memo(Breadcrumbs), {
+  BaseItem: BaseBreadcrumbsItem,
+  Link: BreadcrumbsLink,
+  Current: BreadcrumbsCurrent,
+});
+
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+};
+
+export default MemoBreadcrumbs;

package/lib/components/BreadcrumbsNew/BreadcrumbsCurrent.tsx

@@ -0,0 +1,54 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import Text from '../Text';
+import { useTheme } from '../../theme';
+import BaseBreadcrumbsItem, {
+  BaseBreadcrumbsItemProps,
+} from './BaseBreadcrumbsItem';
+
+export const NAME = 'ucl-uikit-breadcrumbs__current';
+
+export interface BreadcrumbsCurrentProps
+  extends
+    HTMLAttributes<HTMLSpanElement>,
+    Pick<BaseBreadcrumbsItemProps, 'separator' | 'size'> {
+  testId?: string;
+}
+
+const BreadcrumbsCurrent = ({
+  separator,
+  size = 'medium',
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BreadcrumbsCurrentProps) => {
+  const [theme] = useTheme();
+
+  const style = cx(
+    NAME,
+    css`
+      color: ${theme.colour.text.secondary};
+    `,
+    className
+  );
+
+  return (
+    <BaseBreadcrumbsItem
+      separator={separator}
+      size={size}
+    >
+      <Text
+        aria-current='page'
+        className={style}
+        data-testid={testId}
+        level={size === 'small' ? 'sm-semibold' : 'md-semibold'}
+        {...props}
+      >
+        {children}
+      </Text>
+    </BaseBreadcrumbsItem>
+  );
+};
+
+export default BreadcrumbsCurrent;

package/lib/components/BreadcrumbsNew/BreadcrumbsLink.tsx

@@ -0,0 +1,67 @@
+import { css, cx } from '@emotion/css';
+import Link, { LinkProps } from '../Link';
+import { useTheme } from '../../theme';
+import BaseBreadcrumbsItem, {
+  BaseBreadcrumbsItemProps,
+} from './BaseBreadcrumbsItem';
+
+export const NAME = 'ucl-uikit-breadcrumbs__link';
+
+type BreadcrumbsLinkOwnProps = Pick<
+  BaseBreadcrumbsItemProps,
+  'separator' | 'back' | 'size'
+>;
+
+export type BreadcrumbsLinkProps = BreadcrumbsLinkOwnProps &
+  Omit<LinkProps, 'size'>;
+
+const BreadcrumbsLink = ({
+  separator,
+  back,
+  size = 'medium',
+  className,
+  children,
+  ...props
+}: BreadcrumbsLinkProps) => {
+  const [theme] = useTheme();
+
+  const linkStyle = cx(
+    NAME,
+    css`
+      color: ${theme.colour.link.primary};
+      text-decoration: none;
+
+      &:visited {
+        color: ${theme.colour.link.primary};
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:active {
+        color: ${theme.colour.link.primaryHover};
+      }
+    `,
+    className
+  );
+
+  return (
+    <BaseBreadcrumbsItem
+      separator={separator}
+      back={back}
+      size={size}
+    >
+      <Link
+        className={linkStyle}
+        noVisited
+        size={size === 'small' ? 'small' : 'default'}
+        {...props}
+      >
+        {children}
+      </Link>
+    </BaseBreadcrumbsItem>
+  );
+};
+
+export default BreadcrumbsLink;

package/lib/components/BreadcrumbsNew/__tests__/Breadcrumbs.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, within } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Breadcrumbs from '../Breadcrumbs';
+
+describe('BreadcrumbsNew', () => {
+  test('renders the full trail and a mobile parent link', () => {
+    render(
+      <ThemeContextProvider>
+        <Breadcrumbs>
+          <Breadcrumbs.Link asChild>
+            <a href='/'>Home</a>
+          </Breadcrumbs.Link>
+          <Breadcrumbs.Link asChild>
+            <a href='/parent'>Parent</a>
+          </Breadcrumbs.Link>
+          <Breadcrumbs.Current>Current page</Breadcrumbs.Current>
+        </Breadcrumbs>
+      </ThemeContextProvider>
+    );
+
+    const lists = screen.getAllByRole('list', { hidden: true });
+
+    expect(
+      within(lists[0]).getAllByRole('listitem', { hidden: true })
+    ).toHaveLength(3);
+    expect(
+      within(lists[1]).getAllByRole('listitem', { hidden: true })
+    ).toHaveLength(1);
+    expect(
+      within(lists[1]).getByRole('link', { hidden: true })
+    ).toHaveAttribute('href', '/parent');
+    expect(screen.getByText('Current page')).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+  });
+
+  test('supports small breadcrumbs', () => {
+    render(
+      <ThemeContextProvider>
+        <Breadcrumbs size='small'>
+          <Breadcrumbs.Link asChild>
+            <a href='/parent'>Parent</a>
+          </Breadcrumbs.Link>
+          <Breadcrumbs.Current>Current page</Breadcrumbs.Current>
+        </Breadcrumbs>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByText('Current page')).toHaveClass('ucl-uikit-text');
+  });
+});

package/lib/components/BreadcrumbsNew/index.ts

@@ -0,0 +1,8 @@
+export { default } from './Breadcrumbs';
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsProps,
+  BreadcrumbsSize,
+} from './Breadcrumbs';

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

@@ -13,7 +13,7 @@ exports[`Checkbox > snapshot: checked prop 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   >
     <svg
       class="ucl-uikit-icon css-1nacdsu"
@@ -49,7 +49,7 @@ exports[`Checkbox > snapshot: indeterminate prop 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   >
     <svg
       class="ucl-uikit-icon css-2i3jn5"
@@ -87,7 +87,7 @@ exports[`Checkbox > snapshot: no props 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   />
 </span>
 `;
@@ -104,7 +104,7 @@ exports[`Checkbox > snapshot: testId prop 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   />
 </span>
 `;

package/lib/components/Chip/Chip.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+import Chip from './Chip';
+
+const meta = {
+  title: 'Components/Chip',
+  component: Chip,
+  argTypes: {
+    label: { control: { type: 'text' } },
+    checked: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Student',
+    checked: false,
+    disabled: false,
+  },
+  render: (args) => {
+    const [{ checked }, updateArgs] = useArgs();
+    const onChange = () => updateArgs({ checked: !checked });
+
+    return (
+      <Chip
+        {...args}
+        checked={checked}
+        onChange={onChange}
+      />
+    );
+  },
+};

package/lib/components/Chip/Chip.tsx

@@ -0,0 +1,191 @@
+import { memo, forwardRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import BaseCheckbox, { BaseCheckboxProps } from '../BaseCheckbox';
+import Icon from '../Icon';
+import Text from '../Text';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-chip';
+
+export interface ChipBaseProps extends Omit<
+  BaseCheckboxProps,
+  | 'renderVisual'
+  | 'checkedComponent'
+  | 'uncheckedComponent'
+  | 'indeterminateComponent'
+  | 'indeterminate'
+> {
+  label: string;
+  ariaLabel?: string;
+}
+
+export type ChipProps = ChipBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const Chip = forwardRef<Ref, ChipProps>(
+  (
+    {
+      label,
+      checked,
+      defaultChecked,
+      disabled,
+      testId = NAME,
+      ariaLabel,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const baseStyle = css`
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 32px;
+      width: fit-content;
+      padding: ${theme.margin.m4} ${theme.margin.m16};
+      border: ${theme.border.b1} solid ${theme.colour.icon.brand};
+      border-radius: 16px;
+      outline: none;
+      box-sizing: border-box;
+      color: ${theme.colour.icon.inverse};
+      transition:
+        background-color 0.15s ease-out,
+        border-color 0.15s ease-out;
+      cursor: pointer;
+      background-color: ${theme.colour.icon.inverse};
+      color: ${theme.colour.icon.brand};
+
+      &:hover {
+        background-color: ${theme.colour.fill.brandSubtleHover};
+      }
+
+      &:has(input:focus-visible) {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+
+      &:has(input:checked) {
+        background-color: ${theme.colour.icon.brandSelectedOnBgFill};
+        border-color: ${theme.colour.icon.brandSelectedOnBgFill};
+        color: ${theme.colour.icon.inverse};
+      }
+
+      &:has(input:checked):hover {
+        background-color: ${theme.colour.icon.brandSelectedOnBgFill};
+      }
+
+      &:has(input:disabled),
+      &:has(input:disabled):hover {
+        background-color: ${theme.colour.fill.disabled};
+        border-color: ${theme.colour.border.disabled};
+        color: ${theme.colour.text.disabled};
+        cursor: not-allowed;
+      }
+    `;
+
+    const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+    const contentStyle = css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    `;
+
+    const iconBaseStyle = css`
+      flex-shrink: 0;
+      color: inherit;
+      user-select: none;
+      pointer-events: none;
+      transition:
+        opacity 0.15s ease-out,
+        margin-left 0.15s ease-out,
+        margin-right 0.15s ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `;
+
+    const iconVisibleStyle = css`
+      opacity: 1;
+      margin-left: 0;
+      margin-right: 0;
+    `;
+
+    const iconHiddenStyle = css`
+      opacity: 0;
+      margin-left: -4px;
+      margin-right: 4px;
+    `;
+
+    const labelBaseStyle = css`
+      color: inherit;
+      transition:
+        margin-left 0.15s ease-out,
+        margin-right 0.15s ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `;
+
+    const labelCheckedStyle = css`
+      margin-left: ${theme.margin.m4};
+      margin-right: 0;
+    `;
+
+    const labelUncheckedStyle = css`
+      margin-left: -6px;
+      margin-right: 10px;
+    `;
+
+    return (
+      <label className={style}>
+        <BaseCheckbox
+          ref={ref}
+          testId={`${testId}__root`}
+          data-testid={testId}
+          aria-label={ariaLabel}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          renderVisual={({ checked }) => {
+            const iconStyle = cx(
+              iconBaseStyle,
+              checked && iconVisibleStyle,
+              !checked && iconHiddenStyle
+            );
+
+            const labelStyle = cx(
+              labelBaseStyle,
+              checked && labelCheckedStyle,
+              !checked && labelUncheckedStyle
+            );
+
+            return (
+              <span className={contentStyle}>
+                <Icon.Check
+                  className={iconStyle}
+                  size={16}
+                />
+                <Text
+                  level='sm-semibold'
+                  className={labelStyle}
+                >
+                  {label}
+                </Text>
+              </span>
+            );
+          }}
+          {...props}
+        />
+      </label>
+    );
+  }
+);
+
+export default memo(Chip);