uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Select/subcomponents/CustomOption.tsx

@@ -5,15 +5,16 @@ import { CustomOptionProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select__option';
 
-const CustomOption = ({
+const CustomOption = <T extends string | number>({
   value,
   isSelected = false,
   onSelect,
+  lineBreak = false,
   testId = NAME,
   className,
   children,
   ...props
-}: CustomOptionProps) => {
+}: CustomOptionProps<T>) => {
   const [theme] = useTheme();
   const internalRef = useRef<HTMLDivElement>(null);
 
@@ -33,30 +34,42 @@ const CustomOption = ({
   };
 
   const baseStyle = css`
-    display: flex;
-    align-items: center;
-    justify-content: left;
     gap: 16px;
-    width: 100%;
     min-height: 40px;
     box-sizing: border-box;
-    padding: 8px 16px;
+    padding: ${theme.padding.p8} ${theme.padding.p16};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
+    line-height: ${theme.font.lineHeight.h140};
     background-color: ${theme.color.neutral.white};
     overflow: hidden;
-    white-space: nowrap;
 
     &:hover {
       background-color: ${theme.color.neutral.grey5};
     }
   `;
 
+  const noLineWrapStyle = css`
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `;
+
+  const lineBreakStyle = css`
+    word-break: break-all;
+  `;
+
   const selectedStyle = css`
     background-color: ${theme.color.neutral.grey5};
   `;
 
-  const style = cx(NAME, baseStyle, isSelected && selectedStyle, className);
+  const style = cx(
+    NAME,
+    baseStyle,
+    !lineBreak && noLineWrapStyle,
+    lineBreak && lineBreakStyle,
+    isSelected && selectedStyle,
+    className
+  );
 
   return (
     <div

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -5,20 +5,36 @@ import { useTheme } from '../../../theme';
 import type { CustomSelectProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select';
-export const DEFAULT_WIDTH_PX = 200;
 
-const CustomSelect = ({
+const CustomSelect = <T extends string | number>({
   value,
   options = [],
   onValueChange,
   disabled,
   placeholder,
-  width = DEFAULT_WIDTH_PX,
+  lineBreak = false,
+  width,
   testId = NAME,
   className,
+  panelClassName,
   ref,
   ...props
-}: CustomSelectProps) => {
+}: CustomSelectProps<T>) => {
+  // todo: remove width prop (deprecated)
+  if (width !== undefined) {
+    console.warn(
+      'Select width prop is deprecated; it has no effect. Use className instead.'
+    );
+  }
+
+  const atLeastOneOptionHasIcon = !!options.find(
+    (opt) => opt.icon !== undefined
+  );
+  // todo: remove option icon prop (deprecated)
+  if (atLeastOneOptionHasIcon) {
+    console.warn('Select option icon prop is deprecated; it has no effect.');
+  }
+
   const internalRef = useRef<HTMLDivElement>(null);
   const effectiveRef = ref || internalRef;
 
@@ -58,7 +74,7 @@ const CustomSelect = ({
   };
 
   // Used by <CustomOption> and passed as prop
-  const handleSelect = (event: React.MouseEvent, optionValue: string) => {
+  const handleSelect = (event: React.MouseEvent, optionValue: T) => {
     if (onValueChange) onValueChange(optionValue, event);
     closePanel();
   };
@@ -134,7 +150,8 @@ const CustomSelect = ({
     justify-content: space-between;
     position: relative;
     min-width: 80px;
-    width: fit-content;
+    width: 100%;
+    max-width: calc(100vw - 64px);
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
@@ -156,10 +173,6 @@ const CustomSelect = ({
     }
   `;
 
-  const widthStyle = css`
-    width: ${width}px;
-  `;
-
   const disabledStyle = css`
     color: ${theme.color.text.disabled};
     border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
@@ -170,13 +183,7 @@ const CustomSelect = ({
     }
   `;
 
-  const style = cx(
-    NAME,
-    baseStyle,
-    !!width && widthStyle,
-    disabled && disabledStyle,
-    className
-  );
+  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
 
   return (
     <div
@@ -198,17 +205,21 @@ const CustomSelect = ({
         disabled={disabled}
       />
       {isOpen && (
-        <Panel role='listbox'>
+        <Panel
+          className={panelClassName}
+          role='listbox'
+        >
           {options.map((option) => (
-            <CustomOption
+            <CustomOption<T>
               key={option.value}
               value={option.value}
               isSelected={value === option.value}
               onSelect={handleSelect}
+              lineBreak={lineBreak}
               role='option'
               aria-selected={value === option.value}
+              {...option.optionProps}
             >
-              {option.icon}
               {option.label}
             </CustomOption>
           ))}

package/lib/components/Select/subcomponents/Panel.tsx

@@ -5,7 +5,7 @@ const NAME = 'ucl-uikit-select__panel';
 
 type PanelProps = React.ComponentPropsWithoutRef<'div'>;
 
-const Panel = (props: PanelProps) => {
+const Panel = ({ className, ...props }: PanelProps) => {
   const [theme] = useTheme();
 
   const handleClick = (event: React.MouseEvent) => {
@@ -14,15 +14,14 @@ const Panel = (props: PanelProps) => {
   };
 
   const baseStyle = css`
-    display: flex;
-    flex-direction: column;
     position: absolute;
     top: 46px;
     left: -1px; // -1px to align with the border of the field
     z-index: 10; // Required: panel must be 'above' subsquent DOM elements
     min-width: 100%;
     width: fit-content;
-    max-height: 300px;
+    max-width: calc(100vw - 64px);
+    max-height: 400px;
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: content-box;
@@ -31,7 +30,7 @@ const Panel = (props: PanelProps) => {
     background-color: ${theme.color.neutral.white};
   `;
 
-  const style = cx(NAME, baseStyle);
+  const style = cx(NAME, baseStyle, className);
 
   return (
     <div

package/lib/components/Select/subcomponents/VisibleField.tsx

@@ -5,19 +5,19 @@ import { OptionData } from '../Select.types';
 
 const NAME = 'ucl-uikit-select__visible-field';
 
-interface VisibleFieldProps {
+interface VisibleFieldProps<T> {
   isOpen?: boolean;
   disabled?: boolean;
-  selectedOption: OptionData | null | undefined;
+  selectedOption: OptionData<T> | null | undefined;
   placeholder?: string;
 }
 
-const Field = ({
+const VisibleField = <T extends string | number>({
   selectedOption,
   isOpen,
   placeholder,
   disabled,
-}: VisibleFieldProps) => {
+}: VisibleFieldProps<T>) => {
   const [theme] = useTheme();
 
   const baseStyle = css`
@@ -29,22 +29,33 @@ const Field = ({
     line-height: ${theme.font.lineHeight.h150};
   `;
 
+  const style = cx(NAME, baseStyle);
+
   const innerStyle = css`
-    display: inline-flex;
-    gap: 8px;
-    white-space: nowrap;
     overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   `;
 
-  const iconStyle = css`
-    min-width: 24px;
+  const chevronIconBaseStyle = css`
+    flex-shrink: 0;
     margin-left: auto;
     color: ${theme.color.interaction.blue70};
-    ${disabled && `color: ${theme.color.neutral.grey20};`}
-    ${isOpen && `transform: rotate(180deg);`}
   `;
 
-  const style = cx(NAME, baseStyle);
+  const chevronIconOpenStyle = css`
+    transform: rotate(180deg);
+  `;
+
+  const chevronIconDisabledStyle = css`
+    color: ${theme.color.neutral.grey20};
+  `;
+
+  const chevronIconStyle = cx(
+    chevronIconBaseStyle,
+    isOpen && chevronIconOpenStyle,
+    disabled && chevronIconDisabledStyle
+  );
 
   return (
     <div
@@ -52,18 +63,11 @@ const Field = ({
       data-testid={NAME}
     >
       <span className={innerStyle}>
-        {selectedOption ? (
-          <>
-            {selectedOption.icon ?? null}
-            {selectedOption.label}
-          </>
-        ) : (
-          placeholder || ''
-        )}
+        {selectedOption ? selectedOption.label : placeholder || ''}
       </span>
-      <Icon.ChevronDown className={iconStyle} />
+      <Icon.ChevronDown className={chevronIconStyle} />
     </div>
   );
 };
 
-export default Field;
+export default VisibleField;

package/lib/components/StandaloneLink/StandaloneLink.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Link from './StandaloneLink';
+
+const meta = {
+  title: 'Components/Work in progress/StandaloneLink',
+  component: Link,
+  args: {
+    children: 'Default link text',
+    href: 'https://ucl.ac.uk',
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <Link {...args}>{args.children}</Link>,
+};
+
+export const NewTab: Story = {
+  name: 'Opens in a new tab',
+  render: (args) => (
+    <Link
+      {...args}
+      target='_blank'
+    >
+      {args.children}
+    </Link>
+  ),
+};

package/lib/components/StandaloneLink/StandaloneLink.tsx

@@ -0,0 +1,183 @@
+import { cloneElement, 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 {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  icon?: ReactElement<IconProps>;
+  iconPosition?: 'left' | 'right';
+}
+
+export type StandaloneLinkProps = StandaloneLinkBaseProps & MarginProps;
+
+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
+      );
+    }
+
+    const disabledStyle = css`
+      cursor: not-allowed;
+      color: ${theme.color.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>
+    );
+  }
+);
+
+export default StandaloneLink;

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

@@ -0,0 +1,57 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import StandaloneLink from '../StandaloneLink';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Link', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <StandaloneLink>test</StandaloneLink>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <StandaloneLink testId='test123'> testidlink </StandaloneLink>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <StandaloneLink> testidlink </StandaloneLink>
+      </ThemeContextProvider>
+    );
+    const link = screen.getByTestId('ucl-uikit-standalone-link');
+    expect(link).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <StandaloneLink testId='custom-test-id'> testidlink </StandaloneLink>
+      </ThemeContextProvider>
+    );
+    const link = screen.getByTestId('custom-test-id');
+    expect(link).toBeDefined();
+  });
+
+  test('href value', async () => {
+    render(
+      <ThemeContextProvider>
+        <StandaloneLink href='/testlink'>linktext</StandaloneLink>
+      </ThemeContextProvider>
+    );
+    const link = screen.getByRole('link') as HTMLAnchorElement;
+    expect(link.textContent).toBe('linktext');
+    expect(link.href).toBe('http://localhost:3000/testlink');
+  });
+});

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

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Link > snapshot: no props 1`] = `
+<a
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1fdgbfz"
+  data-testid="ucl-uikit-standalone-link"
+>
+  test
+</a>
+`;
+
+exports[`Link > snapshot: testId prop 1`] = `
+<a
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1fdgbfz"
+  data-testid="test123"
+>
+   testidlink 
+</a>
+`;

package/lib/components/StandaloneLink/index.ts

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