@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/ui/ToastV01/ToastV01.stories.tsx

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToastV01 } from "../../components/ui/toast-v01";
+import samplePhoto from "../../assets/avatar-identity/photo.png";
+
+const LOREM =
+  "Lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet consectetur adipiscing elit quisque faucibus ex. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.";
+
+const appearances = ["solid", "subtle", "outline"] as const;
+const colors = ["default", "success", "error"] as const;
+const sizes = ["large", "small"] as const;
+const indicators = ["icon", "avatar"] as const;
+
+const meta = {
+  title: "Components/Toast",
+  component: ToastV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Transient notification. Existing `Components/ToastLegacy` (Radix `Toast`) is unchanged.",
+          "",
+          "Stories are the semantic states: **Default**, **Success**, **Error**.",
+          "Use **Controls** for appearance (solid / subtle / outline), size, and indicator.",
+          "All Variants shows the full set of **36**.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { ToastV01 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Pick `color` for meaning. Use `variant`, `size`, and `indicator` for presentation.",
+          'A toast is announced to screen readers on appearance (`role="status"`), so keep the',
+          "copy short and put anything the user must act on behind Confirm.",
+          "",
+          "```tsx",
+          "const [visible, setVisible] = useState(true)",
+          "",
+          "visible ? (",
+          "  <ToastV01",
+          `    color="success"`,
+          `    variant="solid"`,
+          `    size="large"`,
+          `    indicator="icon"`,
+          `    title="Changes saved"`,
+          `    description="Your updates are live for everyone on the project."`,
+          `    confirmLabel="View"`,
+          `    cancelLabel="Dismiss"`,
+          "    onConfirm={handleView}",
+          "    onCancel={() => setVisible(false)}",
+          "    onDismiss={() => setVisible(false)}",
+          "  />",
+          ") : null",
+          "```",
+          "",
+          "| Situation | Use |",
+          "|-----------|-----|",
+          '| Neutral notice | `color="default"` |',
+          '| Completed action | `color="success"` |',
+          '| Failure / blocking problem | `color="error"` |',
+          '| Single line, one action | `size="small"` (heading + Confirm only) |',
+          '| Person-specific message | `indicator="avatar"` and `avatarSrc` |',
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          '| `color` | `"default"` \\| `"success"` \\| `"error"` | `"default"` | Semantic state (stories) |',
+          '| `variant` | `"solid"` \\| `"subtle"` \\| `"outline"` | `"solid"` | Surface treatment |',
+          '| `size` | `"large"` \\| `"small"` | `"large"` | Stacked copy + two actions vs single row |',
+          '| `indicator` | `"icon"` \\| `"avatar"` | `"icon"` | Leading checkmark or 32px avatar |',
+          "| `action` | `boolean` | `true` | Confirm (and Cancel on large) |",
+          "| `title` | `ReactNode` | — | Heading |",
+          "| `description` | `ReactNode` | — | Body copy (large only) |",
+          '| `confirmLabel` | `ReactNode` | `"Confirm"` | Primary pill |',
+          '| `cancelLabel` | `ReactNode` | `"Cancel"` | Secondary pill (large only) |',
+          "| `onConfirm` / `onCancel` / `onDismiss` | `() => void` | — | Action and close handlers |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      name: "Appearance",
+      control: "select",
+      options: [...appearances],
+    },
+    size: { control: "select", options: [...sizes] },
+    indicator: { control: "select", options: [...indicators] },
+    action: { control: "boolean" },
+    title: { control: "text" },
+    description: { control: "text" },
+    confirmLabel: { control: "text" },
+    cancelLabel: { control: "text" },
+    avatarSrc: { control: "text" },
+    color: { table: { disable: true } },
+  },
+  args: {
+    variant: "solid",
+    size: "large",
+    indicator: "icon",
+    action: true,
+    title: "Alert Heading",
+    description: LOREM,
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    avatarSrc: samplePhoto,
+  },
+} satisfies Meta<typeof ToastV01>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { color: "default" },
+};
+
+export const Success: Story = {
+  args: { color: "success" },
+};
+
+export const Error: Story = {
+  args: { color: "error" },
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        // minmax(0, 1fr) so the track can shrink below its max-content width.
+        gridTemplateColumns: "minmax(0, 1fr)",
+        justifyItems: "center",
+        gap: 40,
+        width: "100%",
+      }}
+    >
+      {sizes.flatMap((size) =>
+        indicators.map((indicator) => (
+          <section
+            key={`${size}-${indicator}`}
+            style={{ width: "100%", maxWidth: 1112 }}
+          >
+            <h3
+              style={{
+                margin: "0 0 16px",
+                fontSize: 14,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                color: "#52545d",
+                textAlign: "center",
+              }}
+            >
+              {size} · {indicator}
+            </h3>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))",
+                maxWidth: 1112,
+                margin: "0 auto",
+                gap: 16,
+                justifyItems: "center",
+              }}
+            >
+              {appearances.flatMap((variant) =>
+                colors.map((color) => (
+                  <ToastV01
+                    key={`${size}-${indicator}-${variant}-${color}`}
+                    {...args}
+                    size={size}
+                    indicator={indicator}
+                    variant={variant}
+                    color={color}
+                    title="Alert Heading"
+                    description={LOREM}
+                    avatarSrc={samplePhoto}
+                  />
+                )),
+              )}
+            </div>
+          </section>
+        )),
+      )}
+    </div>
+  ),
+  argTypes: {
+    variant: { table: { disable: true } },
+    size: { table: { disable: true } },
+    indicator: { table: { disable: true } },
+  },
+  parameters: { layout: "padded" },
+};

