community-rule/docs/assets/NumberedCards.stories-RsE3R6pO.js

import { j as e } from "./jsx-runtime-C_nHp4yK.js";
import { N as m } from "./NumberedCard-ClCynPua.js";
import { S as u } from "./SectionHeader-CadpOP1T.js";
import { B as c } from "./Button-Z4hbXct5.js";
import "./iframe-D_aMTKb2.js";
import "./preload-helper-DIZFD4sK.js";
import "./SectionNumber-Cptefv18.js";
const l = ({ title: r, subtitle: a, cards: i }) => {
  const p = {
    "@context": "https://schema.org",
    "@type": "HowTo",
    name: r,
    description: a,
    step: i.map((o, t) => ({
      "@type": "HowToStep",
      position: t + 1,
      name: o.text,
      text: o.text,
    })),
  };
  return e.jsxs(e.Fragment, {
    children: [
      e.jsx("script", {
        type: "application/ld+json",
        dangerouslySetInnerHTML: { __html: JSON.stringify(p) },
      }),
      e.jsx("section", {
        className:
          "bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]",
        children: e.jsx("div", {
          className: "max-w-[var(--spacing-measures-max-width-lg)] mx-auto",
          children: e.jsxs("div", {
            className:
              "grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]",
            children: [
              e.jsx("div", {
                children: e.jsx(u, {
                  title: r,
                  subtitle: a,
                  titleLg: "How CommunityRule helps",
                }),
              }),
              e.jsx("div", {
                className:
                  "grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]",
                children: i.map((o, t) =>
                  e.jsx(
                    m,
                    {
                      number: t + 1,
                      text: o.text,
                      iconShape: o.iconShape,
                      iconColor: o.iconColor,
                    },
                    t,
                  ),
                ),
              }),
              e.jsxs("div", {
                className: "text-center sm:text-left lg:text-center",
                children: [
                  e.jsx("div", {
                    className: "block lg:hidden",
                    children: e.jsx(c, {
                      variant: "default",
                      size: "large",
                      children: "Create CommunityRule",
                    }),
                  }),
                  e.jsx("div", {
                    className: "hidden lg:block",
                    children: e.jsx(c, {
                      variant: "outlined",
                      size: "large",
                      children: "See how it works",
                    }),
                  }),
                ],
              }),
            ],
          }),
        }),
      }),
    ],
  });
};
l.__docgenInfo = { description: "", methods: [], displayName: "NumberedCards" };
const C = {
    title: "Components/NumberedCards",
    component: l,
    parameters: {
      layout: "fullscreen",
      docs: {
        description: {
          component:
            "A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system.",
        },
      },
    },
    argTypes: {
      title: {
        control: { type: "text" },
        description: "The main title for the section",
      },
      subtitle: {
        control: { type: "text" },
        description: "The subtitle text below the main title",
      },
      cards: {
        control: { type: "object" },
        description:
          "Array of card objects with text, iconShape, and iconColor properties",
      },
    },
    tags: ["autodocs"],
  },
  n = {
    args: {
      title: "How CommunityRule works",
      subtitle: "Here's a quick overview of the process, from start to finish.",
      cards: [
        {
          text: "Document how your community makes decisions",
          iconShape: "blob",
          iconColor: "green",
        },
        {
          text: "Build an operating manual for a successful community",
          iconShape: "gear",
          iconColor: "purple",
        },
        {
          text: "Get a link to your manual for your group to review and evolve",
          iconShape: "star",
          iconColor: "orange",
        },
      ],
    },
  },
  s = {
    args: {
      title: "Our Process",
      subtitle: "Follow these simple steps to get started with your project.",
      cards: [
        {
          text: "Define your project requirements and goals",
          iconShape: "blob",
          iconColor: "green",
        },
        {
          text: "Collaborate with our team to create the perfect solution",
          iconShape: "gear",
          iconColor: "purple",
        },
        {
          text: "Launch and iterate based on user feedback",
          iconShape: "star",
          iconColor: "orange",
        },
        {
          text: "Scale and optimize for continued success",
          iconShape: "blob",
          iconColor: "blue",
        },
      ],
    },
    parameters: {
      docs: {
        description: {
          story:
            "Example with custom content and four cards to show flexibility.",
        },
      },
    },
  };
n.parameters = {
  ...n.parameters,
  docs: {
    ...n.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    title: "How CommunityRule works",
    subtitle: "Here's a quick overview of the process, from start to finish.",
    cards: [{
      text: "Document how your community makes decisions",
      iconShape: "blob",
      iconColor: "green"
    }, {
      text: "Build an operating manual for a successful community",
      iconShape: "gear",
      iconColor: "purple"
    }, {
      text: "Get a link to your manual for your group to review and evolve",
      iconShape: "star",
      iconColor: "orange"
    }]
  }
}`,
      ...n.parameters?.docs?.source,
    },
  },
};
s.parameters = {
  ...s.parameters,
  docs: {
    ...s.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    title: "Our Process",
    subtitle: "Follow these simple steps to get started with your project.",
    cards: [{
      text: "Define your project requirements and goals",
      iconShape: "blob",
      iconColor: "green"
    }, {
      text: "Collaborate with our team to create the perfect solution",
      iconShape: "gear",
      iconColor: "purple"
    }, {
      text: "Launch and iterate based on user feedback",
      iconShape: "star",
      iconColor: "orange"
    }, {
      text: "Scale and optimize for continued success",
      iconShape: "blob",
      iconColor: "blue"
    }]
  },
  parameters: {
    docs: {
      description: {
        story: "Example with custom content and four cards to show flexibility."
      }
    }
  }
}`,
      ...s.parameters?.docs?.source,
    },
  },
};
const v = ["Default", "CustomContent"];
export {
  s as CustomContent,
  n as Default,
  v as __namedExportsOrder,
  C as default,
};