uikit-react-public 0.43.1 → 0.43.4

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-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         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-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -162,43 +162,43 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
       data-testid="ucl-uikit-calendar__grid"
     >
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         M
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         W
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         F
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S
@@ -795,7 +795,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Month"
-        class="ucl-uikit-select css-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -842,7 +842,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Year"
-        class="ucl-uikit-select css-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -916,43 +916,43 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
       data-testid="ucl-uikit-calendar__grid"
     >
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         M
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         W
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         F
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S

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

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import Paragraph from '../../Paragraph';
 
 const NAME = 'ucl-uikit-calendar__academic-week';
 
@@ -16,20 +17,21 @@ const AcademicWeek = ({ weekNumber }: AcademicWeekProps) => {
     justify-content: center;
     width: 100%;
     height: 40px;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
     color: ${theme.colour.text.brandPrimary};
   `;
 
   const style = cx(NAME, baseStyle);
 
   return (
-    <div
-      data-testid={NAME}
+    <Paragraph
+      as='div'
+      level='sm'
+      noMargins
+      testId={NAME}
       className={style}
     >
       {weekNumber && 'W ' + weekNumber.toString().padStart(2, '0')}
-    </div>
+    </Paragraph>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import Paragraph from '../../Paragraph';
 
 interface ColumnHeadingProps {
   index: number;
@@ -18,22 +19,26 @@ const ColumnHeading = ({ index, day, isWeekend }: ColumnHeadingProps) => {
     justify-content: center;
     width: 40px;
     height: 32px;
-    color: ${isWeekend
-      ? theme.colour.text.warningOnBgFill
-      : theme.colour.text.secondary};
-    font-weight: 700;
+    color: ${
+      isWeekend
+        ? theme.colour.text.warningOnBgFill
+        : theme.colour.text.secondary
+    };
   `;
 
   const style = cx(NAME, baseStyle);
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='md-semibold'
+      noMargins
       className={style}
-      data-testid={NAME}
+      testId={NAME}
       key={index}
     >
       {day}
-    </div>
+    </Paragraph>
   );
 };
 

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"