Add custom intervention modals

stories/buttons/Vertical.stories.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Icon from "../../app/components/asset/icon";
+import Vertical from "../../app/components/buttons/Vertical";
+
+/** Figma: Community Rule System — Vertical button (`19787:10896`). */
+export default {
+  title: "Components/Buttons/Vertical",
+  component: Vertical,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Tile-style control: vertical stack of icon and label with brand-primary border. Used for field-type pickers and similar compact grids.",
+      },
+    },
+  },
+  argTypes: {
+    disabled: { control: { type: "boolean" } },
+    ariaLabel: { control: { type: "text" } },
+    onClick: { action: "clicked" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[130px] bg-[var(--color-surface-default-primary)] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => (
+    <Vertical {...args}>
+      <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+        <Icon
+          name="number"
+          size={32}
+          className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
+        />
+      </span>
+      <span className="w-full text-center font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
+        Number
+      </span>
+    </Vertical>
+  ),
+};
+
+export const Disabled = {
+  render: (args) => (
+    <Vertical {...args} disabled ariaLabel="Number (disabled)">
+      <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+        <Icon
+          name="number"
+          size={32}
+          className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
+        />
+      </span>
+      <span className="w-full text-center font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
+        Number
+      </span>
+    </Vertical>
+  ),
+};

stories/controls/AddCustomField.stories.js

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import AddCustomField from "../../app/components/controls/AddCustomField";
+import { MessagesProvider } from "../../app/contexts/MessagesContext";
+import messages from "../../messages/en/index";
+
+/** Figma: Add Custom Field — node `20235:12994` (Community Rule System). */
+export default {
+  title: "Components/Controls/AddCustomField",
+  component: AddCustomField,
+  decorators: [
+    (Story) => (
+      <MessagesProvider messages={messages}>
+        <div className="w-[min(100%,546px)] bg-[var(--color-surface-default-primary)] p-6">
+          <Story />
+        </div>
+      </MessagesProvider>
+    ),
+  ],
+};
+
+export const Collapsed = {
+  render: () => {
+    const [active, setActive] = useState(false);
+    return (
+      <AddCustomField
+        active={active}
+        onPressAdd={() => setActive(true)}
+        onSelectFieldType={() => {}}
+      />
+    );
+  },
+};
+
+export const Expanded = {
+  args: {
+    active: true,
+    onPressAdd: () => {},
+    onSelectFieldType: () => {},
+  },
+};