uikit-react-public 0.49.4 → 0.49.6

package/lib/components/ToggleGroup/subcomponents/Item.tsx

@@ -0,0 +1,233 @@
+import type { InputHTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+
+import useTheme from '../../../theme/useTheme';
+import Text from '../../Text';
+import Icon from '../../Icon';
+import type { SpecificIconsType } from '../../Icon/Icon';
+import { useToggleGroupContext } from '../ToggleGroupContext';
+
+export interface ItemProps extends InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+  label: string;
+  icon?: keyof SpecificIconsType;
+  disabled?: boolean;
+  sublabel?: string;
+}
+
+const Item = ({
+  value,
+  label,
+  sublabel,
+  icon,
+  disabled = false,
+}: ItemProps) => {
+  const [theme] = useTheme();
+  const { value: selectedValue, setValue, name } = useToggleGroupContext();
+  const selected = selectedValue === value;
+
+  const toggleGroupItemContainerStyle = css`
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex: 1 0 auto;
+    height: ${theme.height.h40};
+    padding: ${theme.padding.p8};
+    align-items: center;
+    justify-content: center;
+    border-radius: ${theme.radius.r4};
+    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+    transition:
+      background-color 150ms ease-in-out,
+      box-shadow 150ms ease-in-out;
+
+    background-color: ${
+      disabled
+        ? theme.colour.fill.disabled
+        : selected
+          ? theme.colour.fill.default
+          : theme.colour.fill.subtle
+    };
+
+    ${
+      !disabled &&
+      `
+        :hover {
+          background-color: ${theme.colour.fill.brandSubtle};
+        }
+      `
+    }
+
+    &:has(input:focus-visible) {
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+  `;
+
+  const toggleGroupItemInputStyle = css`
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    cursor: inherit;
+  `;
+
+  const flexRowStyle = css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.padding.p8};
+  `;
+
+  const toggleGroupItemSizerStyle = cx(
+    flexRowStyle,
+    css`
+      visibility: hidden;
+    `
+  );
+
+  const toggleGroupItemContentStyle = cx(
+    flexRowStyle,
+    css`
+      box-sizing: border-box;
+      position: absolute;
+      inset: 0;
+      justify-content: ${sublabel && icon ? 'space-between' : 'center'};
+      padding: ${theme.padding.p8};
+    `
+  );
+
+  const toggleGroupItemLabelBaseStyle = css`
+    text-align: ${sublabel && icon ? 'left' : 'center'};
+  `;
+
+  const toggleGroupItemLabelSelectedStyle = css`
+    color: ${theme.colour.text.brand};
+    font-weight: ${theme.typography.body.smSemibold.fontWeight};
+  `;
+
+  const toggleGroupItemLabelDisabledStyle = css`
+    color: ${theme.colour.text.disabled};
+  `;
+
+  const toggleGroupItemLabelStyle = cx(
+    toggleGroupItemLabelBaseStyle,
+    selected && !disabled && toggleGroupItemLabelSelectedStyle,
+    disabled && toggleGroupItemLabelDisabledStyle
+  );
+
+  const toggleGroupItemIconBaseStyle = css`
+    display: flex;
+    align-items: center;
+    color: ${theme.colour.icon.default};
+  `;
+
+  const toggleGroupItemIconSelectedStyle = css`
+    color: ${theme.colour.icon.brand};
+  `;
+
+  const toggleGroupItemIconDisabledStyle = css`
+    color: ${theme.colour.icon.disabled};
+  `;
+
+  const toggleGroupItemIconStyle = cx(
+    toggleGroupItemIconBaseStyle,
+    selected && !disabled && toggleGroupItemIconSelectedStyle,
+    disabled && toggleGroupItemIconDisabledStyle
+  );
+
+  const toggleGroupItemTextStyle = css`
+    display: flex;
+    flex-direction: column;
+  `;
+
+  const toggleGroupItemSublabelBaseStyle = css`
+    color: ${theme.colour.text.secondary};
+  `;
+
+  const toggleGroupItemSublabelDisabledStyle = css`
+    color: ${theme.colour.text.disabled};
+  `;
+
+  const toggleGroupItemSublabelStyle = cx(
+    toggleGroupItemSublabelBaseStyle,
+    disabled && toggleGroupItemSublabelDisabledStyle
+  );
+
+  const toggleGroupItemLabelGroupStyle = flexRowStyle;
+
+  const toggleGroupItemCheckIconStyle = css`
+    color: ${theme.colour.icon.brand};
+  `;
+
+  const IconComponent = icon ? Icon[icon] : undefined;
+
+  const labelContent = (
+    <div className={toggleGroupItemLabelGroupStyle}>
+      {IconComponent && (
+        <span className={toggleGroupItemIconStyle}>
+          <IconComponent size={16} />
+        </span>
+      )}
+      <div className={toggleGroupItemTextStyle}>
+        <Text
+          level='sm'
+          className={toggleGroupItemLabelStyle}
+        >
+          {label}
+        </Text>
+        {sublabel && (
+          <Text
+            level='xs'
+            className={toggleGroupItemSublabelStyle}
+          >
+            {sublabel}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <label className={toggleGroupItemContainerStyle}>
+      <input
+        type='radio'
+        className={toggleGroupItemInputStyle}
+        role='radio'
+        aria-checked={selected}
+        checked={selected}
+        disabled={disabled}
+        name={name}
+        value={value}
+        tabIndex={selected ? 0 : -1}
+        data-ucl-toggle-group-value={value}
+        onChange={() => {
+          if (disabled) return;
+          setValue(value);
+        }}
+      />
+      <div
+        aria-hidden
+        className={toggleGroupItemSizerStyle}
+      >
+        {labelContent}
+        <Icon.Check size={16} />
+      </div>
+      <div className={toggleGroupItemContentStyle}>
+        {labelContent}
+        {selected && (
+          <Icon.Check
+            aria-hidden
+            className={toggleGroupItemCheckIconStyle}
+            size={16}
+          />
+        )}
+      </div>
+    </label>
+  );
+};
+
+export default Item;

package/lib/components/ToggleGroup/subcomponents/__tests__/Item.test.tsx

@@ -0,0 +1,195 @@
+import { describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import ToggleGroup from '../../ToggleGroup';
+import ToggleGroupItem from '../Item';
+import { ThemeContextProvider } from '../../../../theme/useTheme';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('ToggleGroupItem', () => {
+  test('renders as an unchecked radio by default', () => {
+    wrap(
+      <ToggleGroup>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+      </ToggleGroup>
+    );
+
+    const item = screen.getByRole('radio', { name: 'Option 1' });
+
+    expect(item).toHaveAttribute('aria-checked', 'false');
+    expect(item).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('reflects selection state from the surrounding ToggleGroup', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    expect(screen.getByRole('radio', { name: 'Option 1' })).toHaveAttribute(
+      'aria-checked',
+      'true'
+    );
+    expect(screen.getByRole('radio', { name: 'Option 1' })).toHaveAttribute(
+      'tabindex',
+      '0'
+    );
+    expect(screen.getByRole('radio', { name: 'Option 2' })).toHaveAttribute(
+      'tabindex',
+      '-1'
+    );
+  });
+
+  test('calls setValue via the ToggleGroup on click', () => {
+    const onValueChange = vi.fn();
+
+    wrap(
+      <ToggleGroup
+        defaultValue='option-1'
+        onValueChange={onValueChange}
+      >
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Option 2' }));
+
+    expect(onValueChange).toHaveBeenCalledWith('option-2');
+  });
+
+  test('does not select or fire onValueChange when disabled', () => {
+    const onValueChange = vi.fn();
+
+    wrap(
+      <ToggleGroup
+        defaultValue='option-1'
+        onValueChange={onValueChange}
+      >
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+          disabled
+        />
+      </ToggleGroup>
+    );
+
+    const disabledItem = screen.getByRole('radio', { name: 'Option 2' });
+
+    expect(disabledItem).toBeDisabled();
+
+    fireEvent.click(disabledItem);
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(disabledItem).toHaveAttribute('aria-checked', 'false');
+  });
+
+  test('throws when rendered outside a ToggleGroup', () => {
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() =>
+      render(
+        <ThemeContextProvider>
+          <ToggleGroupItem
+            value='option-1'
+            label='Option 1'
+          />
+        </ThemeContextProvider>
+      )
+    ).toThrow('ToggleGroupItem must be used within a ToggleGroup component');
+
+    consoleError.mockRestore();
+  });
+
+  test('renders the specified icon next to the label', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+          icon='BookOpen'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    const withIcon = screen
+      .getByRole('radio', { name: 'Option 1' })
+      .closest('label');
+    const withoutIcon = screen
+      .getByRole('radio', { name: 'Option 2' })
+      .closest('label');
+
+    expect(withIcon!.querySelectorAll('svg').length).toBeGreaterThan(
+      withoutIcon!.querySelectorAll('svg').length
+    );
+  });
+
+  test('includes the sublabel in the accessible name', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+          sublabel='Sublabel 1'
+        />
+      </ToggleGroup>
+    );
+
+    expect(
+      screen.getByRole('radio', { name: 'Option 1 Sublabel 1' })
+    ).toBeInTheDocument();
+  });
+
+  test('only shows a visible checkmark once selected, without changing when it is reserved', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    const selected = screen
+      .getByRole('radio', { name: 'Option 1' })
+      .closest('label');
+    const unselected = screen
+      .getByRole('radio', { name: 'Option 2' })
+      .closest('label');
+
+    expect(selected!.querySelectorAll('svg').length).toBe(2);
+    expect(unselected!.querySelectorAll('svg').length).toBe(1);
+  });
+});

package/lib/components/index.ts

@@ -133,6 +133,9 @@ export type { CheckboxProps, LabelledCheckboxProps } from './Checkbox';
 export { default as Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
+export { default as ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupProps, ItemProps } from './ToggleGroup';
+
 export { default as Chip } from './Chip';
 export type { ChipProps } from './Chip';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.49.4",
+  "version": "0.49.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -69,7 +69,7 @@
     "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.11",
     "eslint": "^9.22.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-ft-flow": "^3.0.11",
@@ -94,7 +94,7 @@
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.11",
     "wouter": "^3.6.0"
   }
 }

package/dist/components/Icon/svgImports.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode, SVGProps } from 'react';
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-type IconComponent = (props: SVGProps<SVGSVGElement> & SVGRProps) => ReactNode;
-declare const iconSvgs: Record<string, IconComponent>;
-export default iconSvgs;