@tpzdsp/next-toolkit 2.5.0 → 3.0.0

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { InputGroup, InputPrefix, InputSuffix, InputSwatch } from './InputGroup';
+import { ErrorText } from '../ErrorText/ErrorText';
+import { FormGroup } from '../Form/FormGroup';
+import { Input } from '../Input/Input';
+import { Label } from '../Label/Label';
+
+const meta: Meta<typeof InputGroup> = {
+  title: 'Components/InputGroup',
+  component: InputGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Layout wrapper for attaching addons to an input. Use `InputPrefix` and `InputSuffix` as positioning containers, and `InputSwatch` inside them for decorative GDS-style labels (currency, units). For interactive addons such as buttons, place them directly inside `InputPrefix` or `InputSuffix`, they receive gap spacing automatically.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputGroup>;
+
+export const WithPrefix: Story = {
+  render: () => (
+    <div>
+      <Label htmlFor="prefix-input">Cost per unit</Label>
+
+      <InputGroup>
+        <InputPrefix>
+          <InputSwatch>£</InputSwatch>
+        </InputPrefix>
+
+        <Input id="prefix-input" inputMode="numeric" size="short" />
+      </InputGroup>
+    </div>
+  ),
+};
+
+export const WithSuffix: Story = {
+  render: () => (
+    <div>
+      <Label htmlFor="suffix-input">Weight</Label>
+
+      <InputGroup>
+        <Input id="suffix-input" inputMode="numeric" size="short" />
+
+        <InputSuffix>
+          <InputSwatch>kg</InputSwatch>
+        </InputSuffix>
+      </InputGroup>
+    </div>
+  ),
+};
+
+export const WithPrefixAndSuffix: Story = {
+  render: () => (
+    <div>
+      <Label htmlFor="both-input">Cost per kilogram</Label>
+
+      <InputGroup>
+        <InputPrefix>
+          <InputSwatch>£</InputSwatch>
+        </InputPrefix>
+
+        <Input id="both-input" inputMode="numeric" size="short" />
+
+        <InputSuffix>
+          <InputSwatch>per kg</InputSwatch>
+        </InputSuffix>
+      </InputGroup>
+    </div>
+  ),
+};
+
+export const WithPrefixAndSuffixDisabled: Story = {
+  render: () => (
+    <FormGroup>
+      <Label htmlFor="both-input-disabled">Cost per kilogram</Label>
+
+      <InputGroup>
+        <InputPrefix>
+          <InputSwatch>£</InputSwatch>
+        </InputPrefix>
+
+        <Input id="both-input-disabled" inputMode="numeric" size="short" disabled />
+
+        <InputSuffix>
+          <InputSwatch>per kg</InputSwatch>
+        </InputSuffix>
+      </InputGroup>
+    </FormGroup>
+  ),
+};
+
+export const WithPrefixAndSuffixInvalid: Story = {
+  render: () => (
+    <FormGroup invalid>
+      <Label htmlFor="both-input-invalid">Cost per kilogram</Label>
+
+      <ErrorText id="cost-error">Enter a cost per kilogram</ErrorText>
+
+      <InputGroup>
+        <InputPrefix>
+          <InputSwatch>£</InputSwatch>
+        </InputPrefix>
+
+        <Input
+          id="both-input-invalid"
+          inputMode="numeric"
+          size="short"
+          aria-invalid
+          aria-describedby="cost-error"
+        />
+
+        <InputSuffix>
+          <InputSwatch>per kg</InputSwatch>
+        </InputSuffix>
+      </InputGroup>
+    </FormGroup>
+  ),
+};

package/src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+
+export type InputGroupDirection = 'horizontal' | 'vertical';
+
+export type InputGroupProps = ComponentProps<'div'> & {
+  direction?: InputGroupDirection;
+};
+
+export const InputGroup = ({ className, direction = 'horizontal', ...props }: InputGroupProps) => (
+  <div
+    data-slot="input-group"
+    data-direction={direction}
+    className={cn('cn-input-group', className)}
+    {...props}
+  />
+);
+
+export type InputToolbarProps = ComponentProps<'div'>;
+
+export const InputToolbar = ({ className, ...props }: InputToolbarProps) => (
+  <div data-slot="input-toolbar" className={cn('cn-input-toolbar', className)} {...props} />
+);
+
+export type InputPrefixProps = ComponentProps<'div'>;
+
+export const InputPrefix = ({ className, ...props }: InputPrefixProps) => (
+  <div data-slot="input-prefix" className={cn('cn-input-prefix', className)} {...props} />
+);
+
+export type InputSuffixProps = ComponentProps<'div'>;
+
+export const InputSuffix = ({ className, ...props }: InputSuffixProps) => (
+  <div data-slot="input-suffix" className={cn('cn-input-suffix', className)} {...props} />
+);
+
+export type InputSwatchProps = ComponentProps<'div'>;
+
+export const InputSwatch = ({ className, ...props }: InputSwatchProps) => (
+  <div
+    aria-hidden="true"
+    data-slot="input-swatch"
+    className={cn('cn-input-swatch', className)}
+    {...props}
+  />
+);

package/src/components/InsetText/InsetText.css

@@ -0,0 +1,5 @@
+@layer components {
+  .cn-inset-text {
+    @apply border-l-wide border-divider p-gds-3;
+  }
+}

package/src/components/InsetText/InsetText.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { InsetText } from './InsetText';
+
+const meta: Meta<typeof InsetText> = {
+  title: 'Components/InsetText',
+  component: InsetText,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Use the inset text component to differentiate a block of text from the content that surrounds it.',
+      },
+    },
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+  args: {
+    children:
+      'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. ',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InsetText>;
+
+export const Default: Story = {};

package/src/components/InsetText/InsetText.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+
+export type InsetTextProps = ComponentProps<'div'>;
+
+export const InsetText = ({ className, ...props }: InsetTextProps) => {
+  return <div className={cn('cn-inset-text', className)} {...props} />;
+};

package/src/components/Keyboard/Keyboard.css

@@ -0,0 +1,9 @@
+@layer components {
+  .cn-kbd-group {
+    @apply flex gap-gds-1 shrink-0 whitespace-nowrap;
+  }
+
+  .cn-kbd {
+    @apply cn-chip-appearance-info cn-chip-size-sm;
+  }
+}

package/src/components/Keyboard/Keyboard.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Keyboard, KeyboardGroup } from './Keyboard';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+const meta: Meta<typeof Keyboard> = {
+  title: 'Components/Keyboard',
+  component: Keyboard,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Used to display textual user input from keyboard.',
+      },
+    },
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+  args: {
+    children: 'Ctrl + C',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Keyboard>;
+
+export const Default: Story = {};
+
+export const Symbols: Story = {
+  render: () => (
+    <KeyboardGroup>
+      <Keyboard>⌘</Keyboard>
+
+      <Keyboard>⇧</Keyboard>
+
+      <Keyboard>⌥</Keyboard>
+
+      <Keyboard>⌃</Keyboard>
+    </KeyboardGroup>
+  ),
+};
+
+export const Grouped: Story = {
+  render: () => (
+    <Paragraph>
+      Use{' '}
+      <KeyboardGroup>
+        <Keyboard>Ctrl + C</Keyboard>
+
+        <Keyboard>Ctrl + V</Keyboard>
+      </KeyboardGroup>{' '}
+      to copy and paste text on Windows, or{' '}
+      <KeyboardGroup>
+        <Keyboard>⌘ + C</Keyboard>
+
+        <Keyboard>⌘ + V</Keyboard>
+      </KeyboardGroup>{' '}
+      on macOS.
+    </Paragraph>
+  ),
+};

package/src/components/Keyboard/Keyboard.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+
+export type KeyboardGroupProps = ComponentProps<'kbd'>;
+
+export const KeyboardGroup = ({ className, ...props }: KeyboardGroupProps) => {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('cn-kbd-group inline-flex items-center', className)}
+      {...props}
+    />
+  );
+};
+
+export type KeyboardProps = ComponentProps<'kbd'>;
+
+export const Keyboard = ({ className, ...props }: KeyboardProps) => {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'cn-kbd pointer-events-none inline-flex items-center justify-center select-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Label/Label.css

@@ -0,0 +1,27 @@
+@layer components {
+  /*
+    MARK: Label
+    GDS labels are block elements, bold, in the primary text colour.
+    No external margin. Spacing is the consumer's job.
+  */
+  .cn-label {
+    @apply block text-lg text-body cursor-pointer;
+
+    /* Three ways a label can end up describing a disabled control:
+       - ~ (a later sibling) covers FormGroup's own order, label then
+         control.
+       - :has(:is(...)) > & (an ancestor with a disabled child) covers the
+         opposite order, control then label, e.g. FieldItem/GDS's own
+         radios and checkboxes convention, and Radio/Checkbox's own
+         standalone stories. CSS has no "previous sibling" selector, ~ can
+         only ever match a sibling that comes after this one, so that combinator
+         alone can never catch this order regardless of how it's written.
+       - fieldset:disabled covers the whole group being disabled, not just
+         one control. */
+    &:has(:is(:disabled, [aria-disabled='true']), ~ :is(:disabled, [aria-disabled='true'])),
+    :has(:is(:disabled, [aria-disabled='true'])) > &,
+    fieldset:disabled & {
+      @apply cursor-not-allowed select-none text-body-secondary;
+    }
+  }
+}

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from './Label';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Use a label to associate text with form controls and improve accessibility.',
+      },
+    },
+  },
+  argTypes: {
+    htmlFor: { control: 'text' },
+    children: { control: 'text' },
+  },
+  args: {
+    htmlFor: 'email',
+    children: 'Email address',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <fieldset disabled>
+      <Label>{args.children}</Label>
+
+      <input className="border-form border-input disabled:opacity-50" />
+    </fieldset>
+  ),
+};

