uikit-react-public 0.43.2 → 0.43.4

package/lib/components/Calendar/subcomponents/ControlsSelect.tsx

@@ -17,6 +17,7 @@ const ControlsSelect = <T extends string | number>({
   onValueChange,
 }: ControlsSelectProps<T>) => {
   const [theme] = useTheme();
+  const { md, mdSemibold } = theme.typography.body;
 
   const selectStyle = css`
     && {
@@ -27,10 +28,11 @@ const ControlsSelect = <T extends string | number>({
       padding: 0;
       border: 0;
       background-color: transparent;
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
-      font-weight: 700;
-      line-height: 20px;
+      font-family: ${mdSemibold.fontFamily};
+      font-feature-settings: ${mdSemibold.fontSettings};
+      font-size: ${mdSemibold.fontSize}px;
+      font-weight: ${mdSemibold.fontWeight};
+      line-height: ${mdSemibold.lineHeight}%;
 
       &:focus-visible,
       &:focus-within {
@@ -60,8 +62,11 @@ const ControlsSelect = <T extends string | number>({
   const optionStyle = css`
     min-height: 48px;
     padding: 12px ${theme.padding.p16};
-    font-weight: 400;
-    line-height: ${theme.font.lineHeight.h150};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
   `;
 
   return (

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

@@ -77,7 +77,7 @@ exports[`Checkbox > snapshot: indeterminate prop 1`] = `
 
 exports[`Checkbox > snapshot: no props 1`] = `
 <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
@@ -94,7 +94,7 @@ exports[`Checkbox > snapshot: no props 1`] = `
 
 exports[`Checkbox > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+  class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-qoivhx"
   data-testid="test123__root"
 >
   <input

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

@@ -6,7 +6,7 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
   data-testid="ucl-uikit-datepicker"
 >
   <div
-    class="ucl-uikit-datepicker__visible-field css-j8089z"
+    class="ucl-uikit-datepicker__visible-field css-2ui4ji"
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
@@ -61,7 +61,7 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
   data-testid="ucl-uikit-datepicker"
 >
   <div
-    class="ucl-uikit-datepicker__visible-field css-j8089z"
+    class="ucl-uikit-datepicker__visible-field css-2ui4ji"
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input

package/lib/components/DrawerMenu/DrawerMenu.tsx

@@ -13,8 +13,7 @@ export interface DrawerMenuChildrenApi {
 }
 
 type DrawerMenuChildren =
-  | ReactNode
-  | ((api: DrawerMenuChildrenApi) => ReactNode);
+  ReactNode | ((api: DrawerMenuChildrenApi) => ReactNode);
 
 export interface DrawerMenuProps
   extends
@@ -74,8 +73,10 @@ const DrawerMenu = ({
   const triggerStyle = css`
     color: ${theme.colour.text.brandPrimary};
     font-family: ${theme.typography.body.mdNumeric.fontFamily};
+    font-feature-settings: ${theme.typography.body.mdNumeric.fontSettings};
+    font-size: ${theme.typography.body.mdNumeric.fontSize}px;
     font-weight: ${theme.typography.body.mdNumeric.fontWeight};
-    font-size: 14px;
+    line-height: ${theme.typography.body.mdNumeric.lineHeight}%;
   `;
 
   const dropdownStyle = cx(NAME, dropdownClassName);

package/lib/components/DropdownMenu/DropdownMenu.tsx

@@ -13,8 +13,7 @@ export interface DropdownMenuChildrenApi {
 }
 
 type DropdownMenuChildren =
-  | ReactNode
-  | ((api: DropdownMenuChildrenApi) => ReactNode);
+  ReactNode | ((api: DropdownMenuChildrenApi) => ReactNode);
 
 export interface DropdownMenuProps
   extends
@@ -64,8 +63,10 @@ const DropdownMenu = ({
   const triggerStyle = css`
     color: ${theme.colour.text.brandPrimary};
     font-family: ${theme.typography.body.mdNumeric.fontFamily};
+    font-feature-settings: ${theme.typography.body.mdNumeric.fontSettings};
+    font-size: ${theme.typography.body.mdNumeric.fontSize}px;
     font-weight: ${theme.typography.body.mdNumeric.fontWeight};
-    font-size: 14px;
+    line-height: ${theme.typography.body.mdNumeric.lineHeight}%;
   `;
 
   const dropdownStyle = cx(NAME, dropdownClassName);

package/lib/components/DropdownUserMenu/DropdownUserMenu.tsx

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css';
 import Dropdown, { DropdownProps } from '../Dropdown';
 import Avatar, { AvatarProps } from '../Avatar';
 import Icon from '../Icon';
+import Text from '../Text';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 
@@ -67,10 +68,7 @@ const DropdownUserMenu = ({
   `;
 
   const userNameStyle = css`
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-feature-settings: ${theme.typography.body.md.fontSettings};
-    font-size: ${theme.typography.body.md.fontSize}px;
-    line-height: 1.2;
+    color: inherit;
     white-space: nowrap;
   `;
 
@@ -111,7 +109,12 @@ const DropdownUserMenu = ({
           className={resolvedTriggerClassName}
         >
           {isDesktop ? (
-            <span className={resolvedUserNameClassName}>{userName}</span>
+            <Text
+              level='md'
+              className={resolvedUserNameClassName}
+            >
+              {userName}
+            </Text>
           ) : null}
           <Avatar
             tabIndex={-1}

package/lib/components/Field/CharacterCount.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, use } from 'react';
 import { css, cx } from '@emotion/css';
 import { FieldContext } from './Field';
 import { useTheme } from '../../theme';
+import Paragraph from '../Paragraph';
 
 const NAME = 'ucl-uikit-field__char-count';
 
@@ -22,9 +23,6 @@ const CharacaterCount = ({
 
   const baseStyle = css`
     color: ${theme.colour.text.secondary};
-    font-size: ${theme.font.size.f14};
-    font-family: ${theme.font.family.primary};
-    line-height: ${theme.font.lineHeight.h120};
     text-align: right;
   `;
 
@@ -35,13 +33,16 @@ const CharacaterCount = ({
   const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='sm'
+      noMargins
       className={style}
-      data-testid={testId}
+      testId={testId}
       {...props}
     >
       {charCount}/{maxChars}
-    </div>
+    </Paragraph>
   );
 };
 

package/lib/components/Field/ErrorText.tsx

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css';
 import { FieldContext } from './Field';
 import { Icon } from '../';
 import { useTheme } from '../../theme';
+import Paragraph from '../Paragraph';
 
 const NAME = 'ucl-uikit-field__error-text';
 
@@ -27,9 +28,6 @@ const ErrorText = ({
     gap: 8px;
     margin-top: 8px;
     color: ${theme.colour.text.critical};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
-    line-height: ${theme.font.lineHeight.h120};
   `;
 
   // Prevents the icon getting squished by lots of text
@@ -41,15 +39,18 @@ const ErrorText = ({
   const style = cx(NAME, baseStyle, className);
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='sm'
+      noMargins
       className={style}
-      data-testid={testId}
+      testId={testId}
       {...props}
       role='alert'
     >
       <Icon.Info className={iconStyle} />
       {children}
-    </div>
+    </Paragraph>
   );
 };
 

package/lib/components/FileInput/FileInput.tsx

@@ -19,10 +19,14 @@ const FileInput = ({
 }: FileInputProps) => {
   const [theme] = useTheme();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const { md, mdSemibold } = theme.typography.body;
 
   const baseStyle = css`
-    font-size: ${theme.font.size.f16};
-    font-family: ${theme.font.family.primary};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     color: ${theme.colour.link.default};
   `;
 
@@ -37,7 +41,11 @@ const FileInput = ({
     display: inline-flex;
     text-decoration: underline;
     gap: 6px;
-    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}%;
     margin-top: 3px;
     cursor: pointer;
   `;

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

@@ -2,10 +2,10 @@
 
 exports[`Input > snapshot: no props 1`] = `
 <div
-  class="ucl-uikit-fileinput css-1ubxuij"
+  class="ucl-uikit-fileinput css-1aikphx"
 >
   <label
-    class="css-1lc9iag"
+    class="css-iffx76"
     for="file-input-1"
   >
     <svg
@@ -39,10 +39,10 @@ exports[`Input > snapshot: no props 1`] = `
 
 exports[`Input > snapshot: value prop 1`] = `
 <div
-  class="ucl-uikit-fileinput css-1ubxuij"
+  class="ucl-uikit-fileinput css-1aikphx"
 >
   <label
-    class="css-1lc9iag"
+    class="css-iffx76"
     for="file-input-1"
   >
     <svg

package/lib/components/Footer/Footer.tsx

@@ -40,12 +40,16 @@ const LegacyFooter = ({
   const copyrightYear = new Date().getFullYear();
 
   const [theme] = useTheme();
+  const footerTypography = theme.typography.body.sm;
 
   const baseStyle = css`
     background-color: ${theme.color.neutral.grey90};
     color: ${theme.color.text.inverted};
-    font-family: ${theme.font.family.primary};
-    font-weight: 300;
+    font-family: ${footerTypography.fontFamily};
+    font-feature-settings: ${footerTypography.fontSettings};
+    font-size: ${footerTypography.fontSize}px;
+    font-weight: ${footerTypography.fontWeight};
+    line-height: ${footerTypography.lineHeight}%;
     padding: ${theme.padding.p40} 0 ${theme.padding.p40};
   `;
 
@@ -102,7 +106,11 @@ const LegacyFooter = ({
     color: ${theme.color.neutral.grey20};
     display: flex;
     flex-direction: column;
-    font-size: ${theme.font.size.f14};
+    font-family: ${footerTypography.fontFamily};
+    font-feature-settings: ${footerTypography.fontSettings};
+    font-size: ${footerTypography.fontSize}px;
+    font-weight: ${footerTypography.fontWeight};
+    line-height: ${footerTypography.lineHeight}%;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       flex-direction: row;
@@ -148,6 +156,11 @@ const LegacyFooter = ({
     padding: ${theme.padding.p8} 0;
     display: flex;
     flex-direction: column;
+    font-family: ${footerTypography.fontFamily};
+    font-feature-settings: ${footerTypography.fontSettings};
+    font-size: ${footerTypography.fontSize}px;
+    font-weight: ${footerTypography.fontWeight};
+    line-height: ${footerTypography.lineHeight}%;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       flex-direction: row;

package/lib/components/Footer/FooterColumn.tsx

@@ -1,6 +1,7 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
+import Heading from '../Heading';
 
 export const NAME = 'ucl-uikit-footer__column';
 
@@ -32,9 +33,6 @@ const FooterColumn = ({
 
   const headingStyle = css`
     margin: 0 0 ${theme.margin.m12};
-    font-family: ${theme.font.family.primary};
-    font-weight: 600;
-    font-size: ${theme.font.size.f20};
   `;
 
   return (
@@ -43,7 +41,14 @@ const FooterColumn = ({
       data-testid={testId}
       {...props}
     >
-      <h3 className={headingStyle}>{heading}</h3>
+      <Heading
+        as='h3'
+        level='xs'
+        margins={false}
+        className={headingStyle}
+      >
+        {heading}
+      </Heading>
 
       {children}
     </div>

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

@@ -2,7 +2,7 @@
 
 exports[`Footer > snapshot: footer links provided 1`] = `
 <footer
-  class="ucl-uikit-footer css-mq639a"
+  class="ucl-uikit-footer css-1if83z3"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -227,7 +227,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       role="separator"
     />
     <div
-      class="css-1ah386p"
+      class="css-s55e1t"
     >
       <span
         class="css-13yf1i2"
@@ -249,7 +249,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       </span>
     </div>
     <div
-      class="css-1k5afze"
+      class="css-ho31tg"
     >
       <a
         class="css-16lix8i"
@@ -306,7 +306,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
 
 exports[`Footer > snapshot: nav links 1`] = `
 <footer
-  class="ucl-uikit-footer css-mq639a"
+  class="ucl-uikit-footer css-1if83z3"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -320,7 +320,8 @@ exports[`Footer > snapshot: nav links 1`] = `
         data-testid="ucl-uikit-footer__column"
       >
         <h3
-          class="css-7bhh44"
+          class="ucl-uikit-heading css-sy55ia"
+          data-testid="ucl-uikit-heading"
         >
           Category 1
         </h3>
@@ -344,7 +345,8 @@ exports[`Footer > snapshot: nav links 1`] = `
         data-testid="ucl-uikit-footer__column"
       >
         <h3
-          class="css-7bhh44"
+          class="ucl-uikit-heading css-sy55ia"
+          data-testid="ucl-uikit-heading"
         >
           Category 2
         </h3>
@@ -580,7 +582,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       role="separator"
     />
     <div
-      class="css-1ah386p"
+      class="css-s55e1t"
     >
       <span
         class="css-13yf1i2"
@@ -602,7 +604,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       </span>
     </div>
     <div
-      class="css-1k5afze"
+      class="css-ho31tg"
     >
       <a
         class="css-16lix8i"
@@ -659,7 +661,7 @@ exports[`Footer > snapshot: nav links 1`] = `
 
 exports[`Footer > snapshot: no nav links 1`] = `
 <footer
-  class="ucl-uikit-footer css-mq639a"
+  class="ucl-uikit-footer css-1if83z3"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -884,7 +886,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       role="separator"
     />
     <div
-      class="css-1ah386p"
+      class="css-s55e1t"
     >
       <span
         class="css-13yf1i2"
@@ -906,7 +908,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       </span>
     </div>
     <div
-      class="css-1k5afze"
+      class="css-ho31tg"
     >
       <a
         class="css-16lix8i"

package/lib/components/FooterNew/BackToTop.tsx

@@ -18,6 +18,8 @@ const BackToTop = ({
   ...props
 }: BackToTopProps) => {
   const [theme] = useTheme();
+  const smallTypography = theme.typography.body.sm;
+  const mediumTypography = theme.typography.body.md;
 
   const handleBackToTopButtonClick = () => {
     scrollToTop();
@@ -47,9 +49,11 @@ const BackToTop = ({
     background-color: transparent;
     border: none;
     color: ${theme.colour.text.brandInverse};
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-size: 14px;
-    line-height: ${theme.typography.body.md.lineHeight}%;
+    font-family: ${smallTypography.fontFamily};
+    font-feature-settings: ${smallTypography.fontSettings};
+    font-size: ${smallTypography.fontSize}px;
+    font-weight: ${smallTypography.fontWeight};
+    line-height: ${smallTypography.lineHeight}%;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -60,7 +64,11 @@ const BackToTop = ({
     }
 
     @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-      font-size: 16px;
+      font-family: ${mediumTypography.fontFamily};
+      font-feature-settings: ${mediumTypography.fontSettings};
+      font-size: ${mediumTypography.fontSize}px;
+      font-weight: ${mediumTypography.fontWeight};
+      line-height: ${mediumTypography.lineHeight}%;
     }
   `;
 

package/lib/components/FooterNew/FooterColumn.tsx

@@ -26,8 +26,10 @@ const FooterColumn = ({
     align-items: start;
     gap: 16px;
     font-family: ${theme.typography.body.md.fontFamily};
+    font-feature-settings: ${theme.typography.body.md.fontSettings};
     font-weight: ${theme.typography.body.md.fontWeight};
     font-size: ${theme.typography.body.md.fontSize}px;
+    line-height: ${theme.typography.body.md.lineHeight}%;
 
     :not(:first-child) {
       margin-top: ${theme.margin.m24};
@@ -58,8 +60,10 @@ const FooterColumn = ({
     margin: 0;
     color: ${theme.colour.text.brandInverse};
     font-family: ${theme.typography.body.mdSemibold.fontFamily};
+    font-feature-settings: ${theme.typography.body.mdSemibold.fontSettings};
     font-weight: ${theme.typography.body.mdSemibold.fontWeight};
     font-size: ${theme.typography.body.mdSemibold.fontSize}px;
+    line-height: ${theme.typography.body.mdSemibold.lineHeight}%;
   `;
 
   return (

package/lib/components/FooterNew/FooterNavLink.tsx

@@ -19,15 +19,17 @@ const FooterNavLink = ({
   ...props
 }: FooterNavLinkProps) => {
   const [theme] = useTheme();
+  const smallTypography = theme.typography.body.sm;
+  const mediumTypography = theme.typography.body.md;
 
   const baseStyle = css`
     text-decoration: none;
     color: ${theme.colour.text.brandInverse};
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-size: 14px;
-    line-height: ${
-      theme.typography.body.md.lineHeight
-    }%; // todo: change foundations lib to use non-percent number
+    font-family: ${smallTypography.fontFamily};
+    font-feature-settings: ${smallTypography.fontSettings};
+    font-size: ${smallTypography.fontSize}px;
+    font-weight: ${smallTypography.fontWeight};
+    line-height: ${smallTypography.lineHeight}%;
     transition: color 0.2s ease-out;
 
     &:focus-visible {
@@ -45,7 +47,11 @@ const FooterNavLink = ({
     }
 
     @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-      font-size: 16px;
+      font-family: ${mediumTypography.fontFamily};
+      font-feature-settings: ${mediumTypography.fontSettings};
+      font-size: ${mediumTypography.fontSize}px;
+      font-weight: ${mediumTypography.fontWeight};
+      line-height: ${mediumTypography.lineHeight}%;
     }
   `;
 

package/lib/components/FooterNew/LegalAndCopyright.tsx

@@ -30,6 +30,7 @@ const LegalAndCopyright = ({
   const copyrightYear = new Date().getFullYear();
 
   const [theme] = useTheme();
+  const smallTypography = theme.typography.body.sm;
 
   const baseStyle = css`
     margin-top: ${theme.margin.m16};
@@ -49,9 +50,11 @@ const LegalAndCopyright = ({
 
   const linksStyle = css`
     color: ${theme.colour.text.brandInverseSecondary};
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-size: 14px;
-    line-height: 1.4;
+    font-family: ${smallTypography.fontFamily};
+    font-feature-settings: ${smallTypography.fontSettings};
+    font-size: ${smallTypography.fontSize}px;
+    font-weight: ${smallTypography.fontWeight};
+    line-height: ${smallTypography.lineHeight}%;
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
@@ -80,9 +83,11 @@ const LegalAndCopyright = ({
     margin-top: ${theme.margin.m24};
     color: ${theme.colour.text.brandInverse};
     opacity: 0.6; // todo
-    font-family: ${theme.typography.body.md.fontFamily};
-    line-height: ${theme.typography.body.md.lineHeight}%;
-    font-size: 14px;
+    font-family: ${smallTypography.fontFamily};
+    font-feature-settings: ${smallTypography.fontSettings};
+    font-size: ${smallTypography.fontSize}px;
+    font-weight: ${smallTypography.fontWeight};
+    line-height: ${smallTypography.lineHeight}%;
 
     @media screen and (min-width: ${theme.breakpoints.desktopLarge}px) {
       margin-top: 0;