uikit-react-public 0.11.20 → 0.14.21

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

@@ -0,0 +1,99 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FileInput from '../';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Input', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <FileInput>Upload File</FileInput>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: value prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <FileInput testId='test123'>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput).toBeDefined();
+  });
+
+  test('test ID: default with mutliple attribute', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput multiple={true}>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput testId='custom-test-id'>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('custom-test-id');
+    expect(fileInput).toBeDefined();
+  });
+
+  test('snapshot: id prop', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput id='custom-id'>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput.id).toBe('custom-id');
+  });
+
+  test('updates file list on file selection', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <FileInput>Upload File</FileInput>
+      </ThemeContextProvider>
+    );
+
+    const fileInput = screen.getByTestId(
+      'ucl-uikit-fileinput'
+    ) as HTMLInputElement;
+    const file = new File(['file content'], 'example.txt', {
+      type: 'text/plain',
+    });
+
+    await user.upload(fileInput, file);
+
+    expect(fileInput.files).toHaveLength(1);
+    expect(fileInput.files?.[0].name).toBe('example.txt');
+  });
+
+  test('applies custom className', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput className='custom-class'>Upload File</FileInput>
+      </ThemeContextProvider>
+    );
+
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput).toHaveClass('custom-class');
+  });
+});

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

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Input > snapshot: no props 1`] = `
+<div
+  class="ucl-uikit-fileinput css-r56yy"
+>
+  <label
+    class="css-1lc9iag"
+    for="file-input-1"
+  >
+    <svg
+      class="ucl-uikit-icon css-148hpxb"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+      />
+      <polyline
+        points="17 8 12 3 7 8"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="3"
+        y2="15"
+      />
+    </svg>
+    Upload File
+  </label>
+  <input
+    class="css-1w0w0g6"
+    data-testid="ucl-uikit-fileinput"
+    id="file-input-1"
+    type="file"
+  />
+</div>
+`;
+
+exports[`Input > snapshot: value prop 1`] = `
+<div
+  class="ucl-uikit-fileinput css-r56yy"
+>
+  <label
+    class="css-1lc9iag"
+    for="file-input-1"
+  >
+    <svg
+      class="ucl-uikit-icon css-148hpxb"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+      />
+      <polyline
+        points="17 8 12 3 7 8"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="3"
+        y2="15"
+      />
+    </svg>
+    Upload File/Image
+  </label>
+  <input
+    class="css-1w0w0g6"
+    data-testid="test123"
+    id="file-input-1"
+    type="file"
+  />
+</div>
+`;

package/lib/components/FileInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FileInput';
+export type { FileInputProps } from './FileInput';

package/lib/components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ import FooterNavLink from './FooterNavLink';
 
 export const NAME = 'ucl-uikit-footer';
 
-export interface FooterProps extends HTMLAttributes<HTMLDivElement> {
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
   disclaimer?: string;
   freedomOfInformation?: string;
@@ -165,7 +165,7 @@ const Footer = ({
   `;
 
   return (
-    <div
+    <footer
       className={style}
       data-testid={testId}
       {...props}
@@ -241,7 +241,7 @@ const Footer = ({
           </a>
         </div>
       </div>
-    </div>
+    </footer>
   );
 };
 

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Footer > snapshot: footer links provided 1`] = `
-<div
+<footer
   class="ucl-uikit-footer css-mq639a"
   data-testid="ucl-uikit-footer"
 >
@@ -34,7 +34,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -60,7 +60,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -89,7 +89,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -115,7 +115,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -141,7 +141,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -169,7 +169,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -195,7 +195,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -292,11 +292,11 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       </a>
     </div>
   </div>
-</div>
+</footer>
 `;
 
 exports[`Footer > snapshot: nav links 1`] = `
-<div
+<footer
   class="ucl-uikit-footer css-mq639a"
   data-testid="ucl-uikit-footer"
 >
@@ -316,14 +316,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 1
         </h3>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -340,14 +340,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 2
         </h3>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -378,7 +378,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -404,7 +404,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -433,7 +433,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -459,7 +459,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -485,7 +485,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -513,7 +513,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -539,7 +539,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -636,11 +636,11 @@ exports[`Footer > snapshot: nav links 1`] = `
       </a>
     </div>
   </div>
-</div>
+</footer>
 `;
 
 exports[`Footer > snapshot: no nav links 1`] = `
-<div
+<footer
   class="ucl-uikit-footer css-mq639a"
   data-testid="ucl-uikit-footer"
 >
@@ -673,7 +673,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -699,7 +699,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -728,7 +728,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -754,7 +754,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -780,7 +780,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -808,7 +808,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -834,7 +834,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -931,5 +931,5 @@ exports[`Footer > snapshot: no nav links 1`] = `
       </a>
     </div>
   </div>
-</div>
+</footer>
 `;

package/lib/components/Header/Header.tsx

@@ -12,12 +12,18 @@ export const DEFAULT_Z_INDEX = 3;
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   title?: string;
   fixed?: boolean;
+  titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+  titleClassName?: string;
+  titleProps?: Record<string, unknown>;
   testId?: string;
 }
 
 const Header = ({
   title,
   fixed = false,
+  titleAs = 'div',
+  titleClassName,
+  titleProps,
   testId = NAME,
   className,
   children,
@@ -68,7 +74,7 @@ const Header = ({
     }
   `;
 
-  const titleStyle = css`
+  const titleBaseStyle = css`
     display: none;
     margin: 0;
     font-size: ${theme.font.size.f18};
@@ -80,6 +86,10 @@ const Header = ({
     }
   `;
 
+  const titleStyle = cx(titleBaseStyle, titleClassName);
+
+  const TitleComponent = titleAs;
+
   return (
     <header
       className={style}
@@ -87,7 +97,14 @@ const Header = ({
       {...props}
     >
       <UclLogo className={uclLogoStyle} />
-      {title && <h1 className={titleStyle}>{title}</h1>}
+      {title && (
+        <TitleComponent
+          className={titleStyle}
+          {...titleProps}
+        >
+          {title}
+        </TitleComponent>
+      )}
 
       {children}
     </header>

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

@@ -20,11 +20,11 @@ exports[`Header > snapshot: variant=avatar 1`] = `
       d="m 60.405678,1.52 v 25.62 c 0,1.74 -0.06,3.55 -1.6,5 -0.76,0.69 -2.12,1.45 -4.19,1.45 -1.53,0 -3.12,-0.4 -4.18,-1.51 -1.48,-1.39 -1.548529,-3.190021 -1.54,-4.94 V 1.52 h -13.22 v 24.63 c 0.13,4.22 0.25,8.72 4.31,12.6 0.47,0.45 0.841814,1.24 1.53,1.24 v 0 h 25.72 v 0 c 0,0 1.07,-0.8 1.54,-1.24 4.91,-4.59 4.88306,-10.690077 4.91,-15.4 V 1.52 Z m 48.710002,25.09 c -0.47,1.39 -2.3,6.73 -8.44,6.73 -6.500002,0 -8.800002,-5.75 -8.800002,-11.85 0,-1.64 0,-6.29 3.13,-9.24 0.88,-0.87 2.71,-2.21 5.610002,-2.21 5.54,0 7.54,4.36 8.61,6.8 l 11.03,-5.4 c -0.89,-1.62 -1.71,-3.01 -3.48,-4.82 -4.37,-4.41 -10.39,-6.62 -16.7,-6.62 -14.120002,0 -21.610002,11.21 -21.610002,22.25 0,6.71 2.74,13.61 8.56,17.74 h 26.450002 c 0.98,-0.65 1.92,-1.4 2.79,-2.23 1.99,-1.97 3,-3.83 4.06,-5.81 z M 11.167848,7.86 h -0.11 l -0.03,-0.03 V 7.71 l -0.03,-0.03 h -0.11 l -0.03,-0.03 V 7.54 c 0,0 0,-0.02 -0.03,-0.02 h -0.07 c 0,0 -0.04,-0.02 -0.05,-0.05 V 7.39 c 0,-0.29 0,-1.21 -0.52,-1.89 -0.44,-0.65 -1.05,-0.99 -1.39,-1.15 0,-0.12 -0.16,-0.17 -0.26,-0.21 -0.02,0 -0.03,0 -0.04,-0.02 -0.05,0 -0.09,-0.04 -0.09,-0.07 V 3.99 c 0,0 0.03,-0.06 0.1,-0.06 0.02,0 0.03,0 0.03,-0.03 V 3.78 c 0,0 0,-0.04 -0.04,-0.04 h -0.12 c 0,0 -0.05,-0.02 -0.05,-0.05 V 3.63 c 0,0 -0.03,-0.06 -0.05,-0.07 V 2.77 l 0.03,-0.02 v 0 c 0,0 0.02,0 0.02,-0.02 V 2.65 c 0,0 0,-0.02 -0.02,-0.02 h -0.04 c 0,0 -0.02,-0.02 -0.02,-0.06 0,-0.04 0,-0.05 0.02,-0.06 h 0.03 0.03 V 2.43 h -0.03 -0.03 c 0,0 -0.03,0 -0.06,-0.03 -0.13,-0.1 -0.27,-0.26 -0.27,-0.28 V 2.09 c 0,0 0,-0.05 -0.05,-0.05 -0.05,0 -0.03,-0.03 0,-0.03 V 1.98 1.93 l -0.06,-0.12 v 0 c 0,0 -0.07,0.1 -0.07,0.12 v 0.05 c 0,0 0,0.03 0.02,0.03 0.02,0 0.02,0.03 0,0.03 -0.04,0 -0.05,0.03 -0.05,0.05 v 0.03 c 0,0 -0.14,0.18 -0.28,0.28 0,0.02 -0.05,0.03 -0.04,0.03 h -0.04 -0.02 v 0.08 h 0.02 0.03 c 0,0 0.02,0.02 0.02,0.06 0,0.04 0,0.05 -0.02,0.06 h -0.04 c 0,0 -0.02,0 -0.02,0.02 v 0.08 c 0,0 0,0.02 0.02,0.02 h 0.02 c 0,0 0.026878,2.452e-4 0.03,0.02 v 0.79 0 c 0,0 -0.05,0.03 -0.05,0.07 v 0.06 c 0,0 0,0.05 -0.04,0.05 h -0.12 c 0,0 -0.05,0.02 -0.05,0.04 V 3.9 c 0,0 0.02,0.03 0.03,0.03 0.06,0 0.11,0.02 0.11,0.06 v 0.06 c 0,0 -0.05,0.06 -0.09,0.07 h -0.03 c -0.1,0.04 -0.27,0.1 -0.28,0.23 -0.34,0.16 -0.95,0.5 -1.39,1.15 -0.51,0.69 -0.52,1.62 -0.52,1.9 v 0.07 c 0,0 -0.09,0.05 -0.06,0.05 h -0.07 l -0.03,0.02 v 0.11 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.02 0.02,0.02 0.06,0 0.13,0.03 0.13,0.1 0,0.12 0.07,0.13 0.1,0.13 v 0.47 c 0,0.1 -0.08,0.15 -0.13,0.16 l -0.02,0.02 v 0.48 l 3.26,-0.71 v 0 l 3.26,0.71 V 8.91 c 0,0 0,-0.02 -0.02,-0.02 -0.05,0 -0.13,-0.05 -0.13,-0.16 V 8.27 c 0,0 0.1,-0.02 0.1,-0.14 0,-0.07 0.07,-0.1 0.1,-0.1 0.02,0 0.02,-1.35e-5 0.02,-0.02 V 7.89 l -0.03,-0.03 z m 3.62,10.3 v -0.94 h -0.56 v -0.52 0 h -0.07 v -0.03 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 0 c 0,0 0.0026,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 c 0,0 0.0082,-0.0039 0.02,-0.02 v -0.17 h 0.31 l 0.03,-0.03 0.11,-0.57 c 0.06,-0.12 0.18,-0.1 0.18,-0.1 h 0.02 l 0.11,-0.37 c 0,0 0.02,-0.03 -0.02,-0.04 -0.02,0 -7.13,-1.51 -7.13,-1.51 0,0 -7.10999996,1.51 -7.11999996,1.51 -0.04,0 -0.03,0.04 -0.03,0.04 l 0.1,0.36 v 0 c 0,0 0.12,0 0.18,0.09 l 0.1,0.58 c 0,0 0,0.03 0.05,0.03 h 0.31 v 0.18 h 0.02 0.04 c 0,0 0.02,0.02 0.02,0.05 0,0.03 0.02,0.16 0.12,0.25 0,0.02 0,0.05 -0.03,0.05 h -0.03 c 0,0 -0.03,0 -0.02,0.03 v 0.09 0.07 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0.1 h -0.02 -0.05 -0.02 V 17.2 H 0.87784804 v 0.94 h -0.55 v 0.95 H 15.297848 v -0.95 h -0.56 z m -10.86,-5.69 v 0.08 l 0.02,0.02 v 0 c 0,0 0.019368,10e-6 0.02,0.02 v 3.95 l -0.06,0.06 v 0 0.07 0.02 h -0.06 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 0 c 0,0 -0.04,-0.04 -0.05,-0.06 v -3.95 -0.02 0 c 0,0 0.00259,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.1,-0.22 0.1,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00816,-0.0039 0.02,-0.02 v -0.17 h 1.25 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 v 0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.05 v 0 0 -0.08 0 l -0.07,-0.08 V 12.6 12.58 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.03,-0.04 -0.03,-0.05 0.1,-0.08 0.12,-0.22 0.12,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.22 v 0.17 0.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.03,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.24 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.32,0 v 0.08 0.02 h 0.02 c 0,0 0.01937,10e-6 0.02,0.02 v 3.95 l -0.07,0.06 v 0.08 0.02 h -0.07 v 0.02 0.1 h -1.28 V 16.7 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 l 0.02,-0.02 v 0 c 0,0 0.02,-4e-5 0.02,-0.02 v -0.07 -0.09 -0.03 h -0.04 c 0,0 -0.03,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 V 12 11.83 h 1.22 V 12 c 0,0 0,0.02 0.02,0.02 h 0.04 c 0,0 0.03,0.02 0.03,0.04 0,0.03 0,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.03,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.35,0 v 0.08 c 0,0 0,0.02 0.02,0.02 v 0 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.03561,0.0075 -0.02,0.02 v 0.1 h -1.27 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 V 12.6 l 0.02,-0.02 v 0 c 0,0 0.0026,-0.01022 0.02,-0.02 V 12.49 12.4 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 v -0.02 -0.17 h 1.22 v 0.17 c 0,0 0.02,0.02 0.03,0.02 h 0.04 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.02,0.02 0,0.03 v 0.09 z M 67.235678,40 h -25.72 M 125.60568,39.99 V 1.46 h 13.16 v 30.29 h 17.08 v 8.24 h -30.25 z M 87.045678,40 v 0"
     />
   </svg>
-  <h1
+  <div
     class="css-bwc2r5"
   >
     LIDS
-  </h1>
+  </div>
 </header>
 `;
 
@@ -48,10 +48,10 @@ exports[`Header > snapshot: variant=breadcrumbs 1`] = `
       d="m 60.405678,1.52 v 25.62 c 0,1.74 -0.06,3.55 -1.6,5 -0.76,0.69 -2.12,1.45 -4.19,1.45 -1.53,0 -3.12,-0.4 -4.18,-1.51 -1.48,-1.39 -1.548529,-3.190021 -1.54,-4.94 V 1.52 h -13.22 v 24.63 c 0.13,4.22 0.25,8.72 4.31,12.6 0.47,0.45 0.841814,1.24 1.53,1.24 v 0 h 25.72 v 0 c 0,0 1.07,-0.8 1.54,-1.24 4.91,-4.59 4.88306,-10.690077 4.91,-15.4 V 1.52 Z m 48.710002,25.09 c -0.47,1.39 -2.3,6.73 -8.44,6.73 -6.500002,0 -8.800002,-5.75 -8.800002,-11.85 0,-1.64 0,-6.29 3.13,-9.24 0.88,-0.87 2.71,-2.21 5.610002,-2.21 5.54,0 7.54,4.36 8.61,6.8 l 11.03,-5.4 c -0.89,-1.62 -1.71,-3.01 -3.48,-4.82 -4.37,-4.41 -10.39,-6.62 -16.7,-6.62 -14.120002,0 -21.610002,11.21 -21.610002,22.25 0,6.71 2.74,13.61 8.56,17.74 h 26.450002 c 0.98,-0.65 1.92,-1.4 2.79,-2.23 1.99,-1.97 3,-3.83 4.06,-5.81 z M 11.167848,7.86 h -0.11 l -0.03,-0.03 V 7.71 l -0.03,-0.03 h -0.11 l -0.03,-0.03 V 7.54 c 0,0 0,-0.02 -0.03,-0.02 h -0.07 c 0,0 -0.04,-0.02 -0.05,-0.05 V 7.39 c 0,-0.29 0,-1.21 -0.52,-1.89 -0.44,-0.65 -1.05,-0.99 -1.39,-1.15 0,-0.12 -0.16,-0.17 -0.26,-0.21 -0.02,0 -0.03,0 -0.04,-0.02 -0.05,0 -0.09,-0.04 -0.09,-0.07 V 3.99 c 0,0 0.03,-0.06 0.1,-0.06 0.02,0 0.03,0 0.03,-0.03 V 3.78 c 0,0 0,-0.04 -0.04,-0.04 h -0.12 c 0,0 -0.05,-0.02 -0.05,-0.05 V 3.63 c 0,0 -0.03,-0.06 -0.05,-0.07 V 2.77 l 0.03,-0.02 v 0 c 0,0 0.02,0 0.02,-0.02 V 2.65 c 0,0 0,-0.02 -0.02,-0.02 h -0.04 c 0,0 -0.02,-0.02 -0.02,-0.06 0,-0.04 0,-0.05 0.02,-0.06 h 0.03 0.03 V 2.43 h -0.03 -0.03 c 0,0 -0.03,0 -0.06,-0.03 -0.13,-0.1 -0.27,-0.26 -0.27,-0.28 V 2.09 c 0,0 0,-0.05 -0.05,-0.05 -0.05,0 -0.03,-0.03 0,-0.03 V 1.98 1.93 l -0.06,-0.12 v 0 c 0,0 -0.07,0.1 -0.07,0.12 v 0.05 c 0,0 0,0.03 0.02,0.03 0.02,0 0.02,0.03 0,0.03 -0.04,0 -0.05,0.03 -0.05,0.05 v 0.03 c 0,0 -0.14,0.18 -0.28,0.28 0,0.02 -0.05,0.03 -0.04,0.03 h -0.04 -0.02 v 0.08 h 0.02 0.03 c 0,0 0.02,0.02 0.02,0.06 0,0.04 0,0.05 -0.02,0.06 h -0.04 c 0,0 -0.02,0 -0.02,0.02 v 0.08 c 0,0 0,0.02 0.02,0.02 h 0.02 c 0,0 0.026878,2.452e-4 0.03,0.02 v 0.79 0 c 0,0 -0.05,0.03 -0.05,0.07 v 0.06 c 0,0 0,0.05 -0.04,0.05 h -0.12 c 0,0 -0.05,0.02 -0.05,0.04 V 3.9 c 0,0 0.02,0.03 0.03,0.03 0.06,0 0.11,0.02 0.11,0.06 v 0.06 c 0,0 -0.05,0.06 -0.09,0.07 h -0.03 c -0.1,0.04 -0.27,0.1 -0.28,0.23 -0.34,0.16 -0.95,0.5 -1.39,1.15 -0.51,0.69 -0.52,1.62 -0.52,1.9 v 0.07 c 0,0 -0.09,0.05 -0.06,0.05 h -0.07 l -0.03,0.02 v 0.11 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.02 0.02,0.02 0.06,0 0.13,0.03 0.13,0.1 0,0.12 0.07,0.13 0.1,0.13 v 0.47 c 0,0.1 -0.08,0.15 -0.13,0.16 l -0.02,0.02 v 0.48 l 3.26,-0.71 v 0 l 3.26,0.71 V 8.91 c 0,0 0,-0.02 -0.02,-0.02 -0.05,0 -0.13,-0.05 -0.13,-0.16 V 8.27 c 0,0 0.1,-0.02 0.1,-0.14 0,-0.07 0.07,-0.1 0.1,-0.1 0.02,0 0.02,-1.35e-5 0.02,-0.02 V 7.89 l -0.03,-0.03 z m 3.62,10.3 v -0.94 h -0.56 v -0.52 0 h -0.07 v -0.03 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 0 c 0,0 0.0026,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 c 0,0 0.0082,-0.0039 0.02,-0.02 v -0.17 h 0.31 l 0.03,-0.03 0.11,-0.57 c 0.06,-0.12 0.18,-0.1 0.18,-0.1 h 0.02 l 0.11,-0.37 c 0,0 0.02,-0.03 -0.02,-0.04 -0.02,0 -7.13,-1.51 -7.13,-1.51 0,0 -7.10999996,1.51 -7.11999996,1.51 -0.04,0 -0.03,0.04 -0.03,0.04 l 0.1,0.36 v 0 c 0,0 0.12,0 0.18,0.09 l 0.1,0.58 c 0,0 0,0.03 0.05,0.03 h 0.31 v 0.18 h 0.02 0.04 c 0,0 0.02,0.02 0.02,0.05 0,0.03 0.02,0.16 0.12,0.25 0,0.02 0,0.05 -0.03,0.05 h -0.03 c 0,0 -0.03,0 -0.02,0.03 v 0.09 0.07 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0.1 h -0.02 -0.05 -0.02 V 17.2 H 0.87784804 v 0.94 h -0.55 v 0.95 H 15.297848 v -0.95 h -0.56 z m -10.86,-5.69 v 0.08 l 0.02,0.02 v 0 c 0,0 0.019368,10e-6 0.02,0.02 v 3.95 l -0.06,0.06 v 0 0.07 0.02 h -0.06 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 0 c 0,0 -0.04,-0.04 -0.05,-0.06 v -3.95 -0.02 0 c 0,0 0.00259,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.1,-0.22 0.1,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00816,-0.0039 0.02,-0.02 v -0.17 h 1.25 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 v 0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.05 v 0 0 -0.08 0 l -0.07,-0.08 V 12.6 12.58 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.03,-0.04 -0.03,-0.05 0.1,-0.08 0.12,-0.22 0.12,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.22 v 0.17 0.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.03,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.24 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.32,0 v 0.08 0.02 h 0.02 c 0,0 0.01937,10e-6 0.02,0.02 v 3.95 l -0.07,0.06 v 0.08 0.02 h -0.07 v 0.02 0.1 h -1.28 V 16.7 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 l 0.02,-0.02 v 0 c 0,0 0.02,-4e-5 0.02,-0.02 v -0.07 -0.09 -0.03 h -0.04 c 0,0 -0.03,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 V 12 11.83 h 1.22 V 12 c 0,0 0,0.02 0.02,0.02 h 0.04 c 0,0 0.03,0.02 0.03,0.04 0,0.03 0,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.03,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.35,0 v 0.08 c 0,0 0,0.02 0.02,0.02 v 0 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.03561,0.0075 -0.02,0.02 v 0.1 h -1.27 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 V 12.6 l 0.02,-0.02 v 0 c 0,0 0.0026,-0.01022 0.02,-0.02 V 12.49 12.4 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 v -0.02 -0.17 h 1.22 v 0.17 c 0,0 0.02,0.02 0.03,0.02 h 0.04 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.02,0.02 0,0.03 v 0.09 z M 67.235678,40 h -25.72 M 125.60568,39.99 V 1.46 h 13.16 v 30.29 h 17.08 v 8.24 h -30.25 z M 87.045678,40 v 0"
     />
   </svg>
-  <h1
+  <div
     class="css-bwc2r5"
   >
     LIDS
-  </h1>
+  </div>
 </header>
 `;

package/lib/components/Heading/Documentation.mdx

@@ -53,7 +53,7 @@ All screens in UCL Experience apps should have a sensible semantic hierarchy. Th
 
 - `level`: A **number** from 1 to 4, corresponding to the level of the HTML heading element to be rendered. Default is 1, if otherwise unspecified.
 - `margins`: A **boolean** value. If `false`, the heading will have no margins. Default is `true`.
-- `testid`: A **string** value. If provided, the heading element will have a `data-testid` attribute with this value. The <a href="https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing" target="_blank">`data-testid` attribute</a> is used for identifying this element for testing. If unspecified, `ucl-heading` is used.
+- `testid`: A **string** value. If provided, the heading element will have a `data-testid` attribute with this value. The <a href="https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing" target="_blank">`data-testid` attribute</a> is used for identifying this element for testing. If unspecified, `ucl-uikit-heading` is used.
 
 Pass the text you want in the heading as children: `<Heading>My heading text</Heading>`.
 

package/lib/components/Heading/Heading.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-heading';
+export const NAME = 'ucl-uikit-heading';
 
 export interface HeadingBaseProps extends HTMLAttributes<HTMLHeadingElement> {
   level?: 1 | 2 | 3 | 4;

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

@@ -12,22 +12,16 @@ describe('Heading', () => {
         <Heading>This is a test</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: custom test id', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Heading testId='custom-test-id'>
-          This is a test
-        </Heading>
+        <Heading testId='custom-test-id'>This is a test</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: level', () => {
@@ -39,9 +33,7 @@ describe('Heading', () => {
         <Heading level={4}>Level 4</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: no margins', () => {
@@ -50,9 +42,7 @@ describe('Heading', () => {
         <Heading margins={false}>No margins</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('Test ID: Default', () => {
@@ -61,16 +51,14 @@ describe('Heading', () => {
         <Heading>This is a test</Heading>
       </ThemeContextProvider>
     );
-    const heading = screen.getByTestId('ucl-heading');
+    const heading = screen.getByTestId('ucl-uikit-heading');
     expect(heading).toBeDefined();
   });
 
   test('Test ID: Custom', () => {
     render(
       <ThemeContextProvider>
-        <Heading testId='custom-test-id'>
-          This is a test
-        </Heading>
+        <Heading testId='custom-test-id'>This is a test</Heading>
       </ThemeContextProvider>
     );
     const heading = screen.getByTestId('custom-test-id');