Informational and text templates

stories/controls/TextInput.stories.js

@@ -8,13 +8,9 @@ export default {
     layout: "centered",
   },
   argTypes: {
-    size: {
+    inputSize: {
       control: { type: "select" },
-      options: ["small", "medium", "large"],
-    },
-    labelVariant: {
-      control: { type: "select" },
-      options: ["default", "horizontal"],
+      options: ["small", "medium", "Small", "Medium"],
     },
     state: {
       control: { type: "select" },
@@ -45,8 +41,7 @@ export const Default = Template.bind({});
 Default.args = {
   label: "Default Text Input",
   placeholder: "Enter text...",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "default",
 };
 
@@ -55,8 +50,7 @@ export const Small = Template.bind({});
 Small.args = {
   label: "Small Text Input",
   placeholder: "Small size",
-  size: "small",
-  labelVariant: "default",
+  inputSize: "small",
   state: "default",
 };
 
@@ -64,36 +58,7 @@ export const Medium = Template.bind({});
 Medium.args = {
   label: "Medium Text Input",
   placeholder: "Medium size",
-  size: "medium",
-  labelVariant: "default",
-  state: "default",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  label: "Large Text Input",
-  placeholder: "Large size",
-  size: "large",
-  labelVariant: "default",
-  state: "default",
-};
-
-// Label variants
-export const DefaultLabel = Template.bind({});
-DefaultLabel.args = {
-  label: "Default Label (Top)",
-  placeholder: "Top label",
-  size: "medium",
-  labelVariant: "default",
-  state: "default",
-};
-
-export const HorizontalLabel = Template.bind({});
-HorizontalLabel.args = {
-  label: "Horizontal Label",
-  placeholder: "Left label",
-  size: "medium",
-  labelVariant: "horizontal",
+  inputSize: "medium",
   state: "default",
 };
 
@@ -102,8 +67,7 @@ export const Active = Template.bind({});
 Active.args = {
   label: "Active State",
   placeholder: "Active input",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "active",
 };
 
@@ -111,8 +75,7 @@ export const Hover = Template.bind({});
 Hover.args = {
   label: "Hover State",
   placeholder: "Hover input",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "hover",
 };
 
@@ -120,8 +83,7 @@ export const Focus = Template.bind({});
 Focus.args = {
   label: "Focus State",
   placeholder: "Focused input",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "focus",
 };
 
@@ -129,8 +91,7 @@ export const Error = Template.bind({});
 Error.args = {
   label: "Error State",
   placeholder: "Error input",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "default",
   error: true,
 };
@@ -139,8 +100,7 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   label: "Disabled State",
   placeholder: "Disabled input",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "default",
   disabled: true,
 };
@@ -163,8 +123,7 @@ export const Interactive = (args) => {
 Interactive.args = {
   label: "Interactive Text Input",
   placeholder: "Type something...",
-  size: "medium",
-  labelVariant: "default",
+  inputSize: "medium",
   state: "default",
 };
 
@@ -175,10 +134,9 @@ export const AllSizes = () => (
       <h3 className="text-lg font-semibold mb-4">Small Size</h3>
       <div className="space-y-4">
         <TextInput
-          label="Small Default"
-          placeholder="Small with top label"
-          size="small"
-          labelVariant="default"
+          label="Small Text Input"
+          placeholder="Small size input"
+          inputSize="small"
         />
       </div>
     </div>
@@ -187,34 +145,9 @@ export const AllSizes = () => (
       <h3 className="text-lg font-semibold mb-4">Medium Size</h3>
       <div className="space-y-4">
         <TextInput
-          label="Medium Default"
-          placeholder="Medium with top label"
-          size="medium"
-          labelVariant="default"
-        />
-        <TextInput
-          label="Medium Horizontal"
-          placeholder="Medium with left label"
-          size="medium"
-          labelVariant="horizontal"
-        />
-      </div>
-    </div>
-
-    <div>
-      <h3 className="text-lg font-semibold mb-4">Large Size</h3>
-      <div className="space-y-4">
-        <TextInput
-          label="Large Default"
-          placeholder="Large with top label"
-          size="large"
-          labelVariant="default"
-        />
-        <TextInput
-          label="Large Horizontal"
-          placeholder="Large with left label"
-          size="large"
-          labelVariant="horizontal"
+          label="Medium Text Input"
+          placeholder="Medium size input"
+          inputSize="medium"
         />
       </div>
     </div>
@@ -230,37 +163,37 @@ export const AllStates = () => (
         <TextInput
           label="Default State"
           placeholder="Default input"
-          size="medium"
+          inputSize="medium"
           state="default"
         />
         <TextInput
           label="Active State"
           placeholder="Active input"
-          size="medium"
+          inputSize="medium"
           state="active"
         />
         <TextInput
           label="Hover State"
           placeholder="Hover input"
-          size="medium"
+          inputSize="medium"
           state="hover"
         />
         <TextInput
           label="Focus State"
           placeholder="Focused input"
-          size="medium"
+          inputSize="medium"
           state="focus"
         />
         <TextInput
           label="Error State"
           placeholder="Error input"
-          size="medium"
+          inputSize="medium"
           error={true}
         />
         <TextInput
           label="Disabled State"
           placeholder="Disabled input"
-          size="medium"
+          inputSize="medium"
           disabled={true}
         />
       </div>

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",
+  },
+};