uikit-react-public 0.41.0 → 0.43.0

package/lib/components/Callout/Callout.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from '@emotion/css';
+import Callout from './Callout';
+import Icon from '../Icon';
+
+const meta = {
+  title: 'Components/Callout',
+  component: Callout,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    heading: { control: { type: 'text' } },
+    children: { control: { type: 'text' } },
+    showIcon: { control: { type: 'boolean' } },
+    icon: { control: false },
+    testId: { control: { type: 'text' } },
+    className: { control: false },
+  },
+  args: {
+    heading: 'Nobody at UCL will ever ask you for your password',
+    children:
+      "If you're unsure a request is genuine, contact OneDesk IT before entering anything.",
+    showIcon: true,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Callout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutIcon: Story = {
+  args: {
+    showIcon: false,
+  },
+};
+
+export const CustomIcon: Story = {
+  args: {
+    icon: <Icon.Info size={24} />,
+  },
+};
+
+export const ConstrainedWidth: Story = {
+  render: (args) => (
+    <div
+      className={css`
+        width: 420px;
+      `}
+    >
+      <Callout {...args} />
+    </div>
+  ),
+};

package/lib/components/Callout/Callout.tsx

@@ -0,0 +1,109 @@
+import { HTMLAttributes, ReactNode, Ref, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import Heading from '../Heading';
+import Icon from '../Icon';
+import Paragraph from '../Paragraph';
+
+export const NAME = 'ucl-uikit-callout';
+
+export interface CalloutBaseProps extends HTMLAttributes<HTMLDivElement> {
+  heading?: ReactNode;
+  icon?: ReactNode;
+  showIcon?: boolean;
+  testId?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+export type CalloutProps = CalloutBaseProps & MarginProps;
+
+const Callout = ({
+  heading,
+  icon,
+  showIcon = true,
+  testId = NAME,
+  className,
+  children,
+  ref,
+  ...props
+}: CalloutProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 30px;
+    width: 100%;
+    padding: ${theme.padding.p24};
+    background-color: ${theme.colour.surface.brand};
+    border: 1px solid ${theme.colour.border.brand};
+  `;
+
+  const rowStyle = css`
+    display: flex;
+    align-items: flex-start;
+    gap: ${theme.padding.p16};
+    width: 100%;
+  `;
+
+  const iconStyle = css`
+    flex: 0 0 auto;
+    color: ${theme.colour.icon.brand};
+  `;
+
+  const contentStyle = css`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: ${theme.padding.p8};
+    min-width: 0;
+  `;
+
+  const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    >
+      <div className={rowStyle}>
+        {showIcon && (
+          <span
+            className={iconStyle}
+            aria-hidden='true'
+          >
+            {icon ?? <Icon.Info size={24} />}
+          </span>
+        )}
+        <div className={contentStyle}>
+          {heading && (
+            <Heading
+              level='xs'
+              as='h3'
+              noMargins
+            >
+              {heading}
+            </Heading>
+          )}
+          {children && (
+            <Paragraph
+              level='md'
+              noMargins
+            >
+              {children}
+            </Paragraph>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(Callout);

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

@@ -0,0 +1,59 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Callout from '../Callout';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('Callout', () => {
+  test('renders with default test id', () => {
+    const { getByTestId } = wrap(<Callout />);
+
+    expect(getByTestId('ucl-uikit-callout')).toBeInTheDocument();
+  });
+
+  test('renders heading and children', () => {
+    wrap(
+      <Callout heading='Nobody at UCL will ever ask you for your password'>
+        If you're unsure a request is genuine, contact OneDesk IT before
+        entering anything.
+      </Callout>
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Nobody at UCL will ever ask you for your password',
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /If you're unsure a request is genuine, contact OneDesk IT/
+      )
+    ).toBeInTheDocument();
+  });
+
+  test('applies custom test id and className', () => {
+    const { getByTestId } = wrap(
+      <Callout
+        testId='custom-callout'
+        className='custom-class'
+      />
+    );
+
+    expect(getByTestId('custom-callout')).toBeInTheDocument();
+    expect(getByTestId('custom-callout').classList).toContain('custom-class');
+  });
+
+  test('renders an icon by default', () => {
+    const { container } = wrap(<Callout />);
+
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('can hide the icon', () => {
+    const { container } = wrap(<Callout showIcon={false} />);
+
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+});

package/lib/components/Callout/index.ts

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

package/lib/components/SkipToContent/SkipToContent.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from '@emotion/css';
+import SkipToContent from './SkipToContent';
+
+const meta = {
+  title: 'Components/SkipToContent',
+  component: SkipToContent,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    href: { control: { type: 'text' } },
+    children: { control: { type: 'text' } },
+    testId: { control: { type: 'text' } },
+    className: { control: false },
+  },
+  args: {
+    href: '#main-content',
+    children: 'Skip to content',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SkipToContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <>
+      <SkipToContent {...args} />
+      <div
+        className={css`
+          padding: 96px 24px 24px;
+          font-family: sans-serif;
+        `}
+      >
+        Press Tab to focus the skip link.
+        <main
+          id='main-content'
+          tabIndex={-1}
+        >
+          Main content target
+        </main>
+      </div>
+    </>
+  ),
+};

package/lib/components/SkipToContent/SkipToContent.tsx

@@ -0,0 +1,68 @@
+import { AnchorHTMLAttributes, Ref, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Button from '../Button';
+
+export const NAME = 'ucl-uikit-skip-to-content';
+
+export interface SkipToContentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  testId?: string;
+  ref?: Ref<HTMLAnchorElement>;
+}
+
+const SkipToContent = ({
+  href = '#main-content',
+  testId = NAME,
+  className,
+  children = 'Skip to content',
+  ref,
+  ...props
+}: SkipToContentProps) => {
+  const [theme] = useTheme();
+
+  const wrapperStyle = css`
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: ${theme.padding.p8};
+    width: 100%;
+    max-height: 0;
+    padding: 0 ${theme.padding.p16};
+    overflow: hidden;
+    background-color: ${theme.colour.fill.inverse};
+
+    &:focus-within {
+      max-height: 72px;
+      padding-top: ${theme.padding.p12};
+      padding-bottom: ${theme.padding.p12};
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding-right: 60px;
+      padding-left: 60px;
+    }
+  `;
+
+  const style = cx(NAME, className);
+
+  return (
+    <div className={wrapperStyle}>
+      <Button
+        as='a'
+        variant='secondary'
+        size='small'
+        href={href}
+        className={style}
+        testId={testId}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Button>
+    </div>
+  );
+};
+
+export default memo(SkipToContent);

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

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import SkipToContent from '../SkipToContent';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('SkipToContent', () => {
+  test('renders with default text and href', () => {
+    wrap(<SkipToContent />);
+
+    const link = screen.getByRole('link', { name: 'Skip to content' });
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#main-content');
+  });
+
+  test('accepts custom text and href', () => {
+    wrap(<SkipToContent href='#content'>Skip to main content</SkipToContent>);
+
+    const link = screen.getByRole('link', { name: 'Skip to main content' });
+
+    expect(link).toHaveAttribute('href', '#content');
+  });
+
+  test('applies custom test id and className', () => {
+    const { getByTestId } = wrap(
+      <SkipToContent
+        testId='custom-skip-link'
+        className='custom-class'
+      />
+    );
+
+    expect(getByTestId('custom-skip-link')).toBeInTheDocument();
+    expect(getByTestId('custom-skip-link').classList).toContain('custom-class');
+  });
+});

package/lib/components/SkipToContent/index.ts

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

package/lib/components/index.ts

@@ -13,6 +13,9 @@ export type { StandaloneLinkProps } from './StandaloneLink';
 export { default as Button } from './Button';
 export type { ButtonProps } from './Button';
 
+export { default as Callout } from './Callout';
+export type { CalloutProps } from './Callout';
+
 export { default as Label } from './Label';
 export type { LabelProps } from './Label';
 
@@ -210,6 +213,9 @@ export type { CookieNoticeProps } from './CookieNotice';
 export { default as Search } from './Search';
 export type { SearchProps } from './Search';
 
+export { default as SkipToContent } from './SkipToContent';
+export type { SkipToContentProps } from './SkipToContent';
+
 export { default as Dropdown } from './Dropdown';
 export type {
   DropdownProps,

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",