uikit-react-public 0.14.21 → 0.21.8

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

@@ -10,17 +10,18 @@ exports[`IconButton > snapshot: disabled 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"
   >
-    <polyline
-      points="20 6 9 17 4 12"
+    <path
+      d="M20 6 9 17l-5-5"
     />
   </svg>
 </button>
@@ -35,17 +36,18 @@ exports[`IconButton > 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>
 </button>
@@ -60,17 +62,18 @@ exports[`IconButton > snapshot: testId 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"
   >
-    <polyline
-      points="20 6 9 17 4 12"
+    <path
+      d="M20 6 9 17l-5-5"
     />
   </svg>
 </button>

package/lib/components/Input/Input.stories.tsx

@@ -3,7 +3,7 @@ import { Input } from '../../../lib';
 import { Icon } from '../../../lib';
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Ready to use/Input',
+  title: 'Components/Input',
   component: Input,
   parameters: {
     layout: 'centered',

package/lib/components/Label/Label.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Label from './Label';
 
 const meta = {
-  title: 'Components/Ready to use/Label',
+  title: 'Components/Label',
   component: Label,
 } satisfies Meta<typeof Label>;
 

package/lib/components/Link/BaseLink.tsx

@@ -1,84 +1,127 @@
-import React, { AnchorHTMLAttributes, ElementType, forwardRef } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  ElementType,
+  forwardRef,
+  useCallback,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 
-export interface BaseLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  component?: ElementType;
+type AnchorishProps = {
+  href?: string;
+  onClick?: React.MouseEventHandler;
+  tabIndex?: number;
+};
+
+function isAnchorProps(props: unknown): props is AnchorishProps {
+  return (
+    typeof (props as AnchorishProps).href === 'string' ||
+    'onClick' in (props as object)
+  );
+}
+
+type BaseLinkOwnProps = {
   size?: 'small' | 'default';
   noVisited?: boolean;
   disabled?: boolean;
   testId?: string;
-}
+  className?: string;
+  children?: React.ReactNode;
+  to?: string;
+};
+
+type PolymorphicRef<C extends ElementType> =
+  React.ComponentPropsWithRef<C>['ref'];
+
+export type BaseLinkProps<C extends ElementType = 'a'> = BaseLinkOwnProps & {
+  component?: C;
+} & Omit<
+    ComponentPropsWithoutRef<C>,
+    keyof BaseLinkOwnProps | 'component' | 'disabled'
+  >;
 
 const NAME = 'ucl-uikit-base-link';
 
-const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkProps>(
-  (
-    {
-      testId = NAME,
-      className,
-      children,
-      size = 'default',
-      disabled = false,
-      component: Component = 'a',
-      ...props
+type BaseLinkComponent = <C extends ElementType = 'a'>(
+  props: BaseLinkProps<C> & { ref?: PolymorphicRef<C> }
+) => React.JSX.Element;
+
+const BaseLink = forwardRef(function BaseLinkInner(
+  {
+    testId = NAME,
+    className,
+    children,
+    size = 'default',
+    disabled = false,
+    component,
+    to,
+    ...props
+  }: BaseLinkProps<ElementType>,
+  ref: React.Ref<Element>
+) {
+  const [theme] = useTheme();
+  const Component = (component || 'a') as ElementType;
+  const anchorProps = isAnchorProps(props) ? props : {};
+  const { href, onClick, ...rest } = anchorProps;
+
+  const isAnchor = Component === 'a';
+
+  const disabledHandleClick = useCallback(
+    (ev: React.MouseEvent<HTMLAnchorElement>) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
     },
-    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>
-    );
-  }
-);
+    []
+  );
+
+  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.colour.link.disabled};
+    pointer-events: none;
+
+    &:hover {
+      color: ${theme.colour.link.disabled};
+    }
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    size === 'small' && smallStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <Component
+      ref={ref}
+      className={style}
+      data-testid={testId}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : props.tabIndex}
+      href={isAnchor ? (disabled ? undefined : (href ?? to)) : undefined}
+      onClick={disabled ? disabledHandleClick : onClick}
+      {...(isAnchor ? {} : to ? { to } : href ? { href } : {})}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+}) as unknown as BaseLinkComponent;
 
 export default BaseLink;

package/lib/components/Link/Link.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Link from './Link';
 
 const meta = {
-  title: 'Components/Work in progress/Link',
+  title: 'Components/Link',
   component: Link,
   args: {
     children: 'Default link text',

package/lib/components/Link/Link.tsx

@@ -1,126 +1,137 @@
-import { forwardRef } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  ElementType,
+  forwardRef,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import BaseLink, { BaseLinkProps } from './BaseLink';
 
-export interface LinkProps extends BaseLinkProps {
+type LinkOwnProps = {
   variant?: 'primary' | 'secondary';
-}
+};
+
+export type LinkProps<C extends ElementType = 'a'> = LinkOwnProps &
+  BaseLinkProps<C> &
+  Omit<ComponentPropsWithoutRef<C>, keyof LinkOwnProps>;
 
 const NAME = 'ucl-uikit-link';
 
-const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      noVisited = false,
-      variant = 'primary',
-      disabled = false,
-      testId = NAME,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [theme] = useTheme();
-
-    const baseStyle = css`
-      text-decoration-skip-ink: none;
-      text-decoration-thickness: 10%;
-      text-underline-offset: 25%;
-      text-underline-position: from-font;
-    `;
-
-    const primaryStyle = css`
-      color: ${theme.color.link.default};
-      &:active {
-        color: ${theme.color.link.hover};
-      }
-    `;
-
-    const secondaryStyle = css`
+type LinkComponent = <C extends ElementType = 'a'>(
+  props: LinkProps<C> & { ref?: React.ComponentPropsWithRef<C>['ref'] }
+) => React.JSX.Element;
+
+const Link = forwardRef(function LinkInner(
+  {
+    noVisited = false,
+    variant = 'primary',
+    disabled = false,
+    testId = NAME,
+    className,
+    children,
+    ...props
+  }: LinkProps<ElementType>,
+  ref: React.Ref<Element>
+) {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    text-decoration-skip-ink: none;
+    text-decoration-thickness: 10%;
+    text-underline-offset: 25%;
+    text-underline-position: from-font;
+  `;
+
+  const primaryStyle = css`
+    color: ${theme.colour.link.default};
+    &:active {
+      color: ${theme.colour.link.brandHover};
+    }
+  `;
+
+  // todo: deprecate secondary
+  const secondaryStyle = css`
+    color: ${theme.color.link.secondaryDefault};
+
+    &:active {
+      color: ${theme.color.link.secondaryHover};
+    }
+  `;
+
+  const visitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.visited};
+    }
+  `;
+
+  const primaryNoVisitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.default};
+    }
+  `;
+
+  const secondaryNoVisitedStyle = css`
+    &:visited {
       color: ${theme.color.link.secondaryDefault};
+    }
+  `;
 
-      &:active {
-        color: ${theme.color.link.secondaryHover};
-      }
-    `;
-
-    const visitedStyle = css`
-      &:visited {
-        color: ${theme.color.link.visited};
-      }
-    `;
-
-    const primaryNoVisitedStyle = css`
-      &:visited {
-        color: ${theme.color.link.default};
-      }
-    `;
-
-    const secondaryNoVisitedStyle = css`
-      &:visited {
-        color: ${theme.color.link.secondaryDefault};
-      }
-    `;
-
-    const primaryHoverStyle = css`
-      &:hover {
-        color: ${theme.color.link.hover};
-      }
-    `;
-
-    const secondaryHoverStyle = css`
-      &:hover {
-        color: ${theme.color.link.secondaryHover};
-      }
-    `;
-
-    const disabledStyle = css`
-      cursor: not-allowed;
-      color: ${theme.color.link.disabled};
-
-      &:hover {
-        color: ${theme.color.link.disabled};
-      }
-    `;
-
-    let variantStyle = undefined;
-    if (variant === 'primary') {
-      variantStyle = cx(
-        primaryStyle,
-        noVisited && !disabled && primaryNoVisitedStyle,
-        !disabled && primaryHoverStyle
-      );
-    } else if (variant === 'secondary') {
-      variantStyle = cx(
-        secondaryStyle,
-        noVisited && !disabled && secondaryNoVisitedStyle,
-        !disabled && secondaryHoverStyle
-      );
+  const primaryHoverStyle = css`
+    &:hover {
+      color: ${theme.colour.link.brandHover};
     }
+  `;
 
-    const style = cx(
-      NAME,
-      baseStyle,
-      variantStyle,
-      !noVisited && !disabled && visitedStyle,
-      disabled && disabledStyle,
-      className
-    );
+  const secondaryHoverStyle = css`
+    &:hover {
+      color: ${theme.color.link.secondaryHover};
+    }
+  `;
 
-    return (
-      <BaseLink
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </BaseLink>
+  const disabledStyle = css`
+    cursor: not-allowed;
+    color: ${theme.colour.link.disabled};
+
+    &:hover {
+      color: ${theme.colour.link.disabled};
+    }
+  `;
+
+  let variantStyle: string | undefined = undefined;
+  if (variant === 'primary') {
+    variantStyle = cx(
+      primaryStyle,
+      noVisited && !disabled && primaryNoVisitedStyle,
+      !disabled && primaryHoverStyle
+    );
+  } else if (variant === 'secondary') {
+    variantStyle = cx(
+      secondaryStyle,
+      noVisited && !disabled && secondaryNoVisitedStyle,
+      !disabled && secondaryHoverStyle
     );
   }
-);
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    variantStyle,
+    !noVisited && !disabled && visitedStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <BaseLink
+      ref={ref}
+      className={style}
+      testId={testId}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </BaseLink>
+  );
+}) as unknown as LinkComponent;
 
 export default Link;