package/src/components/Label/Label.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '../../utils';
+
+export type LabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+
+export const Label = ({ className, ...props }: LabelProps) => (
+  <LabelPrimitive.Root
+    {...props}
+    data-slot="label"
+    className={cn('cn-label flex items-center', className)}
+  />
+);

package/src/components/LayerSwitcher/LayerSwitcher.css

@@ -0,0 +1,59 @@
+@layer components {
+  /* MARK: Option button
+     Uses ghost button appearance via @apply so interaction states match
+     cn-button-appearance-ghost exactly. Layout overrides (flex-col, full width)
+     sit on top. Selected state wins via higher specificity ([aria-checked]). */
+  .cn-layer-switcher-option {
+    @apply cn-button flex flex-col items-center gap-gds-1 p-gds-1 text-sm bg-transparent text-body;
+
+    /* Suppress the base :focus-visible outline, focus is shown via border + inset ring */
+    &:focus {
+      @apply outline-none;
+    }
+
+    &:hover:not(:disabled) {
+      @apply bg-transparent;
+    }
+
+    /* Ghost-style: no bottom press shadow on focus (mouse or keyboard) */
+    &:focus:not(:active):not(:hover) {
+      @apply shadow-none;
+    }
+
+    /* Ghost has no bottom border to press into, so no shift or border clear */
+    &:active:not(:disabled) {
+      @apply bg-black/5 transform-none;
+    }
+  }
+
+  /* MARK: Selected state */
+  .cn-layer-switcher-option[aria-checked='true'] {
+    @apply bg-accent text-on-accent;
+
+    /* cn-button's :focus:not(:active):not(:hover) (specificity 0,4,0) sets bg-focus.
+       This rule wins at 0,5,0 to keep accent background while the yellow border/ring
+       from :focus (border-color + box-shadow only) still shows keyboard focus. */
+    &:focus:not(:active):not(:hover) {
+      @apply bg-accent text-on-accent;
+    }
+
+    &:hover:not(:disabled) {
+      @apply bg-focus text-on-focus;
+    }
+  }
+
+  /* MARK: Thumbnail */
+  .cn-layer-switcher-option-image {
+    @apply max-w-gds-9 max-h-gds-9 object-contain border-panel;
+    border-width: var(--focus-ring-width);
+  }
+
+  .cn-layer-switcher-option[aria-checked='true'] .cn-layer-switcher-option-image {
+    filter: none;
+  }
+
+  /* MARK: Label */
+  .cn-layer-switcher-option-label {
+    @apply text-xs leading-tight text-center;
+  }
+}

