uikit-react-public 0.44.5 → 0.45.1

package/lib/components/CookiesNotice/CookiesNotice.tsx

@@ -0,0 +1,379 @@
+import {
+  HTMLAttributes,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import Heading from '../Heading';
+import Paragraph from '../Paragraph';
+import Button from '../Button';
+import Link from '../Link';
+import BaseDialog from '../Dialog/BaseDialog';
+import CookieSettings from './CookieSettings';
+import {
+  DEFAULT_COOKIE_CATEGORIES,
+  DEFAULT_DESCRIPTION,
+  DEFAULT_DESCRIPTION_SUFFIX,
+  DEFAULT_HEADING,
+  DEFAULT_POLICY_HREF,
+} from './defaults';
+import { CookieCategory, CookiePreferences } from './types';
+
+export const NAME = 'ucl-uikit-cookies-notice';
+const DESKTOP_NOTICE_CONTENT_MAX_WIDTH = 944;
+
+export interface CookiesNoticeBaseProps extends HTMLAttributes<HTMLDivElement> {
+  heading?: ReactNode;
+  description?: ReactNode;
+  policyHref?: string;
+  policyLabel?: ReactNode;
+  cookies?: CookieCategory[];
+  preferences?: CookiePreferences;
+  modal?: boolean;
+  manageCookiesLabel?: ReactNode;
+  acceptAllLabel?: ReactNode;
+  acceptNecessaryLabel?: ReactNode;
+  onAcceptAll?: (preferences: CookiePreferences) => void;
+  onAcceptNecessary?: (preferences: CookiePreferences) => void;
+  onManageCookies?: () => void;
+  onPreferencesChange?: (preferences: CookiePreferences) => void;
+  onSavePreferences?: (preferences: CookiePreferences) => void;
+  onSettingsClose?: () => void;
+  testId?: string;
+}
+
+export type CookiesNoticeProps = CookiesNoticeBaseProps & MarginProps;
+
+const getAllPreferences = (cookies: CookieCategory[]): CookiePreferences =>
+  cookies.reduce<CookiePreferences>((acc, cookie) => {
+    acc[cookie.id] = true;
+    return acc;
+  }, {});
+
+const getNecessaryPreferences = (
+  cookies: CookieCategory[]
+): CookiePreferences =>
+  cookies.reduce<CookiePreferences>((acc, cookie) => {
+    acc[cookie.id] = !!cookie.required;
+    return acc;
+  }, {});
+
+const getRequiredPreferences = (cookies: CookieCategory[]): CookiePreferences =>
+  cookies.reduce<CookiePreferences>((acc, cookie) => {
+    if (cookie.required) {
+      acc[cookie.id] = true;
+    }
+    return acc;
+  }, {});
+
+const getDefaultPreferences = (cookies: CookieCategory[]): CookiePreferences =>
+  cookies.reduce<CookiePreferences>((acc, cookie) => {
+    acc[cookie.id] = cookie.required ? true : (cookie.defaultEnabled ?? false);
+    return acc;
+  }, {});
+
+const CookiesNotice = ({
+  heading = DEFAULT_HEADING,
+  description,
+  policyHref = DEFAULT_POLICY_HREF,
+  policyLabel = 'UCL privacy policy',
+  cookies = DEFAULT_COOKIE_CATEGORIES,
+  preferences,
+  modal = false,
+  manageCookiesLabel = 'Manage cookies',
+  acceptAllLabel = 'Accept all cookies',
+  acceptNecessaryLabel = 'Accept necessary only',
+  onAcceptAll,
+  onAcceptNecessary,
+  onManageCookies,
+  onPreferencesChange,
+  onSavePreferences,
+  onSettingsClose,
+  testId = NAME,
+  className,
+  ...props
+}: CookiesNoticeProps) => {
+  const [theme] = useTheme();
+  const noticeHeadingId = useId();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const initialPreferences = useMemo(
+    () => ({
+      ...getDefaultPreferences(cookies),
+      ...preferences,
+      ...getRequiredPreferences(cookies),
+    }),
+    [cookies, preferences]
+  );
+  const [savedPreferences, setSavedPreferences] =
+    useState<CookiePreferences>(initialPreferences);
+  const [draftPreferences, setDraftPreferences] =
+    useState<CookiePreferences>(initialPreferences);
+
+  useEffect(() => {
+    setSavedPreferences(initialPreferences);
+    setDraftPreferences(initialPreferences);
+  }, [initialPreferences]);
+
+  const handlePreferenceToggle = useCallback(
+    (cookie: CookieCategory) => {
+      if (cookie.required) return;
+
+      const nextPreferences = {
+        ...draftPreferences,
+        [cookie.id]: !draftPreferences[cookie.id],
+      };
+
+      setDraftPreferences(nextPreferences);
+      onPreferencesChange?.(nextPreferences);
+    },
+    [draftPreferences, onPreferencesChange]
+  );
+
+  const handleAcceptAll = useCallback(() => {
+    const nextPreferences = getAllPreferences(cookies);
+
+    setSavedPreferences(nextPreferences);
+    setDraftPreferences(nextPreferences);
+    onAcceptAll?.(nextPreferences);
+  }, [cookies, onAcceptAll]);
+
+  const handleAcceptNecessary = useCallback(() => {
+    const nextPreferences = getNecessaryPreferences(cookies);
+
+    setSavedPreferences(nextPreferences);
+    setDraftPreferences(nextPreferences);
+    onAcceptNecessary?.(nextPreferences);
+  }, [cookies, onAcceptNecessary]);
+
+  const handleManageCookies = useCallback(() => {
+    onManageCookies?.();
+    setDraftPreferences(savedPreferences);
+    setSettingsOpen(true);
+  }, [onManageCookies, savedPreferences]);
+
+  const handleSettingsClose = useCallback(() => {
+    setSettingsOpen(false);
+    onSettingsClose?.();
+  }, [onSettingsClose]);
+
+  const handleSavePreferences = useCallback(() => {
+    setSavedPreferences(draftPreferences);
+    onSavePreferences?.(draftPreferences);
+    setSettingsOpen(false);
+  }, [draftPreferences, onSavePreferences]);
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    width: 100%;
+    padding: ${theme.padding.p24} ${theme.padding.p16};
+    background-color: ${theme.colour.surface.primary};
+    color: ${theme.colour.text.default};
+    border-radius: ${theme.radius.r4} ${theme.radius.r4} 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p24};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      padding: ${theme.padding.p48} ${theme.padding.p32};
+      border-radius: ${theme.radius.r4};
+      gap: ${theme.padding.p32};
+    }
+  `;
+
+  const contentStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p16};
+  `;
+
+  const headingStyle = css`
+    text-align: center;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      text-align: left;
+    }
+  `;
+
+  const policyLinkStyle = css`
+    color: ${theme.colour.text.default};
+
+    &:visited {
+      color: ${theme.colour.text.default};
+    }
+  `;
+
+  const actionsStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p16};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  `;
+
+  const actionGroupStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p16};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      flex-direction: row;
+      align-items: center;
+    }
+  `;
+
+  const manageButtonStyle = css`
+    order: 3;
+    width: 100%;
+    white-space: nowrap;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      order: 0;
+      width: auto;
+    }
+  `;
+
+  const actionButtonStyle = css`
+    width: 100%;
+    white-space: nowrap;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: auto;
+    }
+  `;
+
+  const dialogStyle = css`
+    height: fit-content;
+    max-height: calc(100vh - ${theme.margin.m32});
+    margin: auto auto 0;
+    background-color: transparent;
+    box-shadow: ${theme.boxShadow.x2y4};
+
+    &:modal {
+      max-height: calc(100vh - ${theme.margin.m32});
+    }
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: calc(100vw - ${theme.margin.m64});
+      max-width: calc(
+        ${DESKTOP_NOTICE_CONTENT_MAX_WIDTH}px + ${theme.padding.p64}
+      );
+      margin: auto;
+
+      &:modal {
+        max-width: min(
+          calc(${DESKTOP_NOTICE_CONTENT_MAX_WIDTH}px + ${theme.padding.p64}),
+          calc(100vw - ${theme.margin.m64})
+        );
+      }
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+  const notice = (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <div className={cx(`${NAME}__content`, contentStyle)}>
+        <Heading
+          id={noticeHeadingId}
+          level='md'
+          as='h2'
+          noMargins
+          className={cx(`${NAME}__heading`, headingStyle)}
+        >
+          {heading}
+        </Heading>
+        <Paragraph
+          level='md'
+          noMargins
+        >
+          {description ?? (
+            <>
+              {DEFAULT_DESCRIPTION}
+              <Link
+                href={policyHref}
+                className={policyLinkStyle}
+                noVisited
+              >
+                {policyLabel}
+              </Link>
+              .{DEFAULT_DESCRIPTION_SUFFIX}
+            </>
+          )}
+        </Paragraph>
+      </div>
+
+      <div className={cx(`${NAME}__actions`, actionsStyle)}>
+        <Button
+          variant='secondary'
+          fullWidth
+          className={cx(`${NAME}__manage-button`, manageButtonStyle)}
+          onClick={handleManageCookies}
+        >
+          {manageCookiesLabel}
+        </Button>
+        <div className={cx(`${NAME}__accept-actions`, actionGroupStyle)}>
+          <Button
+            variant='accent'
+            fullWidth
+            className={cx(
+              `${NAME}__accept-necessary-button`,
+              actionButtonStyle
+            )}
+            onClick={handleAcceptNecessary}
+          >
+            {acceptNecessaryLabel}
+          </Button>
+          <Button
+            variant='accent'
+            fullWidth
+            className={cx(`${NAME}__accept-all-button`, actionButtonStyle)}
+            onClick={handleAcceptAll}
+          >
+            {acceptAllLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <BaseDialog
+        open
+        modal={modal}
+        size='large'
+        closeOnClickOutside={false}
+        className={cx(`${NAME}__dialog`, dialogStyle)}
+        aria-labelledby={noticeHeadingId}
+      >
+        {notice}
+      </BaseDialog>
+      <CookieSettings
+        open={settingsOpen}
+        cookies={cookies}
+        preferences={draftPreferences}
+        policyHref={policyHref}
+        policyLabel='UCL privacy policy.'
+        onClose={handleSettingsClose}
+        onPreferenceToggle={handlePreferenceToggle}
+        onSavePreferences={handleSavePreferences}
+      />
+    </>
+  );
+};
+
+export default CookiesNotice;

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

@@ -0,0 +1,180 @@
+import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import CookiesNotice from '..';
+import { CookieCategory } from '../types';
+
+const originalShowModal = HTMLDialogElement.prototype.showModal;
+const originalShow = HTMLDialogElement.prototype.show;
+const originalClose = HTMLDialogElement.prototype.close;
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement
+  ) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.show = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+afterAll(() => {
+  HTMLDialogElement.prototype.showModal = originalShowModal;
+  HTMLDialogElement.prototype.show = originalShow;
+  HTMLDialogElement.prototype.close = originalClose;
+});
+
+const cookies: CookieCategory[] = [
+  {
+    id: 'necessary',
+    title: 'Necessary',
+    description: 'Required for the site to work.',
+    required: true,
+  },
+  {
+    id: 'analytics',
+    title: 'Analytics',
+    description: 'Helps us improve the service.',
+    defaultEnabled: true,
+  },
+  {
+    id: 'maps',
+    title: 'Maps',
+    description: 'Embeds third-party map services.',
+  },
+];
+
+const renderWithTheme = (ui: React.ReactNode) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('CookiesNotice', () => {
+  test('renders custom cookie content and calls accept callbacks with preferences', () => {
+    const onAcceptAll = vi.fn();
+    const onAcceptNecessary = vi.fn();
+
+    renderWithTheme(
+      <CookiesNotice
+        cookies={cookies}
+        onAcceptAll={onAcceptAll}
+        onAcceptNecessary={onAcceptNecessary}
+      />
+    );
+
+    expect(screen.getByText('Help us improve your experience')).toBeDefined();
+    expect(
+      screen.getByRole('dialog', { name: 'Help us improve your experience' })
+    ).toHaveAttribute('aria-modal', 'false');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Accept all cookies' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Accept necessary only' })
+    );
+
+    expect(onAcceptAll).toHaveBeenCalledWith({
+      necessary: true,
+      analytics: true,
+      maps: true,
+    });
+    expect(onAcceptNecessary).toHaveBeenCalledWith({
+      necessary: true,
+      analytics: false,
+      maps: false,
+    });
+  });
+
+  test('renders modal notice as a dialog', () => {
+    renderWithTheme(
+      <CookiesNotice
+        modal
+        cookies={cookies}
+      />
+    );
+
+    expect(
+      screen.getByRole('dialog', { name: 'Help us improve your experience' })
+    ).toBeInTheDocument();
+  });
+
+  test('opens settings and saves selected preferences', () => {
+    const onManageCookies = vi.fn();
+    const onSavePreferences = vi.fn();
+
+    renderWithTheme(
+      <CookiesNotice
+        cookies={cookies}
+        onManageCookies={onManageCookies}
+        onSavePreferences={onSavePreferences}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Manage cookies' }));
+    fireEvent.click(screen.getByRole('switch', { name: 'Allow Analytics' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save preferences' }));
+
+    expect(onManageCookies).toHaveBeenCalledTimes(1);
+    expect(onSavePreferences).toHaveBeenCalledWith({
+      necessary: true,
+      analytics: false,
+      maps: false,
+    });
+  });
+
+  test('keeps saved preferences when settings is reopened', () => {
+    const onSavePreferences = vi.fn();
+
+    renderWithTheme(
+      <CookiesNotice
+        cookies={cookies}
+        onSavePreferences={onSavePreferences}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Manage cookies' }));
+    fireEvent.click(screen.getByRole('switch', { name: 'Allow Analytics' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save preferences' }));
+
+    fireEvent.click(screen.getByRole('button', { name: 'Manage cookies' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save preferences' }));
+
+    expect(onSavePreferences).toHaveBeenLastCalledWith({
+      necessary: true,
+      analytics: false,
+      maps: false,
+    });
+  });
+
+  test('passes existing preferences into managed settings', () => {
+    const onSavePreferences = vi.fn();
+
+    renderWithTheme(
+      <CookiesNotice
+        cookies={cookies}
+        preferences={{
+          necessary: true,
+          analytics: false,
+          maps: true,
+        }}
+        onSavePreferences={onSavePreferences}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Manage cookies' }));
+
+    expect(screen.getByRole('dialog', { name: 'Privacy preferences' }));
+    expect(screen.getByText('Embeds third-party map services.')).toBeDefined();
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Allow Analytics' }));
+    fireEvent.click(screen.getByRole('switch', { name: 'Allow Maps' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save preferences' }));
+
+    expect(onSavePreferences).toHaveBeenCalledWith({
+      necessary: true,
+      analytics: true,
+      maps: false,
+    });
+  });
+});

package/lib/components/CookiesNotice/defaults.ts

@@ -0,0 +1,40 @@
+import { CookieCategory } from './types';
+
+export const DEFAULT_POLICY_HREF =
+  'https://www.ucl.ac.uk/legal-services/privacy/cookie-policy';
+
+export const DEFAULT_HEADING = 'Help us improve your experience';
+
+export const DEFAULT_DESCRIPTION =
+  'We use cookies for authentication, analytics, and third-party services like Google Maps. Some cookies are required for the site to function and cannot be turned off. By accepting, you agree to the ';
+
+export const DEFAULT_DESCRIPTION_SUFFIX =
+  ' You can update your preferences any time.';
+
+export const DEFAULT_COOKIE_CATEGORIES: CookieCategory[] = [
+  {
+    id: 'necessary',
+    title: 'Necessary Cookies',
+    description:
+      "These cookies are necessary for the website to function and can't be switched off in our systems.",
+    required: true,
+    defaultEnabled: true,
+    learnMoreHref: DEFAULT_POLICY_HREF,
+  },
+  {
+    id: 'analytics',
+    title: 'Analytics',
+    description:
+      'These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site.',
+    defaultEnabled: true,
+    learnMoreHref: DEFAULT_POLICY_HREF,
+  },
+  {
+    id: 'marketing',
+    title: 'Marketing',
+    description:
+      'These cookies are set through our site by our advertising partners. They may be used to build a profile of your interests and show you relevant ads.',
+    defaultEnabled: true,
+    learnMoreHref: DEFAULT_POLICY_HREF,
+  },
+];

package/lib/components/CookiesNotice/index.ts

@@ -0,0 +1,6 @@
+export { default } from './CookiesNotice';
+export type {
+  CookiesNoticeBaseProps,
+  CookiesNoticeProps,
+} from './CookiesNotice';
+export type { CookieCategory, CookiePreferences } from './types';

package/lib/components/CookiesNotice/types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+export type CookiePreferences = Record<string, boolean>;
+
+export interface CookieCategory {
+  id: string;
+  title: ReactNode;
+  description: ReactNode;
+  required?: boolean;
+  defaultEnabled?: boolean;
+  toggleLabel?: string;
+  learnMoreHref?: string;
+  learnMoreLabel?: ReactNode;
+}

package/lib/components/Input/Input.tsx

@@ -60,6 +60,7 @@ const Input = forwardRef<Ref, InputProps>(
       color: ${theme.colour.text.default};
       background-color: ${theme.colour.fill.inverse};
       border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
+      border-radius: ${theme.radius.r4};
       outline: none;
 
       &::placeholder {

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

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-kvsjyn"
+    class="ucl-uikit-input__input css-i99dnf"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Paragraph/Paragraph.tsx

@@ -13,7 +13,7 @@ export type ParagraphLevel =
   | 'md'
   | 'md-medium'
   | 'md-semibold'
-  | 'md-semibold'
+  | 'md-numeric'
   | 'md-medium-numeric'
   | 'sm'
   | 'sm-medium'
@@ -57,6 +57,7 @@ const Paragraph = ({
         md,
         mdMedium,
         mdSemibold,
+        mdNumeric,
         mdMediumNumeric,
         sm,
         smMedium,
@@ -134,7 +135,17 @@ const Paragraph = ({
     line-height: ${mdSemibold.lineHeight}%;
   `;
 
+  const mdNumericStyle = css`
+    font-family: ${mdNumeric.fontFamily};
+    font-feature-settings: ${mdNumeric.fontSettings};
+    font-size: ${mdNumeric.fontSize}px;
+    font-weight: ${mdNumeric.fontWeight};
+    line-height: ${mdNumeric.lineHeight}%;
+  `;
+
   const mdMediumNumericStyle = css`
+    font-family: ${mdMediumNumeric.fontFamily};
+    font-feature-settings: ${mdMediumNumeric.fontSettings};
     font-size: ${mdMediumNumeric.fontSize}px;
     font-weight: ${mdMediumNumeric.fontWeight};
     line-height: ${mdMediumNumeric.lineHeight}%;
@@ -180,6 +191,7 @@ const Paragraph = ({
     mappedLevel === 'md' && mdStyle,
     mappedLevel === 'md-medium' && mdMediumStyle,
     mappedLevel === 'md-semibold' && mdSemiboldStyle,
+    mappedLevel === 'md-numeric' && mdNumericStyle,
     mappedLevel === 'md-medium-numeric' && mdMediumNumericStyle,
     mappedLevel === 'sm' && smStyle,
     mappedLevel === 'sm-medium' && smMediumStyle,