uikit-react-public 0.14.21 → 0.21.8

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

@@ -0,0 +1,79 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Header > snapshot: variant=avatar 1`] = `
+<header
+  class="ucl-uikit-header css-7smbab"
+  data-testid="ucl-uikit-header"
+>
+  <div
+    class="ucl-uikit-header__border css-miu54s"
+    data-test="ucl-uikit-header__border"
+  >
+    <div
+      class="css-1l552cj"
+    />
+  </div>
+  <svg
+    class="ucl-uikit-header__logo css-h3fm3u"
+    data-test="ucl-uikit-header__logo"
+    fill="none"
+    focusable="false"
+    viewBox="0 0 1394 391"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M866.86 257.16V10.54H734.29v125.09h-.03C714.7 63.47 648.56 0 553.74 0S381.7 64.9 361.67 146.92h-.03V10.54H229.91v195.87c0 19.3-2.52 31.04-12.59 41.95s-23.49 15.1-36.08 15.1-26.01-4.2-36.08-15.1c-10.07-10.91-12.59-22.65-12.59-41.95V10.54H0v196.71c0 52.86 10.91 95.65 46.15 130.89C73.84 365.83 118.31 391 178.72 391c52.86 0 99.01-18.46 132.57-54.54 28.44-30.11 43.48-67.53 48.36-100.98h.03C377.14 322.25 454.72 391 553.73 391c87.28 0 158.17-56.74 180.55-135.7v124.49h246.68V257.15H866.85zm-254.59-31.44c-8.39 22.65-31.67 37.76-58.52 37.76-37.76 0-65.66-29.37-65.66-67.96s27.9-67.96 65.66-67.96c26.85 0 50.13 15.1 58.52 37.76h122.02v60.41H612.27z"
+      fill="#361a54"
+    />
+    <path
+      d="M1393.25 257.11h-42.93v122.64h42.93zm-68.7 0h-39.49v122.64h39.49zm-68.7 0h-36.06v122.64h36.06zm-68.7 0h-32.62v122.64h32.62zm-68.7 0h-29.19v122.64h29.19zm-68.69 0H1024v122.64h25.76zm145.35-179.29c-22.41 5.81-39.12 25.73-40.12 49.72h-.06v14.45h-9.92v23.27L1024 204.58V10.5h369.25v194.08l-121.01-39.32v-23.27h-9.92v-14.45h-.06c-1-23.98-17.71-43.9-40.12-49.72l-9.3-34.7h-8.45l-9.3 34.7z"
+      fill="#9a3bff"
+    />
+  </svg>
+  <div
+    class="ucl-uikit-header__title css-118cw9t"
+    data-test="ucl-uikit-header__title"
+  >
+    LIDS
+  </div>
+</header>
+`;
+
+exports[`Header > snapshot: variant=breadcrumbs 1`] = `
+<header
+  class="ucl-uikit-header css-7smbab"
+  data-testid="ucl-uikit-header"
+>
+  <div
+    class="ucl-uikit-header__border css-miu54s"
+    data-test="ucl-uikit-header__border"
+  >
+    <div
+      class="css-1l552cj"
+    />
+  </div>
+  <svg
+    class="ucl-uikit-header__logo css-h3fm3u"
+    data-test="ucl-uikit-header__logo"
+    fill="none"
+    focusable="false"
+    viewBox="0 0 1394 391"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M866.86 257.16V10.54H734.29v125.09h-.03C714.7 63.47 648.56 0 553.74 0S381.7 64.9 361.67 146.92h-.03V10.54H229.91v195.87c0 19.3-2.52 31.04-12.59 41.95s-23.49 15.1-36.08 15.1-26.01-4.2-36.08-15.1c-10.07-10.91-12.59-22.65-12.59-41.95V10.54H0v196.71c0 52.86 10.91 95.65 46.15 130.89C73.84 365.83 118.31 391 178.72 391c52.86 0 99.01-18.46 132.57-54.54 28.44-30.11 43.48-67.53 48.36-100.98h.03C377.14 322.25 454.72 391 553.73 391c87.28 0 158.17-56.74 180.55-135.7v124.49h246.68V257.15H866.85zm-254.59-31.44c-8.39 22.65-31.67 37.76-58.52 37.76-37.76 0-65.66-29.37-65.66-67.96s27.9-67.96 65.66-67.96c26.85 0 50.13 15.1 58.52 37.76h122.02v60.41H612.27z"
+      fill="#361a54"
+    />
+    <path
+      d="M1393.25 257.11h-42.93v122.64h42.93zm-68.7 0h-39.49v122.64h39.49zm-68.7 0h-36.06v122.64h36.06zm-68.7 0h-32.62v122.64h32.62zm-68.7 0h-29.19v122.64h29.19zm-68.69 0H1024v122.64h25.76zm145.35-179.29c-22.41 5.81-39.12 25.73-40.12 49.72h-.06v14.45h-9.92v23.27L1024 204.58V10.5h369.25v194.08l-121.01-39.32v-23.27h-9.92v-14.45h-.06c-1-23.98-17.71-43.9-40.12-49.72l-9.3-34.7h-8.45l-9.3 34.7z"
+      fill="#9a3bff"
+    />
+  </svg>
+  <div
+    class="ucl-uikit-header__title css-118cw9t"
+    data-test="ucl-uikit-header__title"
+  >
+    LIDS
+  </div>
+</header>
+`;

package/lib/components/HeaderNew/constants.ts

@@ -0,0 +1,3 @@
+export const HEADER_TABLET_HEIGHT_PX = 78;
+export const HEADER_MOBILE_HEIGHT_PX = 48;
+export const DEFAULT_Z_INDEX = 3;

package/lib/components/HeaderNew/index.ts

@@ -0,0 +1,7 @@
+export { default } from './Header';
+export {
+  HEADER_TABLET_HEIGHT_PX,
+  HEADER_MOBILE_HEIGHT_PX,
+  DEFAULT_Z_INDEX,
+} from './constants';
+export type { HeaderProps } from './Header';

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Heading from './Heading';
 
 const meta = {
-  title: 'Components/Ready to use/Heading',
+  title: 'Components/Heading',
   component: Heading,
   parameters: {
     layout: 'centered',

package/lib/components/HeadingNew/Heading.tsx

@@ -0,0 +1,208 @@
+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?: HeadingLevel;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+  testId?: string;
+  ref?: React.Ref<HTMLHeadingElement>;
+}
+
+export type HeadingProps = HeadingBaseProps & MarginProps;
+
+const Heading = memo(
+  ({
+    level = 'md',
+    as,
+    testId = NAME,
+    className,
+    ref,
+    ...props
+  }: HeadingProps) => {
+    const [theme] = useTheme();
+
+    const {
+      typography: {
+        heading: { xxl, xl, lg, md, sm, xs },
+      },
+    } = theme;
+
+    const defaultHeadingTag =
+      level === 'xxl'
+        ? 'h1'
+        : level === 'xl'
+          ? 'h2'
+          : level === 'lg'
+            ? 'h3'
+            : level === 'md'
+              ? 'h4'
+              : level === '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 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 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 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 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 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,
+      level === 'xxl' && levelXxlStyle,
+      level === 'xl' && levelXlStyle,
+      level === 'lg' && levelLgStyle,
+      level === 'md' && levelMdStyle,
+      level === 'sm' && levelSmStyle,
+      level === 'xs' && levelXsStyle,
+      marginsStyle(props, theme),
+      className
+    );
+
+    const headingTag = (as || defaultHeadingTag) as keyof JSX.IntrinsicElements;
+
+    return (
+      <>
+        {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 Heading;

package/lib/components/HeadingNew/index.ts

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

package/lib/components/Icon/Icon.stories.tsx

@@ -3,7 +3,7 @@ import Icon from './Icon';
 import { ComponentType } from 'react';
 
 const meta: Meta = {
-  title: 'Components/Ready to use/Icon',
+  title: 'Components/Icon',
   component: Icon,
   parameters: {
     // Appearing automatically, due to composition

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

@@ -5,11 +5,12 @@ exports[`Icon > Snapshot: title prop 1`] = `
   class="ucl-uikit-icon css-148hpxb"
   data-testid="ucl-uikit-icon"
   fill="none"