package/src/components/LayerSwitcher/LayerSwitcher.stories.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LayerSwitcher } from './LayerSwitcher';
+import type { LayerOption } from './LayerSwitcher';
+
+const EXAMPLE_LAYERS: LayerOption[] = [
+  { name: 'OS Map' },
+  { name: 'OS Light' },
+  { name: 'OS Outdoor' },
+  { name: 'Satellite' },
+];
+
+const IMAGE_LAYERS: LayerOption[] = [
+  {
+    name: 'OS Map',
+    image:
+      'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%23a8d5a2"/><rect x="10" y="25" width="40" height="4" fill="%23888"/></svg>',
+  },
+  {
+    name: 'OS Light',
+    image:
+      'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%23e8e8e8"/><rect x="10" y="25" width="40" height="4" fill="%23ccc"/></svg>',
+  },
+  {
+    name: 'Satellite',
+    image:
+      'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%23228B22"/><rect x="10" y="25" width="40" height="4" fill="%23555"/></svg>',
+  },
+];
+
+const meta: Meta<typeof LayerSwitcher> = {
+  title: 'Components/LayerSwitcher',
+  component: LayerSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Icon button that opens a popover for selecting a basemap layer. Intended for use inside a map toolbar.
+
+Each layer option is a radio-button card showing an optional thumbnail image and the layer name. The trigger uses \`appearance="panel"\` so it integrates visually with a compressed \`ButtonGroup\` toolbar.
+
+**Props:**
+- \`layers\`: array of \`LayerOption\` objects (\`name\`, optional \`image\` URL)
+- \`activeLayerName\`: the currently selected layer name
+- \`onSelectLayer\`: called with the layer name when a new option is chosen
+        `.trim(),
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LayerSwitcher>;
+
+const DefaultStory = () => {
+  const [active, setActive] = useState<string | null>('OS Map');
+
+  return (
+    <div className="flex items-start">
+      <LayerSwitcher layers={EXAMPLE_LAYERS} activeLayerName={active} onSelectLayer={setActive} />
+    </div>
+  );
+};
+
+const WithImagesStory = () => {
+  const [active, setActive] = useState<string | null>('OS Map');
+
+  return (
+    <div className="flex items-start">
+      <LayerSwitcher layers={IMAGE_LAYERS} activeLayerName={active} onSelectLayer={setActive} />
+    </div>
+  );
+};
+
+const NoActiveLayerStory = () => {
+  const [active, setActive] = useState<string | null>(null);
+
+  return (
+    <div className="flex items-start">
+      <LayerSwitcher layers={EXAMPLE_LAYERS} activeLayerName={active} onSelectLayer={setActive} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <DefaultStory />,
+};
+
+export const WithImages: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When each layer has an `image` URL the thumbnail is shown above the name. Non-active thumbnails are rendered in greyscale.',
+      },
+    },
+  },
+  render: () => <WithImagesStory />,
+};
+
+export const NoActiveLayer: Story = {
+  parameters: {
+    docs: {
+      description: { story: 'When `activeLayerName` is `null` no option is shown as selected.' },
+    },
+  },
+  render: () => <NoActiveLayerStory />,
+};

