@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/LoadingBox/LoadingBox.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+import { Spinner } from '../Spinner/Spinner';
+
+export type LoadingBoxProps = ComponentProps<'div'> & {
+  loading?: boolean;
+  title?: string;
+};
+
+export const LoadingBox = ({
+  loading = false,
+  title = 'Loading',
+  className,
+  children,
+  ...props
+}: LoadingBoxProps) => (
+  <div data-slot="loading-box" className={cn('cn-loading-box', className)} {...props}>
+    <div
+      data-slot="loading-box-overlay"
+      data-loading={loading || undefined}
+      inert={!loading}
+      role="status"
+      className="cn-loading-box-overlay"
+    >
+      <Spinner aria-hidden className="cn-loading-box-spinner" />
+
+      <span className="sr-only">{title}</span>
+    </div>
+
+    {/* display:contents so this purely exists to carry `inert`, it doesn't
+        add a box that could change how children participate in whatever
+        layout the consumer's own content establishes. Blocks focus/clicks
+        on content that's about to be replaced once loading starts, rather
+        than just visually covering it while leaving it reachable. */}
+    <div data-slot="loading-box-content" inert={loading} className="contents">
+      {children}
+    </div>
+  </div>
+);

package/src/components/Modal/Modal.css

@@ -0,0 +1,111 @@
+@layer components {
+  /*
+    MARK: Modal overlay
+    Semi-transparent backdrop. Radix sets data-state to open or closed
+    which drives enter and exit fade transitions.
+  */
+  .cn-modal-overlay {
+    @apply bg-black/50 cn-z-overlay;
+
+    &[data-state='open'] {
+      animation: cn-modal-overlay-in 150ms ease-out;
+    }
+    &[data-state='closed'] {
+      animation: cn-modal-overlay-out 150ms ease-in;
+    }
+  }
+
+  @keyframes cn-modal-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes cn-modal-overlay-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  /*
+    MARK: Modal content
+    The panel box with white background and GDS form-width border.
+    No rounded corners. The fixed position and centring transform are
+    applied via Tailwind in the TSX. Only visual appearance is set here.
+
+    Add a max-w-* class to ModalContent to widen for specific modals.
+  */
+  .cn-modal-content {
+    @apply panel cn-z-overlay p-gds-4 w-full max-w-sm;
+
+    &[data-state='open'] {
+      animation: cn-modal-content-in 150ms ease-out;
+    }
+    &[data-state='closed'] {
+      animation: cn-modal-content-out 150ms ease-in;
+    }
+  }
+
+  @keyframes cn-modal-content-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes cn-modal-content-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  /*
+    MARK: Modal close button
+    Positioned absolutely in the top-right corner of the panel.
+    The parent cn-modal-content has position fixed which acts
+    as the containing block for absolute children.
+  */
+  .cn-modal-close {
+    @apply absolute top-gds-2 right-gds-2;
+  }
+
+  /* MARK: Modal header and footer */
+
+  .cn-modal-header {
+    @apply flex flex-col gap-gds-1;
+  }
+
+  .cn-modal-footer {
+    @apply flex flex-col gap-gds-2 sm:flex-row;
+  }
+
+  /* MARK: Vertical rhythm between sections
+     No layout opinion of its own on cn-modal-content, it needs to stay a
+     plain block so consumers can turn it into a flex row instead (e.g.
+     ErrorModal, an icon beside the content) without fighting a hardcoded
+     flex-direction. Wrap whatever sits inside (ModalHeader, ModalDescription,
+     ModalFooter, and anything else a specific modal needs, a form, a
+     Details section, ...) in a Stack instead, same as any other arbitrary
+     vertical content elsewhere in the library. */
+
+  /* MARK: Modal title and description */
+
+  .cn-modal-title {
+    @apply text-xl font-bold text-body;
+  }
+
+  .cn-modal-description {
+    @apply font-normal text-body;
+  }
+}

package/src/components/Modal/Modal.stories.tsx

@@ -1,188 +1,127 @@
 import { useState } from 'react';
 
-import { useArgs } from 'storybook/preview-api';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Modal } from './Modal';
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
+} from './Modal';
+import { Button } from '../Button/Button';
+import { FormGroup } from '../Form/FormGroup';
+import { HintText } from '../HintText/HintText';
+import { Input } from '../Input/Input';
+import { Label } from '../Label/Label';
+import { Stack } from '../Layout/Stack/Stack';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
   component: Modal,
