uikit-react-public 0.21.8 → 0.22.0

package/lib/components/index.ts

@@ -31,6 +31,9 @@ export type { SnackbarProps } from './Snackbar';
 export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
 export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
 
@@ -40,14 +43,14 @@ export type { TextareaProps } from './Textarea';
 export { default as Heading } from './Heading';
 export type { HeadingProps } from './Heading';
 
-export { default as HeadingNew } from './HeadingNew';
-export type { HeadingProps as HeadingNewProps } from './HeadingNew';
+export { default as HeadingNew } from './Heading';
+export type { HeadingProps as HeadingNewProps } from './Heading';
 
 export { default as Paragraph } from './Paragraph';
 export type { ParagraphProps } from './Paragraph';
 
-export { default as ParagraphNew } from './ParagraphNew';
-export type { ParagraphProps as ParagraphNewProps } from './ParagraphNew';
+export { default as ParagraphNew } from './Paragraph';
+export type { ParagraphProps as ParagraphNewProps } from './Paragraph';
 
 // TODO: Remove aliased export in future breaking release
 // <Paragraph> will be used in place of <Text> in the future

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.21.8",
+  "version": "0.22.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,6 +17,7 @@
     "dev": "vite",
     "dev_expose": "vite --host",
     "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build:watch": "tsc --p ./tsconfig-build.json --watch --preserveWatchOutput & vite build --watch",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "pre-commit": "lint-staged",
     "format": "prettier \"./**/*.{ts,tsx}\" --write --config ./prettierrc",

package/dist/components/HeadingNew/Heading.d.ts

