@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/InfoBox/InfoBox.tsx

@@ -1,171 +1,44 @@
-'use client';
+import type { ComponentProps, ReactNode } from 'react';
 
-import { type ReactNode, type ComponentType, useRef, useId, useState } from 'react';
+import { LuInfo } from 'react-icons/lu';
 
-import { FaInfoCircle } from 'react-icons/fa';
+import { cn } from '../../utils/components';
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover';
 
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  arrow,
-  useClick,
-  useDismiss,
-  useRole,
-  useInteractions,
-  FloatingArrow,
-  FloatingFocusManager,
-  FloatingPortal,
-  type Placement,
-} from '@floating-ui/react';
-
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Props = {
-  /** Optional title displayed at the top of the info box content */
-  title?: string;
-  /** Content to display inside the info box */
+export type InfoBoxProps = Pick<
+  ComponentProps<typeof PopoverContent>,
+  'side' | 'align' | 'sideOffset' | 'className'
+> & {
   children: ReactNode;
-  /** Whether the info box starts open (default: false) */
-  defaultOpen?: boolean;
-  /** Callback when the info box opens or closes */
-  onOpenChange?: (isOpen: boolean) => void;
-  /** Maximum width of the info box (default: '320px') */
-  maxWidth?: string;
-  /** Custom aria-label for the trigger button (default: 'Show information') */
-  triggerLabel?: string;
-  /** Preferred placement (Floating UI will auto-adjust if needed) */
-  placement?: Placement;
-  /** Custom icon component to replace the default FaInfoCircle */
-  icon?: ComponentType<{ className?: string }>;
+  label?: string;
 };
 
-export type InfoBoxProps = ExtendProps<'div', Props>;
-
 export const InfoBox = ({
-  title,
   children,
-  defaultOpen = false,
-  onOpenChange,
-  maxWidth = '320px',
-  triggerLabel = 'Show information',
-  placement = 'bottom-start',
-  icon: Icon = FaInfoCircle,
+  label = 'More information',
+  side,
+  align,
+  sideOffset,
   className,
-  ...props
-}: InfoBoxProps) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const arrowRef = useRef(null);
-
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: (open) => {
-      setIsOpen(open);
-      onOpenChange?.(open);
-    },
-    placement,
-    middleware: [
-      offset(12), // Distance from trigger
-      flip(), // Flip to opposite side if not enough space
-      shift({ padding: 8 }), // Shift along the axis to stay in viewport
-      arrow({ element: arrowRef }), // Arrow pointing to trigger
-    ],
-    whileElementsMounted: autoUpdate, // Update position on scroll/resize
-  });
-
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context);
-
-  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
-
-  const triggerId = useId();
-  const contentId = useId();
-  const titleId = useId();
-
-  const triggerClasses = cn(
-    // Base styles - button structure only
-    'inline-flex items-center justify-center',
-    'w-6 h-6 rounded-full',
-    'bg-transparent border-none',
-    // Focus outline only
-    'focus:outline focus:outline-[3px] focus:outline-focus',
-  );
-
-  const iconClasses = cn(
-    // Icon size
-    'w-5 h-5',
-    // Icon color - yellow when open, auto when closed
-    isOpen ? 'text-focus' : '',
-    // Hover state - yellow
-    'hover:text-focus',
-    // Focus state - yellow
-    'focus:text-focus',
-    // Transition
-    'transition-colors duration-150',
-  );
-
-  const contentClasses = cn(
-    // Base styles
-    'bg-white rounded-lg shadow-lg border border-gray-200',
-    'p-4',
-    // Width constraints
-    'min-w-[280px]',
-    // Z-index
-    'z-50',
-  );
-
-  return (
-    <div className={cn('relative inline-flex', className)} {...props}>
+}: InfoBoxProps) => (
+  <Popover>
+    <PopoverTrigger asChild>
       <button
-        ref={refs.setReference}
-        id={triggerId}
         type="button"
-        aria-expanded={isOpen}
-        aria-controls={contentId}
-        aria-haspopup="dialog"
-        aria-label={triggerLabel}
-        className={triggerClasses}
-        {...getReferenceProps()}
+        aria-label={label}
+        className="cn-button cn-button-appearance-ghost cn-info-box-trigger"
       >
-        <Icon className={iconClasses} aria-hidden="true" />
+        <LuInfo aria-hidden className="cn-info-box-icon" />
       </button>
-
-      {isOpen ? (
-        <FloatingPortal>
-          <FloatingFocusManager context={context} modal={false}>
-            <div
-              ref={refs.setFloating}
-              id={contentId}
-              aria-labelledby={title ? titleId : undefined}
-              aria-label={title ? undefined : 'Information'}
-              style={{
-                ...floatingStyles,
-                maxWidth: `min(${maxWidth}, calc(100vw - 32px))`,
-              }}
-              className={contentClasses}
-              {...getFloatingProps()}
-            >
-              <FloatingArrow ref={arrowRef} context={context} className="fill-white" />
-
-              {title ? (
-                <h2 id={titleId} className="text-sm font-semibold text-gray-900 mb-2">
-                  {title}
-                </h2>
-              ) : null}
-              <div
-                className="text-sm text-gray-700 max-h-[min(24rem,calc(100vh-200px))]
-                  overflow-y-auto"
-              >
-                {children}
-              </div>
-            </div>
-          </FloatingFocusManager>
-        </FloatingPortal>
-      ) : null}
-    </div>
-  );
-};
+    </PopoverTrigger>
+
+    <PopoverContent
+      side={side}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn('max-w-xs', className)}
+    >
+      {children}
+    </PopoverContent>
+  </Popover>
+);

