community-rule/stories/cards/Selection.stories.js

import Selection from "../../app/components/cards/Selection";
import { SELECTION_SIZE_OPTIONS } from "../../lib/propNormalization";

export default {
  title: "Components/Cards/Selection",
  component: Selection,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "Selectable option with size variants: `s` (chip), `m` (compact tile), and `l` (full-width row). Used in the create-flow question-and-options layout.",
      },
    },
  },
  argTypes: {
    label: {
      control: { type: "text" },
      description: "Primary label text",
    },
    supportText: {
      control: { type: "text" },
      description: "Supporting description below the label",
    },
    recommended: {
      control: { type: "boolean" },
      description: "Show yellow RECOMMENDED pill",
    },
    selected: {
      control: { type: "boolean" },
      description: "Show black SELECTED pill and dotted border",
    },
    size: {
      control: { type: "select" },
      options: [...SELECTION_SIZE_OPTIONS],
      description: "s = chip, m = compact tile, l = full-width row",
    },
    orientation: {
      control: { type: "select" },
      options: ["horizontal", "vertical"],
      description: "Legacy layout flag. Prefer size (`horizontal` → m, `vertical` → l).",
    },
    showInfoIcon: {
      control: { type: "boolean" },
      description:
        "Optional helper ? next to the label. Off in product until tooltip behavior ships.",
    },
    onClick: { action: "clicked" },
  },
  tags: ["autodocs"],
};

export const Default = {
  args: {
    label: "Label",
    supportText: "Members vote to resolve a dispute democratically.",
    recommended: true,
    selected: false,
    size: "m",
    showInfoIcon: false,
  },
};

export const SizeChip = {
  args: {
    label: "Worker-owned",
    supportText: "Hidden on the chip; used for the accessible name.",
    recommended: false,
    selected: false,
    size: "s",
  },
};

export const HorizontalRecommended = {
  args: {
    label: "Label",
    supportText:
      "Collaborative work to reach a resolution that all parties can agree upon.",
    recommended: true,
    selected: false,
    orientation: "horizontal",
  },
};

export const HorizontalSelected = {
  args: {
    label: "Label",
    supportText: "Members vote to resolve a dispute democratically.",
    recommended: false,
    selected: true,
    orientation: "horizontal",
  },
};

export const VerticalRecommended = {
  args: {
    label: "Label",
    supportText: "Invite-only",
    recommended: true,
    selected: false,
    orientation: "vertical",
    showInfoIcon: false,
  },
};

export const VerticalSelected = {
  args: {
    label: "Label",
    supportText: "Invite-only",
    recommended: false,
    selected: true,
    orientation: "vertical",
    showInfoIcon: false,
  },
};

export const AllVariants = {
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
      <div className="space-y-2">
        <p className="font-inter text-sm font-medium text-gray-600">
          Horizontal + Recommended
        </p>
        <Selection
          label="Label"
          supportText="Members vote to resolve a dispute democratically."
          recommended={true}
          selected={false}
          orientation="horizontal"
        />
      </div>
      <div className="space-y-2">
        <p className="font-inter text-sm font-medium text-gray-600">
          Horizontal + Selected
        </p>
        <Selection
          label="Label"
          supportText="Members vote to resolve a dispute democratically."
          recommended={false}
          selected={true}
          orientation="horizontal"
        />
      </div>
      <div className="space-y-2">
        <p className="font-inter text-sm font-medium text-gray-600">
          Vertical + Recommended
        </p>
        <Selection
          label="Label"
          supportText="Invite-only"
          recommended={true}
          selected={false}
          orientation="vertical"
          showInfoIcon={false}
        />
      </div>
      <div className="space-y-2">
        <p className="font-inter text-sm font-medium text-gray-600">
          Vertical + Selected
        </p>
        <Selection
          label="Label"
          supportText="Invite-only"
          recommended={false}
          selected={true}
          orientation="vertical"
          showInfoIcon={false}
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "All four variants: horizontal/vertical × recommended/selected.",
      },
    },
  },
};