@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { Tabs as TabsPrimitive } from 'radix-ui';
+
+import { cn } from '../../utils/components';
+
+export type TabsProps<T extends string> = Omit<
+  ComponentProps<typeof TabsPrimitive.Root>,
+  'defaultValue' | 'value' | 'onValueChange'
+> & {
+  defaultValue?: T;
+  value?: T;
+  onValueChange?: (value: T) => void;
+};
+
+export const Tabs = <T extends string = string>({
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  ...props
+}: TabsProps<T>) => (
+  <TabsPrimitive.Root
+    data-slot="tabs"
+    className={cn('cn-tabs', className)}
+    defaultValue={defaultValue as string}
+    value={value as string}
+    onValueChange={(value) => onValueChange?.(value as T)}
+    {...props}
+  />
+);
+
+export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+
+export const TabsList = ({ className, ...props }: TabsListProps) => (
+  <TabsPrimitive.List data-slot="tabs-list" className={cn('cn-tabs-list', className)} {...props} />
+);
+
+export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+
+export const TabsTrigger = ({ className, children, ...props }: TabsTriggerProps) => (
+  <TabsPrimitive.Trigger
+    data-slot="tabs-trigger"
+    className={cn('cn-tabs-trigger', className)}
+    {...props}
+  >
+    {/* Bold copy reserves the active-state width so siblings never shift. */}
+    <span aria-hidden className="cn-tabs-trigger-sizer">
+      {children}
+    </span>
+
+    <span className="cn-tabs-trigger-text">{children}</span>
+  </TabsPrimitive.Trigger>
+);
+
+export type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+
+export const TabsContent = ({ className, ...props }: TabsContentProps) => (
+  <TabsPrimitive.Content
+    data-slot="tabs-content"
+    className={cn('cn-tabs-content', className)}
+    {...props}
+  />
+);

package/src/components/Tag/Tag.css

@@ -0,0 +1,8 @@
+@layer components {
+  /* MARK: Tag
+     GDS-style status label rendered as <strong> for semantic importance.
+     Composes Chip utilities for sizing and colour, adds font-bold on top. */
+  .cn-tag {
+    @apply cn-chip font-bold;
+  }
+}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tag } from './Tag';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'GDS-style status label for communicating phase, status, or category. Rendered as `<strong>` for semantic importance. Uses the same colour palette as Chip but always bold.',
+      },
+    },
+  },
+  argTypes: {
+    appearance: {
+      control: { type: 'radio' },
+      options: ['neutral', 'success', 'warning', 'error', 'info'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'base', 'lg'],
+    },
+    children: { control: 'text' },
+  },
+  args: {
+    appearance: 'info',
+    children: 'Alpha',
+    size: 'base',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {};
+
+export const Appearances: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'All appearances share the same subtle tinted palette as Chip.',
+      },
+    },
+  },
+  render: (args) => (
+    <div className="flex flex-wrap gap-gds-2">
+      <Tag {...args} appearance="neutral">
+        Inactive
+      </Tag>
+
+      <Tag {...args} appearance="success">
+        Active
+      </Tag>
+
+      <Tag {...args} appearance="warning">
+        Pending
+      </Tag>
+
+      <Tag {...args} appearance="error">
+        Rejected
+      </Tag>
+
+      <Tag {...args} appearance="info">
+        Alpha
+      </Tag>
+    </div>
+  ),
+};
+
+export const Small: Story = {
+  args: { size: 'sm', children: 'Beta' },
+};
+
+export const Large: Story = {
+  args: { size: 'lg', children: 'New' },
+};
+
+export const Inline: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tags use negative margins so they sit inline within body text without inflating line height.',
+      },
+    },
+  },
+  render: (args) => (
+    <p>
+      This service is <Tag {...args} /> and actively being developed.
+    </p>
+  ),
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+
+const TAG_APPEARANCES = {
+  neutral: 'cn-chip-appearance-neutral',
+  success: 'cn-chip-appearance-success',
+  warning: 'cn-chip-appearance-warning',
+  error: 'cn-chip-appearance-error',
+  info: 'cn-chip-appearance-info',
+} as const;
+
+const TAG_SIZES = {
+  sm: 'cn-chip-size-sm',
+  base: 'cn-chip-size-base',
+  lg: 'cn-chip-size-lg',
+} as const;
+
+export type TagAppearance = keyof typeof TAG_APPEARANCES;
+export type TagSize = keyof typeof TAG_SIZES;
+
+export type TagProps = ComponentProps<'strong'> & {
+  appearance: TagAppearance;
+  size?: TagSize;
+};
+
+export const Tag = ({ className, appearance, size = 'base', ...props }: TagProps) => (
+  <strong
+    data-slot="tag"
+    data-size={size}
+    className={cn('cn-tag', TAG_APPEARANCES[appearance], TAG_SIZES[size], className)}
+    {...props}
+  />
+);

