@adres/mgda-ui 0.0.0-stage → 0.0.1

package/package.json

@@ -1,6 +1,96 @@
 {
   "name": "@adres/mgda-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "files": [
+    "src",
+    "knowledge",
+    "knowledge.json",
+    "brand-knowledge.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./knowledge.json": "./knowledge.json",
+    "./styles": "./src/styles/base.css",
+    "./components/*": "./src/components/*.tsx",
+    "./lib/*": "./src/lib/*.ts",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./theme.css": "./src/theme/theme.css",
+    "./tokens": {
+      "types": "./src/theme/tokens.ts",
+      "import": "./src/theme/tokens.ts"
+    },
+    "./brand-knowledge.json": "./brand-knowledge.json"
+  },
+  "scripts": {
+    "lint": "echo \"(lint configured at app level)\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:storybook": "node scripts/test-storybook.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static",
+    "clean": "rm -rf .turbo *.tsbuildinfo"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "motion": "^11.15.0",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwind-variants": "^3.3.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.18",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@storybook/test": "^8.6.18",
+    "@storybook/test-runner": "^0.22.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "postcss": "^8.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.18",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0",
+    "playwright": "^1.51.0",
+    "vitest": "^3.0.0",
+    "wait-on": "^8.0.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/src/components/accordion.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion"
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="ax:w-full ax:max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is Adres?</AccordionTrigger>
+        <AccordionContent>
+          Adres is a multi-brand design system for property and education products.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Can I switch brands?</AccordionTrigger>
+        <AccordionContent>
+          Yes, brand tokens load via CSS and can be swapped at runtime.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="ax:w-full ax:max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>Section A</AccordionTrigger>
+        <AccordionContent>Content for section A.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Section B</AccordionTrigger>
+        <AccordionContent>Content for section B.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

package/src/components/accordion.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../lib/cn"
+
+/**
+ * Accordion root prop type - Radix's discriminated union of
+ * `type="single"` / `type="multiple"` modes.
+ *
+ * We re-export `AccordionPrimitive.Root` directly (no forwardRef wrapper)
+ * to preserve the discriminated union: `forwardRef` collapses it and
+ * TypeScript loses the ability to narrow `value` / `defaultValue` based
+ * on the `type` discriminant.
+ */
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+
+export const Accordion = AccordionPrimitive.Root
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("ax:border-b ax:border-border ax:last:border-0", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = AccordionPrimitive.Item.displayName
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="ax:flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "ax:flex ax:flex-1 ax:items-center ax:justify-between ax:py-md ax:t-label-sm ax:text-foreground ax:cursor-pointer",
+        "ax:[transition:color_var(--motion-fast)_var(--motion-ease-out)]",
+        "ax:hover:underline",
+        "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2 ax:focus-visible:ring-offset-background",
+        "ax:[&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="ax:size-4 ax:shrink-0 ax:text-muted-foreground ax:[transition:transform_var(--motion-fast)_var(--motion-ease-out)] ax:motion-reduce:transition-none" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "ax:overflow-hidden ax:t-body-sm ax:text-muted-foreground",
+      "ax:data-[state=closed]:animate-accordion-up ax:data-[state=open]:animate-accordion-down",
+      "ax:motion-reduce:animate-none",
+      className
+    )}
+    {...props}
+  >
+    <div className="ax:pb-md ax:pt-0 ax:max-w-prose">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName

package/src/components/activity-rings.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { ActivityRings, type ActivityRing } from "./activity-rings"
+
+const defaultRings: ActivityRing[] = [
+  { pct: 0.75, className: "ax:stroke-chart-1" },
+  { pct: 0.5, className: "ax:stroke-chart-2" },
+  { pct: 0.25, className: "ax:stroke-chart-3" },
+]
+
+const meta: Meta<typeof ActivityRings> = {
+  title: "Components/ActivityRings",
+  component: ActivityRings,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Concentric progress arcs in one SVG. Pass 1–4 rings outside-in with Tailwind stroke classes such as `ax:stroke-chart-1` or `ax:stroke-primary`.",
+      },
+    },
+  },
+  argTypes: {
+    rings: { control: false },
+    size: { control: { type: "number", min: 48, max: 240, step: 8 } },
+    strokeWidth: { control: { type: "number", min: 4, max: 20, step: 1 } },
+    ariaLabel: { control: "text" },
+  },
+  args: {
+    size: 120,
+    strokeWidth: 12,
+    ariaLabel: "Progress rings",
+    rings: defaultRings,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ActivityRings>
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="ax:flex ax:items-center ax:gap-lg ax:p-lg">
+      <ActivityRings {...args} />
+      <ul className="ax:t-body-sm ax:text-muted-foreground ax:space-y-2xs">
+        <li>
+          <span className="ax:inline-block ax:size-2 ax:rounded-full ax:bg-chart-1 ax:me-xs" />
+          Modules - 75%
+        </li>
+        <li>
+          <span className="ax:inline-block ax:size-2 ax:rounded-full ax:bg-chart-2 ax:me-xs" />
+          Attendance - 50%
+        </li>
+        <li>
+          <span className="ax:inline-block ax:size-2 ax:rounded-full ax:bg-chart-3 ax:me-xs" />
+          Assignments - 25%
+        </li>
+      </ul>
+    </div>
+  ),
+}
+
+export const SingleRing: Story = {
+  args: {
+    rings: [{ pct: 0.6, className: "ax:stroke-primary" }],
+    ariaLabel: "Single progress ring at 60%",
+  },
+  render: (args) => (
+    <div className="ax:p-lg">
+      <ActivityRings {...args} />
+    </div>
+  ),
+}

