uikit-react-public 0.14.21 → 0.21.8

package/lib/components/StandaloneLink/StandaloneLink.tsx

@@ -1,183 +1,200 @@
-import { cloneElement, forwardRef, ReactElement } from 'react';
+import React, {
+  cloneElement,
+  ComponentPropsWithoutRef,
+  ElementType,
+  forwardRef,
+  ReactElement,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import { IconProps } from '../Icon';
 import BaseLink, { BaseLinkProps } from '../Link/BaseLink';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
-export interface StandaloneLinkBaseProps extends BaseLinkProps {
+type StandaloneLinkOwnProps = {
   variant?: 'primary' | 'secondary' | 'tertiary';
   icon?: ReactElement<IconProps>;
   iconPosition?: 'left' | 'right';
-}
+};
 
-export type StandaloneLinkProps = StandaloneLinkBaseProps & MarginProps;
+export type StandaloneLinkProps<C extends ElementType = 'a'> =
+  StandaloneLinkOwnProps &
+    BaseLinkProps<C> &
+    MarginProps &
+    Omit<ComponentPropsWithoutRef<C>, keyof StandaloneLinkOwnProps>;
 
 const NAME = 'ucl-uikit-standalone-link';
 
-const StandaloneLink = forwardRef<HTMLAnchorElement, StandaloneLinkProps>(
-  (
-    {
-      variant = 'primary',
-      icon,
-      iconPosition = 'left',
-      noVisited = false,
-      disabled = false,
-      testId = NAME,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const iconSize: number = {
-      primary: 24,
-      secondary: 16,
-      tertiary: 16,
-    }[variant];
-
-    const [theme] = useTheme();
-
-    const baseStyle = css`
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      text-decoration: none;
-    `;
-
-    const primaryStyle = css`
-      color: ${theme.color.link.default};
-      font-weight: 700;
-    `;
-
-    const secondaryStyle = css`
-      color: ${theme.color.link.default};
-    `;
-
-    const tertiaryStyle = css`
-      color: ${theme.color.text.primary};
-    `;
-
-    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.default};
-      }
-    `;
-
-    const tertiaryNoVisitedStyle = css`
-      &:visited {
-        color: ${theme.color.text.primary};
-      }
-    `;
-
-    const primaryHoverAndActiveStyle = css`
-      &:hover {
-        color: ${theme.color.link.hover};
-        text-decoration: underline;
-        text-decoration-skip-ink: none;
-        text-decoration-thickness: 10%;
-        text-underline-offset: 25%;
-        text-underline-position: from-font;
-      }
-      &:active {
-        color: ${theme.color.link.hover};
-      }
-    `;
-
-    const secondaryHoverAndActiveStyle = css`
-      &:hover {
-        color: ${theme.color.link.hover};
-        text-decoration: underline;
-        text-decoration-skip-ink: none;
-        text-decoration-thickness: 10%;
-        text-underline-offset: 25%;
-        text-underline-position: from-font;
-      }
-      &:active {
-        color: ${theme.color.link.hover};
-      }
-    `;
-
-    const tertiaryHoverAndActiveStyle = css`
-      &:hover {
-        text-decoration: underline;
-        text-decoration-skip-ink: none;
-        text-decoration-thickness: 10%;
-        text-underline-offset: 25%;
-        text-underline-position: from-font;
-      }
-      &:hover {
-        color: ${theme.color.text.primary};
-      }
-    `;
-
-    let variantStyle = undefined;
-    if (variant === 'primary') {
-      variantStyle = cx(
-        primaryStyle,
-        noVisited && !disabled && primaryNoVisitedStyle,
-        !disabled && primaryHoverAndActiveStyle,
-        !noVisited && !disabled && visitedStyle
-      );
-    } else if (variant === 'secondary') {
-      variantStyle = cx(
-        secondaryStyle,
-        noVisited && !disabled && secondaryNoVisitedStyle,
-        !disabled && secondaryHoverAndActiveStyle,
-        !noVisited && !disabled && visitedStyle
-      );
-    } else if (variant === 'tertiary') {
-      variantStyle = cx(
-        tertiaryStyle,
-        !disabled && tertiaryNoVisitedStyle,
-        !disabled && tertiaryHoverAndActiveStyle
-      );
+type StandaloneLinkComponent = <C extends ElementType = 'a'>(
+  props: StandaloneLinkProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>['ref'];
+  }
+) => React.JSX.Element;
+
+const StandaloneLink = forwardRef(function StandaloneLinkInner(
+  {
+    variant = 'primary',
+    icon,
+    iconPosition = 'left',
+    noVisited = false,
+    disabled = false,
+    testId = NAME,
+    className,
+    children,
+    ...props
+  }: StandaloneLinkProps<ElementType>,
+  ref: React.Ref<Element>
+) {
+  const iconSize: number = {
+    primary: 24,
+    secondary: 16,
+    tertiary: 16,
+  }[variant];
+
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+  `;
+
+  // todo: primary -> accent
+  const primaryStyle = css`
+    color: ${theme.colour.link.brand};
+    font-weight: 700;
+  `;
+
+  // todo: secondary -> primary
+  const secondaryStyle = css`
+    color: ${theme.colour.link.primary};
+  `;
+
+  // todo: tertiary -> secondary
+  const tertiaryStyle = css`
+    color: ${theme.colour.link.primary};
+  `;
+
+  const visitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.visited};
     }
