@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/Button/Button.tsx

@@ -1,43 +1,68 @@
-import type { ExtendProps } from '../../types/utils';
-import { cn } from '../../utils';
+import type { ComponentProps } from 'react';
 
-type Props = {
-  type?: 'submit' | 'reset' | 'button';
-  variant?: 'primary' | 'secondary' | 'inverse';
-  children: React.ReactNode;
-};
+import { Slot } from 'radix-ui';
+
+import { cn } from '../../utils/components';
+
+const BUTTON_APPEARANCES = {
+  primary: 'cn-button-appearance-primary',
+  secondary: 'cn-button-appearance-secondary',
+  destructive: 'cn-button-appearance-destructive',
+  inverse: 'cn-button-appearance-inverse',
+  ghost: 'cn-button-appearance-ghost',
+  panel: 'cn-button-appearance-panel',
+} as const;
+
+const BUTTON_VARIANTS = {
+  default: 'cn-button-variant-default',
+  cta: 'cn-button-variant-cta',
+  icon: 'cn-button-variant-icon',
+} as const;
 
-export type ButtonProps = ExtendProps<'button', Props>;
+const BUTTON_SIZES = {
+  base: 'cn-button-size-base',
+  sm: 'cn-button-size-sm',
+  lg: 'cn-button-size-lg',
+} as const;
 
