@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/Tooltip/Tooltip.css

@@ -0,0 +1,43 @@
+@layer components {
+  /* MARK: Tooltip content
+     Plain floating panel using the same bg/border as Modal and other panels.
+     Portal-rendered so DOM order is always safe above page content, but
+     cn-z-overlay still matters against other elements that set their own
+     high z-index (e.g. a resizable handle's cn-z-top). */
+  .cn-tooltip-content {
+    @apply panel cn-z-overlay max-w-xs px-gds-2 py-gds-1 text-sm text-body;
+
+    &[data-state='delayed-open'],
+    &[data-state='instant-open'] {
+      animation: cn-tooltip-in 0.1s ease-out;
+    }
+
+    &[data-state='closed'] {
+      animation: cn-tooltip-out 0.075s ease-in;
+    }
+  }
+
+  .cn-tooltip-arrow {
+    fill: var(--color-panel-border);
+  }
+
+  @keyframes cn-tooltip-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes cn-tooltip-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,110 @@
+import { LuInfo, LuSettings } from 'react-icons/lu';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A floating label that appears on **hover and keyboard focus**. Use it to provide supplementary text for controls that have no visible label.
+Wrap your app or page layout in \`TooltipProvider\` once. Do not nest multiple providers.
+
+> **WARNING:** The tooltip does not activate on touch devices. Do not use this for information that all users of the page benefit from seeing. Consider the \`Popover\` component instead.
+        `.trim(),
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <div className="flex items-center justify-center min-h-40 p-gds-4">
+          <Story />
+        </div>
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The most common use case: an icon-only button that needs a visible label for sighted mouse/keyboard users.',
+      },
+    },
+  },
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="icon" appearance="ghost" aria-label="Settings">
+          <LuSettings aria-hidden />
+        </Button>
+      </TooltipTrigger>
+
+      <TooltipContent>Settings</TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const InformationLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Inline information trigger next to a label. The tooltip provides clarifying text without cluttering the layout.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center gap-gds-1">
+      <span className="text-body">Reference period</span>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="icon" appearance="ghost" aria-label="What is the reference period?">
+            <LuInfo aria-hidden />
+          </Button>
+        </TooltipTrigger>
+
+        <TooltipContent side="right">
+          The 12-month window used to calculate your baseline figures.
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const Positions: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The tooltip repositions automatically when it would overflow the viewport, but you can set a preferred side.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex gap-gds-4 flex-wrap items-center justify-center">
+      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
+        <Tooltip key={side}>
+          <TooltipTrigger asChild>
+            <Button appearance="secondary">{side}</Button>
+          </TooltipTrigger>
+
+          <TooltipContent side={side}>Appears on the {side}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,53 @@
+/**
+ * !!!!! WARNING !!!!!
+ * The tooltip does not activate on touch devices. Do not use this for information that all users of the page benefit from seeing. Consider the `Popover` component instead.
+ */
+
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { cn } from '../../utils/components';
+
+export type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
+
+export const TooltipProvider = ({ delayDuration = 500, ...props }: TooltipProviderProps) => (
+  <TooltipPrimitive.Provider
+    data-slot="tooltip-provider"
+    delayDuration={delayDuration}
+    {...props}
+  />
+);
+
+export type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
+
+export const Tooltip = (props: TooltipProps) => <TooltipPrimitive.Root {...props} />;
+
+export type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>;
+
+export const TooltipTrigger = (props: TooltipTriggerProps) => (
+  <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+);
+
+export type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
+
+export const TooltipContent = ({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: TooltipContentProps) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn('cn-tooltip-content', className)}
+      {...props}
+    >
+      {children}
+      <TooltipPrimitive.Arrow className="cn-tooltip-arrow" />
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+);

package/src/components/WarningText/WarningText.css

@@ -0,0 +1,20 @@
+@layer components {
+  .cn-warning-text {
+    @apply relative font-bold py-gds-2 text-body text-lg;
+  }
+
+  .cn-warning-text-icon {
+    @apply box-border inline-block absolute left-0 rounded-full border-body text-panel bg-body
+      text-center select-none;
+    font-size: 1.5rem;
+    line-height: 1.8rem;
+    min-width: 35px;
+    min-height: 35px;
+    margin-top: -7px;
+    border: 3px solid;
+  }
+
+  .cn-warning-text-content {
+    @apply pl-gds-7;
+  }
+}

package/src/components/WarningText/WarningText.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { WarningText } from './WarningText';
+
+const meta: Meta<typeof WarningText> = {
+  title: 'Components/WarningText',
+  component: WarningText,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.',
+      },
+    },
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+  args: {
+    children: 'You can be fined up to £5,000 if you do not register.',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningText>;
+
+export const Default: Story = {};

package/src/components/WarningText/WarningText.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+export type WarningTextProps = ComponentProps<'div'>;
+
+export const WarningText = ({ className, children, ...props }: WarningTextProps) => {
+  return (
+    <div className={cn('cn-warning-text', className)} {...props}>
+      <span className="cn-warning-text-icon" aria-hidden="true">
+        !
+      </span>
+
+      <strong className="cn-warning-text-content">{children}</strong>
+    </div>
+  );
+};