uikit-react-public 0.50.5 → 0.50.7

package/lib/components/Accordion/Accordion.Heading.tsx

@@ -38,7 +38,7 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     position: relative;
     justify-content: space-between;
     align-items: center;
-    padding: ${theme.padding.p16};
+    padding: ${theme.padding.p16} ${theme.padding.p8};
     background-color: ${theme.colour.fill.inverse};
     cursor: pointer;
     transition: background-color 0.15s ease;

package/lib/components/Accordion/Accordion.Panel.tsx

@@ -29,7 +29,7 @@ const AccordionPanel: React.FC<AccordionPanelProps> = ({
       max-width: 100%;
       min-width: 0;
       flex-shrink: 1;
-      padding: ${theme.padding.p16};
+      padding: ${theme.padding.p8} ${theme.padding.p8} ${theme.padding.p24};
       box-sizing: border-box;
       overflow: hidden;
       overflow-wrap: break-word;

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

@@ -40,6 +40,27 @@ describe('Accordion', () => {
 
   // Interaction tests
 
+  test('uses the expected heading and panel padding', () => {
+    render(
+      <ThemeContextProvider>
+        <Accordion>
+          <Accordion.Heading>Heading</Accordion.Heading>
+          <Accordion.Panel>Panel Content</Accordion.Panel>
+        </Accordion>
+      </ThemeContextProvider>
+    );
+
+    const heading = screen.getByTestId('ucl-uikit-accordion__heading');
+    expect(getComputedStyle(heading).padding).toBe('16px 8px');
+
+    fireEvent.click(heading);
+    const panel = screen.getByTestId('ucl-uikit-accordion__panel');
+    expect(getComputedStyle(panel).paddingTop).toBe('8px');
+    expect(getComputedStyle(panel).paddingRight).toBe('8px');
+    expect(getComputedStyle(panel).paddingBottom).toBe('24px');
+    expect(getComputedStyle(panel).paddingLeft).toBe('8px');
+  });
+
   test('should open and close the accordion', () => {
     render(
       <ThemeContextProvider>

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

@@ -8,7 +8,7 @@ exports[`Accordion > snapshot: no props 1`] = `
 >
   <h6
     aria-expanded="false"
-    class="ucl-uikit-heading ucl-uikit-accordion__heading css-spdtpe"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-3x70cw"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
@@ -44,7 +44,7 @@ exports[`Accordion > snapshot: testId prop 1`] = `
 >
   <h6
     aria-expanded="false"
-    class="ucl-uikit-heading ucl-uikit-accordion__heading css-spdtpe"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-3x70cw"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"

package/lib/components/Badge/Badge.tsx

@@ -91,8 +91,9 @@ export const getBadgeVariantColours = (
     color: theme.colour.text.inverse,
     backgroundColor: theme.colour.fill.warning,
   },
+  // TODO: replace primitiveColour use here with colour.text.warningOnBgFill when token is updated to matching hex
   'warning-subtle': {
-    color: theme.colour.text.warningOnBgFill,
+    color: theme.primitiveColour.orange['13'].$value.hex,
     backgroundColor: theme.colour.fill.warningSubtle,
   },
   disabled: {
@@ -145,6 +146,7 @@ const Badge = ({
     padding: 0 ${theme.padding.p8};
 
     color: ${color};
+    font-weight: ${theme.typography.body.smSemibold.fontWeight};
     background-color: ${backgroundColor};
     border: ${border ?? 'none'};
 

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

@@ -91,6 +91,14 @@ describe('Badge', () => {
     expect(getByText('Hello')).toBeTruthy();
   });
 
+  test('uses semibold text', () => {
+    const { getByTestId } = wrap(<Badge>Text</Badge>);
+
+    expect(getComputedStyle(getByTestId('ucl-uikit-badge')).fontWeight).toBe(
+      String(lightTheme.typography.body.smSemibold.fontWeight)
+    );
+  });
+
   test('applies custom testId', () => {
     const { getByTestId } = wrap(<Badge testId='my-badge'>Text</Badge>);
     expect(getByTestId('my-badge')).toBeTruthy();
@@ -175,7 +183,7 @@ describe('Badge', () => {
       backgroundColor: darkTheme.colour.fill.warning,
     });
     expect(colours['warning-subtle']).toMatchObject({
-      color: darkTheme.colour.text.warningOnBgFill,
+      color: darkTheme.primitiveColour.orange['13'].$value.hex,
       backgroundColor: darkTheme.colour.fill.warningSubtle,
     });
   });
@@ -217,7 +225,7 @@ describe('Badge', () => {
       backgroundColor: lightTheme.colour.fill.warning,
     });
     expect(colours['warning-subtle']).toMatchObject({
-      color: lightTheme.colour.text.warningOnBgFill,
+      color: '#994D29',
       backgroundColor: lightTheme.colour.fill.warningSubtle,
     });
   });

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

@@ -2,7 +2,7 @@
 
 exports[`Badge > snapshot: default 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-1qd9y8u"
+  class="ucl-uikit-text ucl-uikit-badge css-193xmhy"
   data-testid="ucl-uikit-badge"
 >
   Default
@@ -11,7 +11,7 @@ exports[`Badge > snapshot: default 1`] = `
 
 exports[`Badge > snapshot: size=large 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-1j13tem"
+  class="ucl-uikit-text ucl-uikit-badge css-xkp5fs"
   data-testid="ucl-uikit-badge"
 >
   Large
@@ -20,7 +20,7 @@ exports[`Badge > snapshot: size=large 1`] = `
 
 exports[`Badge > snapshot: statusIndicator 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-1qd9y8u"
+  class="ucl-uikit-text ucl-uikit-badge css-193xmhy"
   data-testid="ucl-uikit-badge"
 >
   <span
@@ -33,7 +33,7 @@ exports[`Badge > snapshot: statusIndicator 1`] = `
 
 exports[`Badge > snapshot: variant=critical with icon 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-rkw7bu"
+  class="ucl-uikit-text ucl-uikit-badge css-1ussa90"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -66,7 +66,7 @@ exports[`Badge > snapshot: variant=critical with icon 1`] = `
 
 exports[`Badge > snapshot: variant=disabled 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-a4ty56"
+  class="ucl-uikit-text ucl-uikit-badge css-1lag7jx"
   data-testid="ucl-uikit-badge"
 >
   Disabled
@@ -75,7 +75,7 @@ exports[`Badge > snapshot: variant=disabled 1`] = `
 
 exports[`Badge > snapshot: variant=info with icon 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-9ddki6"
+  class="ucl-uikit-text ucl-uikit-badge css-pmqt4o"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -108,7 +108,7 @@ exports[`Badge > snapshot: variant=info with icon 1`] = `
 
 exports[`Badge > snapshot: variant=info-subtle 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-1mmhjpi"
+  class="ucl-uikit-text ucl-uikit-badge css-1ikogho"
   data-testid="ucl-uikit-badge"
 >
   Info subtle
@@ -117,7 +117,7 @@ exports[`Badge > snapshot: variant=info-subtle 1`] = `
 
 exports[`Badge > snapshot: variant=success with icon 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-1k9d7cn"
+  class="ucl-uikit-text ucl-uikit-badge css-plwfy3"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -148,7 +148,7 @@ exports[`Badge > snapshot: variant=success with icon 1`] = `
 
 exports[`Badge > snapshot: variant=warning with icon 1`] = `
 <span
-  class="ucl-uikit-text ucl-uikit-badge css-1vsenfu"
+  class="ucl-uikit-text ucl-uikit-badge css-159h60j"
   data-testid="ucl-uikit-badge"
 >
   <svg

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

@@ -41,7 +41,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Month"
-        class="ucl-uikit-select css-njh36g"
+        class="ucl-uikit-select css-1mgirop"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -88,7 +88,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Year"
-        class="ucl-uikit-select css-njh36g"
+        class="ucl-uikit-select css-1mgirop"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -921,7 +921,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Month"
-        class="ucl-uikit-select css-njh36g"
+        class="ucl-uikit-select css-1mgirop"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -968,7 +968,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Year"
-        class="ucl-uikit-select css-njh36g"
+        class="ucl-uikit-select css-1mgirop"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"

package/lib/components/Callout/Callout.tsx

@@ -38,7 +38,7 @@ const Callout = ({
     gap: 30px;
     width: 100%;
     padding: ${theme.padding.p24};
-    background-color: ${theme.colour.surface.brand};
+    background-color: ${theme.colour.surface.brandSecondary};
     border: 1px solid ${theme.colour.border.brand};
   `;
 

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

@@ -6,11 +6,11 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
   data-testid="ucl-uikit-datepicker"
 >
   <div
-    class="ucl-uikit-datepicker__visible-field css-2ui4ji"
+    class="ucl-uikit-datepicker__visible-field css-51hkje"
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
-      class="ucl-uikit-datepicker__input css-19gsrgi"
+      class="ucl-uikit-datepicker__input css-gjp4ve"
       data-testid="ucl-uikit-datepicker__input"
       inputmode="numeric"
       placeholder="DD/MM/YYYY"
@@ -25,7 +25,7 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
       type="button"
     >
       <svg
-        class="ucl-uikit-icon css-kzaqcy"
+        class="ucl-uikit-icon css-7p0vcp"
         data-testid="ucl-uikit-icon"
         fill="none"
         focusable="false"
@@ -61,11 +61,11 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
   data-testid="ucl-uikit-datepicker"
 >
   <div
-    class="ucl-uikit-datepicker__visible-field css-2ui4ji"
+    class="ucl-uikit-datepicker__visible-field css-51hkje"
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
-      class="ucl-uikit-datepicker__input css-19gsrgi"
+      class="ucl-uikit-datepicker__input css-gjp4ve"
       data-testid="ucl-uikit-datepicker__input"
       inputmode="numeric"
       placeholder="DD/MM/YYYY"
@@ -80,7 +80,7 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
       type="button"
     >
       <svg
-        class="ucl-uikit-icon css-kzaqcy"
+        class="ucl-uikit-icon css-7p0vcp"
         data-testid="ucl-uikit-icon"
         fill="none"
         focusable="false"

package/lib/components/Datepicker/subcomponents/DatepickerInput.tsx

@@ -45,6 +45,7 @@ const DatepickerInput = ({
     height: 100%;
     padding: 0 0 0 16px;
     border: none;
+    border-radius: ${theme.radius.r4} 0 0 ${theme.radius.r4};
     color: ${theme.colour.text.default};
     background-color: ${theme.colour.fill.inverse};
     font-family: ${md.fontFamily};

package/lib/components/Datepicker/subcomponents/VisibleField.tsx

@@ -44,6 +44,7 @@ const VisibleField = ({
     height: 100%;
     box-sizing: border-box;
     border: 1px solid ${theme.colour.speciality.inputDefault};
+    border-radius: ${theme.radius.r4};
     background-color: ${theme.colour.fill.inverse};
 
     &:focus-within {
@@ -88,7 +89,7 @@ const VisibleField = ({
   // TODO: This ought to be fixed in the <Icon> component itself.
   const iconStyle = css`
     min-width: 24px;
-    color: ${disabled ? theme.colour.icon.disabled : theme.colour.icon.tertiary};
+    color: ${disabled ? theme.colour.icon.disabled : theme.colour.icon.secondary};
   `;
 
   // Determine which icon to show

package/lib/components/NativeDatepicker/NativeDatepicker.tsx

@@ -25,6 +25,7 @@ const NativeDatepicker = ({
     box-sizing: border-box;
     padding: 0 16px;
     border: 1px solid ${theme.colour.speciality.inputDefault};
+    border-radius: ${theme.radius.r4};
     color: ${theme.colour.text.default};
     font-family: ${md.fontFamily};
     font-feature-settings: ${md.fontSettings};

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

@@ -4,7 +4,7 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-1gu3yiz"
+  class="ucl-uikit-select css-1o1z0ec"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -604,6 +604,7 @@ const CustomSelect = <T extends string | number>({
     font-weight: ${md.fontWeight};
     line-height: ${md.lineHeight}%;
     border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
+    border-radius: ${theme.radius.r4};
     cursor: pointer;
     user-select: none;
 

package/lib/components/Select/subcomponents/NativeSelect.tsx

@@ -44,6 +44,7 @@ const NativeSelect = ({
     line-height: ${md.lineHeight}%;
     background-color: ${theme.colour.fill.inverse};
     border: ${theme.border.b1} solid ${theme.colour.border.secondary};
+    border-radius: ${theme.radius.r4};
     color: ${theme.colour.text.default};
     appearance: none;
     -webkit-appearance: none;

package/lib/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -8,6 +8,9 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  args: {
+    style: { width: 507 },
+  },
   tags: ['autodocs'],
 } satisfies Meta<typeof ToggleGroup>;
 

package/lib/components/ToggleGroup/ToggleGroup.tsx

@@ -7,18 +7,23 @@ import {
   useState,
 } from 'react';
 
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import Select, { NonClearableSelectProps } from '../Select';
 import ToggleGroupContext from './ToggleGroupContext';
-import Item, { ItemProps } from './subcomponents/Item';
+import ToggleGroupItem, {
+  ToggleGroupItemProps,
+} from './subcomponents/ToggleGroupItem';
+
+export const NAME = 'ucl-uikit-toggle-group';
 
 export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
+  testId?: string;
   selectProps?: Omit<
     NonClearableSelectProps<string>,
     'options' | 'value' | 'onValueChange'
@@ -27,7 +32,14 @@ export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const MOBILE_SELECT_ITEM_THRESHOLD = 2;
 
-const NAVIGATION_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+const NAVIGATION_KEYS = [
+  'ArrowRight',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowUp',
+  'Home',
+  'End',
+];
 
 const getEnabledItems = (container: HTMLElement) =>
   Array.from(
@@ -38,13 +50,13 @@ const getEnabledItems = (container: HTMLElement) =>
 
 const getItemsFromChildren = (
   children: React.ReactNode
-): React.ReactElement<ItemProps>[] =>
+): React.ReactElement<ToggleGroupItemProps>[] =>
   Children.toArray(children).flatMap((child) => {
     if (!isValidElement<{ children?: React.ReactNode }>(child)) {
       return [];
     }
-    if (child.type === Item) {
-      return [child as React.ReactElement<ItemProps>];
+    if (child.type === ToggleGroupItem) {
+      return [child as React.ReactElement<ToggleGroupItemProps>];
     }
     return getItemsFromChildren(child.props.children);
   });
@@ -55,6 +67,10 @@ const ToggleGroup = ({
   defaultValue,
   onValueChange,
   selectProps,
+  className,
+  onKeyDown,
+  testId = NAME,
+  ...htmlAttributes
 }: ToggleGroupProps) => {
   const [theme] = useTheme();
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -63,6 +79,14 @@ const ToggleGroup = ({
   const isMobile = !useMediaQuery(`(min-width: ${theme.breakpoints.tablet}px)`);
   const items = getItemsFromChildren(children);
   const name = useId();
+  const hasSublabel = items.some((item) => item.props.sublabel);
+  const firstEnabledValue = items.find((item) => !item.props.disabled)?.props
+    .value;
+  const tabbableValue = items.some(
+    (item) => item.props.value === selectedValue && !item.props.disabled
+  )
+    ? selectedValue
+    : firstEnabledValue;
 
   const setValue = (nextValue: string) => {
     if (!isControlled) {
@@ -73,6 +97,12 @@ const ToggleGroup = ({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
     if (!NAVIGATION_KEYS.includes(event.key)) {
       return;
     }
@@ -91,8 +121,10 @@ const ToggleGroup = ({
     const nextIndex =
       {
         ArrowRight: (currentIndex + 1) % enabledItems.length,
+        ArrowDown: (currentIndex + 1) % enabledItems.length,
         ArrowLeft:
           (currentIndex - 1 + enabledItems.length) % enabledItems.length,
+        ArrowUp: (currentIndex - 1 + enabledItems.length) % enabledItems.length,
         Home: 0,
         End: enabledItems.length - 1,
       }[event.key] ?? currentIndex;
@@ -104,7 +136,6 @@ const ToggleGroup = ({
 
   const toggleGroupStyle = css`
     display: flex;
-    gap: -1px;
     padding: ${theme.padding.p4};
     background-color: ${theme.colour.fill.subtle};
     border-radius: ${theme.radius.r4};
@@ -114,6 +145,8 @@ const ToggleGroup = ({
     return (
       <Select
         {...selectProps}
+        className={cx(NAME, selectProps?.className, className)}
+        testId={testId}
         options={items.map((item) => ({
           label: item.props.label,
           value: item.props.value,
@@ -126,10 +159,18 @@ const ToggleGroup = ({
 
   return (
     <ToggleGroupContext.Provider
-      value={{ value: selectedValue, setValue, name }}
+      value={{
+        value: selectedValue,
+        setValue,
+        name,
+        tabbableValue,
+        hasSublabel,
+      }}
     >
       <div
-        className={toggleGroupStyle}
+        {...htmlAttributes}
+        className={cx(NAME, toggleGroupStyle, className)}
+        data-testid={testId}
         role='radiogroup'
         onKeyDown={handleKeyDown}
       >
@@ -139,6 +180,6 @@ const ToggleGroup = ({
   );
 };
 
-ToggleGroup.Item = Item;
+ToggleGroup.Item = ToggleGroupItem;
 
 export default ToggleGroup;

package/lib/components/ToggleGroup/ToggleGroupContext.tsx

@@ -4,6 +4,8 @@ export interface ToggleGroupContextType {
   value: string | undefined;
   setValue: (value: string) => void;
   name: string;
+  tabbableValue: string | undefined;
+  hasSublabel: boolean;
 }
 
 const ToggleGroupContext = createContext<ToggleGroupContextType | undefined>(