-const VARIANTS = {
-  primary: 'bg-brand hover-enabled:bg-green-600 text-white shadow-green-700',
-  secondary: 'bg-slate-100 hover-enabled:bg-slate-200 text-black shadow-slate-300',
-  inverse: 'bg-white hover-enabled:bg-slate-100 text-brand shadow-green-700',
+export type ButtonAppearance = keyof typeof BUTTON_APPEARANCES;
+export type ButtonVariant = keyof typeof BUTTON_VARIANTS;
+export type ButtonSize = keyof typeof BUTTON_SIZES;
+
+export type ButtonProps = ComponentProps<'button'> & {
+  asChild?: boolean;
+  appearance?: ButtonAppearance;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
 };
 
-// NOTE: some of the styles are applied in `tailwind.css`, under `Button Styles`
 export const Button = ({
-  type = 'button',
-  variant = 'primary',
   className,
-  children,
+  appearance = 'primary',
+  variant = 'default',
+  size = 'base',
+  asChild = false,
   ...props
 }: ButtonProps) => {
+  const Comp = asChild ? Slot.Root : 'button';
+
   return (
-    <button
-      type={type}
+    <Comp
+      {...props}
+      data-slot="button"
+      data-appearance={appearance}
+      data-variant={variant}
+      data-size={size}
       className={cn(
-        `sm:w-auto text-lg relative flex w-full outline-none items-center border-transparent
-        justify-center border-2 text-center active-enabled:translate-y-[2px] focus:shadow-focus
-        focus:border-focus focus:shadow-[inset_0_0_0_1px] focus-idle:border-focus
-        focus-idle:text-focus-text focus-idle:bg-focus focus-idle:shadow-border-input
-        disabled:opacity-50 disabled:hover:cursor-not-allowed button`,
-        VARIANTS[variant],
+        'cn-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap',
+        'outline-none select-none disabled:cursor-not-allowed',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+        BUTTON_APPEARANCES[appearance],
+        BUTTON_VARIANTS[variant],
+        BUTTON_SIZES[size],
         className,
       )}
-      {...props}
-    >
-      {children}
-    </button>
+      role="button"
+    />
   );
 };

package/src/components/Button/ButtonSkeleton.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ButtonSkeleton } from './ButtonSkeleton';
+
+const meta: Meta<typeof ButtonSkeleton> = {
+  title: 'Components/Button/Skeleton',
+  component: ButtonSkeleton,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Placeholder for a Button while whatever decides its label or visibility is loading. Renders a real, disabled Button with the same appearance/variant/size props, so it always matches the real button's dimensions exactly, no layout shift when it swaps in.",
+      },
+    },
+  },
+  argTypes: {
+    appearance: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'destructive', 'inverse', 'ghost', 'panel'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'base', 'lg'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ButtonSkeleton>;
+
+export const Default: Story = {
+  args: {
+    appearance: 'primary',
+    size: 'base',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-gds-2">
+      <ButtonSkeleton size="sm" />
+
+      <ButtonSkeleton size="base" />
+
+      <ButtonSkeleton size="lg" />
+    </div>
+  ),
+};

package/src/components/Button/ButtonSkeleton.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+
+import { Button } from './Button';
+import { Skeleton } from '../Skeleton/Skeleton';
+
+export type ButtonSkeletonProps = Omit<ComponentProps<typeof Button>, 'children' | 'disabled'> & {
+  children?: never;
+};
+
+export const ButtonSkeleton = ({ className, ...props }: ButtonSkeletonProps) => (
+  <Button {...props} aria-hidden disabled tabIndex={-1} className={className}>
+    <Skeleton className="cn-button-skeleton-bar" />
+  </Button>
+);

package/src/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,52 @@
+@layer components {
+  /* MARK: ButtonGroup
+     GDS action group: flex-wrap with center alignment so all button types
+     (text, icon, link) sit on the same axis. Buttons handle their own mobile
+     full-width behaviour (w-full sm:w-auto), so the group itself stays flex. */
+
+  .cn-button-group {
+    @apply flex flex-wrap items-center gap-gds-2;
+  }
+
+  .cn-button-group[data-orientation='vertical'] {
+    @apply flex-col items-start;
+  }
+
+  /* MARK: Compressed
+     Removes gap and shares the panel border between adjacent buttons by
+     collapsing one border-width of margin. Intended for icon button toolbars
+     using appearance="panel". Focused buttons raise above siblings via z-index
+     so the inset focus ring is never clipped by a neighbour. */
+  .cn-button-group[data-compressed] {
+    gap: 0;
+
+    & > * {
+      @apply relative;
+    }
+
+    & > * + * {
+      margin-left: calc(var(--border-width-form) * -1);
+    }
+
+    &[data-orientation='vertical'] > * + * {
+      margin-left: 0;
+      margin-top: calc(var(--border-width-form) * -1);
+    }
+
+    & > *:focus-within {
+      z-index: 1;
+    }
+  }
+
+  /* MARK: Text */
+
+  .cn-button-group-text {
+    @apply flex items-center text-base;
+  }
+
+  /* MARK: Separator */
+
+  .cn-button-group-separator {
+    @apply self-stretch;
+  }
+}

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,156 @@
+import { LuMaximize2, LuMinus, LuPlus } from 'react-icons/lu';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './ButtonGroup';
+import { Button } from '../Button/Button';
+import { LinkButton } from '../LinkButton/LinkButton';
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Groups related action buttons with consistent GDS-aligned spacing. Use for form submission areas where a primary action is accompanied by a secondary button or cancel link.',
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: { type: 'radio' },
+      options: ['horizontal', 'vertical'],
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const PrimaryWithCancel: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button appearance="primary">Save and continue</Button>
+
+      <LinkButton href="/">Cancel</LinkButton>
+    </ButtonGroup>
+  ),
+};
+
+export const PrimaryAndSecondary: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button appearance="primary">Save and continue</Button>
+
+      <Button appearance="secondary">Save as draft</Button>
+    </ButtonGroup>
+  ),
+};
+
+export const WithText: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button appearance="primary">Accept all</Button>
+
+      <ButtonGroupText>or</ButtonGroupText>
+
+      <LinkButton href="/">Manage preferences</LinkButton>
+    </ButtonGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button appearance="primary">Save and continue</Button>
+
+      <Button appearance="secondary">Save as draft</Button>
+
+      <LinkButton href="/">Cancel</LinkButton>
+    </ButtonGroup>
+  ),
+};
+
+export const WithSeparator: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button appearance="primary">Save and continue</Button>
+
+      <Button appearance="secondary">Save as draft</Button>
+
+      <ButtonGroupSeparator />
+
+      <Button appearance="destructive">Delete</Button>
+    </ButtonGroup>
+  ),
+};
+
+export const DestructiveGroup: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button appearance="destructive">Delete account</Button>
+
+      <LinkButton href="/">Cancel</LinkButton>
+    </ButtonGroup>
+  ),
+};
+
+export const CompressedHorizontal: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Compressed removes the gap and shares borders between adjacent panel buttons. Use for map toolbars and icon button clusters.',
+      },
+    },
+  },
+  render: () => (
+    <ButtonGroup compressed>
+      <Button variant="icon" appearance="panel" aria-label="Zoom in">
+        <LuPlus aria-hidden />
+      </Button>
+
+      <Button variant="icon" appearance="panel" aria-label="Zoom out">
+        <LuMinus aria-hidden />
+      </Button>
+
+      <Button variant="icon" appearance="panel" aria-label="Full screen">
+        <LuMaximize2 aria-hidden />
+      </Button>
+    </ButtonGroup>
+  ),
+};
+
+export const CompressedVertical: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compressed vertical — the default layout for map control toolbars.',
+      },
+    },
+  },
+  render: () => (
+    <ButtonGroup orientation="vertical" compressed role="toolbar" aria-label="Map controls">
+      <Button variant="icon" appearance="panel" aria-label="Full screen">
+        <LuMaximize2 aria-hidden />
+      </Button>
+
+      <Button variant="icon" appearance="panel" aria-label="Zoom in">
+        <LuPlus aria-hidden />
+      </Button>
+
+      <Button variant="icon" appearance="panel" aria-label="Zoom out">
+        <LuMinus aria-hidden />
+      </Button>
+    </ButtonGroup>
+  ),
+};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps } from 'react';
+
+import { Slot } from 'radix-ui';
+
+import { cn } from '../../utils/components';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { Separator } from '../Separator/Separator';
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+
+export type ButtonGroupProps = ComponentProps<'div'> & {
+  orientation?: ButtonGroupOrientation;
+  compressed?: boolean;
+};
+
+export const ButtonGroup = ({
+  className,
+  orientation = 'horizontal',
+  compressed = false,
+  ...props
+}: ButtonGroupProps) => (
+  <div
+    role="group"
+    data-slot="button-group"
+    data-orientation={orientation}
+    data-compressed={compressed || undefined}
+    className={cn('cn-button-group', className)}
+    {...props}
+  />
+);
+
+export type ButtonGroupTextProps = ComponentProps<typeof Paragraph> & {
+  asChild?: boolean;
+};
+
+export const ButtonGroupText = ({ className, asChild = false, ...props }: ButtonGroupTextProps) => {
+  const Comp = asChild ? Slot.Root : Paragraph;
+
+  return <Comp className={cn('cn-button-group-text', className)} {...props} />;
+};
+
+export type ButtonGroupSeparatorProps = ComponentProps<typeof Separator>;
+
+export const ButtonGroupSeparator = ({ className, ...props }: ButtonGroupSeparatorProps) => (
+  <Separator
+    data-slot="button-group-separator"
+    className={cn('cn-button-group-separator', className)}
+    {...props}
+  />
+);

