uikit-react-public 0.43.1 → 0.43.4

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

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Menu/MenuContent.tsx

@@ -5,6 +5,7 @@ import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
+import Heading from '../Heading';
 import { useAppMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__content';
@@ -113,7 +114,14 @@ const MenuContent: React.FC<MenuContentProps> = ({
       className={style}
     >
       <header className={headerStyle}>
-        <h3 className={titleStyle}>{title}</h3>
+        <Heading
+          as='h3'
+          level='xs'
+          margins={false}
+          className={titleStyle}
+        >
+          {title}
+        </Heading>
         <IconButton
           onClick={toggleMenu}
           aria-label='Close menu'

package/lib/components/NativeDatepicker/NativeDatepicker.tsx

@@ -17,6 +17,7 @@ const NativeDatepicker = ({
   ...props
 }: NativeDatepickerProps) => {
   const [theme] = useTheme();
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     width: 196px;
@@ -25,8 +26,11 @@ const NativeDatepicker = ({
     padding: 0 16px;
     border: 1px solid ${theme.colour.speciality.inputDefault};
     color: ${theme.colour.text.default};
-    font-size: 16px;
-    font-family: sans-serif;
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     text-transform: uppercase;
     cursor: pointer;
 

package/lib/components/Pagination/PaginationInfo.tsx

@@ -1,6 +1,7 @@
 import { useContext, memo } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import Paragraph from '../Paragraph';
 import { PaginationContext } from './Pagination';
 
 export const NAME = 'ucl-uikit-pagination__info';
@@ -14,7 +15,7 @@ export interface PaginationInfoProps extends React.HTMLAttributes<HTMLDivElement
 const PaginationInfo = ({
   format = 'pages',
   itemsPluralName,
-  testId,
+  testId = NAME,
   className,
   ...props
 }: PaginationInfoProps) => {
@@ -51,8 +52,6 @@ const PaginationInfo = ({
     margin: ${theme.margin.m16} 0;
     text-align: center;
     color: ${theme.colour.text.secondary};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
 
     @media (min-width: ${theme.breakpoints.tablet}px) {
       margin: ${theme.margin.m24} 0;
@@ -62,15 +61,18 @@ const PaginationInfo = ({
   const style = cx(NAME, baseStyle, className);
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='md'
+      noMargins
       className={style}
-      data-testid={testId}
+      testId={testId}
       aria-live='polite'
       aria-label={`Pagination info: ${text}`}
       {...props}
     >
       {text}
-    </div>
+    </Paragraph>
   );
 };
 

package/lib/components/Pagination/subcomponents/PaginationCompactControls.tsx

@@ -149,6 +149,14 @@ const PaginationCompactControls = ({
   `;
 
   const pageInputStyle = css`
+    && {
+      font-family: ${theme.typography.body.md.fontFamily};
+      font-feature-settings: ${theme.typography.body.md.fontSettings};
+      font-size: ${theme.typography.body.md.fontSize}px;
+      font-weight: ${theme.typography.body.md.fontWeight};
+      line-height: ${theme.typography.body.md.lineHeight}%;
+    }
+
     height: 48px;
     width: 48px;
     box-sizing: border-box;
@@ -157,8 +165,6 @@ const PaginationCompactControls = ({
     padding: 0;
     text-align: center;
     color: ${theme.colour.text.default};
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-size: ${theme.typography.body.md.fontSize};
 
     &[aria-invalid='true'] {
       border-color: ${theme.colour.border.critical};

package/lib/components/Pagination/subcomponents/PaginationStandardControls.tsx

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css';
 import useTheme from '../../../theme/useTheme';
 import { PaginationContext } from '../Pagination';
 import Button from '../../Button';
+import Text from '../../Text';
 import getPaginationButtons from '../getPaginationButtons';
 import { useMediaQuery } from '../../../hooks';
 
@@ -187,7 +188,7 @@ const PaginationStandardControls = ({
         {paginationButtons.map((page) => (
           <li key={page}>
             {page === '...1' || page === '...2' ? (
-              <span aria-hidden>...</span>
+              <Text aria-hidden>...</Text>
             ) : (
               <>
                 {page !== currentPage && (

package/lib/components/Paragraph/Paragraph.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
-export const NAME = 'ucl-uikit-paragrah';
+export const NAME = 'ucl-uikit-paragraph';
 
 export type ParagraphLevel =
   | 'lg'
@@ -84,9 +84,11 @@ const Paragraph = ({
   const baseStyle = css`
     font-family: ${md.fontFamily};
     font-feature-settings: ${md.fontSettings};
-    color: ${emphasis === 'medium'
-      ? theme.colour.text.secondary
-      : theme.colour.text.default};
+    color: ${
+      emphasis === 'medium'
+        ? theme.colour.text.secondary
+        : theme.colour.text.default
+    };
     margin: 0;
   `;
 

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

@@ -60,7 +60,7 @@ describe('Paragraph', () => {
         <Paragraph>This is a test</Paragraph>
       </ThemeContextProvider>
     );
-    const paragraph = screen.getByTestId('ucl-uikit-paragrah');
+    const paragraph = screen.getByTestId('ucl-uikit-paragraph');
     expect(paragraph).toBeDefined();
   });
 

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

@@ -2,7 +2,7 @@
 
 exports[`Paragraph > snapshot: custom test id 1`] = `
 <p
-  class="ucl-uikit-paragrah css-h12wmf"
+  class="ucl-uikit-paragraph css-h12wmf"
   data-testid="custom-test-id"
 >
   This is a test
@@ -11,8 +11,8 @@ exports[`Paragraph > snapshot: custom test id 1`] = `
 
 exports[`Paragraph > snapshot: emphasis 1`] = `
 <p
-  class="ucl-uikit-paragrah css-h12wmf"
-  data-testid="ucl-uikit-paragrah"
+  class="ucl-uikit-paragraph css-h12wmf"
+  data-testid="ucl-uikit-paragraph"
 >
   high emphasis
 </p>
@@ -20,8 +20,8 @@ exports[`Paragraph > snapshot: emphasis 1`] = `
 
 exports[`Paragraph > snapshot: minimal props 1`] = `
 <p
-  class="ucl-uikit-paragrah css-h12wmf"
-  data-testid="ucl-uikit-paragrah"
+  class="ucl-uikit-paragraph css-h12wmf"
+  data-testid="ucl-uikit-paragraph"
 >
   This is a test
 </p>
@@ -29,8 +29,8 @@ exports[`Paragraph > snapshot: minimal props 1`] = `
 
 exports[`Paragraph > snapshot: no margins 1`] = `
 <p
-  class="ucl-uikit-paragrah css-1dosm7d"
-  data-testid="ucl-uikit-paragrah"
+  class="ucl-uikit-paragraph css-1dosm7d"
+  data-testid="ucl-uikit-paragraph"
 >
   no margins
 </p>
@@ -38,8 +38,8 @@ exports[`Paragraph > snapshot: no margins 1`] = `
 
 exports[`Paragraph > snapshot: size 1`] = `
 <p
-  class="ucl-uikit-paragrah css-h12wmf"
-  data-testid="ucl-uikit-paragrah"
+  class="ucl-uikit-paragraph css-h12wmf"
+  data-testid="ucl-uikit-paragraph"
 >
   standfirst
 </p>

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

@@ -18,7 +18,7 @@ exports[`Radio > snapshot: checked prop 1`] = `
 
 exports[`Radio > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-radio css-auet16"
+  class="ucl-uikit-radio css-v556ou"
 >
   <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-auet16"
+  class="ucl-uikit-radio css-v556ou"
 >
   <input
     class="css-19qtec1"

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

@@ -8,7 +8,7 @@ exports[`Search > snapshot: no props 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-1jgqttg"
+      class="ucl-uikit-input__input css-r12x3w"
       data-testid="ucl-uikit-search"
       id=""
       placeholder=""
@@ -87,7 +87,7 @@ exports[`Search > snapshot: testId prop 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-1jgqttg"
+      class="ucl-uikit-input__input css-r12x3w"
       data-testid="test123"
       id=""
       placeholder=""

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-1kou9w2"
+  class="ucl-uikit-select css-1gu3yiz"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"

package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`Cell > Snapshot: variants 1`] = `
           data-testid="ucl-uikit-table__cell-content"
         >
           <span
-            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-qoivhx"
             data-testid="ucl-uikit-checkbox__root"
           >
             <input
@@ -105,7 +105,7 @@ exports[`Cell > Snapshot: variants 1`] = `
         >
           <button
             aria-disabled="false"
-            class="ucl-uikit-button css-1r34e1w"
+            class="ucl-uikit-button css-1o7ytg2"
             data-testid="ucl-uikit-button"
           >
             Button

package/lib/components/Table/subcomponents/HeadCell/__tests__/__snapshots__/HeadCell.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
           data-testid="ucl-uikit-table__head-cell-content"
         >
           <span
-            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-qoivhx"
             data-testid="ucl-uikit-checkbox__root"
           >
             <input

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

@@ -2,7 +2,7 @@
 
 exports[`Textarea > snapshot: Disabled 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-oemvy2"
+  class="ucl-uikit-textarea css-yfw4f5"
   data-testid="ucl-uikit-textarea"
   disabled=""
   id=""
@@ -11,7 +11,7 @@ exports[`Textarea > snapshot: Disabled 1`] = `
 
 exports[`Textarea > snapshot: Placeholder 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-1eo4yl8"
+  class="ucl-uikit-textarea css-1eai1zv"
   data-testid="ucl-uikit-textarea"
   id=""
   placeholder="test"
@@ -20,7 +20,7 @@ exports[`Textarea > snapshot: Placeholder 1`] = `
 
 exports[`Textarea > snapshot: custom test id 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-1eo4yl8"
+  class="ucl-uikit-textarea css-1eai1zv"
   data-testid="custom-test-id"
   id=""
 />
@@ -28,7 +28,7 @@ exports[`Textarea > snapshot: custom test id 1`] = `
 
 exports[`Textarea > snapshot: minimal props 1`] = `
 <textarea
-  class="ucl-uikit-textarea css-1eo4yl8"
+  class="ucl-uikit-textarea css-1eai1zv"
   data-testid="ucl-uikit-textarea"
   id=""
 />

package/lib/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { memo, forwardRef, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
+import Text from '../Text';
 
 export const NAME = 'ucl-uikit-tooltip';
 
@@ -17,14 +18,9 @@ const Tooltip = forwardRef<Ref, TooltipProps>(
     const baseStyle = css`
       background-color: ${theme.colour.fill.brandPrimary};
       color: ${theme.colour.text.brandInverse};
-      font-family: ${theme.typography.body.md.fontFamily};
-      font-feature-settings: ${theme.typography.body.md.fontSettings};
       height: 32px;
       padding: 4px 8px 4px 8px;
       border-radius: ${theme.radius.r4};
-      font-size: ${theme.typography.body.md.fontSize}px;
-      font-weight: ${theme.typography.body.md.fontWeight};
-      line-height: ${theme.typography.body.md.lineHeight}%;
       display: inline;
       white-space: nowrap;
     `;
@@ -32,14 +28,15 @@ const Tooltip = forwardRef<Ref, TooltipProps>(
     const style = cx(NAME, baseStyle, className);
 
     return (
-      <span
+      <Text
         ref={ref}
+        level='md'
         className={style}
-        data-testid={testId}
+        testId={testId}
         {...props}
       >
         {children}
-      </span>
+      </Text>
     );
   }
 );

package/lib/components/Tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Tooltip > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-tooltip css-1ojzqhe"
+  class="ucl-uikit-text ucl-uikit-tooltip css-1s62y9x"
   data-testid="ucl-uikit-tooltip"
 >
   test
@@ -11,7 +11,7 @@ exports[`Tooltip > snapshot: no props 1`] = `
 
 exports[`Tooltip > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-tooltip css-1ojzqhe"
+  class="ucl-uikit-text ucl-uikit-tooltip css-1s62y9x"
   data-testid="test123"
 >
    Info Tooltip 

package/lib/components/index.ts

@@ -95,6 +95,10 @@ export type { AppHeaderProps } from './AppHeader';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
 
+/** @deprecated Use Breadcrumbs instead. BreadcrumbsLegacy only supports the default theme. */
+export { LegacyBreadcrumbs as BreadcrumbsLegacy } from './Breadcrumbs';
+export type { LegacyBreadcrumbsProps as BreadcrumbsLegacyProps } from './Breadcrumbs';
+
 export { default as BreadcrumbsNew } from './BreadcrumbsNew';
 export type {
   BaseBreadcrumbsItemProps,

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.43.1",
+  "version": "0.43.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,7 +43,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "design-system-foundations-public": "0.1.6"
+    "design-system-foundations-public": "0.1.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",