package/src/components/Textarea/Textarea.css

@@ -0,0 +1,38 @@
+@layer components {
+  /* MARK: Textarea
+     GDS textarea: same border and focus as Input, vertical resize only.
+     Height is content-driven via rows, min-height matches the input baseline. */
+  .cn-textarea {
+    @apply cn-form-border w-full p-gds-1 text-base box-border appearance-none resize-y min-h-32;
+
+    &:focus {
+      @apply outline-focus;
+      box-shadow: inset 0 0 0 var(--border-width-form) var(--color-divider-input);
+    }
+
+    &[aria-invalid='true'],
+    &:user-invalid {
+      @apply border-error;
+
+      &:focus {
+        box-shadow: inset 0 0 0 var(--border-width-form) var(--color-error);
+      }
+    }
+
+    &[readonly] {
+      @apply bg-wash resize-none;
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      @apply opacity-50 cursor-not-allowed select-none;
+      color: inherit;
+    }
+  }
+
+  /* MARK: Appearances */
+  .cn-textarea-appearance-code {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.05em;
+  }
+}

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Textarea } from './Textarea';
+import { CopyButton } from '../CopyButton/CopyButton';
+import { ErrorText } from '../ErrorText/ErrorText';
+import { FormGroup } from '../Form/FormGroup';
+import { HintText } from '../HintText/HintText';
+import { InputGroup, InputToolbar } from '../InputGroup/InputGroup';
+import { Label } from '../Label/Label';
+import { TextareaCount, TextareaCountMessage } from '../TextareaCount/TextareaCount';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'GDS-style multi-line text input. Resizes vertically. Compose with `TextareaCount` and `TextareaCountMessage` to add character or word count feedback. Use a vertical `InputGroup` with `InputToolbar` to add action buttons above the field.',
+      },
+    },
+  },
+  argTypes: {
+    appearance: {
+      control: { type: 'radio' },
+      options: ['default', 'code'],
+    },
+    rows: { control: { type: 'number', min: 1, max: 20 } },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    rows: 5,
+    appearance: 'default',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+const SHARE_URL = 'https://environment.data.gov.uk/share/flood-risk-assessment/abc123xyz';
+
+export const Default: Story = {};
+
+export const Invalid: Story = {
+  render: (args) => (
+    <FormGroup invalid>
+      <Label htmlFor="textarea-invalid">Description</Label>
+
+      <ErrorText id="textarea-invalid-error">Enter a description</ErrorText>
+
+      <Textarea
+        id="textarea-invalid"
+        aria-invalid
+        aria-describedby="textarea-invalid-error"
+        {...args}
+      />
+    </FormGroup>
+  ),
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    defaultValue: 'This text can be selected and copied but not edited.',
+    rows: 3,
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, value: 'This content cannot be edited' },
+};
+
+export const Code: Story = {
+  args: {
+    appearance: 'code',
+    rows: 8,
+    defaultValue: 'SELECT *\nFROM users\nWHERE active = true;',
+  },
+};
+
+export const WithToolbar: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col gap-gds-1">
+        <Label htmlFor="share-url">Share link</Label>
+
+        <HintText id="share-url-hint">Copy this link to share your flood risk assessment.</HintText>
+
+        <InputGroup direction="vertical">
+          <InputToolbar>
+            <CopyButton appearance="ghost" size="sm" content={SHARE_URL} />
+          </InputToolbar>
+
+          <Textarea
+            id="share-url"
+            readOnly
+            rows={3}
+            value={SHARE_URL}
+            aria-describedby="share-url-hint"
+          />
+        </InputGroup>
+      </div>
+    );
+  },
+};
+
+export const WithToolbarAndCount: Story = {
+  render: () => (
+    <div className="flex flex-col gap-gds-1">
+      <Label htmlFor="notes-count">Notes</Label>
+
+      <HintText id="notes-count-hint">Do not enter more than 200 characters.</HintText>
+
+      <TextareaCount maxLength={200}>
+        <InputGroup direction="vertical">
+          <InputToolbar>
+            <CopyButton appearance="ghost" size="sm" content="Some content" />
+          </InputToolbar>
+
+          <Textarea id="notes-count" rows={5} aria-describedby="notes-count-hint" />
+        </InputGroup>
+
+        <TextareaCountMessage />
+      </TextareaCount>
+    </div>
+  ),
+};

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useContext, type ChangeEvent, type ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+import { TextareaCountContext } from '../TextareaCount/TextareaCount';
+
+const TEXTAREA_APPEARANCES = {
+  default: '',
+  code: 'cn-textarea-appearance-code',
+} as const;
+
+export type TextareaAppearance = keyof typeof TEXTAREA_APPEARANCES;
+
+export type TextareaProps = ComponentProps<'textarea'> & {
+  appearance?: TextareaAppearance;
+};
+
+export const Textarea = ({
+  className,
+  appearance = 'default',
+  rows = 5,
+  onChange,
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...props
+}: TextareaProps) => {
+  const countContext = useContext(TextareaCountContext);
+  const isCountOver = countContext !== null && countContext.currentCount > countContext.maxCount;
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    countContext?.reportValue(event.target.value);
+    onChange?.(event);
+  };
+
+  const describedBy =
+    [ariaDescribedby, countContext?.messageId].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <textarea
+      rows={rows}
+      data-slot="textarea"
+      aria-describedby={describedBy}
+      aria-invalid={ariaInvalid ?? (isCountOver ? 'true' : undefined)}
+      className={cn('cn-textarea', TEXTAREA_APPEARANCES[appearance], className)}
+      onChange={handleChange}
+      {...props}
+    />
+  );
+};