package/client/ui/Toaster/Toaster.stories.tsx

@@ -4,7 +4,7 @@ import { useToast } from "../../hooks/use-toast";
 import { Button } from "../../components/ui/button";
 
 const meta = {
-  title: "UI/Toaster",
+  title: "Components/Toaster",
   tags: ["autodocs"],
   parameters: {
     layout: "centered",

package/client/ui/Toggle.stories.tsx

@@ -6,7 +6,7 @@ import { UtilityAccordion } from "../components/icons/UtilityAccordion";
 import { UtilityText } from "../components/icons/UtilityText";
 
 const meta = {
-  title: "Review/Toggle",
+  title: "Components/Toggle",
   component: SegmentedControl,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Tooltip.stories.tsx

@@ -1,139 +1,312 @@
+import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   Tooltip,
   TooltipContent,
+  TooltipPanel,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { Separator } from "../components/ui/separator";
-import { Button } from "../components/ui/button";
-import { Text } from "../components/ui/typography";
 
-const meta = {
-  title: "Review/Tooltip",
-  component: Tooltip,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Tooltip>;
+const tones = ["dark", "light"] as const;
+const directions = ["top", "bottom", "left", "right"] as const;
 
-export default meta;
+// The panel is portaled, so centring it means boxing the trigger inside the
+// group's footprint and insetting it by the panel's own alignOffset shift.
+const PANEL_W = 400;
+const PANEL_H = { vertical: 234, horizontal: 226 } as const;
+const SIDE_OFFSET = 12;
+const TRIGGER = { w: 65, h: 24 };
+const MARKER_CENTRE = { inline: 54 + 5, block: 53 + 5 } as const;
 
-type Story = StoryObj<typeof meta>;
+const shift = {
+  inline: MARKER_CENTRE.inline - TRIGGER.w / 2,
+  block: MARKER_CENTRE.block - TRIGGER.h / 2,
+};
 
-export const Default: Story = {
-  render: () => (
-    <div className="p-16">
-      <Tooltip>
-        <TooltipTrigger>Hover</TooltipTrigger>
-        <TooltipContent className="w-[400px]">
-          <div className="space-y-3">
-            <Text as="h1" variant="body-base" className="text-white">
-              Strategy Details
-            </Text>
-            <div className="space-y-1">
-              <Text as="p" variant="body-small" className="text-white/90">
-                Status: Active
-              </Text>
-              <Text as="p" variant="body-small" className="text-white/90">
-                Score: 12 PTS
-              </Text>
-              <Text as="p" variant="body-small" className="text-white/90">
-                Last updated: 2 days ago
-              </Text>
-            </div>
-          </div>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  ),
+const group: Record<
+  (typeof directions)[number],
+  { width: number; height: number; trigger: React.CSSProperties }
+> = {
+  top: {
+    width: PANEL_W,
+    height: TRIGGER.h + SIDE_OFFSET + PANEL_H.vertical,
+    trigger: { left: shift.inline, top: 0 },
+  },
+  bottom: {
+    width: PANEL_W,
+    height: TRIGGER.h + SIDE_OFFSET + PANEL_H.vertical,
+    trigger: { left: shift.inline, bottom: 0 },
+  },
+  left: {
+    width: TRIGGER.w + SIDE_OFFSET + PANEL_W,
+    height: PANEL_H.horizontal,
+    trigger: { left: 0, top: shift.block },
+  },
+  right: {
+    width: TRIGGER.w + SIDE_OFFSET + PANEL_W,
+    height: PANEL_H.horizontal,
+    trigger: { right: 0, top: shift.block },
+  },
 };
 
-export const Click: Story = {
-  render: () => (
-    <div className="p-16">
-      <Tooltip trigger="click">
-        <TooltipTrigger>Click me</TooltipTrigger>
-        <TooltipContent className="w-[400px]">
-          <div className="space-y-3">
-            <Text as="h1" variant="body-base" className="text-white">
-              Click Tooltip
-            </Text>
-            <div className="space-y-1">
-              <Text as="p" variant="body-small" className="text-white/90">
-                This tooltip opens on click and closes when clicking outside.
-              </Text>
-            </div>
-          </div>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  ),
+type StoryArgs = React.ComponentProps<typeof TooltipContent> & {
+  /** `trigger` on the `Tooltip` root. */
+  trigger?: "hover" | "click";
 };
 
-export const Simple: Story = {
-  render: () => (
-    <div className="p-16">
-      <Tooltip>
-        <TooltipTrigger>Hover (Simple)</TooltipTrigger>
-        <TooltipContent variant="simple">
-          <Text as="p" variant="body-small">
-            <span className="font-semibold">Required</span> for certification
-          </Text>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  ),
+const copy = {
+  heading: "Heading",
+  body: "Body text",
+  conditionalText: "Conditional body text",
+  primaryLabel: "Label",
+  secondaryLabel: "Label",
 };
 
-export const LongText: Story = {
-  render: () => (
-    <div className="p-16 h-screen">
-      <Tooltip trigger="click">
-        <TooltipTrigger>Click for details</TooltipTrigger>
-        <TooltipContent className="w-[400px]">
-          <div className="space-y-2">
-            <Text as="h1" variant="body-base" className="text-white">
-              WELL Feature Details
-            </Text>
-            <Text as="p" variant="body-small" className="text-white/90">
-              This feature requires documentation of at least two instances of
-              biophilic design elements incorporated into the space, including
-              natural materials, plants, water features, or views to the
-              outside. All elements must be verified by a WELL Assessor during
-              the on-site performance verification visit.
-            </Text>
-          </div>
-        </TooltipContent>
-      </Tooltip>
+const meta = {
+  title: "Components/Tooltip",
+  component: TooltipContent,
+  tags: ["autodocs"],
+  args: {
+    tone: "dark",
+    direction: "top",
+    trigger: "click",
+    ...copy,
+  },
+  argTypes: {
+    direction: {
+      control: "inline-radio",
+      options: [...directions],
+      description:
+        "Which edge the marker sits on. That edge also carries the extra 8px of padding, and the panel opens on the opposite side so the marker points back at the trigger.",
+      table: { defaultValue: { summary: "top" } },
+    },
+    trigger: {
+      control: "inline-radio",
+      options: ["hover", "click"],
+      description:
+        "How the panel opens. `click` stays put until you click the trigger again, click outside, or press Escape. `hover` follows the pointer — better for short labels than for this panel.",
+      table: { defaultValue: { summary: "click" } },
+    },
+    heading: { control: "text", description: "Title line." },
+    body: {
+      control: "text",
+      description: "Supporting copy beneath the heading.",
+    },
+    conditionalText: {
+      control: "text",
+      description:
+        "Extra copy below the dashed divider. Clear it to drop both.",
+    },
+    primaryLabel: { control: "text", description: "Filled action pill." },
+    secondaryLabel: { control: "text", description: "Muted action pill." },
+    tone: { table: { disable: true } },
+    align: { table: { disable: true } },
+    sideOffset: { table: { disable: true } },
+    alignOffset: { table: { disable: true } },
+    children: { table: { disable: true } },
+    className: { table: { disable: true } },
+    asChild: { table: { disable: true } },
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Tooltip panel: a 400px card with a heading, supporting copy, a dashed",
+          "divider, conditional copy, and up to two action pills. A half-ellipse",
+          "marker sits flush with the edge that faces the trigger.",
+          "",
+          "Stories are the two tones: **Dark** and **Light** — click the trigger to",
+          "open one. Use **Controls** for `direction`, `trigger`, and the copy.",
+          "All Variants shows the full set of **8**.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { Tooltip, TooltipTrigger, TooltipContent } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Pass the copy as props — `heading`, `body`, `conditionalText` — rather than",
+          "children, so the 32px rhythm and cap-height trim stay exact. Supplying",
+          "`conditionalText` adds the dashed divider above it.",
+          "",
+          "```tsx",
+          "<Tooltip>",
+          "  <TooltipTrigger>Details</TooltipTrigger>",
+          "  <TooltipContent",
+          `    direction="top"`,
+          `    tone="dark"`,
+          `    heading="Heading"`,
+          `    body="Body text"`,
+          `    conditionalText="Conditional body text"`,
+          `    primaryLabel="Label"`,
+          `    secondaryLabel="Label"`,
+          "    onPrimaryAction={handleConfirm}",
+          "    onSecondaryAction={handleDismiss}",
+          "  />",
+          "</Tooltip>",
+          "```",
+          "",
+          "`trigger` defaults to `click`: the panel opens on click and stays until you",
+          "click the trigger again, click outside, or press Escape. That suits a surface",
+          "this size with two action pills, and it is the only mode that works on touch,",
+          "where there is no hover at all.",
+          "",
+          '`trigger="hover"` fits short labels instead. Content stays hoverable in that',
+          "mode, so pills are still reachable, but the panel closes as soon as the",
+          "pointer leaves.",
+          "",
+          "## Placement",
+          "",
+          "`direction` names the edge the marker sits on. That edge takes the extra 8px",
+          "of padding, and the panel opens on the opposite side so the marker points",
+          "back at the trigger:",
+          "",
+          "| `direction` | Marker edge | Extra padding | Panel opens |",
+          "|---|---|---|---|",
+          '| `"top"` | top | `padding-top` | below the trigger |',
+          '| `"bottom"` | bottom | `padding-bottom` | above the trigger |',
+          '| `"left"` | left | `padding-left` | right of the trigger |',
+          '| `"right"` | right | `padding-right` | left of the trigger |',
+          "",
+          "The marker keeps a fixed 54px offset from the leading edge and does not",
+          "follow the trigger — override `--tooltip-marker-inline` (top/bottom) or",
+          "`--tooltip-marker-block` (left/right) to move it.",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          '| `tone` | `"dark"` \\| `"light"` | `"dark"` | Colour scheme (stories) |',
+          '| `direction` | `"top"` \\| `"bottom"` \\| `"left"` \\| `"right"` | `"top"` | Marker edge; also sets the padding side and where the panel opens |',
+          "| `heading` | `ReactNode` | — | Title line (16px/21px, weight 500) |",
+          "| `body` | `ReactNode` | — | Supporting copy (16px/21px, weight 400) |",
+          "| `conditionalText` | `ReactNode` | — | Copy below the dashed divider; adds the divider |",
+          "| `primaryLabel` | `ReactNode` | — | Filled pill — cyan on dark, blue on light |",
+          "| `secondaryLabel` | `ReactNode` | — | Muted pill — grey on dark, outlined white on light |",
+          "| `onPrimaryAction` | `() => void` | — | Filled pill handler |",
+          "| `onSecondaryAction` | `() => void` | — | Muted pill handler |",
+          '| `trigger` (on `Tooltip`) | `"click"` \\| `"hover"` | `"click"` | How the panel opens |',
+        ].join("\n"),
+      },
+    },
+  },
+  render: ({ trigger, ...args }) => (
+    <div
+      style={{
+        display: "flex",
+        height: 340,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          width: group[args.direction ?? "top"].width,
+          height: group[args.direction ?? "top"].height,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            ...group[args.direction ?? "top"].trigger,
+          }}
+        >
+          <Tooltip trigger={trigger}>
+            <TooltipTrigger className="tooltip-link-trigger">
+              {trigger === "click" ? "Click me" : "Hover me"}
+            </TooltipTrigger>
+            <TooltipContent {...args} />
+          </Tooltip>
+        </div>
+      </div>
     </div>
   ),
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dark: Story = {
+  args: { tone: "dark" },
+};
+
+export const Light: Story = {
+  args: { tone: "light" },
 };
 
-export const Variants: Story = {
+export const AllVariants: Story = {
+  name: "All Variants",
+  parameters: { layout: "padded", controls: { disable: true } },
+  argTypes: {
+    direction: { table: { disable: true } },
+    trigger: { table: { disable: true } },
+  },
   render: () => (
-    <div className="p-16 flex gap-16">
-      <Tooltip>
-        <TooltipTrigger>Default</TooltipTrigger>
-        <TooltipContent className="w-[300px]">
-          <div className="space-y-2">
-            <Text as="h1" variant="body-base" className="text-white">
-              Default Variant
-            </Text>
-            <Text as="p" variant="body-small" className="text-white/90">
-              Dark background tooltip.
-            </Text>
+    <div
+      style={{
+        display: "grid",
+        // minmax(0, 1fr) so the track can shrink below its max-content width.
+        gridTemplateColumns: "minmax(0, 1fr)",
+        justifyItems: "center",
+        gap: 40,
+        width: "100%",
+      }}
+    >
+      {tones.map((tone) => (
+        <section key={tone} style={{ width: "100%", maxWidth: 824 }}>
+          <h3
+            style={{
+              margin: "0 0 16px",
+              fontSize: 14,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 0.5,
+              color: "#52545d",
+              textAlign: "center",
+            }}
+          >
+            {tone}
+          </h3>
+          <div
+            style={{
+              display: "grid",
+              // Capped at two tracks so the four directions land 2x2.
+              gridTemplateColumns: "repeat(auto-fill, minmax(400px, 1fr))",
+              maxWidth: 824,
+              margin: "0 auto",
+              gap: 24,
+              alignItems: "start",
+              justifyItems: "center",
+            }}
+          >
+            {directions.map((direction) => (
+              <div key={direction}>
+                <p
+                  style={{
+                    margin: "0 0 8px",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.4,
+                    color: "#71747d",
+                    textAlign: "center",
+                  }}
+                >
+                  {direction}
+                </p>
+                <TooltipPanel tone={tone} direction={direction} {...copy} />
+              </div>
+            ))}
           </div>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger>Simple</TooltipTrigger>
-        <TooltipContent variant="simple">
-          <Text as="p" variant="body-base">
-            Required for certification
-          </Text>
-        </TooltipContent>
-      </Tooltip>
+        </section>
+      ))}
     </div>
   ),
 };

package/client/ui/Typography.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Text, List, ListItem } from "@/components/ui/typography";
 
 const meta = {
-  title: "Review/Typography",
+  title: "Components/Typography",
   component: Text,
   tags: ["autodocs"],
   parameters: {