package/src/components/ButtonLink/ButtonLink.css

@@ -0,0 +1,114 @@
+/* MARK: Base button-link
+   A button styled like a link. This *should not* be used for navigation, use
+   a real link instead. Use this for actions that are visually inline with text,
+   or anywhere a button needs link appearance without navigating.
+
+   Defined as @utility so it sits in the same cascade layer as cn-button and
+   can override its width/padding without needing !important. */
+
+@utility cn-button-link {
+  @apply cn-link-decoration bg-transparent border-none p-0 w-fit;
+  box-shadow: none;
+
+  /* cn-button adds a ::before that extends the click target for the box-shadow.
+     ButtonLink has no shadow, so this just creates unexpected extra space. */
+  &::before {
+    display: none;
+  }
+
+  &:hover:not(:disabled) {
+    text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+    text-decoration-skip-ink: none;
+    text-decoration-skip: none;
+  }
+
+  /* No press shift so no depth shadow to consume */
+  &:active:not(:disabled) {
+    @apply top-0 transform-none;
+  }
+
+  /* Override base button focus in favour of GDS link focus box */
+  &:focus {
+    @apply text-on-focus bg-focus no-underline;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-on-focus);
+    outline: 3px solid transparent;
+  }
+
+  /* Override base button yellow-bg focus state */
+  &:focus:not(:active):not(:hover) {
+    @apply bg-focus text-on-focus no-underline;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-on-focus);
+  }
+
+  &:disabled {
+    @apply opacity-50;
+  }
+}
+
+/* MARK: Sizes
+   Adapt button sizes for link context: preserve text scale and touch-target
+   height but reset width and padding. */
+
+@utility cn-button-link-size-sm {
+  &:not([data-variant='icon']) {
+    @apply cn-button-size-sm p-0 w-auto;
+  }
+
+  &[data-variant='icon'] {
+    @apply cn-icon-sm;
+  }
+}
+
+@utility cn-button-link-size-base {
+  &:not([data-variant='icon']) {
+    @apply cn-button-size-base p-0 w-auto;
+  }
+
+  &[data-variant='icon'] {
+    @apply cn-icon-base;
+  }
+}
+
+@utility cn-button-link-size-lg {
+  &:not([data-variant='icon']) {
+    @apply cn-button-size-lg p-0 w-auto;
+  }
+
+  &[data-variant='icon'] {
+    @apply cn-icon-lg;
+  }
+}
+
+@layer components {
+  /* MARK: Appearances
+     Thin wrappers over the link appearance utilities. Keeps a stable
+     cn-button-link-* namespace so button-link-specific overrides can be added
+     here without touching the shared link utilities. */
+
+  .cn-button-link-appearance-primary {
+    @apply cn-link-appearance-primary;
+  }
+
+  .cn-button-link-appearance-inverse {
+    @apply cn-link-appearance-inverse;
+  }
+
+  .cn-button-link-appearance-contrast {
+    @apply cn-link-appearance-contrast;
+  }
+
+  /* MARK: Variants */
+
+  /* Icon, square with svg filling the content area minus padding */
+  .cn-button-link-variant-icon {
+    @apply no-underline;
+
+    & svg {
+      @apply w-full h-full;
+    }
+  }
+}

