@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './Accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Vertically stacked sections that can be expanded or collapsed. Uses separator lines rather than borders, so it works equally in a sidebar panel or as a standalone FAQ section on a page. Each AccordionTrigger renders as a real heading (h3 by default), pass `level` to match wherever the accordion sits in the page's own heading hierarchy.",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: { type: 'radio' },
+      options: ['single', 'multiple'],
+      description: '`single` closes others when one opens; `multiple` allows any number open.',
+    },
+  },
+  args: {
+    type: 'multiple',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is the purpose of this service?</AccordionTrigger>
+
+        <AccordionContent>
+          This service helps you manage your environmental land management applications and track
+          payments. You can check your eligibility, submit evidence, and view your agreement
+          details.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-2">
+        <AccordionTrigger>How do I submit an application?</AccordionTrigger>
+
+        <AccordionContent>
+          Start by checking your eligibility using the tool on the homepage. Once confirmed, you can
+          begin a new application from your dashboard. Most applications take around 20 minutes to
+          complete.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-3">
+        <AccordionTrigger>When will I receive payment?</AccordionTrigger>
+
+        <AccordionContent>
+          Payments are processed quarterly once your evidence has been reviewed and approved. You
+          will receive an email confirmation when payment has been issued to your nominated bank
+          account.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const HeadingLevel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "AccordionTrigger renders as an h3 by default, matching Radix's own default. Pass `level` when the accordion sits directly under an h2 with nothing in between, so the page's heading order stays valid (e.g. for axe's heading-order rule).",
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger level="h2">What is the purpose of this service?</AccordionTrigger>
+
+        <AccordionContent>
+          This service helps you manage your environmental land management applications and track
+          payments.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-2">
+        <AccordionTrigger level="h2">How do I submit an application?</AccordionTrigger>
+
+        <AccordionContent>
+          Start by checking your eligibility using the tool on the homepage.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const SingleOpen: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Only one section can be open at a time. Opening another closes the current one.',
+      },
+    },
+  },
+  args: { type: 'single' },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Arable land</AccordionTrigger>
+
+        <AccordionContent>
+          Actions available for arable land include winter bird food plots, flower-rich grass
+          margins, and no-till cultivation.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Grassland</AccordionTrigger>
+
+        <AccordionContent>
+          Grassland actions include low-input farming, diverse swards, and species-rich hay meadow
+          restoration.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Woodland</AccordionTrigger>
+
+        <AccordionContent>
+          Woodland actions cover creation, management, and improvement of existing woodland habitats
+          to support biodiversity.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const InSidebar: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shown in a constrained-width panel, as used in the sidebar filter context. The separator lines run edge-to-edge within the container.',
+      },
+    },
+  },
+  args: { type: 'multiple' },
+  render: (args) => (
+    <div className="w-72 border border-divider p-0">
+      <Accordion {...args}>
+        <AccordionItem value="area">
+          <AccordionTrigger>Select area of interest</AccordionTrigger>
+
+          <AccordionContent>
+            <ul className="flex flex-col gap-gds-1 text-sm">
+              <li>Arable land</li>
+
+              <li>Grassland</li>
+
+              <li>Woodland</li>
+
+              <li>Wetland</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="type">
+          <AccordionTrigger>Agreement type</AccordionTrigger>
+
+          <AccordionContent>
+            <ul className="flex flex-col gap-gds-1 text-sm">
+              <li>Sustainable Farming Incentive</li>
+
+              <li>Countryside Stewardship</li>
+
+              <li>Landscape Recovery</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="status">
+          <AccordionTrigger>Status</AccordionTrigger>
+
+          <AccordionContent>
+            <ul className="flex flex-col gap-gds-1 text-sm">
+              <li>Active</li>
+
+              <li>Pending</li>
+
+              <li>Expired</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const DisabledTransition: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'disableTransition on AccordionContent skips the height animation, opening/closing instantly instead. The animation forces a reflow every frame, fine for text but visibly laggy for something expensive to lay out (a map, a large table).',
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Ordinary section</AccordionTrigger>
+
+        <AccordionContent>Animates open/closed as normal.</AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Expensive-to-render section</AccordionTrigger>
+
+        <AccordionContent disableTransition>
+          Snaps open/closed instantly, no height animation.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const WithDisabledItem: Story = {
+  args: { type: 'multiple', defaultValue: ['item-2'] },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "item-2 starts open to show that a disabled item's content is inert even while expanded — its links and buttons can't be focused or clicked, not just styled to look disabled.",
+      },
+    },
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Available section</AccordionTrigger>
+
+        <AccordionContent>This section is available to expand.</AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-2" disabled>
+        <AccordionTrigger>Unavailable section</AccordionTrigger>
+
+        <AccordionContent>
+          This content is not reachable. <a href="https://example.com">This link</a> cannot be
+          focused or clicked.
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Another available section</AccordionTrigger>
+
+        <AccordionContent>This section is also available.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { createContext, useContext, type ComponentProps } from 'react';
+
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { LuChevronDown } from 'react-icons/lu';
+
+import { cn } from '../../utils/components';
+
+const AccordionItemDisabledContext = createContext(false);
+
+export type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
+
+export const Accordion = ({ className, ...props }: AccordionProps) => (
+  <AccordionPrimitive.Root
+    data-slot="accordion"
+    className={cn('cn-accordion', className)}
+    {...props}
+  />
+);
+
+export type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+
+export const AccordionItem = ({ className, disabled, children, ...props }: AccordionItemProps) => (
+  <AccordionPrimitive.Item
+    data-slot="accordion-item"
+    className={cn('cn-accordion-item', className)}
+    disabled={disabled}
+    {...props}
+  >
+    <AccordionItemDisabledContext.Provider value={disabled ?? false}>
+      {children}
+    </AccordionItemDisabledContext.Provider>
+  </AccordionPrimitive.Item>
+);
+
+export type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger> & {
+  /** Radix hardcodes AccordionHeader to an h3 with no way to override it, a
+   * problem since the correct level actually depends on where the accordion
+   * sits in the consuming page's own heading hierarchy (axe's heading-order
+   * rule fails if there's no h2 above an h3, for example). Rendered via
+   * asChild onto a real heading at this level instead, defaulting to h3 to
+   * match Radix's own default. */
+  level?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+export const AccordionTrigger = ({
+  className,
+  children,
+  level = 'h3',
+  ...props
+}: AccordionTriggerProps) => {
+  const Heading = level;
+
+  return (
+    <AccordionPrimitive.Header asChild>
+      <Heading className="flex">
+        <AccordionPrimitive.Trigger
+          data-slot="accordion-trigger"
+          className={cn('cn-accordion-trigger', className)}
+          {...props}
+        >
+          {children}
+          <LuChevronDown aria-hidden className="cn-accordion-trigger-icon" />
+        </AccordionPrimitive.Trigger>
+      </Heading>
+    </AccordionPrimitive.Header>
+  );
+};
+
+export type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content> & {
+  /** Skips the open/close height animation. It animates the `height`
+   * property, which forces the browser to reflow on every frame, fine for
+   * ordinary text/form content but visibly laggy for something expensive to
+   * lay out (a map, a large table). Snaps open/closed instantly instead. */
+  disableTransition?: boolean;
+};
+
+export const AccordionContent = ({
+  className,
+  children,
+  disableTransition = false,
+  ...props
+}: AccordionContentProps) => {
+  const isDisabled = useContext(AccordionItemDisabledContext);
+
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      data-disable-transition={disableTransition || undefined}
+      className="cn-accordion-content"
+      inert={isDisabled}
+      {...props}
+    >
+      <div className={cn('cn-accordion-content-inner', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+};

package/src/components/Alert/Alert.css

@@ -0,0 +1,129 @@
+@layer components {
+  /* MARK: Alert
+     Three variants that map to three GDS patterns:
+       banner: govuk-notification-banner (coloured header bar + white content)
+       outlined: govuk-error-summary (coloured border, white bg)
+       filled: govuk-panel (fully coloured bg, centred, large title)
+
+     Appearance colour is threaded via --alert-color / --alert-on-color so
+     variant rules don't need to repeat per-colour logic. Warning uses black
+     text/links because yellow backgrounds require dark contrast. */
+
+  /* MARK: Appearances */
+  /* --alert-color / --alert-on-color are used by variant rules below.
+     --alert-link-color colours bare <a> tags in title/description/list slots.
+     For Link components, use appearance="error" (or the appropriate appearance)
+     explicitly, otherwise the content area stays brand-themed. */
+  .cn-alert-appearance-info {
+    --alert-color: var(--color-blue);
+    --alert-on-color: var(--color-white);
+    --alert-link-color: var(--color-link);
+  }
+
+  .cn-alert-appearance-success {
+    --alert-color: var(--color-success);
+    --alert-on-color: var(--color-white);
+    --alert-link-color: var(--color-link);
+  }
+
+  .cn-alert-appearance-warning {
+    --alert-color: var(--color-warning);
+    --alert-on-color: var(--color-on-warning);
+    --alert-link-color: var(--color-body);
+  }
+
+  .cn-alert-appearance-error {
+    --alert-color: var(--color-error);
+    --alert-on-color: var(--color-white);
+    --alert-link-color: var(--color-error);
+  }
+
+  /* MARK: Variant, Banner
+     Root carries the appearance colour as background, the title area is
+     transparent so it inherits that colour. Description/action/list slots
+     get a white background, creating the two-tone look. */
+  .cn-alert-variant-banner {
+    @apply text-base border-form;
+    border: var(--border-width-form) solid var(--alert-color);
+    background-color: var(--alert-color);
+
+    &:focus {
+      outline: var(--outline-width-focus) solid var(--color-focus);
+    }
+
+    & [data-slot='alert-title'] {
+      @apply font-bold;
+      padding: 2px var(--spacing-gds-3) var(--spacing-gds-1);
+      color: var(--alert-on-color);
+      /* transparent border separates header from content in forced-colours mode */
+      border-bottom: 1px solid transparent;
+    }
+
+    & [data-slot='alert-body'] {
+      @apply p-gds-3 bg-white text-body;
+    }
+  }
+
+  /* MARK: Variant, Outlined
+     Simple coloured border, white background. Used for error summaries and
+     inline notices. Title is bold and slightly larger, with no separate header zone. */
+  .cn-alert-variant-outlined {
+    @apply text-base;
+    border: var(--border-width-form) solid var(--alert-color);
+    background-color: var(--color-white);
+    color: var(--color-body);
+    padding: var(--spacing-gds-3);
+
+    @media (min-width: 40em) {
+      padding: var(--spacing-gds-4);
+    }
+
+    &:focus {
+      outline: var(--outline-width-focus) solid var(--color-focus);
+    }
+
+    & [data-slot='alert-title'] {
+      @apply text-xl font-bold;
+      margin-top: 0;
+      margin-bottom: var(--spacing-gds-4);
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  /* MARK: Variant, Filled
+     Fully coloured background, white text, centred. Used for confirmation
+     panels (post-transaction success pages). Title is very large, body text
+     is smaller (typically a reference number or short confirmation line). */
+  .cn-alert-variant-filled {
+    @apply box-border border-form border-transparent text-center wrap-break-word;
+    padding: calc(var(--spacing-gds-7) - var(--border-width-form));
+    background-color: var(--alert-color);
+    color: var(--alert-on-color);
+
+    @media (max-width: 40em) {
+      padding: calc(var(--spacing-gds-4) - var(--border-width-form));
+    }
+
+    & [data-slot='alert-title'] {
+      @apply text-4xl font-bold mt-0 mb-gds-6;
+    }
+
+    & [data-slot='alert-title']:last-child {
+      @apply mb-0;
+    }
+
+    & [data-slot='alert-description'] {
+      @apply text-xl;
+    }
+  }
+
+  /* MARK: Alert List
+     Used inside outlined alerts for error summary link lists.
+     Links are coloured with --alert-link-color (appearance-aware). */
+  .cn-alert-list {
+    @apply list-none m-0 p-0 space-y-gds-2;
+  }
+}