Informational and text templates

stories/type/HeaderLockup.stories.js

@@ -0,0 +1,60 @@
+import HeaderLockup from "../../app/components/type/HeaderLockup";
+
+export default {
+  title: "Components/Type/HeaderLockup",
+  component: HeaderLockup,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#000000" }],
+    },
+  },
+  argTypes: {
+    justification: {
+      control: { type: "select" },
+      options: ["left", "center", "Left", "Center"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["L", "M", "l", "m"],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: "How CommunityRule helps groups like yours",
+    description:
+      "This flow will give you recommendations to improve your community and help you put together a proposal for your group to consider.",
+    justification: "left",
+    size: "L",
+  },
+};
+
+export const SizeM = {
+  args: {
+    title: "What is your community called?",
+    description: "This will be the name of your community",
+    justification: "left",
+    size: "M",
+  },
+};
+
+export const CenterJustified = {
+  args: {
+    title: "How should conflicts be resolved?",
+    description:
+      "You can also combine or add new approaches to the list",
+    justification: "center",
+    size: "L",
+  },
+};
+
+export const WithoutDescription = {
+  args: {
+    title: "Simple header without description",
+    justification: "left",
+    size: "L",
+  },
+};

stories/type/NumberedList.stories.js

@@ -0,0 +1,63 @@
+import NumberedList from "../../app/components/type/NumberedList";
+
+export default {
+  title: "Components/Type/NumberedList",
+  component: NumberedList,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#000000" }],
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["M", "S", "m", "s"],
+    },
+  },
+};
+
+const defaultItems = [
+  {
+    title: "Tell us about your organization",
+    description:
+      "Start by providing your group's name, description, and profile image.",
+  },
+  {
+    title: "Define your group's CommunityRule.",
+    description:
+      "Outline decision-making processes, conflict resolution methods, and membership practices. Get recommendations.",
+  },
+  {
+    title: "Share and evolve over time",
+    description:
+      "Review and refine your community framework before putting it into action and adapting it over time.",
+  },
+];
+
+export const Default = {
+  args: {
+    items: defaultItems,
+    size: "M",
+  },
+};
+
+export const SizeS = {
+  args: {
+    items: defaultItems,
+    size: "S",
+  },
+};
+
+export const SingleItem = {
+  args: {
+    items: [
+      {
+        title: "First step",
+        description: "This is a single item example.",
+      },
+    ],
+    size: "M",
+  },
+};