package/src/components/TextareaCount/TextareaCount.css

@@ -0,0 +1,17 @@
+@layer components {
+  /* MARK: Count message
+     Mirrors hint text styling in the normal state.
+     Hidden (but still in DOM for live region) when below threshold.
+     Over-limit state uses error styling. */
+  .cn-textarea-count-message {
+    @apply text-sm text-body-secondary mt-gds-1;
+  }
+
+  .cn-textarea-count-message[data-hidden] {
+    visibility: hidden;
+  }
+
+  .cn-textarea-count-message[data-over] {
+    @apply text-error font-bold;
+  }
+}

package/src/components/TextareaCount/TextareaCount.stories.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TextareaCount, TextareaCountMessage } from './TextareaCount';
+import { FormGroup } from '../Form/FormGroup';
+import { Label } from '../Label/Label';
+import { Textarea } from '../Textarea/Textarea';
+
+const meta: Meta<typeof TextareaCount> = {
+  title: 'Components/TextareaCount',
+  component: TextareaCount,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Wrapper that adds live character or word count feedback to a `Textarea`. Renders into context. Place `TextareaCountMessage` anywhere below the textarea to show the count hint.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextareaCount>;
+
+export const CharacterCount: Story = {
+  render: () => (
+    <div>
+      <Label htmlFor="char-count-textarea">Description</Label>
+
+      <TextareaCount maxLength={200}>
+        <Textarea id="char-count-textarea" />
+
+        <TextareaCountMessage />
+      </TextareaCount>
+    </div>
+  ),
+};
+
+export const WordCount: Story = {
+  render: () => (
+    <div>
+      <Label htmlFor="word-count-textarea">Summary</Label>
+
+      <TextareaCount maxWords={50}>
+        <Textarea id="word-count-textarea" />
+
+        <TextareaCountMessage />
+      </TextareaCount>
+    </div>
+  ),
+};
+
+export const WithThreshold: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The count message is hidden until the user reaches 75% of the limit, then appears. Type more than 150 characters to see it.',
+      },
+    },
+  },
+  render: () => (
+    <div>
+      <Label htmlFor="threshold-textarea">Description</Label>
+
+      <TextareaCount maxLength={200} threshold={0.75}>
+        <Textarea id="threshold-textarea" />
+
+        <TextareaCountMessage />
+      </TextareaCount>
+    </div>
+  ),
+};
+
+export const PreFilled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Pass `initialValue` to `TextareaCount` to seed the count when the textarea has a pre-filled value.',
+      },
+    },
+  },
+  render: () => {
+    const value = 'This textarea already has some content in it.';
+
+    return (
+      <div>
+        <Label htmlFor="prefilled-textarea">Description</Label>
+
+        <TextareaCount maxLength={200} initialValue={value}>
+          <Textarea id="prefilled-textarea" defaultValue={value} />
+
+          <TextareaCountMessage />
+        </TextareaCount>
+      </div>
+    );
+  },
+};
+
+export const OverLimit: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The count message switches to error styling when the user exceeds the limit. `onValidityChange` fires whenever the over-limit boundary is crossed, letting a parent `FormGroup` react to the state.',
+      },
+    },
+  },
+  render: () => {
+    const value = 'a'.repeat(220);
+    const [isOver, setIsOver] = useState(false);
+
+    return (
+      <FormGroup invalid={isOver}>
+        <Label htmlFor="over-limit-textarea">Description</Label>
+
+        <TextareaCount maxLength={200} initialValue={value} onValidityChange={setIsOver}>
+          <Textarea id="over-limit-textarea" defaultValue={value} />
+
+          <TextareaCountMessage />
+        </TextareaCount>
+      </FormGroup>
+    );
+  },
+};