+  tags: ['autodocs'],
   parameters: {
-    layout: 'fullscreen',
     docs: {
       description: {
-        component: 'A modal dialog component that renders content in a portal overlay.',
+        component:
+          "Use the Modal primitives to display dialog content in an overlay. ModalContent has no layout opinion of its own (so consumers can turn it into something other than a column, e.g. ErrorModal's icon-beside-content row), wrap ModalHeader/ModalDescription/ModalFooter and anything else in a Stack for spacing between them, as below.",
       },
     },
   },
-  // removed the auto-docs for now as that will cause all modals to open immediately
-  // tags: ['autodocs'],
   argTypes: {
-    isOpen: {
-      control: 'boolean',
-      description: 'Whether the modal is open',
-    },
-    onClose: {
-      action: 'onClose',
-      description: 'Callback function called when the modal should close',
-    },
-    children: {
-      control: false,
-      description: 'Content to display inside the modal',
-    },
+    children: { control: false },
   },
-  decorators: [
-    (Story, context) => {
-      const [{ isOpen }, updateArgs] = useArgs();
-
-      const handleClose = () => {
-        updateArgs({ isOpen: false });
-      };
-
-      // Override onClose prop to use local handler
-      return <Story args={{ ...context.args, isOpen, onClose: handleClose }} />;
-    },
-  ],
 };
 
 export default meta;
+
 type Story = StoryObj<typeof Modal>;
 
 export const Default: Story = {
-  args: {
-    isOpen: true,
-    children: (
-      <div>
-        <h2 className="mb-4 text-xl font-bold">Modal Title</h2>
-
-        <p className="mb-4 text-gray-600">
-          This is a basic modal with some content. You can close it by clicking the X button,
-          pressing Escape, or clicking outside the modal.
-        </p>
-
-        <div className="flex gap-2">
-          <button className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">
-            Confirm
-          </button>
-
-          <button className="px-4 py-2 text-gray-700 bg-gray-300 rounded hover:bg-gray-400">
-            Cancel
-          </button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const Closed: Story = {
-  args: {
-    isOpen: false,
-    children: (
-      <div>
-        <h2 className="mb-4 text-xl font-bold">You won&apos;t see this</h2>
+  render: () => {
+    const [open, setOpen] = useState(false);
 
-        <p>This modal is closed, so the content is not visible.</p>
-      </div>
-    ),
+    return (
+      <Modal open={open} onOpenChange={setOpen}>
+        <ModalTrigger asChild>
+          <Button>Open modal</Button>
+        </ModalTrigger>
+
+        <ModalContent>
+          <Stack gap="sm">
+            <ModalHeader>
+              <ModalTitle>Confirm action</ModalTitle>
+            </ModalHeader>
+
+            <ModalDescription>
+              Are you sure you want to continue? This action cannot be undone.
+            </ModalDescription>
+
+            <ModalFooter>
+              <Button appearance="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+
+              <ModalClose asChild>
+                <Button>Confirm</Button>
+              </ModalClose>
+            </ModalFooter>
+          </Stack>
+        </ModalContent>
+      </Modal>
+    );
   },
 };
 
-export const SimpleMessage: Story = {
-  args: {
-    isOpen: true,
-    children: (
-      <div className="text-center">
-        <h3 className="mb-2 text-lg font-semibold">Success!</h3>
-
-        <p className="text-gray-600">Your action was completed successfully.</p>
-      </div>
-    ),
+export const WithFormContent: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Arbitrary content (a FormGroup here, could be anything) sits in the same Stack as ModalHeader/ModalDescription/ModalFooter, getting the same gap on both sides automatically, no extra spacing rules needed regardless of what's between them.",
+      },
+    },
   },
-};
-
-export const Interactive: Story = {
   render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedModal, setSelectedModal] = useState<string | null>(null);
-
-    const openModal = (type: string) => {
-      setSelectedModal(type);
-      setIsOpen(true);
-    };
-
-    const closeModal = () => {
-      setIsOpen(false);
-      setSelectedModal(null);
-    };
-
-    const renderModalContent = () => {
-      switch (selectedModal) {
-        case 'info':
-          return (
-            <div>
-              <h3 className="mb-2 text-lg font-semibold">Information</h3>
-
-              <p className="text-gray-600">This is an informational modal.</p>
-            </div>
-          );
-        case 'warning':
-          return (
-            <div>
-              <h3 className="mb-2 text-lg font-semibold text-yellow-600">Warning</h3>
-
-              <p className="text-gray-600">This action requires confirmation.</p>
-            </div>
-          );
-        case 'error':
-          return (
-            <div>
-              <h3 className="mb-2 text-lg font-semibold text-red-600">Error</h3>
-
-              <p className="text-gray-600">Something went wrong. Please try again.</p>
-            </div>
-          );
-        default:
-          return <p>Default modal content</p>;
-      }
-    };
+    const [open, setOpen] = useState(false);
 
     return (
-      <div className="p-8">
-        <h2 className="mb-4 text-xl font-bold">Interactive Modal Demo</h2>
-
-        <p className="mb-6 text-gray-600">
-          Click any button below to open different types of modals.
-        </p>
-
-        <div className="space-x-4">
-          <button
-            onClick={() => openModal('info')}
-            className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600"
-          >
-            Info Modal
-          </button>
-
-          <button
-            onClick={() => openModal('warning')}
-            className="px-4 py-2 text-white bg-yellow-500 rounded hover:bg-yellow-600"
-          >
-            Warning Modal
-          </button>
-
-          <button
-            onClick={() => openModal('error')}
-            className="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600"
-          >
-            Error Modal
-          </button>
-        </div>
-
-        <Modal isOpen={isOpen} onClose={closeModal}>
-          {renderModalContent()}
-        </Modal>
-      </div>
+      <Modal open={open} onOpenChange={setOpen}>
+        <ModalTrigger asChild>
+          <Button>Open modal</Button>
+        </ModalTrigger>
+
+        <ModalContent>
+          <Stack gap="sm">
+            <ModalHeader>
+              <ModalTitle>Rename item</ModalTitle>
+            </ModalHeader>
+
+            <ModalDescription>Choose a new name for this item.</ModalDescription>
+
+            <FormGroup>
+              <Label htmlFor="rename-item">Name</Label>
+
+              <HintText>As it should appear in the list</HintText>
+
+              <Input id="rename-item" aria-describedby="rename-item-hint" defaultValue="Untitled" />
+            </FormGroup>
+
+            <ModalFooter>
+              <Button appearance="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+
+              <ModalClose asChild>
+                <Button>Save</Button>
+              </ModalClose>
+            </ModalFooter>
+          </Stack>
+        </ModalContent>
+      </Modal>
     );
   },
 };

