uikit-react-public 0.17.4 → 0.21.8

package/lib/components/ParagraphNew/Paragraph.tsx

@@ -0,0 +1,200 @@
+import { memo, HTMLAttributes, JSX } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-paragrah';
+
+export type ParagraphLevel =
+  | 'lg'
+  | 'lg-medium'
+  | 'lg-semibold'
+  | 'lg-bold'
+  | 'md'
+  | 'md-medium'
+  | 'md-semibold'
+  | 'md-semibold'
+  | 'md-medium-numeric'
+  | 'sm'
+  | 'sm-medium'
+  | 'sm-semibold'
+  | 'xs'
+  | 'xs-medium';
+
+export interface ParagraphBaseProps extends HTMLAttributes<HTMLParagraphElement> {
+  level?: ParagraphLevel;
+  as?: 'p' | 'div' | 'span';
+  testId?: string;
+  ref?: React.Ref<HTMLParagraphElement>;
+}
+
+export type ParagraphProps = ParagraphBaseProps & MarginProps;
+
+const Paragraph = ({
+  level = 'md',
+  as = 'p',
+  testId = NAME,
+  className,
+  ref,
+  ...props
+}: ParagraphProps) => {
+  const [theme] = useTheme();
+
+  const {
+    typography: {
+      body: {
+        lg,
+        lgMedium,
+        lgSemibold,
+        lgBold,
+        md,
+        mdMedium,
+        mdSemibold,
+        mdMediumNumeric,
+        sm,
+        smMedium,
+        smSemibold,
+        xs,
+        xsMedium,
+      },
+    },
+  } = theme;
+
+  const baseStyle = css`
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    color: ${theme.colour.text.default};
+    margin: 0;
+  `;
+
+  const lgStyle = css`
+    font-size: ${lg.fontSize}px;
+    font-weight: ${lg.fontWeight};
+    line-height: ${lg.lineHeight}%;
+  `;
+
+  const lgMediumStyle = css`
+    font-size: ${lgMedium.fontSize}px;
+    font-weight: ${lgMedium.fontWeight};
+    line-height: ${lgMedium.lineHeight}%;
+  `;
+
+  const lgSemiboldStyle = css`
+    font-size: ${lgSemibold.fontSize}px;
+    font-weight: ${lgSemibold.fontWeight};
+    line-height: ${lgSemibold.lineHeight}%;
+  `;
+
+  const lgBoldStyle = css`
+    font-size: ${lgBold.fontSize}px;
+    font-weight: ${lgBold.fontWeight};
+    line-height: ${lgBold.lineHeight}%;
+  `;
+
+  const mdStyle = css`
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
+  `;
+
+  const mdMediumStyle = css`
+    font-size: ${mdMedium.fontSize}px;
+    font-weight: ${mdMedium.fontWeight};
+    line-height: ${mdMedium.lineHeight}%;
+  `;
+
+  const mdSemiboldStyle = css`
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
+  `;
+
+  const mdMediumNumericStyle = css`
+    font-size: ${mdMediumNumeric.fontSize}px;
+    font-weight: ${mdMediumNumeric.fontWeight};
+    line-height: ${mdMediumNumeric.lineHeight}%;
+  `;
+
+  const smStyle = css`
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
+  `;
+
+  const smMediumStyle = css`
+    font-size: ${smMedium.fontSize}px;
+    font-weight: ${smMedium.fontWeight};
+    line-height: ${smMedium.lineHeight}%;
+  `;
+
+  const smSemiboldStyle = css`
+    font-size: ${smSemibold.fontSize}px;
+    font-weight: ${smSemibold.fontWeight};
+    line-height: ${smSemibold.lineHeight}%;
+  `;
+
+  const xsStyle = css`
+    font-size: ${xs.fontSize}px;
+    font-weight: ${xs.fontWeight};
+    line-height: ${xs.lineHeight}%;
+  `;
+
+  const xsMediumStyle = css`
+    font-size: ${xsMedium.fontSize}px;
+    font-weight: ${xsMedium.fontWeight};
+    line-height: ${xsMedium.lineHeight}%;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    level === 'lg' && lgStyle,
+    level === 'lg-medium' && lgMediumStyle,
+    level === 'lg-semibold' && lgSemiboldStyle,
+    level === 'lg-bold' && lgBoldStyle,
+    level === 'md' && mdStyle,
+    level === 'md-medium' && mdMediumStyle,
+    level === 'md-semibold' && mdSemiboldStyle,
+    level === 'md-medium-numeric' && mdMediumNumericStyle,
+    level === 'sm' && smStyle,
+    level === 'sm-medium' && smMediumStyle,
+    level === 'sm-semibold' && smSemiboldStyle,
+    level === 'xs' && xsStyle,
+    level === 'xs-medium' && xsMediumStyle,
+    marginsStyle(props, theme),
+    className
+  );
+
+  const paragraphTag = as as keyof JSX.IntrinsicElements;
+
+  return (
+    <>
+      {paragraphTag === 'p' && (
+        <p
+          ref={ref}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+      {paragraphTag === 'div' && (
+        <div
+          ref={ref as React.Ref<HTMLDivElement>}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+      {paragraphTag === 'span' && (
+        <span
+          ref={ref as React.Ref<HTMLSpanElement>}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+    </>
+  );
+};
+
+export default memo(Paragraph);

package/lib/components/ParagraphNew/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/Radio.stories.tsx

@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import Radio from './Radio';
 
 const meta = {
-  title: 'Components/Work in progress/Radio',
+  title: 'Components/Radio',
   component: Radio,
   argTypes: {
     checked: { control: { type: 'boolean' } },

package/lib/components/Radio/Radio.tsx

@@ -64,19 +64,19 @@ const Radio = forwardRef<Ref, RadioProps>(
     `;
 
     const checkedStyle = css`
-      background-color: ${theme.color.interaction.blue70};
-      border-color: ${theme.color.interaction.blue70};
-      color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.icon.brand};
+      border-color: ${theme.colour.icon.brand};
+      color: ${theme.colour.icon.inverse};
     `;
 
     const uncheckedStyle = css`
-      background-color: ${theme.color.neutral.white};
-      border-color: ${theme.color.neutral.grey60};
+      background-color: ${theme.colour.icon.inverse};
+      border-color: ${theme.colour.speciality.inputDefault};
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey20};
-      border-color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.icon.disabled};
+      border-color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
     `;
 
@@ -112,7 +112,7 @@ const Radio = forwardRef<Ref, RadioProps>(
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.icon.inverse};
       user-select: none;
       pointer-events: none;
     `;

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

@@ -2,7 +2,7 @@
 
 exports[`Radio > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-radio css-1q95rl4"
+  class="ucl-uikit-radio css-1y63xt7"
 >
   <input
     checked=""
@@ -11,14 +11,14 @@ exports[`Radio > snapshot: checked prop 1`] = `
     type="radio"
   />
   <div
-    class="css-qvbxw4"
+    class="css-19pto6h"
   />
 </span>
 `;
 
 exports[`Radio > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-radio css-12hblv5"
+  class="ucl-uikit-radio css-121ivaw"
 >
   <input
     class="css-19qtec1"
@@ -30,7 +30,7 @@ exports[`Radio > snapshot: no props 1`] = `
 
 exports[`Radio > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-radio css-12hblv5"
+  class="ucl-uikit-radio css-121ivaw"
 >
   <input
     class="css-19qtec1"

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

@@ -28,6 +28,7 @@ exports[`Search > snapshot: no props 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -37,17 +38,8 @@ exports[`Search > snapshot: no props 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <line
-          x1="18"
-          x2="6"
-          y1="6"
-          y2="18"
-        />
-        <line
-          x1="6"
-          x2="18"
-          y1="6"
-          y2="18"
+        <path
+          d="M18 6 6 18M6 6l12 12"
         />
       </svg>
     </button>
@@ -63,6 +55,7 @@ exports[`Search > snapshot: no props 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -77,11 +70,8 @@ exports[`Search > snapshot: no props 1`] = `
           cy="11"
           r="8"
         />
-        <line
-          x1="21"
-          x2="16.65"
-          y1="21"
-          y2="16.65"
+        <path
+          d="m21 21-4.35-4.35"
         />
       </svg>
     </button>
@@ -117,6 +107,7 @@ exports[`Search > snapshot: testId prop 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -126,17 +117,8 @@ exports[`Search > snapshot: testId prop 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <line
-          x1="18"
-          x2="6"
-          y1="6"
-          y2="18"
-        />
-        <line
-          x1="6"
-          x2="18"
-          y1="6"
-          y2="18"
+        <path
+          d="M18 6 6 18M6 6l12 12"
         />
       </svg>
     </button>
@@ -152,6 +134,7 @@ exports[`Search > snapshot: testId prop 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -166,11 +149,8 @@ exports[`Search > snapshot: testId prop 1`] = `
           cy="11"
           r="8"
         />
-        <line
-          x1="21"
-          x2="16.65"
-          y1="21"
-          y2="16.65"
+        <path
+          d="m21 21-4.35-4.35"
         />
       </svg>
     </button>

package/lib/components/Select/Select.mdx

@@ -32,6 +32,17 @@ export const usage = {
   onValueChange={handleChange}
   placeholder="Type to filter..."
   filterInputProps={{ 'aria-describedby': 'filter-hint' }}
+/>`,
+  clearable: `<Select
+  clearable
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+  placeholder="Clear selection"
 />`,
   selectionBehaviourCommit: `<Select
   selectionBehaviour="commit"
@@ -78,6 +89,7 @@ Key features:
 - Configurable keyboard selection behaviour via `selectionBehaviour` (`focus` or `commit`)
 - Optional native fallback (`native`)
 - Optional filterable dropdown (`filterable`) that lets users type to narrow options
+- Optional clear action (`clearable`) in the custom variant
 - `filterInputProps` to forward additional attributes (e.g. `aria-describedby`) to the filter input
 - Support for long option text via `lineBreak`
 - Disabled state and placeholder support
@@ -132,6 +144,15 @@ Use `filterInputProps` to pass extra attributes to the input (e.g. `aria-describ
   source={{ code: usage.filterable }}
 />
 
+### Clearable
+Adds a built-in clear button in the custom variant when a selection is present. Clearing calls `onValueChange(null, event)` and restores the placeholder text.
+
+<Canvas
+  of={SelectStories.Clearable}
+  sourceState="shown"
+  source={{ code: usage.clearable }}
+/>
+
 ### Selection behaviour
 Use `selectionBehaviour` to control how keyboard navigation commits value in the custom variant:
 - `focus` (default): arrow keys move and commit immediately.
@@ -149,8 +170,10 @@ For very long labels, set `lineBreak` to allow breaking the text inside options.
 ## Accessibility
 - Custom variant exposes `role="combobox"` and `aria-expanded`, and listens for Enter/Space/Escape/arrow keys.
 - In `selectionBehaviour="commit"`, arrow keys move highlight without changing value until Enter/click.
+- Tabbing away from an open custom dropdown closes it and lets focus move normally to the next or previous control.
 - Native variant leverages built-in browser semantics.
 - The filter input (when `filterable` is true) is focusable when the panel opens; Escape and arrow keys bubble to the parent so the dropdown still closes/navigates.
+- In the custom variant, `clearable` emits `null` as the cleared value.
 - `filterInputProps` lets you forward ARIA hooks like `aria-describedby` to the filter input.
 - Standard HTML attributes (`id`, `title`, `data-*`) are forwarded to the combobox/native select.
 

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

@@ -25,9 +25,9 @@ const meta = {
       table: { type: { summary: 'OptionData[]' } },
     },
     value: {
-      description: 'Selected value (string | number)',
+      description: 'Selected value (string | number | null)',
       control: { type: 'text' },
-      table: { type: { summary: 'string | number' } },
+      table: { type: { summary: 'string | number | null' } },
     },
     onValueChange: {
       description:
@@ -35,7 +35,8 @@ const meta = {
       control: false,
       table: {
         type: {
-          summary: '(value: string | number, ev: React.UIEvent) => void',
+          summary:
+            '(value: string | number | null, ev: React.SyntheticEvent) => void',
         },
       },
     },
@@ -67,6 +68,12 @@ const meta = {
       control: { type: 'boolean' },
       table: { type: { summary: 'boolean' } },
     },
+    clearable: {
+      description:
+        'Show a clear action in the custom variant when a value is selected',
+      control: { type: 'boolean' },
+      table: { type: { summary: 'boolean' } },
+    },
     filterInputProps: {
       description:
         'Additional props to spread onto the filter input (when filterable)',
@@ -131,7 +138,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => {
+    const onValueChange = (value: string | number | null) => {
       updateArgs({ value });
     };
     return (
@@ -176,7 +183,7 @@ export const Disabled: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => {
+    const onValueChange = (value: string | number | null) => {
       updateArgs({ value });
     };
 
@@ -198,7 +205,7 @@ export const WithPlaceholder: Story = {
   args: { placeholder: 'Please select an option' },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => {
+    const onValueChange = (value: string | number | null) => {
       updateArgs({ value });
     };
 
@@ -227,7 +234,7 @@ export const SingleLongOption: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => {
+    const onValueChange = (value: string | number | null) => {
       updateArgs({ value });
     };
 
@@ -268,7 +275,7 @@ export const ManyOptions: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => {
+    const onValueChange = (value: string | number | null) => {
       updateArgs({ value });
     };
     return (
@@ -289,7 +296,8 @@ export const filterable: Story = {
   args: { filterable: true },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => updateArgs({ value });
+    const onValueChange = (value: string | number | null) =>
+      updateArgs({ value });
     return (
       <div style={storyWrapperStyle}>
         <Select
@@ -305,12 +313,37 @@ export const filterable: Story = {
   },
 };
 
+export const Clearable: Story = {
+  args: {
+    clearable: true,
+    value: '2',
+    placeholder: 'Clear selection',
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    const onValueChange = (value: string | number | null) =>
+      updateArgs({ value });
+    return (
+      <div style={storyWrapperStyle}>
+        <Select
+          {...args}
+          className={select400pxWidthClass}
+          options={args.options}
+          value={args.value}
+          onValueChange={onValueChange}
+        />
+      </div>
+    );
+  },
+};
+
 export const SelectionBehaviourCommit: Story = {
   name: 'Selection behaviour: commit',
   args: { selectionBehaviour: 'commit' },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string | number) => updateArgs({ value });
+    const onValueChange = (value: string | number | null) =>
+      updateArgs({ value });
     return (
       <div style={storyWrapperStyle}>
         <Select

package/lib/components/Select/Select.tsx

@@ -1,11 +1,18 @@
 import { NativeSelect, CustomSelect } from './subcomponents';
-import { SelectProps } from './Select.types';
+import type { InternalSelectProps, SelectProps } from './Select.types';
 
-const Select = <T extends string | number = string>(props: SelectProps<T>) => {
+type SelectComponent = <T extends string | number = string>(
+  props: SelectProps<T>
+) => React.JSX.Element;
+
+const Select = (<T extends string | number = string>(
+  props: InternalSelectProps<T>
+) => {
   const {
     native,
     nativeHtmlAttributes,
     filterable,
+    clearable,
     onValueChange,
     ref,
     ...rest
@@ -15,6 +22,9 @@ const Select = <T extends string | number = string>(props: SelectProps<T>) => {
     if (filterable) {
       console.warn('filterable is not supported on native Select; ignoring.');
     }
+    if (clearable) {
+      console.warn('clearable is not supported on native Select; ignoring.');
+    }
     const { value, ...nativeRest } = rest;
     const {
       value: nativeAttrValue,
@@ -40,10 +50,11 @@ const Select = <T extends string | number = string>(props: SelectProps<T>) => {
     <CustomSelect<T>
       onValueChange={onValueChange}
       filterable={filterable}
+      clearable={clearable}
       ref={ref as React.Ref<HTMLDivElement>}
       {...rest}
     />
   );
-};
+}) as SelectComponent;
 
 export default Select;