uikit-react-public 0.11.24 → 0.14.21

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';