package/src/components/LayerSwitcher/LayerSwitcher.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { LuLayers } from 'react-icons/lu';
+
+import { Button } from '../Button/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover';
+
+export type LayerOption = {
+  name: string;
+  image?: string;
+};
+
+export type LayerSwitcherProps = Omit<
+  ComponentProps<typeof Button>,
+  'variant' | 'appearance' | 'children'
+> & {
+  layers: LayerOption[];
+  activeLayerName: string | null;
+  onSelectLayer: (name: string) => void;
+};
+
+export const LayerSwitcher = ({
+  layers,
+  activeLayerName,
+  onSelectLayer,
+  ...props
+}: LayerSwitcherProps) => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button variant="icon" appearance="panel" aria-label="Select basemap" {...props}>
+        <LuLayers aria-hidden />
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent
+      side="left"
+      align="start"
+      sideOffset={8}
+      aria-label="Basemap selector"
+      className="w-44 p-gds-2"
+    >
+      <div role="radiogroup" aria-label="Basemap options" className="flex flex-col gap-gds-1">
+        {layers.map(({ name, image }) => (
+          <button
+            key={name}
+            type="button"
+            role="radio"
+            aria-checked={name === activeLayerName}
+            onClick={() => onSelectLayer(name)}
+            className="cn-layer-switcher-option"
+          >
+            {image ? <img src={image} alt="" className="cn-layer-switcher-option-image" /> : null}
+            <span className="cn-layer-switcher-option-label">{name}</span>
+          </button>
+        ))}
+      </div>
+    </PopoverContent>
+  </Popover>
+);

package/src/components/Layout/401/401.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Unauthorized } from './401';
+
+const meta: Meta<typeof Unauthorized> = {
+  title: 'Components/Layout/401',
+  component: Unauthorized,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Use Unauthorized for displaying text when a user is not signed in and must authenticate to view a page (401).',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Unauthorized>;
+
+export const Default: Story = {};

package/src/components/Layout/401/401.tsx

@@ -0,0 +1 @@
+export { Forbidden as Unauthorized } from '../403/403';