+  `;
 
-    const disabledStyle = css`
-      cursor: not-allowed;
-      color: ${theme.color.link.disabled};
-    `;
-
-    const style = cx(
-      NAME,
-      baseStyle,
-      marginsStyle(props, theme),
-      variantStyle,
-      disabled && disabledStyle,
-      className
-    );
+  const primaryNoVisitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.brand};
+    }
+  `;
+
+  const secondaryNoVisitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.primary};
+    }
+  `;
 
-    return (
-      <BaseLink
-        ref={ref}
-        className={style}
-        testId={testId}
-        disabled={disabled}
-        {...props}
-      >
-        {icon &&
-          iconPosition === 'left' &&
-          cloneElement(icon, { size: iconSize })}
-        {children}
-        {icon &&
-          iconPosition === 'right' &&
-          cloneElement(icon, { size: iconSize })}
-      </BaseLink>
+  const tertiaryNoVisitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.primary};
+    }
+  `;
+
+  const primaryHoverAndActiveStyle = css`
+    &:hover {
+      color: ${theme.colour.link.brandHover};
+      text-decoration: underline;
+      text-decoration-skip-ink: none;
+      text-decoration-thickness: 10%;
+      text-underline-offset: 25%;
+      text-underline-position: from-font;
+    }
+    &:active {
+      color: ${theme.colour.link.brandHover};
+    }
+  `;
+
+  const secondaryHoverAndActiveStyle = css`
+    &:hover {
+      color: ${theme.colour.link.primaryHover};
+      text-decoration: underline;
+      text-decoration-skip-ink: none;
+      text-decoration-thickness: 10%;
+      text-underline-offset: 25%;
+      text-underline-position: from-font;
+    }
+    &:active {
+      color: ${theme.colour.link.primaryHover};
+    }
+  `;
+
+  const tertiaryHoverAndActiveStyle = css`
+    &:hover {
+      text-decoration: underline;
+      text-decoration-skip-ink: none;
+      text-decoration-thickness: 10%;
+      text-underline-offset: 25%;
+      text-underline-position: from-font;
+    }
+    &:hover {
+      color: ${theme.colour.link.primaryHover};
+    }
+  `;
+
+  let variantStyle: string | undefined = undefined;
+  if (variant === 'primary') {
+    variantStyle = cx(
+      primaryStyle,
+      noVisited && !disabled && primaryNoVisitedStyle,
+      !disabled && primaryHoverAndActiveStyle,
+      !noVisited && !disabled && visitedStyle
+    );
+  } else if (variant === 'secondary') {
+    variantStyle = cx(
+      secondaryStyle,
+      noVisited && !disabled && secondaryNoVisitedStyle,
+      !disabled && secondaryHoverAndActiveStyle,
+      !noVisited && !disabled && visitedStyle
+    );
+  } else if (variant === 'tertiary') {
+    variantStyle = cx(
+      tertiaryStyle,
+      !disabled && tertiaryNoVisitedStyle,
+      !disabled && tertiaryHoverAndActiveStyle
     );
   }
