uikit-react-public 0.43.2 → 0.44.0

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

@@ -148,6 +148,12 @@ export type { HeaderProps } from './Header';
 export { default as HeaderNew } from './HeaderNew';
 export type { HeaderProps as HeaderNewProps } from './HeaderNew';
 
+export { default as NavigationBar } from './NavigationBar';
+export type {
+  NavigationBarItemProps,
+  NavigationBarProps,
+} from './NavigationBar';
+
 export { default as HeaderDraft } from './HeaderDraft';
 export type { HeaderDraftProps } from './HeaderDraft';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.43.2",
+  "version": "0.44.0",
   "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",