package/src/components/TextareaCount/TextareaCount.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+
+import { cn } from '../../utils/components';
+
+type TextareaCountMode = 'characters' | 'words';
+
+export type TextareaCountContextValue = {
+  mode: TextareaCountMode;
+  maxCount: number;
+  threshold: number;
+  currentCount: number;
+  messageId: string;
+  reportValue: (value: string) => void;
+};
+
+export const TextareaCountContext = createContext<TextareaCountContextValue | null>(null);
+
+export type TextareaCountProps = {
+  children: ReactNode;
+  threshold?: number;
+  initialValue?: string;
+  onValidityChange?: (isOver: boolean) => void;
+} & ({ maxLength: number; maxWords?: never } | { maxWords: number; maxLength?: never });
+
+const countWords = (value: string) => (value.trim() === '' ? 0 : value.trim().split(/\s+/).length);
+
+export const TextareaCount = ({
+  children,
+  maxLength,
+  maxWords,
+  threshold = 0,
+  initialValue = '',
+  onValidityChange,
+}: TextareaCountProps) => {
+  const mode: TextareaCountMode = maxWords !== undefined ? 'words' : 'characters';
+  const maxCount = (mode === 'words' ? maxWords : maxLength) ?? 0;
+  const messageId = useId();
+
+  const [currentCount, setCurrentCount] = useState(() =>
+    mode === 'words' ? countWords(initialValue) : initialValue.length,
+  );
+
+  const isCountOver = currentCount > maxCount;
+
+  useEffect(() => {
+    onValidityChange?.(isCountOver);
+  }, [isCountOver, onValidityChange]);
+
+  const reportValue = useCallback(
+    (value: string) => {
+      setCurrentCount(mode === 'words' ? countWords(value) : value.length);
+    },
+    [mode],
+  );
+
+  const contextValue = useMemo(
+    () => ({ mode, maxCount, threshold, currentCount, messageId, reportValue }),
+    [mode, maxCount, threshold, currentCount, messageId, reportValue],
+  );
+
+  return (
+    <TextareaCountContext.Provider value={contextValue}>{children}</TextareaCountContext.Provider>
+  );
+};
+
+export type TextareaCountMessageProps = ComponentProps<'p'>;
+
+export const TextareaCountMessage = ({ className, ...props }: TextareaCountMessageProps) => {
+  const context = useContext(TextareaCountContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { mode, maxCount, threshold, currentCount, messageId } = context;
+  const remaining = maxCount - currentCount;
+  const isOver = remaining < 0;
+  const isHidden = threshold > 0 && currentCount < maxCount * threshold;
+  const count = Math.abs(remaining);
+  const unit = mode === 'words' ? 'word' : 'character';
+  const label = count === 1 ? unit : `${unit}s`;
+
+  return (
+    <p
+      id={messageId}
+      aria-live="polite"
+      data-slot="textarea-count-message"
+      data-over={isOver ? true : undefined}
+      data-hidden={isHidden ? true : undefined}
+      className={cn('cn-textarea-count-message', className)}
+      {...props}
+    >
+      {isOver ? `You have ${count} ${label} too many` : `You have ${count} ${label} remaining`}
+    </p>
+  );
+};