package/lib/components/Link/__tests__/__snapshots__/link.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-link css-145ds9b"
+  class="ucl-uikit-base-link ucl-uikit-link css-x04ks2"
   data-testid="ucl-uikit-link"
 >
   test
@@ -11,7 +11,7 @@ exports[`Link > snapshot: no props 1`] = `
 
 exports[`Link > snapshot: testId prop 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-link css-145ds9b"
+  class="ucl-uikit-base-link ucl-uikit-link css-x04ks2"
   data-testid="test123"
 >
    testidlink 

package/lib/components/Main/Main.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Main from './Main';
+
+const meta = {
+  title: 'Components/Utilities/Main',
+  component: Main,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Main>;
+
+export default meta;
+
+type Story = StoryObj<typeof Main>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLayout: Story = {
+  args: {
+    layout: true,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: (
+      <>
+        <h1>Main Content</h1>
+        <p>This is some content inside the Main component.</p>
+      </>
+    ),
+  },
+};

package/lib/components/Main/Main.tsx

@@ -0,0 +1,46 @@
+import { cx } from '@emotion/css';
+import Layout from '../Layout/Layout';
+
+export interface MainProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Determines whether to wrap children in a `<Layout>` component,
+   * to apply the grid layout from the UCL Design System.
+   */
+  layout?: boolean;
+  /**
+   * ID for testing purposes.
+   * Added to the `data-testid` attribute of top-level `<main>` element.
+   * Default is `'ucl-uikit-main'`.
+   */
+  testId?: string;
+}
+
+export const NAME = 'ucl-uikit-main';
+
+/**
+ * Semantic wrapper around HTML `<main>` element
+ *
+ * Optionally wraps children in the UCL Design System `Layout` grid when `layout` is true
+ */
+const Main = ({
+  layout = false,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: MainProps) => {
+  // No need for any additional styling -- just a semantic wrapper
+  const style = cx(NAME, className);
+
+  return (
+    <main
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {layout ? <Layout>{children}</Layout> : children}
+    </main>
+  );
+};
+
+export default Main;