uikit-react-public 0.50.6 → 0.50.7

package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts

@@ -8,6 +8,11 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    args: {
+        style: {
+            width: number;
+        };
+    };
     tags: string[];
 };
 export default meta;

package/dist/index.js

@@ -21367,7 +21367,7 @@ const cx = (e, t) => {
     gap: 30px;
     width: 100%;
     padding: ${h.padding.p24};
-    background-color: ${h.colour.surface.brand};
+    background-color: ${h.colour.surface.brandSecondary};
     border: 1px solid ${h.colour.border.brand};
   `, f = d`
     display: flex;
@@ -22583,8 +22583,9 @@ const cx = (e, t) => {
     color: e.colour.text.inverse,
     backgroundColor: e.colour.fill.warning
   },
+  // TODO: replace primitiveColour use here with colour.text.warningOnBgFill when token is updated to matching hex
   "warning-subtle": {
-    color: e.colour.text.warningOnBgFill,
+    color: e.primitiveColour.orange[13].$value.hex,
     backgroundColor: e.colour.fill.warningSubtle
   },
   disabled: {
@@ -22610,6 +22611,7 @@ const cx = (e, t) => {
     padding: 0 ${h.padding.p8};
 
     color: ${p};
+    font-weight: ${h.typography.body.smSemibold.fontWeight};
     background-color: ${g};
     border: ${y ?? "none"};
 
@@ -24259,6 +24261,7 @@ const Ji = "ucl-uikit-breadcrumbs__item", mr = ({
     font-weight: ${Ye.fontWeight};
     line-height: ${Ye.lineHeight}%;
     border: ${L.border.b1} solid ${L.colour.speciality.inputDefault};
+    border-radius: ${L.radius.r4};
     cursor: pointer;
     user-select: none;
 
@@ -24460,6 +24463,7 @@ const Gw = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F200
     line-height: ${f.lineHeight}%;
     background-color: ${c.colour.fill.inverse};
     border: ${c.border.b1} solid ${c.colour.border.secondary};
+    border-radius: ${c.radius.r4};
     color: ${c.colour.text.default};
     appearance: none;
     -webkit-appearance: none;
@@ -29996,7 +30000,7 @@ const ec = tt(void 0), tc = (e, t) => `${e}-tab-${t}`.replace(/[^a-zA-Z0-9_-]/g,
     position: relative;
     justify-content: space-between;
     align-items: center;
-    padding: ${r.padding.p16};
+    padding: ${r.padding.p16} ${r.padding.p8};
     background-color: ${r.colour.fill.inverse};
     cursor: pointer;
     transition: background-color 0.15s ease;
@@ -30079,7 +30083,7 @@ const ec = tt(void 0), tc = (e, t) => `${e}-tab-${t}`.replace(/[^a-zA-Z0-9_-]/g,
       max-width: 100%;
       min-width: 0;
       flex-shrink: 1;
-      padding: ${i.padding.p16};
+      padding: ${i.padding.p8} ${i.padding.p8} ${i.padding.p24};
       box-sizing: border-box;
       overflow: hidden;
       overflow-wrap: break-word;
@@ -32038,6 +32042,7 @@ const fa = "ucl-uikit-base-dialog", Y9 = 495, J9 = 495, G9 = 740, Q9 = We(
     height: 100%;
     box-sizing: border-box;
     border: 1px solid ${u.colour.speciality.inputDefault};
+    border-radius: ${u.radius.r4};
     background-color: ${u.colour.fill.inverse};
 
     &:focus-within {
@@ -32070,7 +32075,7 @@ const fa = "ucl-uikit-base-dialog", Y9 = 495, J9 = 495, G9 = 740, Q9 = We(
     }
   `, b = d`
     min-width: 24px;
-    color: ${a ? u.colour.icon.disabled : u.colour.icon.tertiary};
+    color: ${a ? u.colour.icon.disabled : u.colour.icon.secondary};
   `, x = c && h && !a, k = C(Do, p, a && g);
   return /* @__PURE__ */ m(
     "div",
@@ -32129,6 +32134,7 @@ const fa = "ucl-uikit-base-dialog", Y9 = 495, J9 = 495, G9 = 740, Q9 = We(
     height: 100%;
     padding: 0 0 0 16px;
     border: none;
+    border-radius: ${a.radius.r4} 0 0 ${a.radius.r4};
     color: ${a.colour.text.default};
     background-color: ${a.colour.fill.inverse};
     font-family: ${c.fontFamily};
@@ -32214,6 +32220,7 @@ const fa = "ucl-uikit-base-dialog", Y9 = 495, J9 = 495, G9 = 740, Q9 = We(
     box-sizing: border-box;
     padding: 0 16px;
     border: 1px solid ${s.colour.speciality.inputDefault};
+    border-radius: ${s.radius.r4};
     color: ${s.colour.text.default};
     font-family: ${f.fontFamily};
     font-feature-settings: ${f.fontSettings};

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/subcomponents/ToggleGroupItem.stories.tsx

@@ -11,7 +11,10 @@ const meta = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <ToggleGroup defaultValue='option-1'>
+      <ToggleGroup
+        defaultValue='option-1'
+        style={{ width: 507 }}
+      >
         <Story />
       </ToggleGroup>
     ),

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.50.6",
+  "version": "0.50.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",