package/src/components/Modal/Modal.tsx

@@ -1,83 +1,149 @@
 'use client';
 
-import { useCallback, useEffect, useRef } from 'react';
+import type { ComponentProps } from 'react';
 
-import { createPortal } from 'react-dom';
-import { IoMdCloseCircle } from 'react-icons/io';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { LuX } from 'react-icons/lu';
 
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
+import { cn } from '../../utils/components';
+import { Button } from '../Button/Button';
 
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
+export type ModalProps = ComponentProps<typeof DialogPrimitive.Root>;
+
+export const Modal = ({ ...props }: ModalProps) => (
+  <DialogPrimitive.Root data-slot="modal" {...props} />
+);
+
+export type ModalTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+
+export const ModalTrigger = ({ ...props }: ModalTriggerProps) => (
+  <DialogPrimitive.Trigger data-slot="modal-trigger" {...props} />
+);
+
+export type ModalPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+
+export const ModalPortal = ({ ...props }: ModalPortalProps) => (
+  <DialogPrimitive.Portal data-slot="modal-portal" {...props} />
+);
+
+export type ModalCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+
+export const ModalClose = ({ ...props }: ModalCloseProps) => (
+  <DialogPrimitive.Close data-slot="modal-close" {...props} />
+);
+
+export type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+
+export const ModalOverlay = ({ className, ...props }: ModalOverlayProps) => (
+  <DialogPrimitive.Overlay
+    data-slot="modal-overlay"
+    className={cn('cn-modal-overlay fixed inset-0 isolate', className)}
+    {...props}
+  />
+);
+
+export type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
 };
 