-);
+
+  const disabledStyle = css`
+    cursor: not-allowed;
+    color: ${theme.colour.link.disabled};
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    marginsStyle(props, theme),
+    variantStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <BaseLink
+      ref={ref}
+      className={style}
+      testId={testId}
+      disabled={disabled}
+      {...props}
+    >
+      {icon &&
+        iconPosition === 'left' &&
+        cloneElement(icon, { size: iconSize })}
+      {children}
+      {icon &&
+        iconPosition === 'right' &&
+        cloneElement(icon, { size: iconSize })}
+    </BaseLink>
+  );
+}) as unknown as StandaloneLinkComponent;
 
 export default StandaloneLink;

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

@@ -2,7 +2,7 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1fdgbfz"
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1hrm145"
   data-testid="ucl-uikit-standalone-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-standalone-link css-1fdgbfz"
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1hrm145"
   data-testid="test123"
 >
    testidlink 

package/lib/components/Table/Table.stories.tsx

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon';
 import type { SortPattern } from './Table.types';
 
 const meta = {
-  title: 'Components/Work in progress/Table',
+  title: 'Components/Table',
   component: Table,
   parameters: {
     layout: 'padded',

package/lib/components/Table/Table.tsx

@@ -10,6 +10,7 @@ const Table = ({
   className,
   children,
   ref,
+  ariaLabel,
   ...props
 }: TableProps) => {
   const [theme] = useTheme();
@@ -26,6 +27,7 @@ const Table = ({
     <table
       className={style}
       data-testid={testId}
+      aria-label={ariaLabel}
       ref={ref}
       {...props}
     >

package/lib/components/Table/Table.types.ts

@@ -11,4 +11,5 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   testId?: string;
   className?: string;
   ref?: React.Ref<HTMLTableElement>;
+  ariaLabel?: string;
 }

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

@@ -118,4 +118,23 @@ describe('Table', () => {
     );
     expect(ref.current).toBeInstanceOf(HTMLTableElement);
   });
+
+  // Accessibility tests
+
+  test('aria-label is applied to the table element when passed', () => {
+    render(
+      <ThemeContextProvider>
+        <Table ariaLabel='User list'>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+    expect(
+      screen.getByRole('table', { name: 'User list' })
+    ).toBeInTheDocument();
+  });
 });

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

@@ -13,7 +13,7 @@ exports[`Table > Snapshot: basic table 1`] = `
       class="css-7kbd2r"
     >
       <th
-        class="css-1g8x9da ucl-uikit-table__head-cell"
+        class="css-19iwbn3 ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -23,6 +23,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         >
           Header Cell 1
           <svg
+            aria-hidden="true"
             fill="none"
             height="16"
             viewBox="0 0 48 48"
@@ -63,7 +64,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         </div>
       </th>
       <th
-        class="css-1g8x9da ucl-uikit-table__head-cell"
+        class="css-19iwbn3 ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -73,6 +74,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         >
           Header Cell 2
           <svg
+            aria-hidden="true"
             fill="none"
             height="16"
             viewBox="0 0 48 48"
@@ -113,7 +115,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         </div>
       </th>
       <th
-        class="css-1g8x9da ucl-uikit-table__head-cell"
+        class="css-19iwbn3 ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -123,6 +125,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         >
           Header Cell 3
           <svg
+            aria-hidden="true"
             fill="none"
             height="16"
             viewBox="0 0 48 48"
