community-rule/docs/assets/NumberedCard.stories-B2w08pIr.js

import { j as e } from "./jsx-runtime-C_nHp4yK.js";
import { N as o } from "./NumberedCard-ClCynPua.js";
import "./iframe-D_aMTKb2.js";
import "./preload-helper-DIZFD4sK.js";
import "./SectionNumber-Cptefv18.js";
const m = {
    title: "Components/NumberedCard",
    component: o,
    parameters: {
      layout: "centered",
      docs: {
        description: {
          component:
            "Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints.",
        },
      },
    },
    argTypes: {
      number: {
        control: { type: "number", min: 1, max: 9 },
        description: "The number to display on the card",
      },
      text: {
        control: { type: "text" },
        description: "The descriptive text for this step",
      },
      iconShape: {
        control: { type: "select" },
        options: ["blob", "gear", "star"],
        description:
          "The shape of the icon background (currently not used, uses PNG images)",
      },
      iconColor: {
        control: { type: "select" },
        options: ["green", "purple", "orange", "blue"],
        description:
          "The color theme for the icon (currently not used, uses PNG images)",
      },
    },
    tags: ["autodocs"],
  },
  t = {
    args: {
      number: 1,
      text: "Document how your community makes decisions",
      iconShape: "blob",
      iconColor: "green",
    },
  },
  r = {
    args: {
      number: 1,
      text: "Example card text",
      iconShape: "blob",
      iconColor: "green",
    },
    render: (s) =>
      e.jsxs("div", {
        className: "space-y-4",
        children: [
          e.jsx(o, { ...s, number: 1, text: "First step in the process" }),
          e.jsx(o, {
            ...s,
            number: 2,
            text: "Second step with different content",
          }),
          e.jsx(o, {
            ...s,
            number: 3,
            text: "Third and final step of the workflow",
          }),
        ],
      }),
    parameters: {
      docs: {
        description: {
          story:
            "Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
        },
      },
    },
  },
  n = {
    args: {
      number: 1,
      text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
      iconShape: "blob",
      iconColor: "green",
    },
    parameters: {
      docs: {
        description: {
          story:
            "Demonstrates how the card handles longer text content across different breakpoints.",
        },
      },
    },
  };
t.parameters = {
  ...t.parameters,
  docs: {
    ...t.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    number: 1,
    text: "Document how your community makes decisions",
    iconShape: "blob",
    iconColor: "green"
  }
}`,
      ...t.parameters?.docs?.source,
    },
  },
};
r.parameters = {
  ...r.parameters,
  docs: {
    ...r.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    number: 1,
    text: "Example card text",
    iconShape: "blob",
    iconColor: "green"
  },
  render: args => <div className="space-y-4">
      <NumberedCard {...args} number={1} text="First step in the process" />
      <NumberedCard {...args} number={2} text="Second step with different content" />
      <NumberedCard {...args} number={3} text="Third and final step of the workflow" />
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Shows all three numbered cards with different content to demonstrate the visual hierarchy."
      }
    }
  }
}`,
      ...r.parameters?.docs?.source,
    },
  },
};
n.parameters = {
  ...n.parameters,
  docs: {
    ...n.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    number: 1,
    text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
    iconShape: "blob",
    iconColor: "green"
  },
  parameters: {
    docs: {
      description: {
        story: "Demonstrates how the card handles longer text content across different breakpoints."
      }
    }
  }
}`,
      ...n.parameters?.docs?.source,
    },
  },
};
const l = ["Default", "AllNumbers", "LongText"];
export {
  r as AllNumbers,
  t as Default,
  n as LongText,
  l as __namedExportsOrder,
  m as default,
};