@@ -1,13 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { MarginProps } from '../common/marginsStyle';
-export declare 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;
-declare const Heading: import('react').MemoExoticComponent<({ level, as, testId, className, ref, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element>;
-export default Heading;

package/dist/components/HeadingNew/index.d.ts

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

package/dist/components/ParagraphNew/Paragraph.d.ts

@@ -1,13 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { MarginProps } from '../common/marginsStyle';
-export declare const NAME = "ucl-uikit-paragrah";
-export type ParagraphLevel = 'lg' | 'lg-medium' | 'lg-semibold' | 'lg-bold' | 'md' | 'md-medium' | 'md-semibold' | 'md-semibold' | 'md-medium-numeric' | 'sm' | 'sm-medium' | 'sm-semibold' | 'xs' | 'xs-medium';
-export interface ParagraphBaseProps extends HTMLAttributes<HTMLParagraphElement> {
-    level?: ParagraphLevel;
-    as?: 'p' | 'div' | 'span';
-    testId?: string;
-    ref?: React.Ref<HTMLParagraphElement>;
-}
-export type ParagraphProps = ParagraphBaseProps & MarginProps;
-declare const _default: import('react').MemoExoticComponent<({ level, as, testId, className, ref, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/ParagraphNew/index.d.ts

@@ -1,4 +0,0 @@
-export { default } from './Paragraph';
-export type { ParagraphProps } from './Paragraph';
-export { default as Text } from './Paragraph';
-export type { ParagraphProps as TextProps } from './Paragraph';

package/lib/components/HeadingNew/Heading.tsx

@@ -1,208 +0,0 @@
-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

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

package/lib/components/ParagraphNew/Paragraph.tsx

@@ -1,200 +0,0 @@
-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-paragrah';
-
-export type ParagraphLevel =
-  | 'lg'
-  | 'lg-medium'
-  | 'lg-semibold'
-  | 'lg-bold'
-  | 'md'
-  | 'md-medium'
-  | 'md-semibold'
-  | 'md-semibold'
-  | 'md-medium-numeric'
-  | 'sm'
-  | 'sm-medium'
-  | 'sm-semibold'
-  | 'xs'
-  | 'xs-medium';
-
-export interface ParagraphBaseProps extends HTMLAttributes<HTMLParagraphElement> {
-  level?: ParagraphLevel;
-  as?: 'p' | 'div' | 'span';
-  testId?: string;
-  ref?: React.Ref<HTMLParagraphElement>;
-}
-
-export type ParagraphProps = ParagraphBaseProps & MarginProps;
-
-const Paragraph = ({
-  level = 'md',
-  as = 'p',
-  testId = NAME,
-  className,
-  ref,
-  ...props
-}: ParagraphProps) => {
-  const [theme] = useTheme();
-
-  const {
-    typography: {
-      body: {
-        lg,
-        lgMedium,
-        lgSemibold,
-        lgBold,
-        md,
-        mdMedium,
-        mdSemibold,
-        mdMediumNumeric,
-        sm,
-        smMedium,
-        smSemibold,
-        xs,
-        xsMedium,
-      },
-    },
-  } = theme;
-
-  const baseStyle = css`
-    font-family: ${md.fontFamily};
-    font-feature-settings: ${md.fontSettings};
-    color: ${theme.colour.text.default};
-    margin: 0;
-  `;
-
-  const lgStyle = css`
-    font-size: ${lg.fontSize}px;
-    font-weight: ${lg.fontWeight};
-    line-height: ${lg.lineHeight}%;
-  `;
-
-  const lgMediumStyle = css`
-    font-size: ${lgMedium.fontSize}px;
-    font-weight: ${lgMedium.fontWeight};
-    line-height: ${lgMedium.lineHeight}%;
-  `;
-
-  const lgSemiboldStyle = css`
-    font-size: ${lgSemibold.fontSize}px;
-    font-weight: ${lgSemibold.fontWeight};
-    line-height: ${lgSemibold.lineHeight}%;
-  `;
-
-  const lgBoldStyle = css`
-    font-size: ${lgBold.fontSize}px;
-    font-weight: ${lgBold.fontWeight};
-    line-height: ${lgBold.lineHeight}%;
-  `;
-
-  const mdStyle = css`
-    font-size: ${md.fontSize}px;
-    font-weight: ${md.fontWeight};
-    line-height: ${md.lineHeight}%;
-  `;
-
-  const mdMediumStyle = css`
-    font-size: ${mdMedium.fontSize}px;
-    font-weight: ${mdMedium.fontWeight};
-    line-height: ${mdMedium.lineHeight}%;
-  `;
-
-  const mdSemiboldStyle = css`
-    font-size: ${mdSemibold.fontSize}px;
-    font-weight: ${mdSemibold.fontWeight};
-    line-height: ${mdSemibold.lineHeight}%;
-  `;
-
-  const mdMediumNumericStyle = css`
-    font-size: ${mdMediumNumeric.fontSize}px;
-    font-weight: ${mdMediumNumeric.fontWeight};
-    line-height: ${mdMediumNumeric.lineHeight}%;
-  `;
-
-  const smStyle = css`
-    font-size: ${sm.fontSize}px;
-    font-weight: ${sm.fontWeight};
-    line-height: ${sm.lineHeight}%;
-  `;
-
-  const smMediumStyle = css`
-    font-size: ${smMedium.fontSize}px;
-    font-weight: ${smMedium.fontWeight};
-    line-height: ${smMedium.lineHeight}%;
-  `;
-
-  const smSemiboldStyle = css`
-    font-size: ${smSemibold.fontSize}px;
-    font-weight: ${smSemibold.fontWeight};
-    line-height: ${smSemibold.lineHeight}%;
-  `;
-
-  const xsStyle = css`
-    font-size: ${xs.fontSize}px;
-    font-weight: ${xs.fontWeight};
-    line-height: ${xs.lineHeight}%;
-  `;
-
-  const xsMediumStyle = css`
-    font-size: ${xsMedium.fontSize}px;
-    font-weight: ${xsMedium.fontWeight};
-    line-height: ${xsMedium.lineHeight}%;
-  `;
-
-  const style = cx(
-    NAME,
-    baseStyle,
-    level === 'lg' && lgStyle,
-    level === 'lg-medium' && lgMediumStyle,
-    level === 'lg-semibold' && lgSemiboldStyle,
-    level === 'lg-bold' && lgBoldStyle,
-    level === 'md' && mdStyle,
-    level === 'md-medium' && mdMediumStyle,
-    level === 'md-semibold' && mdSemiboldStyle,
-    level === 'md-medium-numeric' && mdMediumNumericStyle,
-    level === 'sm' && smStyle,
-    level === 'sm-medium' && smMediumStyle,
-    level === 'sm-semibold' && smSemiboldStyle,
-    level === 'xs' && xsStyle,
-    level === 'xs-medium' && xsMediumStyle,
-    marginsStyle(props, theme),
-    className
-  );
-
-  const paragraphTag = as as keyof JSX.IntrinsicElements;
-
-  return (
-    <>
-      {paragraphTag === 'p' && (
-        <p
-          ref={ref}
-          className={style}
-          data-testid={testId}
-          {...props}
-        />
-      )}
-      {paragraphTag === 'div' && (
-        <div
-          ref={ref as React.Ref<HTMLDivElement>}
-          className={style}
-          data-testid={testId}
-          {...props}
-        />
-      )}
-      {paragraphTag === 'span' && (
-        <span
-          ref={ref as React.Ref<HTMLSpanElement>}
-          className={style}
-          data-testid={testId}
-          {...props}
-        />
-      )}
-    </>
-  );
-};
-
-export default memo(Paragraph);

package/lib/components/ParagraphNew/index.ts

@@ -1,6 +0,0 @@
-export { default } from './Paragraph';
-export type { ParagraphProps } from './Paragraph';
-// TODO: Remove aliased export in future breaking release
-// <Paragraph> will be used in place of <Text> in the future
-export { default as Text } from './Paragraph';
-export type { ParagraphProps as TextProps } from './Paragraph';