package/src/components/Input/Input.css

@@ -0,0 +1,77 @@
+@layer components {
+  /* MARK: Input
+     GDS text input: 40px fixed height, 5px padding, 2px border via cn-form-border.
+     Focus uses the GDS focused-form-input pattern: yellow outline + inset black shadow. */
+  .cn-input {
+    @apply cn-form-border w-full h-10 p-gds-1 text-base box-border appearance-none bg-panel
+      text-body;
+
+    &: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 {
+        @apply border-divider-input;
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      @apply opacity-50 cursor-not-allowed;
+      color: inherit;
+      -webkit-user-select: none;
+      user-select: none;
+
+      &::placeholder {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    }
+  }
+
+  /* Remove browser-native number spinners */
+  .cn-input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  /* MARK: Sizes
+     em-based max-widths constrain the input to its expected content length.
+     Based on GDS character-width classes. */
+  .cn-input-size-date-part {
+    max-width: 2.75em;
+  }
+  .cn-input-size-year {
+    max-width: 4.5em;
+  }
+  .cn-input-size-postcode {
+    max-width: 5.5em;
+  }
+  .cn-input-size-short {
+    max-width: 11.5em;
+  }
+  .cn-input-size-medium {
+    max-width: 20.5em;
+  }
+  .cn-input-size-long {
+    max-width: 29.5em;
+  }
+
+  /* MARK: Appearances */
+
+  .cn-input-appearance-code {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.05em;
+  }
+}

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input } from './Input';
+import { ErrorText } from '../ErrorText/ErrorText';
+import { FormGroup } from '../Form/FormGroup';
+import { Label } from '../Label/Label';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'GDS-style text input. Use `size` to constrain the field to its expected content length. Compose with `InputGroup`, `InputPrefix`, `InputSuffix`, and `InputSwatch` for addon labels.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['base', 'date-part', 'year', 'postcode', 'short', 'medium', 'long'],
+    },
+    appearance: {
+      control: { type: 'radio' },
+      options: ['default', 'code'],
+    },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+  args: {
+    size: 'base',
+    appearance: 'default',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Character-width constraints based on expected content length.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-gds-3">
+      <div>
+        <Label htmlFor="size-date-part">date-part</Label>
+
+        <Input id="size-date-part" size="date-part" placeholder="DD" />
+      </div>
+
+      <div>
+        <Label htmlFor="size-year">year</Label>
+
+        <Input id="size-year" size="year" placeholder="YYYY" />
+      </div>
+
+      <div>
+        <Label htmlFor="size-postcode">postcode</Label>
+
+        <Input id="size-postcode" size="postcode" placeholder="SW1A 1AA" />
+      </div>
+
+      <div>
+        <Label htmlFor="size-short">short</Label>
+
+        <Input id="size-short" size="short" placeholder="07700 900000" />
+      </div>
+
+      <div>
+        <Label htmlFor="size-medium">medium</Label>
+
+        <Input id="size-medium" size="medium" />
+      </div>
+
+      <div>
+        <Label htmlFor="size-long">long</Label>
+
+        <Input id="size-long" size="long" />
+      </div>
+    </div>
+  ),
+};
+
+export const Code: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Tabular monospaced characters. Use for MFA codes, reference numbers, or any fixed-format string where character alignment matters.',
+      },
+    },
+  },
+  args: {
+    appearance: 'code',
+    size: 'short',
+    placeholder: 'ABCD 1234',
+  },
+};
+
+export const Invalid: Story = {
+  render: (args) => (
+    <FormGroup invalid>
+      <Label htmlFor="invalid-input">National Insurance number</Label>
+
+      <ErrorText id="ni-error">Enter a National Insurance number in the correct format</ErrorText>
+
+      <Input id="invalid-input" size="short" aria-invalid aria-describedby="ni-error" {...args} />
+    </FormGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, value: 'Cannot be changed' },
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,74 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+
+const INPUT_APPEARANCES = {
+  default: 'cn-input-appearance-default',
+  code: 'cn-input-appearance-code',
+} as const;
+
+const INPUT_SIZES = {
+  base: 'cn-input-size-base',
+  'date-part': 'cn-input-size-date-part',
+  year: 'cn-input-size-year',
+  postcode: 'cn-input-size-postcode',
+  short: 'cn-input-size-short',
+  medium: 'cn-input-size-medium',
+  long: 'cn-input-size-long',
+} as const;
+
+export type InputSize = keyof typeof INPUT_SIZES;
+export type InputAppearance = keyof typeof INPUT_APPEARANCES;
+
+// React's own HTMLInputTypeAttribute ends in `| (string & {})`, an
+// autocomplete-with-escape-hatch trick that also defeats Exclude<>, any
+// string (including "number") is still assignable to it. Listed by hand
+// instead, dropping "number" for real: GDS advises against it, it silently
+// strips non-numeric characters instead of validating them, adds browser
+// spinner UI GDS doesn't want, and behaves inconsistently across
+// locales/screen readers. Use the default type="text" with
+// inputMode="numeric" instead.
+export type InputType =
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week';
+
+export type InputProps = Omit<ComponentProps<'input'>, 'size' | 'type'> & {
+  size?: InputSize;
+  appearance?: InputAppearance;
+  type?: InputType;
+};
+
+export const Input = ({
+  className,
+  size = 'base',
+  appearance = 'default',
+  type = 'text',
+  ...props
+}: InputProps) => (
+  <input
+    type={type}
+    data-slot="input"
+    className={cn('cn-input', INPUT_SIZES[size], INPUT_APPEARANCES[appearance], className)}
+    draggable="false"
+    {...props}
+  />
+);

package/src/components/InputGroup/InputGroup.css

@@ -0,0 +1,140 @@
+@layer components {
+  /* MARK: Group
+     Pure flex wrapper. Stacks vertically on mobile, horizontal on sm+.
+     direction="vertical" forces flex-col at all breakpoints, used to stack a
+     toolbar or count message above/below an input or textarea. */
+  .cn-input-group {
+    @apply flex flex-col sm:flex-row w-full;
+  }
+
+  .cn-input-group[data-direction='vertical'] {
+    @apply flex-col;
+
+    > * + * {
+      margin-top: var(--spacing-gds-1);
+    }
+
+    /* Toolbar border-bottom acts as the divider, no gap needed after it */
+    > .cn-input-toolbar + * {
+      margin-top: 0;
+    }
+  }
+
+  /* An icon-only Button addon (PasswordInput's show/hide toggle, SearchBox's
+     submit) is small enough to always fit next to the input, unlike a
+     toolbar or other arbitrary content, so a group containing one never
+     needs to drop it onto its own row on mobile. */
+  .cn-input-group:has(> .cn-input-prefix > .cn-button),
+  .cn-input-group:has(> .cn-input-suffix > .cn-button) {
+    @apply flex-row;
+  }
+
+  /* MARK: Toolbar
+     Sits above (or below) an input/textarea inside a vertical InputGroup.
+     Full cn-form-border except bottom, the adjacent field's top border
+     acts as the visual separator, creating one unified bordered region. */
+  .cn-input-toolbar {
+    @apply cn-form-border flex items-center gap-gds-1 px-gds-1 py-1 bg-wash justify-end;
+    border-bottom: none;
+  }
+
+  /* MARK: Prefix and Suffix
+     Pure positioning containers with no visual styling of their own.
+     Gap from the input is the default, swatch and select content remove it
+     via :has() and merge borders instead. items-center matters for content
+     that isn't already full-height and self-centering (InputSwatch and a
+     Select's control both are), e.g. a bare icon used as a decorative
+     addon, which would otherwise sit at the cross-start edge. self-start
+     stops this element itself stretching to fill cn-input-group's cross
+     axis, which is width once the group stacks to a column on mobile, that
+     stretch is otherwise invisible (this element has no background/border
+     of its own) but pushes a below-input row of content wide regardless of
+     what it actually contains. */
+  .cn-input-prefix,
+  .cn-input-suffix {
+    @apply flex flex-none items-center self-start;
+  }
+
+  .cn-input-suffix {
+    @apply mt-gds-1 sm:mt-0 sm:ml-gds-1;
+  }
+  .cn-input-prefix {
+    @apply mb-gds-1 sm:mb-0 sm:mr-gds-1;
+  }
+
+  /* Connected: swatch or select removes gap and merges borders. */
+  .cn-input-suffix:has(.cn-input-swatch),
+  .cn-input-suffix:has(.cn-select-container) {
+    @apply mt-0 ml-0;
+  }
+
+  .cn-input-prefix:has(.cn-input-swatch),
+  .cn-input-prefix:has(.cn-select-container) {
+    @apply mb-0 mr-0;
+  }
+
+  /* A Button addon keeps the group in a row at every size (see above), so
+     its own margin needs to be the row gap unconditionally too, rather than
+     mt-gds-1's mobile stacking gap (which would otherwise both add an
+     unwanted top offset and leave no horizontal gap from the input, below
+     sm where sm:ml-gds-1 isn't active yet). */
+  .cn-input-suffix:has(> .cn-button) {
+    @apply mt-0 ml-gds-1;
+  }
+
+  .cn-input-prefix:has(> .cn-button) {
+    @apply mb-0 mr-gds-1;
+  }
+
+  /* Select: auto width since select defaults to w-full. */
+  .cn-input-prefix > .cn-select-container,
+  .cn-input-suffix > .cn-select-container {
+    @apply w-auto;
+  }
+
+  .cn-input-prefix > .cn-select-container .cn-select-control {
+    @apply border-b-0 sm:border-b-form sm:border-r-0;
+  }
+
+  .cn-input-suffix > .cn-select-container .cn-select-control {
+    @apply border-t-0 sm:border-t-form sm:border-l-0;
+  }
+
+  /* MARK: Swatch
+     Decorative GDS-style addon (currency symbol, unit label).
+     Always aria-hidden, use a Button or Select for interactive addons. */
+  .cn-input-swatch {
+    @apply cn-form-swatch flex-none justify-center min-w-10 p-gds-1 text-body-secondary
+      whitespace-nowrap cursor-default;
+  }
+
+  /* An icon inside a swatch fills its padded box the same way cn-button's
+     icon variant does (see Button.css's cn-button-variant-icon), rather than
+     an arbitrary fixed size, so an icon swatch (e.g. Geocoder's search icon)
+     reads at the same proportions as an icon button instead of looking
+     smaller/inconsistent next to one. */
+  .cn-input-swatch svg {
+    @apply w-full h-full;
+  }
+
+  .cn-input-prefix > .cn-input-swatch {
+    @apply border-b-0 sm:border-b-form sm:border-r-0;
+  }
+
+  .cn-input-suffix > .cn-input-swatch {
+    @apply border-t-0 sm:border-t-form sm:border-l-0;
+  }
+
+  /* MARK: Button
+     A Button (e.g. PasswordInput's show/hide toggle, SearchBox's submit)
+     manages its own vertical footprint via height + box-shadow compensation
+     (see Button.css's --cn-button-shadow-size comments), sized specifically
+     assuming flex-start alignment: items-center above would otherwise leave
+     it sitting a pixel or two lower than the adjacent input, the shadow
+     compensating for the wrong gap. width: auto is the same safeguard
+     against stretch-to-fill as the Select rule above. */
+  .cn-input-prefix > .cn-button,
+  .cn-input-suffix > .cn-button {
+    @apply w-auto self-start;
+  }
+}