npm - uikit-react-public - Versions diffs - 0.11.24 → 0.14.21 - Mend

uikit-react-public 0.11.24 → 0.14.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

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

@@ -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"
@@ -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"
@@ -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"

package/lib/components/Header/Header.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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');

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

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

package/lib/components/Label/Label.tsx CHANGED Viewed

@@ -43,8 +43,6 @@ const Label = forwardRef<Ref, LabelProps>(
     const baseStyle = css`
       width: 100%;
-      min-width: 50px;
-      max-width: 660px;
       color: ${theme.color.neutral.grey90};
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};

package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap CHANGED Viewed

@@ -2,7 +2,7 @@
 exports[`Label > snapshot: Only required prop (text) 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -12,7 +12,7 @@ exports[`Label > snapshot: Only required prop (text) 1`] = `
 exports[`Label > snapshot: className prop 1`] = `
 <label
-  class="ucl-uikit-label test-class-name css-v576g6"
+  class="ucl-uikit-label test-class-name css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -22,7 +22,7 @@ exports[`Label > snapshot: className prop 1`] = `
 exports[`Label > snapshot: testId prop 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="test123"
   for=""
 >
@@ -32,7 +32,7 @@ exports[`Label > snapshot: testId prop 1`] = `
 exports[`Label > snapshot: type prop with explicit block value 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -42,7 +42,7 @@ exports[`Label > snapshot: type prop with explicit block value 1`] = `
 exports[`Label > snapshot: type prop with inline value 1`] = `
 <label
-  class="ucl-uikit-label css-qmiqiq"
+  class="ucl-uikit-label css-11raiub"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -52,7 +52,7 @@ exports[`Label > snapshot: type prop with inline value 1`] = `
 exports[`Label > snapshot: with disabled prop 1`] = `
 <label
-  class="ucl-uikit-label css-2pe9mc"
+  class="ucl-uikit-label css-19nek55"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -62,7 +62,7 @@ exports[`Label > snapshot: with disabled prop 1`] = `
 exports[`Label > snapshot: with optional prop 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >

package/lib/components/Link/BaseLink.tsx ADDED Viewed

@@ -0,0 +1,84 @@
+import React, { AnchorHTMLAttributes, ElementType, forwardRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+export interface BaseLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  component?: ElementType;
+  size?: 'small' | 'default';
+  noVisited?: boolean;
+  disabled?: boolean;
+  testId?: string;
+}
+const NAME = 'ucl-uikit-base-link';
+const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkProps>(
+  (
+    {
+      testId = NAME,
+      className,
+      children,
+      size = 'default',
+      disabled = false,
+      component: Component = 'a',
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+    const baseStyle = css`
+      font-family: ${theme.font.family.primary};
+      font-size: ${theme.font.size.f16};
+      &:focus-visible {
+        outline: none;
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+    const smallStyle = css`
+      font-size: ${theme.font.size.f14};
+    `;
+    const disabledStyle = css`
+      cursor: not-allowed;
+      color: ${theme.color.link.disabled};
+      &:hover {
+        color: ${theme.color.link.disabled};
+      }
+    `;
+    const style = cx(
+      NAME,
+      baseStyle,
+      size === 'small' && smallStyle,
+      disabled && disabledStyle,
+      className
+    );
+    return (
+      <Component
+        ref={ref}
+        className={style}
+        data-testid={testId}
+        disabled={disabled}
+        href={disabled ? undefined : props.href}
+        onClick={
+          disabled
+            ? (ev: React.MouseEvent) => {
+                ev.preventDefault();
+                return false;
+              }
+            : props.onClick
+        }
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+export default BaseLink;