package/src/components/activity-rings.tsx

@@ -0,0 +1,121 @@
+/**
+ * Activity rings - concentric Apple-style progress arcs in a single SVG.
+ *
+ * The components here are pure visual primitives. They know nothing about
+ * the domain that the rings represent (courses, fitness, fundraising, etc.);
+ * callers compute the percentages and tell the rings which stroke colour to
+ * use. Pair `ActivityRings` with your own `computeProgress`-style helper.
+ */
+
+import * as React from "react"
+
+export interface ActivityRing {
+  /** Progress for this ring, expressed as a 0–1 fraction. Values are
+   *  clamped to the legal range. */
+  pct: number
+  /** Tailwind / project stroke class, e.g. `"ax:stroke-chart-1"`. The ring
+   *  draws a dimmed track of the same colour at 15% opacity. */
+  className: string
+}
+
+export interface ActivityRingsProps {
+  /** Rings rendered from the *outside in*. Pass 1–4 entries; the spacing
+   *  is computed from the SVG box so a small set still looks balanced. */
+  rings: ActivityRing[]
+  /** Visual diameter in CSS pixels. The internal SVG viewBox is always
+   *  `0 0 120 120`; this prop just scales it. */
+  size?: number
+  /** Stroke thickness for each ring in viewBox units. Defaults to 12. */
+  strokeWidth?: number
+  /** Accessible label describing what the rings represent in aggregate. */
+  ariaLabel?: string
+}
+
+function Ring({
+  cx,
+  cy,
+  r,
+  pct,
+  strokeWidth,
+  className,
+}: {
+  cx: number
+  cy: number
+  r: number
+  pct: number
+  strokeWidth: number
+  className: string
+}) {
+  const circ = 2 * Math.PI * r
+  const clamped = Math.max(0, Math.min(1, pct))
+  return (
+    <g>
+      <circle
+        cx={cx}
+        cy={cy}
+        r={r}
+        fill="none"
+        strokeWidth={strokeWidth}
+        className={`${className} ax:opacity-15`}
+      />
+      {clamped > 0 && (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill="none"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circ}
+          strokeDashoffset={circ * (1 - clamped)}
+          transform={`rotate(-90 ${cx} ${cy})`}
+          className={className}
+        />
+      )}
+    </g>
+  )
+}
+
+/** Concentric rings in a single SVG. Composes 1–4 `Ring`s from the outside
+ *  in. Ring spacing and starting radius are derived so the set stays
+ *  visually balanced for typical 2–3 ring counts. */
+export function ActivityRings({
+  rings,
+  size = 112,
+  strokeWidth = 12,
+  ariaLabel,
+}: ActivityRingsProps) {
+  if (!rings?.length) return null
+
+  const outerR = 53
+  const step = strokeWidth // distance between successive ring centrelines
+  return (
+    <svg
+      viewBox="0 0 120 120"
+      width={size}
+      height={size}
+      className="ax:shrink-0"
+      role="img"
+      aria-label={ariaLabel}
+    >
+      {rings.map((ring, i) => (
+        <Ring
+          key={i}
+          cx={60}
+          cy={60}
+          r={outerR - i * step}
+          strokeWidth={strokeWidth}
+          pct={ring.pct}
+          className={ring.className}
+        />
+      ))}
+    </svg>
+  )
+}
+
+// Note: the previous `ProgressRing` single-arc component lived here. It was
+// merged into the `Progress` component as `<Progress shape="ring">` so the
+// design system has one mental model for "show one value's progress", see
+// packages/design-system/src/components/progress.tsx. ActivityRings (the
+// concentric multi-value visual) stays separate because it expresses a
+// fundamentally different concept: 2–4 simultaneous progresses, not one.

