uikit-react-public 0.21.8 → 0.22.0

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

@@ -39,17 +39,19 @@ exports[`Button > snapshot: loading 1`] = `
   disabled=""
 >
   <svg
-    class="ucl-uikit-spinner css-1izyex6"
+    aria-label="Loading"
+    class="ucl-uikit-spinner css-15f359x"
     data-testid="ucl-uikit-spinner"
     height="24"
+    role="progressbar"
     viewBox="0 0 50 50"
     width="24"
   >
     <g
-      class="css-ypv7tf"
+      class="css-swia5b"
     >
       <circle
-        class="css-1w5ipzg"
+        class="css-1iyl2x2"
         cx="25"
         cy="25"
         fill="none"

package/lib/components/Field/Field.tsx

@@ -52,9 +52,6 @@ const Field = ({
     display: flex;
     flex-direction: column;
     gap: 8px;
-    width: 100%;
-    min-width: 50px;
-    max-width: 660px;
     box-sizing: border-box;
   `;
 

package/lib/components/Heading/Heading.stories.tsx

@@ -16,73 +16,66 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    level: 'md',
     children: 'Default Heading',
   },
 };
 
-export const Level1: Story = {
+export const LevelXxl: Story = {
   args: {
-    level: 1,
-    children: 'Heading level 1',
+    level: 'xxl',
+    children: 'Heading level XXL',
   },
 };
 
-export const Level2: Story = {
+export const LevelXl: Story = {
   args: {
-    level: 2,
-    children: 'Heading level 2',
+    level: 'xl',
+    children: 'Heading level XL',
   },
 };
 
-export const Level3: Story = {
+export const LevelLg: Story = {
   args: {
-    title: 'Heading Level 3',
-    level: 3,
-    children: 'Heading level 3',
+    level: 'lg',
+    children: 'Heading level LG',
   },
 };
 
-export const Level4: Story = {
+export const LevelMd: Story = {
   args: {
-    title: 'Heading Level 4',
-    level: 4,
-    children: 'Heading level 4',
+    level: 'md',
+    children: 'Heading level MD',
   },
 };
 
-export const Margins: Story = {
-  name: 'Heading with margins',
+export const LevelSm: Story = {
   args: {
-    title: 'Heading with margins',
-    margins: true,
-    children: 'Heading with margins',
+    level: 'sm',
+    children: 'Heading level SM',
+  },
+};
+
+export const LevelXs: Story = {
+  args: {
+    level: 'xs',
+    children: 'Heading level XS',
+  },
+};
+
+export const AsSpan: Story = {
+  args: {
+    as: 'span',
+    level: 'lg',
+    children: 'Heading rendered as span',
   },
-  decorators: [
-    (Story) => (
-      <div>
-        <div
-          style={{
-            height: '16px',
-            backgroundColor: '#CA0007',
-          }}
-        />
-        <Story />
-        <div
-          style={{
-            height: '16px',
-            backgroundColor: '#CA0007',
-          }}
-        />
-      </div>
-    ),
-  ],
 };
 
 export const NoMargins: Story = {
-  name: 'Heading without margins',
+  name: 'No margins',
   args: {
-    title: 'Heading without margins',
-    margins: false,
+    noMargins: true,
+    level: 'md',
     children: 'Heading without margins',
   },
   decorators: [

package/lib/components/Heading/Heading.tsx

@@ -1,94 +1,225 @@
-import { memo, HTMLAttributes, forwardRef } from 'react';
+import { memo, HTMLAttributes, JSX } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-heading';
 
+export type HeadingLevel = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
 export interface HeadingBaseProps extends HTMLAttributes<HTMLHeadingElement> {
-  level?: 1 | 2 | 3 | 4;
-  margins?: boolean; // todo: deprecate
+  level?: HeadingLevel | 1 | 2 | 3 | 4;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+  margins?: boolean; // deprecated
   testId?: string;
+  ref?: React.Ref<HTMLHeadingElement>;
 }
 
 export type HeadingProps = HeadingBaseProps & MarginProps;
 
-export type Ref = HTMLHeadingElement;
-
-const Heading = forwardRef<Ref, HeadingProps>(
-  ({ level = 1, margins = true, testId = NAME, className, ...props }, ref) => {
+const Heading = memo(
+  ({
+    level = 1,
+    as,
+    margins = true,
+    testId = NAME,
+    className,
+    ref,
+    noMargins,
+    ...props
+  }: HeadingProps) => {
     const [theme] = useTheme();
 
     const {
-      font: { size, lineHeight },
+      typography: {
+        heading: { xxl, xl, lg, md, sm, xs },
+      },
     } = theme;
 
-    const level1Style = css`
-      font-size: ${size.f36};
-      line-height: ${lineHeight.h130};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${size.f40};
+    const mappedLevel: HeadingLevel =
+      level === 1
+        ? 'xxl'
+        : level === 2
+          ? 'xl'
+          : level === 3
+            ? 'lg'
+            : level === 4
+              ? 'md'
+              : level;
+
+    const defaultHeadingTag =
+      mappedLevel === 'xxl'
+        ? 'h1'
+        : mappedLevel === 'xl'
+          ? 'h2'
+          : mappedLevel === 'lg'
+            ? 'h3'
+            : mappedLevel === 'md'
+              ? 'h4'
+              : mappedLevel === 'sm'
+                ? 'h5'
+                : 'h6';
+
+    const baseStyle = css`
+      font-family: ${md.md.fontFamily};
+      font-feature-settings: ${md.md.fontSettings};
+      color: ${theme.colour.text.default};
+      margin: 0;
+    `;
+
+    const levelXxlStyle = css`
+      font-size: ${xxl.sm.fontSize}px;
+      font-weight: ${xxl.sm.fontWeight};
+      line-height: ${xxl.sm.lineHeight}%;
+      @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+        font-size: ${xxl.md.fontSize}px;
+        font-weight: ${xxl.md.fontWeight};
+        line-height: ${xxl.md.lineHeight}%;
       }
     `;
 
-    const level2Style = css`
-      font-size: ${size.f28};
-      line-height: ${lineHeight.h140};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${size.f32};
-        line-height: ${lineHeight.h130};
+    const levelXlStyle = css`
+      font-size: ${xl.sm.fontSize}px;
+      font-weight: ${xl.sm.fontWeight};
+      line-height: ${xl.sm.lineHeight}%;
+      @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+        font-size: ${xl.md.fontSize}px;
+        font-weight: ${xl.md.fontWeight};
+        line-height: ${xl.md.lineHeight}%;
       }
     `;
 
-    const level3Style = css`
-      font-size: ${size.f20};
-      line-height: ${lineHeight.h140};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${size.f24};
+    const levelLgStyle = css`
+      font-size: ${lg.sm.fontSize}px;
+      font-weight: ${lg.sm.fontWeight};
+      line-height: ${lg.sm.lineHeight}%;
+      @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+        font-size: ${lg.md.fontSize}px;
+        font-weight: ${lg.md.fontWeight};
+        line-height: ${lg.md.lineHeight}%;
       }
     `;
 
-    const level4Style = css`
-      font-size: ${size.f16};
-      line-height: ${lineHeight.h150};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${size.f18};
+    const levelMdStyle = css`
+      font-size: ${md.sm.fontSize}px;
+      font-weight: ${md.sm.fontWeight};
+      line-height: ${md.sm.lineHeight}%;
+      @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+        font-size: ${md.md.fontSize}px;
+        font-weight: ${md.md.fontWeight};
+        line-height: ${md.md.lineHeight}%;
       }
     `;
 
-    const baseStyle = css`
-      font-family: ${theme.font.family.primary};
-      font-weight: bold;
-      color: ${theme.color.text.primary};
+    const levelSmStyle = css`
+      font-size: ${sm.sm.fontSize}px;
+      font-weight: ${sm.sm.fontWeight};
+      line-height: ${sm.sm.lineHeight}%;
+      @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+        font-size: ${sm.md.fontSize}px;
+        font-weight: ${sm.md.fontWeight};
+        line-height: ${sm.md.lineHeight}%;
+      }
     `;
 
-    const noMarginsStyle = css`
-      margin: 0;
+    const levelXsStyle = css`
+      font-size: ${xs.sm.fontSize}px;
+      font-weight: ${xs.sm.fontWeight};
+      line-height: ${xs.sm.lineHeight}%;
+      @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+        font-size: ${xs.md.fontSize}px;
+        font-weight: ${xs.md.fontWeight};
+        line-height: ${xs.md.lineHeight}%;
+      }
     `;
 
     const style = cx(
       NAME,
       baseStyle,
-      marginsStyle(props, theme),
-      level === 1 && level1Style,
-      level === 2 && level2Style,
-      level === 3 && level3Style,
-      level === 4 && level4Style,
-      margins === false && noMarginsStyle,
+      mappedLevel === 'xxl' && levelXxlStyle,
+      mappedLevel === 'xl' && levelXlStyle,
+      mappedLevel === 'lg' && levelLgStyle,
+      mappedLevel === 'md' && levelMdStyle,
+      mappedLevel === 'sm' && levelSmStyle,
+      mappedLevel === 'xs' && levelXsStyle,
+      marginsStyle(
+        { ...props, noMargins: noMargins || margins === false },
+        theme
+      ),
       className
     );
 
-    const HeadingTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4';
+    const headingTag = (as || defaultHeadingTag) as keyof JSX.IntrinsicElements;
 
     return (
-      <HeadingTag
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        {...props}
-      />
+      <>
+        {headingTag === 'h1' && (
+          <h1
+            ref={ref}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'h2' && (
+          <h2
+            ref={ref}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'h3' && (
+          <h3
+            ref={ref}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'h4' && (
+          <h4
+            ref={ref}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'h5' && (
+          <h5
+            ref={ref}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'h6' && (
+          <h6
+            ref={ref}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'span' && (
+          <span
+            ref={ref as React.Ref<HTMLSpanElement>}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+        {headingTag === 'div' && (
+          <div
+            ref={ref as React.Ref<HTMLDivElement>}
+            className={style}
+            data-testid={testId}
+            {...props}
+          />
+        )}
+      </>
     );
   }
 );
 
-export default memo(Heading);
+export default Heading;

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

@@ -2,7 +2,7 @@
 
 exports[`Heading > snapshot: custom test id 1`] = `
 <h1
-  class="ucl-uikit-heading css-1bjykaw"
+  class="ucl-uikit-heading css-7nmnfv"
   data-testid="custom-test-id"
 >
   This is a test
@@ -11,7 +11,7 @@ exports[`Heading > snapshot: custom test id 1`] = `
 
 exports[`Heading > snapshot: level 1`] = `
 <h1
-  class="ucl-uikit-heading css-1bjykaw"
+  class="ucl-uikit-heading css-7nmnfv"
   data-testid="ucl-uikit-heading"
 >
   Level 1
@@ -20,7 +20,7 @@ exports[`Heading > snapshot: level 1`] = `
 
 exports[`Heading > snapshot: minimal props 1`] = `
 <h1
-  class="ucl-uikit-heading css-1bjykaw"
+  class="ucl-uikit-heading css-7nmnfv"
   data-testid="ucl-uikit-heading"
 >
   This is a test
@@ -29,7 +29,7 @@ exports[`Heading > snapshot: minimal props 1`] = `
 
 exports[`Heading > snapshot: no margins 1`] = `
 <h1
-  class="ucl-uikit-heading css-x9klp3"
+  class="ucl-uikit-heading css-kt47of"
   data-testid="ucl-uikit-heading"
 >
   No margins

package/lib/components/Paragraph/Paragraph.stories.tsx

@@ -18,38 +18,40 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const WithMargins: Story = {
-  name: 'With margins',
+export const LevelLg: Story = {
   args: {
-    margins: true,
-    children: 'This is a paragraph with margins.',
+    level: 'lg',
+    children: 'This is large paragraph text.',
+  },
+};
+
+export const LevelMd: Story = {
+  args: {
+    level: 'md',
+    children: 'This is medium paragraph text.',
+  },
+};
+
+export const LevelSm: Story = {
+  args: {
+    level: 'sm',
+    children: 'This is small paragraph text.',
+  },
+};
+
+export const AsSpan: Story = {
+  args: {
+    as: 'span',
+    level: 'md-semibold',
+    children: 'This paragraph is rendered as a span.',
   },
-  decorators: [
-    (Story) => (
-      <>
-        <div
-          style={{
-            height: '16px',
-            backgroundColor: '#CA0007',
-          }}
-        />
-        <Story />
-        <div
-          style={{
-            height: '16px',
-            backgroundColor: '#CA0007',
-          }}
-        />
-      </>
-    ),
-  ],
 };
 
-export const WithoutMargins: Story = {
-  name: 'Without margins',
+export const NoMargins: Story = {
+  name: 'No margins',
   args: {
-    margins: false,
-    children: 'This is a paragraph without margins.',
+    noMargins: true,
+    children: 'This paragraph has no margins.',
   },
   decorators: [
     (Story) => (