uikit-react-public 0.42.0 → 0.43.0

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

@@ -213,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.42.0",
+  "version": "0.43.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",