+  focusable="false"
   height="24"
   stroke="currentColor"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="3"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="24"
   xmlns="http://www.w3.org/2000/svg"
@@ -17,8 +18,8 @@ exports[`Icon > Snapshot: title prop 1`] = `
   <title>
     Custom Title
   </title>
-  <polyline
-    points="20 6 9 17 4 12"
+  <path
+    d="M20 6 9 17l-5-5"
   />
 </svg>
 `;
@@ -28,17 +29,18 @@ exports[`Icon > snapshot: className prop 1`] = `
   class="ucl-uikit-icon css-148hpxb a-class-name"
   data-testid="ucl-uikit-icon"
   fill="none"
+  focusable="false"
   height="24"
   stroke="currentColor"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="3"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="24"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <polyline
-    points="20 6 9 17 4 12"
+  <path
+    d="M20 6 9 17l-5-5"
   />
 </svg>
 `;
@@ -48,17 +50,18 @@ exports[`Icon > snapshot: no props 1`] = `
   class="ucl-uikit-icon css-148hpxb"
   data-testid="ucl-uikit-icon"
   fill="none"
+  focusable="false"
   height="24"
   stroke="currentColor"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="3"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="24"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <polyline
-    points="20 6 9 17 4 12"
+  <path
+    d="M20 6 9 17l-5-5"
   />
 </svg>
 `;
@@ -68,17 +71,18 @@ exports[`Icon > snapshot: size prop 1`] = `
   class="ucl-uikit-icon css-148hpxb"
   data-testid="ucl-uikit-icon"
   fill="none"
+  focusable="false"
   height="32"
   stroke="currentColor"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width="3"
+  stroke-width="2"
   viewBox="0 0 24 24"
   width="32"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <polyline
-    points="20 6 9 17 4 12"
+  <path
+    d="M20 6 9 17l-5-5"
   />
 </svg>
 `;