uikit-react-public 0.44.4 → 0.45.0

package/lib/components/Badge/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Badge';
 export type { BadgeProps } from './Badge';
+export type { BadgeVariant } from './Badge';

package/lib/components/CookiesNotice/CookieSettings.tsx

@@ -0,0 +1,304 @@
+import {
+  MouseEvent as ReactMouseEvent,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useId,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import BaseDialog, { BaseDialogProps } from '../Dialog/BaseDialog';
+import Heading from '../Heading';
+import Paragraph from '../Paragraph';
+import Button from '../Button';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Link from '../Link';
+import StandaloneLink from '../StandaloneLink';
+import Toggle from '../Toggle';
+import {
+  DEFAULT_COOKIE_CATEGORIES,
+  DEFAULT_DESCRIPTION,
+  DEFAULT_DESCRIPTION_SUFFIX,
+  DEFAULT_POLICY_HREF,
+} from './defaults';
+import { CookieCategory, CookiePreferences } from './types';
+
+const NAME = 'ucl-uikit-cookie-settings';
+
+interface CookieSettingsProps extends Omit<
+  BaseDialogProps,
+  'children' | 'onChange' | 'onClose' | 'size' | 'modal'
+> {
+  cookies: CookieCategory[];
+  preferences: CookiePreferences;
+  description?: ReactNode;
+  policyHref?: string;
+  policyLabel?: ReactNode;
+  onClose?: (ev?: ReactMouseEvent | KeyboardEvent) => void;
+  onPreferenceToggle: (cookie: CookieCategory) => void;
+  onSavePreferences?: () => void;
+  saveButtonLabel?: ReactNode;
+}
+
+const CookieSettings = ({
+  open = false,
+  cookies = DEFAULT_COOKIE_CATEGORIES,
+  preferences,
+  description,
+  policyHref = DEFAULT_POLICY_HREF,
+  policyLabel = 'UCL privacy policy.',
+  onClose,
+  onPreferenceToggle,
+  onSavePreferences,
+  saveButtonLabel = 'Save preferences',
+  testId = NAME,
+  className,
+  ...props
+}: CookieSettingsProps) => {
+  const [theme] = useTheme();
+  const headingId = useId();
+  const descriptionId = useId();
+
+  const handleSave = useCallback(() => {
+    onSavePreferences?.();
+  }, [onSavePreferences]);
+
+  const handleCloseClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (ev) => {
+      onClose?.(ev);
+    },
+    [onClose]
+  );
+
+  const rootStyle = css`
+    background-color: ${theme.colour.surface.default};
+  `;
+
+  const headerStyle = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: ${theme.padding.p16};
+    padding: ${theme.padding.p32} ${theme.padding.p24} 0 ${theme.padding.p32};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      padding-right: ${theme.padding.p32};
+    }
+  `;
+
+  const headingStyle = css`
+    padding-top: ${theme.padding.p32};
+  `;
+
+  const closeButtonStyle = css`
+    flex: 0 0 auto;
+    color: ${theme.colour.icon.secondary};
+  `;
+
+  const bodyStyle = css`
+    padding: ${theme.padding.p24} ${theme.padding.p32};
+  `;
+
+  const contentStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p24};
+  `;
+
+  const policyLinkStyle = css`
+    color: ${theme.colour.text.default};
+
+    &:visited {
+      color: ${theme.colour.text.default};
+    }
+  `;
+
+  const listStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p24};
+  `;
+
+  const cookieStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p16};
+  `;
+
+  const cookieHeaderStyle = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: ${theme.padding.p16};
+  `;
+
+  const cookieTextStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p16};
+    min-width: 0;
+  `;
+
+  const toggleStyle = css`
+    flex: 0 0 auto;
+    margin-top: ${theme.margin.m2};
+  `;
+
+  const learnMoreStyle = css`
+    width: fit-content;
+  `;
+
+  const footerStyle = css`
+    padding: 0 ${theme.padding.p32} ${theme.padding.p32};
+    display: flex;
+    justify-content: stretch;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      justify-content: flex-end;
+      padding-top: ${theme.padding.p16};
+    }
+  `;
+
+  const saveButtonStyle = css`
+    width: 100%;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: auto;
+    }
+  `;
+
+  const style = cx(NAME, rootStyle, className);
+
+  return (
+    <BaseDialog
+      open={open}
+      modal
+      size='large'
+      onClose={onClose}
+      className={style}
+      aria-labelledby={headingId}
+      aria-describedby={descriptionId}
+      testId={testId}
+      {...props}
+    >
+      <header className={cx(`${NAME}__header`, headerStyle)}>
+        <Heading
+          id={headingId}
+          level='lg'
+          noMargins
+          className={cx(`${NAME}__heading`, headingStyle)}
+        >
+          Privacy preferences
+        </Heading>
+        <IconButton
+          aria-label='Close cookie settings'
+          className={cx(`${NAME}__close-button`, closeButtonStyle)}
+          onClick={handleCloseClick}
+        >
+          <Icon.X
+            role='presentation'
+            aria-hidden='true'
+          />
+        </IconButton>
+      </header>
+
+      <div className={cx(`${NAME}__body`, bodyStyle)}>
+        <div className={cx(`${NAME}__content`, contentStyle)}>
+          {description !== undefined && (
+            <Paragraph
+              id={descriptionId}
+              level='md'
+              noMargins
+            >
+              {description}
+            </Paragraph>
+          )}
+          {description === undefined && (
+            <Paragraph
+              id={descriptionId}
+              level='md'
+              noMargins
+            >
+              {DEFAULT_DESCRIPTION}
+              <Link
+                href={policyHref}
+                className={policyLinkStyle}
+                noVisited
+              >
+                {policyLabel}
+              </Link>
+              {DEFAULT_DESCRIPTION_SUFFIX}
+            </Paragraph>
+          )}
+
+          <div className={cx(`${NAME}__cookies`, listStyle)}>
+            {cookies.map((cookie) => (
+              <section
+                key={cookie.id}
+                className={cx(`${NAME}__cookie`, cookieStyle)}
+              >
+                <div
+                  className={cx(`${NAME}__cookie-header`, cookieHeaderStyle)}
+                >
+                  <div className={cx(`${NAME}__cookie-text`, cookieTextStyle)}>
+                    <Heading
+                      level='md'
+                      as='h3'
+                      noMargins
+                    >
+                      {cookie.title}
+                    </Heading>
+                    <Paragraph
+                      level='md'
+                      noMargins
+                    >
+                      {cookie.description}
+                    </Paragraph>
+                  </div>
+                  <Toggle
+                    checked={preferences[cookie.id]}
+                    disabled={cookie.required}
+                    aria-label={
+                      cookie.toggleLabel ??
+                      (typeof cookie.title === 'string'
+                        ? `Allow ${cookie.title}`
+                        : `Allow ${cookie.id} cookies`)
+                    }
+                    className={cx(`${NAME}__cookie-toggle`, toggleStyle)}
+                    onClick={() => onPreferenceToggle(cookie)}
+                  />
+                </div>
+                {cookie.learnMoreHref && (
+                  <StandaloneLink
+                    href={cookie.learnMoreHref}
+                    variant='primary'
+                    icon={<Icon.ChevronRight />}
+                    iconPosition='right'
+                    noVisited
+                    className={cx(`${NAME}__learn-more`, learnMoreStyle)}
+                  >
+                    {cookie.learnMoreLabel ?? 'Learn more'}
+                  </StandaloneLink>
+                )}
+              </section>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <footer className={cx(`${NAME}__footer`, footerStyle)}>
+        <Button
+          variant='accent'
+          size='medium'
+          className={cx(`${NAME}__save-button`, saveButtonStyle)}
+          onClick={handleSave}
+        >
+          {saveButtonLabel}
+        </Button>
+      </footer>
+    </BaseDialog>
+  );
+};
+
+export default CookieSettings;

package/lib/components/CookiesNotice/CookiesNotice.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import CookiesNotice from '.';
+
+const cookies = [
+  {
+    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: 'https://www.ucl.ac.uk/legal-services/privacy/cookie-policy',
+  },
+  {
+    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: 'https://www.ucl.ac.uk/legal-services/privacy/cookie-policy',
+  },
+  {
+    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: 'https://www.ucl.ac.uk/legal-services/privacy/cookie-policy',
+  },
+];
+
+const meta = {
+  title: 'Components/CookiesNotice',
+  component: CookiesNotice,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CookiesNotice>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NonModal: Story = {
+  name: 'Non-modal',
+  args: {
+    cookies,
+  },
+};
+
+export const Modal: Story = {
+  name: 'Modal',
+  args: {
+    cookies,
+    modal: true,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};