-export type ModalProps = ExtendProps<'dialog', Props>;
-
-export const Modal = ({ isOpen, onClose, children, className, ...props }: ModalProps) => {
-  const modalRef = useRef<HTMLDialogElement>(null);
-
-  const handleClose = useCallback(() => {
-    modalRef.current?.close();
-    onClose();
-  }, [onClose]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    modalRef.current?.showModal();
-  }, [isOpen]);
-
-  // typically dialogs don't need to be rendered conditionally, as the browser sets `display: none` when it's closed, but
-  // as we override the display style and make it `flex`, we need the condition to hide it
-  return isOpen
-    ? // although dialogs are in their own special top-layer, this is only for styling, and DOM-wise they receive events like any other element,
-      // so we want to portal it to be the highest element in the DOM
-      createPortal(
-        // dialog elements do have a key handler as you can close them with `Escape`, so this can be ignored
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-        <dialog
-          className={cn(
-            `fixed inset-0 flex items-center justify-center w-full h-full m-0 bg-transparent
-              backdrop:bg-black/50`,
-            className,
-          )}
-          ref={modalRef}
-          onCancel={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-
-            handleClose();
-          }}
-          onClick={() => {
-            // close the modal if the user clicks outside the main content (i.e. on the backdrop)
-            handleClose();
-          }}
-          {...props}
-        >
-          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-          <div
-            className="relative z-10 w-full max-w-md p-6 bg-white rounded-lg shadow-lg"
-            onClick={(event) => {
-              // stop event from bubbling to the `dialog` element, as we don't want the modal to close if you click the content
-              event.stopPropagation();
-            }}
-          >
-            <button
-              onClick={handleClose}
-              className="absolute text-gray-600 text-static-xl top-2 right-2 hover:text-black"
-              aria-label="Close modal"
-            >
-              <IoMdCloseCircle size={20} />
-            </button>
-            {children}
-          </div>
-        </dialog>,
-        document.body,
-      )
-    : null;
+export const ModalContent = ({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: ModalContentProps) => (
+  <ModalPortal>
+    <ModalOverlay />
+
+    <DialogPrimitive.Content
+      data-slot="modal-content"
+      className={cn(
+        `cn-modal-content fixed top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2
+        outline-none`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+
+      {showCloseButton && (
+        <div className="cn-modal-close">
+          <DialogPrimitive.Close data-slot="modal-close" asChild>
+            <Button variant="icon" appearance="ghost">
+              <LuX />
+
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        </div>
+      )}
+    </DialogPrimitive.Content>
+  </ModalPortal>
+);
+
+export type ModalHeaderProps = ComponentProps<'div'>;
+
+export const ModalHeader = ({ className, ...props }: ModalHeaderProps) => (
+  <div
+    data-slot="modal-header"
+    className={cn('cn-modal-header flex flex-col', className)}
+    {...props}
+  />
+);
+
+export type ModalFooterProps = ComponentProps<'div'> & {
+  showCloseButton?: boolean;
 };
+
+export const ModalFooter = ({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: ModalFooterProps) => (
+  <div
+    data-slot="modal-footer"
+    className={cn(
+      'cn-modal-footer flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+
+    {showCloseButton && (
+      <DialogPrimitive.Close asChild>
+        <Button appearance="secondary">Close</Button>
+      </DialogPrimitive.Close>
+    )}
+  </div>
+);
+
+export type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+
+export const ModalTitle = ({ className, ...props }: ModalTitleProps) => (
+  <DialogPrimitive.Title
+    data-slot="modal-title"
+    className={cn('cn-modal-title cn-font-heading', className)}
+    {...props}
+  />
+);
+
+export type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+
+// Renders a <p> (Description's own default), which can only contain
+// phrasing content, children here is assumed to be plain descriptive text
+// for that reason. Anything else (a Details/SummaryList section, a copy
+// button, ...) belongs as a sibling of ModalDescription instead, not
+// nested inside it, both because a <p> can't legally contain block
+// content (a browser silently closes it early on hitting one, which
+// desyncs SSR/client markup into a hydration error) and because
+// aria-describedby content should read as plain description text, not
+// fold in interactive elements. See ErrorModal for the sibling pattern.
+export const ModalDescription = ({ className, ...props }: ModalDescriptionProps) => (
+  <DialogPrimitive.Description
+    data-slot="modal-description"
+    className={cn('cn-modal-description', className)}
+    {...props}
+  />
+);

package/src/components/NoScriptBanner/NoScriptBanner.css

@@ -0,0 +1,17 @@
+@layer components {
+  /* MARK: NoScript banner
+     Full-width accent-coloured bar. Intended as the very first element in
+     the DOM, above the header, same position as the cookie banner, so it's
+     unmissable and consistent across every app. role="region" + aria-label
+     keeps it discoverable via landmark navigation even though it sits
+     outside both the header and main landmarks. */
+  .cn-noscript-banner {
+    @apply bg-accent text-on-accent py-gds-4;
+  }
+
+  /* MARK: Inner wrapper
+     Centres and constrains content, matching cn-cookie-banner-inner. */
+  .cn-noscript-banner-inner {
+    @apply mx-auto max-w-page px-gds-4;
+  }
+}