package/src/components/alert.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Alert, AlertDescription, AlertTitle } from "./alert"
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  args: {
+    variant: "default",
+    size: "md",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Alert>
+
+export const Default: Story = {
+  render: (args) => (
+    <Alert {...args}>
+      <AlertTitle>Heads up</AlertTitle>
+      <AlertDescription>You can adjust your notification preferences in settings.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Success: Story = {
+  render: (args) => (
+    <Alert {...args} variant="success">
+      <AlertTitle>Payment received</AlertTitle>
+      <AlertDescription>Your subscription is now active.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Destructive: Story = {
+  render: (args) => (
+    <Alert {...args} variant="destructive">
+      <AlertTitle>Something went wrong</AlertTitle>
+      <AlertDescription>Please try again or contact support.</AlertDescription>
+    </Alert>
+  ),
+}

package/src/components/alert.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { AlertCircle, CheckCircle2, Info, AlertTriangle } from "lucide-react"
+import { cn } from "../lib/cn"
+
+// ─── Types & context ──────────────────────────────────────────────────────────
+
+export type AlertSize = "sm" | "md"
+
+const AlertContext = React.createContext<{ size: AlertSize }>({ size: "md" })
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+const alertVariants = cva(
+  [
+    "ax:relative ax:w-full ax:rounded-md ax:border",
+    "ax:grid ax:grid-cols-[auto_1fr] ax:items-start",
+  ],
+  {
+    variants: {
+      variant: {
+        // Icon color tracks the title color (i.e. the variant's strongest text
+        // shade) so the leading glyph and the headline read as one composed
+        // signal rather than two competing emphases.
+        default: "ax:bg-card ax:text-foreground-strong ax:border-border",
+        info: "ax:bg-card ax:text-foreground-strong ax:border-border",
+        primary: "ax:bg-primary-weakest/80 ax:text-primary-foreground ax:border-primary-weaker ax:[&>svg]:text-primary-foreground",
+        success: "ax:bg-success-weakest/80 ax:text-success-foreground ax:border-success-weaker ax:[&>svg]:text-success-foreground",
+        warning: "ax:bg-warning-weakest/80 ax:dark:bg-warning-muted ax:text-warning-foreground ax:border-warning-weaker ax:dark:border-warning-weakest ax:[&>svg]:text-warning-foreground",
+        destructive: "ax:bg-destructive-weakest/80 ax:text-destructive-foreground ax:border-destructive-weaker ax:[&>svg]:text-destructive-foreground",
+      },
+      size: {
+        sm: "ax:p-sm ax:gap-x-xs ax:gap-y-2xs ax:text-xs ax:[&>svg]:size-3.5 ax:[&>svg]:mt-px",
+        md: "ax:p-md ax:gap-x-sm ax:gap-y-2xs ax:[&>svg]:size-4 ax:[&>svg]:mt-0.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+)
+
+const iconMap = {
+  default: Info,
+  info: Info,
+  primary: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertCircle,
+} as const
+
+// ─── Alert ────────────────────────────────────────────────────────────────────
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof alertVariants> {
+  size?: AlertSize
+  /** Hide the leading icon AND snap content to the first column. Use when the
+   *  alert appears inline next to another leading element that already conveys
+   *  the meaning. */
+  hideIcon?: boolean
+  /** Override the default variant icon with custom content (e.g. <Calendar />,
+   *  <Sparkles />, <Lock />). The custom icon inherits the variant's color
+   *  via the alert's `[&>svg]:text-*` selector - pass an SVG element.
+   *  Remember to set `aria-hidden="true"` on the icon yourself.
+   *  Ignored when `hideIcon` is true. */
+  icon?: React.ReactNode
+}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = "default", size = "md", hideIcon, icon, children, ...props }, ref) => {
+    const DefaultIcon = iconMap[variant ?? "default"]
+    const iconNode = icon !== undefined ? icon : <DefaultIcon aria-hidden="true" />
+    return (
+      <AlertContext.Provider value={{ size }}>
+        <div
+          ref={ref}
+          role="alert"
+          className={cn(alertVariants({ variant, size }), className)}
+          {...props}
+        >
+          {!hideIcon && iconNode}
+          <div className={cn("ax:col-start-2 ax:flex ax:flex-col ax:gap-2xs", hideIcon && "ax:col-start-1")}>
+            {children}
+          </div>
+        </div>
+      </AlertContext.Provider>
+    )
+  }
+)
+Alert.displayName = "Alert"
+
+// ─── AlertTitle ───────────────────────────────────────────────────────────────
+
+export const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(AlertContext)
+    return (
+      <h5
+        ref={ref}
+        className={cn(size === "sm" ? "ax:t-label-sm" : "ax:t-label-md", className)}
+        {...props}
+      />
+    )
+  }
+)
+AlertTitle.displayName = "AlertTitle"
+
+// ─── AlertDescription ─────────────────────────────────────────────────────────
+
+// Description renders a <div> (not a <p>) so it can host block-level children
+// like lists, paragraphs, or button rows. Type matches the rendered element.
+export const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(AlertContext)
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "ax:text-foreground ax:[&_p]:leading-relaxed",
+          size === "sm" ? "ax:text-xs" : "ax:t-body-sm",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+AlertDescription.displayName = "AlertDescription"

package/src/components/answer-actions.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { AnswerActions } from "./answer-actions"
+import { TooltipProvider } from "./tooltip"
+
+const VERSIONS = [
+  "Budget for yearly service charges of roughly AED 26,000 to 38,000 for this 1,734 sqft unit.",
+  "Expect service charges, home insurance and utilities; service charges come to about AED 26,000 to 38,000 a year.",
+]
+
+const meta: Meta<typeof AnswerActions> = {
+  title: "Components/AnswerActions",
+  component: AnswerActions,
+  tags: ["autodocs"],
+  decorators: [(Story) => <TooltipProvider><div style={{ maxWidth: 640 }}><Story /></div></TooltipProvider>],
+  args: {
+    text: VERSIONS[0],
+    negativeReasons: ["Wrong price", "Out of date", "Didn't answer", "Too long"],
+    positiveReasons: ["Accurate", "Clear", "Saved me time"],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AnswerActions>
+
+export const Default: Story = {}
+
+function VersionsDemo(props: React.ComponentProps<typeof AnswerActions>) {
+  const [version, setVersion] = React.useState(0)
+  return (
+    <AnswerActions
+      {...props}
+      text={VERSIONS[version] ?? ""}
+      version={version}
+      versionCount={VERSIONS.length}
+      onVersionChange={setVersion}
+      onRegenerate={() => undefined}
+      regenerateDisabled
+    />
+  )
+}
+
+export const WithVersions: Story = { render: (args) => <VersionsDemo {...args} /> }
+
+export const WithReport: Story = {
+  args: {
+    onCopyLink: () => undefined,
+    reportReasons: [
+      { value: "wrong", label: "Wrong or misleading" },
+      { value: "unsafe", label: "Unsafe or offensive" },
+      { value: "other", label: "Something else" },
+    ],
+  },
+}

package/src/components/answer-actions.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { AnswerActions, FeedbackReasonChips } from "./answer-actions"
+import { TooltipProvider } from "./tooltip"
+
+const render = (node: React.ReactNode) => renderToStaticMarkup(<TooltipProvider>{node}</TooltipProvider>)
+const REASONS = { negativeReasons: ["Wrong price"], positiveReasons: ["Clear"] }
+
+describe("FeedbackReasonChips", () => {
+  it("marks selected reasons as pressed", () => {
+    const html = render(<FeedbackReasonChips label="What went wrong?" reasons={["Wrong price", "Too long"]} selected={["Too long"]} onToggle={() => undefined} />)
+    expect(html).toMatch(/role="group" aria-label="What went wrong\?"/)
+    expect(html).toMatch(/aria-pressed="false"[^>]*>Wrong price|>Wrong price<\/button>/)
+    expect(html.match(/aria-pressed="true"/g)).toHaveLength(1)
+  })
+})
+
+describe("AnswerActions", () => {
+  it("is a labelled toolbar with copy and rating", () => {
+    const html = render(<AnswerActions text="Answer" {...REASONS} />)
+    expect(html).toContain('role="toolbar" aria-label="Answer actions"')
+    expect(html).toContain('aria-label="Copy"')
+    expect(html).toContain('aria-label="Good response"')
+  })
+
+  it("shows the version pager only with several versions", () => {
+    expect(render(<AnswerActions text="Answer" {...REASONS} />)).not.toContain("Response versions")
+    const html = render(<AnswerActions text="Answer" {...REASONS} version={1} versionCount={3} onVersionChange={() => undefined} />)
+    expect(html).toContain("2 of 3")
+  })
+
+  it("offers More actions only when there is something in it", () => {
+    expect(render(<AnswerActions text="Answer" {...REASONS} />)).not.toContain("More actions")
+    expect(render(<AnswerActions text="Answer" {...REASONS} onCopyLink={() => undefined} />)).toContain("More actions")
+  })
+})