uikit-react-public 0.43.2 → 0.43.4

package/lib/components/FooterNew/LogoAddressAndSocial.tsx

@@ -2,6 +2,8 @@ import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 import UclLogoNew from '../UclLogoNew/UclLogo';
+import Link from '../Link';
+import Paragraph from '../Paragraph';
 import SocialLink from './SocialLink';
 
 export const NAME = 'ucl-uikit-footer__logo-address-social';
@@ -25,8 +27,6 @@ const LogoAddressAndSocial = ({
 
   const baseStyle = css`
     margin-top: ${theme.margin.m48};
-    font-size: ${theme.font.size.f14};
-    font-weight: 300;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       margin-top: ${theme.margin.m72};
@@ -64,10 +64,6 @@ const LogoAddressAndSocial = ({
   const addressStyle = css`
     color: ${theme.colour.text.brandInverse};
     opacity: 0.6; // todo: use alpha white colour from theme
-    font-family: ${theme.typography.body.md.fontFamily};
-    line-height: ${
-      theme.typography.body.md.lineHeight
-    }%; // todo: change foundations lib to use non-percent number
   `;
 
   const telephoneStyle = css`
@@ -77,10 +73,6 @@ const LogoAddressAndSocial = ({
   const telephoneLinkStyle = css`
     color: ${theme.colour.text.brandInverse};
     opacity: 0.6; // todo: use alpha white colour from theme
-    font-family: ${theme.typography.body.md.fontFamily};
-    line-height: ${
-      theme.typography.body.md.lineHeight
-    }%; // todo: change foundations lib to use non-percent number
     text-decoration: none;
     transition: color 0.2s ease-out;
 
@@ -94,8 +86,13 @@ const LogoAddressAndSocial = ({
     }
 
     &:hover {
+      color: ${theme.colour.text.brandInverse};
       text-decoration: underline;
     }
+
+    &:visited {
+      color: ${theme.colour.text.brandInverse};
+    }
   `;
 
   const socialLinksStyle = css`
@@ -119,22 +116,37 @@ const LogoAddressAndSocial = ({
 
       <div className={contactDetailsStyle}>
         {addressFormat === 'full' && (
-          <div className={addressStyle}>
+          <Paragraph
+            as='div'
+            level='sm'
+            noMargins
+            className={addressStyle}
+          >
             University College London
             <br />
             Gower Street, London, WC1E 6BT
-          </div>
+          </Paragraph>
         )}
         {addressFormat === 'compact' && (
-          <div className={addressStyle}>Gower Street, London, WC1E 6BT</div>
+          <Paragraph
+            as='div'
+            level='sm'
+            noMargins
+            className={addressStyle}
+          >
+            Gower Street, London, WC1E 6BT
+          </Paragraph>
         )}
         <div className={telephoneStyle}>
-          <a
+          <Link
+            size='small'
+            noVisited
+            variant='secondary'
             className={telephoneLinkStyle}
             href='tel:+4402076792000'
           >
             Tel: +44 (0) 20 7679 2000
-          </a>
+          </Link>
         </div>
       </div>
 

package/lib/components/FooterNew/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
     class="css-1wn072a"
   >
     <div
-      class="ucl-uikit-footer__logo-address-social css-39g6dw"
+      class="ucl-uikit-footer__logo-address-social css-s2w22b"
       data-testid="ucl-uikit-footer__logo-address-social"
     >
       <svg
@@ -29,7 +29,8 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         class="css-x7g5ai"
       >
         <div
-          class="css-zrpfhw"
+          class="ucl-uikit-paragraph css-hklwne"
+          data-testid="ucl-uikit-paragraph"
         >
           University College London
           <br />
@@ -39,7 +40,8 @@ exports[`Footer > snapshot: footer links provided 1`] = `
           class="css-ems5xl"
         >
           <a
-            class="css-iyfaeh"
+            class="ucl-uikit-base-link ucl-uikit-link css-ed41oj"
+            data-testid="ucl-uikit-link"
             href="tel:+4402076792000"
           >
             Tel: +44 (0) 20 7679 2000
@@ -273,7 +275,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
     data-testid="ucl-uikit-footer__back-to-top"
   >
     <button
-      class="css-18idfzv"
+      class="css-cyv7oe"
     >
       Back to top 
       <svg
@@ -301,7 +303,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
     data-testid="ucl-uikit-footer__legal-and-copyright"
   >
     <div
-      class="css-j4yrqr"
+      class="css-1ogkp9u"
     >
       <a
         class="css-19zp1gp"
@@ -353,7 +355,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       </a>
     </div>
     <div
-      class="css-i2x11w"
+      class="css-a9msdd"
     >
       © 
       2026
@@ -376,23 +378,23 @@ exports[`Footer > snapshot: nav links 1`] = `
       data-testid="ucl-uikit-footer__links"
     >
       <div
-        class="ucl-uikit-footer__column css-1qdqdud"
+        class="ucl-uikit-footer__column css-frhp4r"
         data-testid="ucl-uikit-footer__column"
       >
         <h3
-          class="css-18ul2r4"
+          class="css-nfz73w"
         >
           Category 1
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-7pftwz"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-ju7b6v"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-7pftwz"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-ju7b6v"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -400,23 +402,23 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
       </div>
       <div
-        class="ucl-uikit-footer__column css-1qdqdud"
+        class="ucl-uikit-footer__column css-frhp4r"
         data-testid="ucl-uikit-footer__column"
       >
         <h3
-          class="css-18ul2r4"
+          class="css-nfz73w"
         >
           Category 2
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-7pftwz"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-ju7b6v"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-7pftwz"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-ju7b6v"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -425,7 +427,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       </div>
     </nav>
     <div
-      class="ucl-uikit-footer__logo-address-social css-xk4bmq"
+      class="ucl-uikit-footer__logo-address-social css-11ttezh"
       data-testid="ucl-uikit-footer__logo-address-social"
     >
       <svg
@@ -445,7 +447,8 @@ exports[`Footer > snapshot: nav links 1`] = `
         class="css-x7g5ai"
       >
         <div
-          class="css-zrpfhw"
+          class="ucl-uikit-paragraph css-hklwne"
+          data-testid="ucl-uikit-paragraph"
         >
           University College London
           <br />
@@ -455,7 +458,8 @@ exports[`Footer > snapshot: nav links 1`] = `
           class="css-ems5xl"
         >
           <a
-            class="css-iyfaeh"
+            class="ucl-uikit-base-link ucl-uikit-link css-ed41oj"
+            data-testid="ucl-uikit-link"
             href="tel:+4402076792000"
           >
             Tel: +44 (0) 20 7679 2000
@@ -689,7 +693,7 @@ exports[`Footer > snapshot: nav links 1`] = `
     data-testid="ucl-uikit-footer__back-to-top"
   >
     <button
-      class="css-18idfzv"
+      class="css-cyv7oe"
     >
       Back to top 
       <svg
@@ -717,7 +721,7 @@ exports[`Footer > snapshot: nav links 1`] = `
     data-testid="ucl-uikit-footer__legal-and-copyright"
   >
     <div
-      class="css-j4yrqr"
+      class="css-1ogkp9u"
     >
       <a
         class="css-19zp1gp"
@@ -769,7 +773,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       </a>
     </div>
     <div
-      class="css-i2x11w"
+      class="css-a9msdd"
     >
       © 
       2026
@@ -788,7 +792,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
     class="css-1wn072a"
   >
     <div
-      class="ucl-uikit-footer__logo-address-social css-39g6dw"
+      class="ucl-uikit-footer__logo-address-social css-s2w22b"
       data-testid="ucl-uikit-footer__logo-address-social"
     >
       <svg
@@ -808,7 +812,8 @@ exports[`Footer > snapshot: no nav links 1`] = `
         class="css-x7g5ai"
       >
         <div
-          class="css-zrpfhw"
+          class="ucl-uikit-paragraph css-hklwne"
+          data-testid="ucl-uikit-paragraph"
         >
           University College London
           <br />
@@ -818,7 +823,8 @@ exports[`Footer > snapshot: no nav links 1`] = `
           class="css-ems5xl"
         >
           <a
-            class="css-iyfaeh"
+            class="ucl-uikit-base-link ucl-uikit-link css-ed41oj"
+            data-testid="ucl-uikit-link"
             href="tel:+4402076792000"
           >
             Tel: +44 (0) 20 7679 2000
@@ -1052,7 +1058,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
     data-testid="ucl-uikit-footer__back-to-top"
   >
     <button
-      class="css-18idfzv"
+      class="css-cyv7oe"
     >
       Back to top 
       <svg
@@ -1080,7 +1086,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
     data-testid="ucl-uikit-footer__legal-and-copyright"
   >
     <div
-      class="css-j4yrqr"
+      class="css-1ogkp9u"
     >
       <a
         class="css-19zp1gp"
@@ -1132,7 +1138,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       </a>
     </div>
     <div
-      class="css-i2x11w"
+      class="css-a9msdd"
     >
       © 
       2026

package/lib/components/HeaderDraft/HeaderBottomBreadcrumbs.tsx

@@ -15,13 +15,18 @@ const HeaderBottomBreadcrumbs = ({
   ...props
 }: HeaderBottomBreadcrumbsProps) => {
   const [theme] = useTheme();
+  const { sm } = theme.typography.body;
 
   const baseStyle = css`
     color: ${theme.color.text.primary};
     padding: ${theme.padding.p16} 60px;
     box-sizing: border-box;
     border-bottom: 1px solid ${theme.color.neutral.grey15};
-    font-size: ${theme.font.size.f14};
+    font-family: ${sm.fontFamily};
+    font-feature-settings: ${sm.fontSettings};
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/HeaderDraft/HeaderBottomHeadingAndAvatar.tsx

@@ -28,6 +28,9 @@ const Header = ({
   ...props
 }: HeaderProps) => {
   const [theme] = useTheme();
+  const headingTypography = theme.typography.heading.sm.md;
+  const subheadingTypography = theme.typography.body.md;
+  const profileTypography = theme.typography.body.sm;
 
   const baseStyle = css`
     color: ${theme.color.text.primary};
@@ -47,17 +50,21 @@ const Header = ({
 
   const headingStyle = css`
     margin: 0;
-    font-size: ${theme.font.size.f24};
-    font-weight: 400;
-    line-height: 24px;
+    font-family: ${headingTypography.fontFamily};
+    font-feature-settings: ${headingTypography.fontSettings};
+    font-size: ${headingTypography.fontSize}px;
+    font-weight: ${headingTypography.fontWeight};
+    line-height: ${headingTypography.lineHeight}%;
   `;
 
   const subheadingStyle = css`
     margin: ${theme.margin.m8} 0 0 0;
     color: ${theme.color.text.secondary};
-    font-size: ${theme.font.size.f16};
-    font-weight: 400;
-    line-height: 16px;
+    font-family: ${subheadingTypography.fontFamily};
+    font-feature-settings: ${subheadingTypography.fontSettings};
+    font-size: ${subheadingTypography.fontSize}px;
+    font-weight: ${subheadingTypography.fontWeight};
+    line-height: ${subheadingTypography.lineHeight}%;
   `;
 
   const avatarDropdownStyle = css`
@@ -91,12 +98,16 @@ const Header = ({
 
   const nameAndRoleStyle = css`
     flex: 1;
-    font-size: ${theme.font.size.f14};
     color: ${theme.color.text.primary};
+    font-family: ${profileTypography.fontFamily};
+    font-feature-settings: ${profileTypography.fontSettings};
+    font-size: ${profileTypography.fontSize}px;
+    font-weight: ${profileTypography.fontWeight};
+    line-height: ${profileTypography.lineHeight}%;
   `;
 
   const nameStyle = css`
-    font-size: ${theme.font.size.f14};
+    font: inherit;
   `;
 
   const roleStyle = css`

package/lib/components/HeaderDraft/HeaderBreadcrumb.tsx

@@ -17,10 +17,15 @@ const HeaderBreadcrumb = ({
   ...props
 }: HeaderBreadcrumbProps) => {
   const [theme] = useTheme();
+  const { sm, smSemibold } = theme.typography.body;
 
   const baseStyle = css`
     color: ${theme.color.text.primary};
-    font-size: ${theme.font.size.f14};
+    font-family: ${sm.fontFamily};
+    font-feature-settings: ${sm.fontSettings};
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
   `;
 
   const textBaseStyle = css`
@@ -40,7 +45,11 @@ const HeaderBreadcrumb = ({
 
   const nonLinkStyle = css`
     color: ${theme.color.text.secondary};
-    font-weight: 700;
+    font-family: ${smSemibold.fontFamily};
+    font-feature-settings: ${smSemibold.fontSettings};
+    font-size: ${smSemibold.fontSize}px;
+    font-weight: ${smSemibold.fontWeight};
+    line-height: ${smSemibold.lineHeight}%;
   `;
 
   const textStyle = cx(textBaseStyle, !link && nonLinkStyle);

package/lib/components/HeaderDraft/HeaderDraft.tsx

@@ -43,6 +43,7 @@ const HeaderDraft = ({
   ...props
 }: HeaderDraftProps) => {
   const [theme] = useTheme();
+  const { mdSemibold, lgBold } = theme.typography.body;
 
   const menuChildren: React.ReactNode[] = [];
   const nonMenuChildren: React.ReactNode[] = [];
@@ -57,7 +58,11 @@ const HeaderDraft = ({
 
   const baseStyle = css`
     background-color: ${theme.color.neutral.white};
-    font-family: ${theme.font.family.primary};
+    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}%;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
@@ -105,8 +110,11 @@ const HeaderDraft = ({
   const titleStyle = css`
     display: block;
     margin: 0;
-    font-size: ${theme.font.size.f18};
-    font-weight: 700;
+    font-family: ${lgBold.fontFamily};
+    font-feature-settings: ${lgBold.fontSettings};
+    font-size: ${lgBold.fontSize}px;
+    font-weight: ${lgBold.fontWeight};
+    line-height: ${lgBold.lineHeight}%;
     text-align: center;
   `;
 
@@ -117,8 +125,11 @@ const HeaderDraft = ({
     padding: 0 ${theme.padding.p16};
     background-color: ${theme.color.neutral.white};
     color: ${theme.color.text.primary};
-    font-size: ${theme.font.size.f16};
-    font-weight: 700;
+    font-family: ${mdSemibold.fontFamily};
+    font-feature-settings: ${mdSemibold.fontSettings};
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
     border: none;
     display: flex;
     align-items: center;

package/lib/components/HeaderDraft/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-1crtzt6"
+  class="ucl-uikit-header css-15a6wts"
   data-testid="ucl-uikit-header"
 >
   <div
@@ -32,12 +32,12 @@ exports[`Header > snapshot: variant=avatar 1`] = `
       class="css-x5lawr"
     >
       <h1
-        class="css-1683c8i"
+        class="css-jrzbk1"
       >
         LIDS
       </h1>
       <h2
-        class="css-1ui7iu9"
+        class="css-jmsvac"
       >
         Lorem Ipsum Dolor Simet
       </h2>
@@ -55,10 +55,10 @@ exports[`Header > snapshot: variant=avatar 1`] = `
         />
       </div>
       <div
-        class="css-dz7zbn"
+        class="css-1o9s1xh"
       >
         <div
-          class="css-xahd9c"
+          class="css-f9ijlp"
         >
           Haley Holland
         </div>
@@ -93,7 +93,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-1crtzt6"
+  class="ucl-uikit-header css-15a6wts"
   data-testid="ucl-uikit-header"
 >
   <div
@@ -116,7 +116,7 @@ exports[`Header > snapshot: variant=breadcrumbs 1`] = `
     </svg>
   </div>
   <nav
-    class="ucl-uikit-header__bottom--breadcrumbs css-ff2u5r"
+    class="ucl-uikit-header__bottom--breadcrumbs css-1rcrkpw"
     data-testid="ucl-uikit-header__bottom--breadcrumbs"
   >
     <ul

package/lib/components/HeaderNew/HeaderItem.tsx

@@ -15,12 +15,18 @@ const HeaderItem = ({
   ...props
 }: HeaderItemProps) => {
   const [theme] = useTheme();
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     display: inline-flex;
     align-items: center;
     align-self: center;
     min-height: 40px;
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
 
     &:not(:first-of-type) {
       margin-left: ${theme.margin.m16};

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>
   );
 };