package/src/components/ButtonLink/ButtonLink.stories.tsx

@@ -1,72 +1,59 @@
+import { LuExternalLink } from 'react-icons/lu';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ButtonLink } from './ButtonLink';
 
-const meta = {
+const meta: Meta<typeof ButtonLink> = {
   title: 'Components/ButtonLink',
   component: ButtonLink,
+  tags: ['autodocs'],
   parameters: {
-    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Use ButtonLink to render a link-like button.',
+      },
+    },
   },
-  tags: ['autodocs'],
   argTypes: {
-    type: {
-      control: 'select',
-      options: ['button', 'submit', 'reset'],
+    size: {
+      control: { type: 'radio' },
+      options: ['base', 'sm', 'lg'],
     },
+    asChild: { control: 'boolean' },
+    onClick: { action: 'onClick' },
+    children: { control: 'text' },
   },
-} satisfies Meta<typeof ButtonLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
   args: {
-    children: 'Click me',
-    type: 'button',
+    size: 'base',
+    children: 'Button link',
   },
 };
 
-export const WithClickHandler: Story = {
-  args: {
-    children: 'Show alert',
-    onClick: () => alert('Button clicked!'),
-  },
-};
+export default meta;
 
-export const Submit: Story = {
-  args: {
-    children: 'Submit form',
-    type: 'submit',
-  },
-  render: (args) => (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        alert('Form submitted!');
-      }}
-    >
-      <ButtonLink {...args} />
-    </form>
-  ),
-};
+type Story = StoryObj<typeof ButtonLink>;
 
-export const Disabled: Story = {
-  args: {
-    children: 'Disabled button link',
-    disabled: true,
-  },
-};
+export const Default: Story = {};
 
-export const WithCustomStyling: Story = {
-  args: {
-    children: 'Custom styled',
-    className: 'font-bold text-xl',
-  },
+export const Disabled: Story = {
+  args: { disabled: true },
 };
 
-export const LongText: Story = {
-  args: {
-    children: 'This is a longer button link that demonstrates how text wraps',
-  },
+export const IconSizes: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <ButtonLink {...args} variant="icon" size="sm">
+        <LuExternalLink />
+      </ButtonLink>
+
+      <ButtonLink {...args} variant="icon" size="base">
+        <LuExternalLink />
+      </ButtonLink>
+
+      <ButtonLink {...args} variant="icon" size="lg">
+        <LuExternalLink />
+      </ButtonLink>
+    </div>
+  ),
 };