@@ -168,6 +171,7 @@ exports[`Table > Snapshot: basic table 1`] = `
     data-testid="ucl-uikit-table__body"
   >
     <tr
+      aria-selected="false"
       class="css-jetl3c ucl-uikit-table__row"
       data-testid="ucl-uikit-table__row"
     >

package/lib/components/Table/subcomponents/Cell/Cell.stories.tsx

@@ -12,7 +12,7 @@ const widthStyle = css`
 `;
 
 const meta = {
-  title: 'Components/Work in progress/Table/Cell',
+  title: 'Components/Table/Cell',
   component: Cell,
   parameters: {
     layout: 'centered',

package/lib/components/Table/subcomponents/Cell/Cell.tsx

@@ -2,9 +2,10 @@ import { css, cx } from '@emotion/css';
 import CellContent from './CellContent';
 import { useTheme } from '../../../../theme';
 import type { ColumnVariant } from '../../Table.types';
+import type { CheckboxProps } from '../../../Checkbox/Checkbox';
+import type { ButtonProps } from '../../../Button';
 
-export interface TableCellProps
-  extends React.HTMLAttributes<HTMLTableCellElement> {
+export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
   variant?: ColumnVariant;
   icon?: React.ReactNode;
   checked?: boolean;
@@ -15,6 +16,11 @@ export interface TableCellProps
   onButtonClick?: (event: React.UIEvent) => void;
   className?: string;
   testId?: string;
+  checkboxProps?: Omit<CheckboxProps, 'checked' | 'onChange'>;
+  buttonProps?: Omit<
+    ButtonProps<'button'>,
+    'variant' | 'onClick' | 'className'
+  >;
 }
 
 const NAME = 'ucl-uikit-table__cell';
@@ -28,10 +34,23 @@ const Cell = ({
   testId = NAME,
   className,
   children,
+  checkboxProps,
+  buttonProps,
   ...props
 }: TableCellProps) => {
   const [theme] = useTheme();
 
+  if (
+    variant === 'checkbox' &&
+    !checkboxProps?.ariaLabel &&
+    !checkboxProps?.['aria-label']
+  ) {
+    console.warn(
+      `${NAME}: checkboxProps.ariaLabel is required when using variant="checkbox". ` +
+        'Provide a row-specific label (e.g. "Select John Smith") so screen readers can identify each checkbox.'
+    );
+  }
+
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (variant === 'checkbox' && onCheck) onCheck(event.target.checked, event);
   };
@@ -62,6 +81,8 @@ const Cell = ({
         checked={checked}
         handleCheckboxChange={handleCheckboxChange}
         handleButtonClick={handleButtonClick}
+        checkboxProps={checkboxProps}
+        buttonProps={buttonProps}
       >
         {children}
       </CellContent>

package/lib/components/Table/subcomponents/Cell/CellContent.tsx

@@ -1,6 +1,8 @@
 import { css, cx } from '@emotion/css';
 import Checkbox from '../../../Checkbox/Checkbox';
-import Button from '../../../Button/Button';
+import type { CheckboxProps } from '../../../Checkbox/Checkbox';
+import Button from '../../../Button';
+import type { ButtonProps } from '../../../Button';
 import { useTheme } from '../../../../theme';
 import type { ColumnVariant } from '../../Table.types';
 
@@ -8,6 +10,11 @@ interface CellContentProps extends React.HTMLAttributes<HTMLDivElement> {
   variant: ColumnVariant;
   icon?: React.ReactNode;
   checked?: boolean;
+  checkboxProps?: Omit<CheckboxProps, 'checked' | 'onChange'>;
+  buttonProps?: Omit<
+    ButtonProps<'button'>,
+    'variant' | 'onClick' | 'className'
+  >;
   handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleButtonClick: (event: React.UIEvent) => void;
 }
@@ -18,6 +25,8 @@ const CellContent = ({
   variant,
   icon,
   checked,
+  checkboxProps,
+  buttonProps,
   handleCheckboxChange,
   handleButtonClick,
   children,
@@ -72,6 +81,7 @@ const CellContent = ({
         <Checkbox
           checked={checked}
           onChange={handleCheckboxChange}
+          {...checkboxProps}
         />
       )}
       {variant === 'button' && (
@@ -79,6 +89,7 @@ const CellContent = ({
           variant='tertiary'
           onClick={handleButtonClick}
           className={buttonStyle}
+          {...buttonProps}
         >
           {children}
         </Button>