Informational and text templates

app/components/controls/TextInput/TextInput.container.tsx

@@ -4,12 +4,13 @@ import { memo, forwardRef, useState, useRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
-import { normalizeInputState } from "../../../../lib/propNormalization";
+import { normalizeInputState, normalizeTextInputSize } from "../../../../lib/propNormalization";
 
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
       state: externalStateProp = "default",
+      inputSize: inputSizeProp = "medium",
       disabled = false,
       error = false,
       label,
@@ -31,6 +32,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   ) => {
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const externalState = normalizeInputState(externalStateProp);
+    const inputSize = normalizeTextInputSize(inputSizeProp);
     
     // Generate unique ID for accessibility if not provided
     const { id: inputId, labelId } = useComponentId("text-input", id);
@@ -59,13 +61,20 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
     // Determine if input is filled (has value)
     const isFilled = Boolean(value && value.trim().length > 0);
 
-    // Fixed size styles (medium only per Figma designs)
+    // Size styles based on inputSize prop
-    const sizeStyles = {
+    const sizeStyles = inputSize === "small"
-      input: "h-[40px] px-[12px] py-[8px] text-[16px]",
+      ? {
-      label: "text-[14px] leading-[20px] font-medium",
+          input: "h-[32px] px-[10px] py-[6px] text-[14px]",
-      container: "gap-[8px]",
+          label: "text-[12px] leading-[16px] font-medium",
-      radius: "var(--measures-radius-200,8px)",
+          container: "gap-[6px]",
-    };
+          radius: "var(--measures-radius-200,8px)",
+        }
+      : {
+          input: "h-[40px] px-[12px] py-[8px] text-[16px]",
+          label: "text-[14px] leading-[20px] font-medium",
+          container: "gap-[8px]",
+          radius: "var(--measures-radius-200,8px)",
+        };
 
     // State styles based on Figma designs
     const getStateStyles = (): {

app/components/controls/TextInput/TextInput.types.ts

@@ -1,5 +1,7 @@
 import type { InputStateValue } from "../../../../lib/propNormalization";
 
+export type TextInputSizeValue = "small" | "medium" | "Small" | "Medium";
+
 export interface TextInputProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
@@ -9,6 +11,12 @@ export interface TextInputProps extends Omit<
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: InputStateValue;
+  /**
+   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * @default "medium"
+   */
+  inputSize?: TextInputSizeValue;
   disabled?: boolean;
   error?: boolean;
   label?: string;
@@ -21,9 +29,10 @@ export interface TextInputProps extends Omit<
   showHelpIcon?: boolean;
   /**
    * Whether to show hint text below input (Figma prop).
+   * Can be a boolean or a string to display custom text (e.g., character count).
    * @default false
    */
-  textHint?: boolean;
+  textHint?: boolean | string;
   /**
    * Whether to show form header (label and help icon) above input (Figma prop).
    * @default true
@@ -55,6 +64,6 @@ export interface TextInputViewProps {
   isFilled?: boolean;
   inputWrapperClasses?: string;
   focusRingClasses?: string;
-  textHint?: boolean;
+  textHint?: boolean | string;
   formHeader?: boolean;
 }

app/components/controls/TextInput/TextInput.view.tsx

@@ -80,7 +80,7 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
         {textHint && (
           <div className="flex items-start relative shrink-0 w-full">
             <p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
-              Hint text here
+              {typeof textHint === "string" ? textHint : "Hint text here"}
             </p>
           </div>
         )}

app/components/type/HeaderLockup/HeaderLockup.container.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import HeaderLockupView from "./HeaderLockup.view";
+import type { HeaderLockupProps } from "./HeaderLockup.types";
+import {
+  normalizeHeaderLockupJustification,
+  normalizeHeaderLockupSize,
+} from "../../../../lib/propNormalization";
+
+const HeaderLockupContainer = memo<HeaderLockupProps>(
+  ({
+    title,
+    description,
+    justification: justificationProp = "left",
+    size: sizeProp = "L",
+  }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const justification = normalizeHeaderLockupJustification(justificationProp);
+    const size = normalizeHeaderLockupSize(sizeProp);
+
+    return (
+      <HeaderLockupView
+        title={title}
+        description={description}
+        justification={justification}
+        size={size}
+      />
+    );
+  },
+);
+
+HeaderLockupContainer.displayName = "HeaderLockup";
+
+export default HeaderLockupContainer;

app/components/type/HeaderLockup/HeaderLockup.types.ts

@@ -0,0 +1,30 @@
+export type HeaderLockupJustificationValue = "left" | "center" | "Left" | "Center";
+export type HeaderLockupSizeValue = "L" | "M" | "l" | "m";
+
+export interface HeaderLockupProps {
+  /**
+   * Title text (required)
+   */
+  title: string;
+  /**
+   * Description text (optional)
+   */
+  description?: string;
+  /**
+   * Text justification. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  justification?: HeaderLockupJustificationValue;
+  /**
+   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: HeaderLockupSizeValue;
+}
+
+export interface HeaderLockupViewProps {
+  title: string;
+  description?: string;
+  justification: "left" | "center";
+  size: "L" | "M";
+}

app/components/type/HeaderLockup/HeaderLockup.view.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { memo } from "react";
+import type { HeaderLockupViewProps } from "./HeaderLockup.types";
+
+function HeaderLockupView({
+  title,
+  description,
+  justification,
+  size,
+}: HeaderLockupViewProps) {
+  const isL = size === "L";
+  const isLeft = justification === "left";
+
+  return (
+    <div
+      className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
+        isLeft ? "items-start" : "items-center"
+      }`}
+    >
+      {/* Title */}
+      <div className="flex items-center relative shrink-0 w-full">
+        <h1
+          className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
+            isLeft ? "text-left" : "text-center"
+          } ${
+            isL
+              ? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
+              : "font-bricolage-grotesque font-bold text-[28px] leading-[36px]"
+          }`}
+        >
+          {title}
+        </h1>
+      </div>
+
+      {/* Description */}
+      {description && (
+        <p
+          className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
+            isLeft ? "" : "text-center"
+          } ${
+            isL
+              ? "text-[18px] leading-[1.3]"
+              : "text-[14px] leading-[20px]"
+          }`}
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
+
+HeaderLockupView.displayName = "HeaderLockupView";
+
+export default memo(HeaderLockupView);

app/components/type/HeaderLockup/index.tsx

@@ -0,0 +1 @@
+export { default } from "./HeaderLockup.container";

app/components/type/NumberedList/NumberedList.container.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { memo } from "react";
+import NumberedListView from "./NumberedList.view";
+import type { NumberedListProps } from "./NumberedList.types";
+import { normalizeNumberedListSize } from "../../../../lib/propNormalization";
+
+const NumberedListContainer = memo<NumberedListProps>(
+  ({ items, size: sizeProp = "M" }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeNumberedListSize(sizeProp);
+
+    return <NumberedListView items={items} size={size} />;
+  },
+);
+
+NumberedListContainer.displayName = "NumberedList";
+
+export default NumberedListContainer;

app/components/type/NumberedList/NumberedList.types.ts

@@ -0,0 +1,23 @@
+export type NumberedListSizeValue = "M" | "S" | "m" | "s";
+
+export interface NumberedListItem {
+  title: string;
+  description: string;
+}
+
+export interface NumberedListProps {
+  /**
+   * Array of list items, each with title and description
+   */
+  items: NumberedListItem[];
+  /**
+   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: NumberedListSizeValue;
+}
+
+export interface NumberedListViewProps {
+  items: NumberedListItem[];
+  size: "M" | "S";
+}

app/components/type/NumberedList/NumberedList.view.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { memo } from "react";
+import type { NumberedListViewProps } from "./NumberedList.types";
+
+function NumberedListView({ items, size }: NumberedListViewProps) {
+  const isM = size === "M";
+
+  return (
+    <ol className="flex flex-col gap-[var(--measures-spacing-600,24px)] items-start relative w-full list-none">
+      {items.map((item, index) => (
+        <li
+          key={index}
+          className="flex gap-[12px] items-center relative shrink-0 w-full"
+        >
+          {/* Number Indicator */}
+          <div
+            className={`bg-[var(--color-surface-inverse-primary,white)] flex flex-col items-center justify-center px-[11.2px] py-[4px] relative rounded-full shrink-0 ${
+              isM ? "size-[32px]" : "size-[24px]"
+            }`}
+          >
+            <div
+              className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-inverse-primary,black)] text-ellipsis whitespace-nowrap ${
+                isM
+                  ? "font-inter font-bold text-[20px] leading-[28px]"
+                  : "font-bricolage-grotesque font-bold text-[16px] leading-[22px]"
+              }`}
+            >
+              <span>{index + 1}</span>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="flex flex-[1_0_0] flex-col gap-[var(--measures-spacing-100,4px)] items-start justify-center min-h-px min-w-px">
+            {/* Title */}
+            <div className="flex items-center relative shrink-0 w-full">
+              <h3
+                className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
+                  isM
+                    ? "font-inter font-bold text-[20px] leading-[28px]"
+                    : "font-bricolage-grotesque font-bold text-[16px] leading-[22px]"
+                }`}
+              >
+                {item.title}
+              </h3>
+            </div>
+
+            {/* Description */}
+            <p
+              className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
+                isM
+                  ? "text-[14px] leading-[20px]"
+                  : "text-[12px] leading-[16px]"
+              }`}
+            >
+              {item.description}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+NumberedListView.displayName = "NumberedListView";
+
+export default memo(NumberedListView);

app/components/type/NumberedList/index.tsx

@@ -0,0 +1 @@
+export { default } from "./NumberedList.container";

app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx

@@ -5,11 +5,12 @@ import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
 const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
-  ({ secondButton, progressBar = true, className = "" }) => {
+  ({ secondButton, progressBar = true, onBackClick, className = "" }) => {
     return (
       <CreateFlowFooterView
         secondButton={secondButton}
         progressBar={progressBar}
+        onBackClick={onBackClick}
         className={className}
       />
     );

app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts

@@ -13,6 +13,10 @@ export interface CreateFlowFooterProps {
    * @default true
    */
   progressBar?: boolean;
+  /**
+   * Callback function for Back button click
+   */
+  onBackClick?: () => void;
   /**
    * Additional CSS classes
    */

app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx

@@ -5,11 +5,12 @@ import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 export function CreateFlowFooterView({
   secondButton,
   progressBar = true,
+  onBackClick,
   className = "",
 }: CreateFlowFooterProps) {
   return (
     <footer
-      className={`sticky bottom-0 z-50 bg-black w-full ${className}`}
+      className={`bg-black w-full ${className}`}
       role="contentinfo"
       aria-label="Create Flow Footer"
     >
@@ -28,6 +29,8 @@ export function CreateFlowFooterView({
           palette="default"
           size="xsmall"
           className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
+          onClick={onBackClick}
+          disabled={!onBackClick}
         >
           Back
         </Button>

app/create/informational/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import HeaderLockup from "../../components/type/HeaderLockup";
+import NumberedList from "../../components/type/NumberedList";
+
+/**
+ * Informational page for the create flow
+ * 
+ * Displays information about the create flow process using HeaderLockup and NumberedList components.
+ * Responsive sizing: uses L/M for HeaderLockup and M/S for NumberedList based on 640px breakpoint.
+ */
+export default function InformationalPage() {
+  const isMdOrLarger = useMediaQuery("(min-width: 640px)");
+
+  const items = [
+    {
+      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.",
+    },
+  ];
+
+  return (
+    <div className="w-full flex flex-col items-center px-[var(--spacing-measures-spacing-500,20px)] md:px-[64px]">
+      <div className="flex flex-col gap-[48px] items-center w-full max-w-[640px]">
+        {/* HeaderLockup: Left justification, L size at 640px+, M size below 640px */}
+        <HeaderLockup
+          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. Alternatively, there is a workshop that your group can use to go through the process it together."
+          justification="left"
+          size={isMdOrLarger ? "L" : "M"}
+        />
+
+        {/* NumberedList: M size at 640px+, S size below 640px */}
+        <NumberedList items={items} size={isMdOrLarger ? "M" : "S"} />
+      </div>
+    </div>
+  );
+}

app/create/layout.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
 import { CreateFlowProvider } from "./context/CreateFlowContext";
 import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
 import CreateFlowFooter from "../components/utility/CreateFlowFooter";
 import Button from "../components/buttons/Button";
+import type { CreateFlowStep } from "./types";
 
 /**
  * Layout for the Create Rule Flow
@@ -13,6 +15,88 @@ import Button from "../components/buttons/Button";
  * This layout wraps all create flow pages and provides the CreateFlowContext.
  * Includes the create flow-specific TopNav and Footer components.
  */
+function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // Extract current step from pathname
+  const currentStep = pathname?.split("/").pop() as CreateFlowStep | undefined;
+
+  // Define step order
+  const stepOrder: CreateFlowStep[] = [
+    "informational",
+    "text",
+    "select",
+    "upload",
+    "review",
+    "compact-cards",
+    "expanded-cards",
+    "right-rail",
+    "final-review",
+    "completed",
+  ];
+
+  // Get next step
+  const getNextStep = (): CreateFlowStep | null => {
+    if (!currentStep) return null;
+    const currentIndex = stepOrder.indexOf(currentStep);
+    if (currentIndex === -1 || currentIndex === stepOrder.length - 1) {
+      return null;
+    }
+    return stepOrder[currentIndex + 1];
+  };
+
+  // Get previous step
+  const getPreviousStep = (): CreateFlowStep | null => {
+    if (!currentStep) return null;
+    const currentIndex = stepOrder.indexOf(currentStep);
+    if (currentIndex === -1 || currentIndex === 0) {
+      return null;
+    }
+    return stepOrder[currentIndex - 1];
+  };
+
+  const nextStep = getNextStep();
+  const previousStep = getPreviousStep();
+
+  const handleNext = () => {
+    if (nextStep) {
+      router.push(`/create/${nextStep}`);
+    }
+  };
+
+  const handleBack = () => {
+    if (previousStep) {
+      router.push(`/create/${previousStep}`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-black flex flex-col">
+      <CreateFlowTopNav />
+      <main className="flex-1 flex items-center justify-center overflow-auto">
+        {children}
+      </main>
+      <CreateFlowFooter
+        secondButton={
+          nextStep ? (
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="xsmall"
+              className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
+              onClick={handleNext}
+            >
+              Next
+            </Button>
+          ) : null
+        }
+        onBackClick={previousStep ? handleBack : undefined}
+      />
+    </div>
+  );
+}
+
 export default function CreateFlowLayout({
   children,
 }: {
@@ -20,24 +104,7 @@ export default function CreateFlowLayout({
 }) {
   return (
     <CreateFlowProvider>
-      <div className="min-h-screen bg-black flex flex-col">
+      <CreateFlowLayoutContent>{children}</CreateFlowLayoutContent>
-        <CreateFlowTopNav />
-        <main className="flex-1 overflow-auto">
-          {children}
-        </main>
-        <CreateFlowFooter
-          secondButton={
-            <Button
-              buttonType="filled"
-              palette="default"
-              size="xsmall"
-              className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
-            >
-              Next
-            </Button>
-          }
-        />
-      </div>
     </CreateFlowProvider>
   );
 }

app/create/text/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import HeaderLockup from "../../components/type/HeaderLockup";
+import TextInput from "../../components/controls/TextInput";
+
+/**
+ * Text page for the create flow
+ * 
+ * Displays a text input field for user input using HeaderLockup and TextInput components.
+ * Responsive sizing: uses L/M for HeaderLockup and medium/small for TextInput based on 640px breakpoint.
+ */
+export default function TextPage() {
+  const isMdOrLarger = useMediaQuery("(min-width: 640px)");
+  const [value, setValue] = useState("");
+
+  const maxLength = 48;
+  const characterCount = value.length;
+
+  return (
+    <div className="w-full flex flex-col items-center px-[var(--spacing-measures-spacing-500,20px)] md:px-[64px]">
+      <div className="flex flex-col gap-[18px] items-start w-full max-w-[640px]">
+        {/* HeaderLockup: Left justification, L size at 640px+, M size below 640px */}
+        <HeaderLockup
+          title="What is your community called?"
+          description="This will be the name of your community"
+          justification="left"
+          size={isMdOrLarger ? "L" : "M"}
+        />
+
+        {/* TextInput: medium size at 640px+, small size below 640px */}
+        <div className="w-full">
+          <TextInput
+            placeholder="Enter your community name"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            inputSize={isMdOrLarger ? "medium" : "small"}
+            formHeader={false}
+            textHint={`${characterCount}/${maxLength}`}
+            maxLength={maxLength}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

lib/propNormalization.ts

@@ -277,6 +277,66 @@ export function normalizeAlignment(
   return defaultValue;
 }
 
+/**
+ * Normalize numbered list size prop values
+ */
+export function normalizeNumberedListSize(
+  value: string | undefined,
+  defaultValue: "M" = "M"
+): "M" | "S" {
+  if (!value) return defaultValue;
+  const normalized = value.toUpperCase();
+  if (normalized === "M" || normalized === "S") {
+    return normalized;
+  }
+  return defaultValue;
+}
+
+/**
+ * Normalize header lockup justification prop values
+ */
+export function normalizeHeaderLockupJustification(
+  value: string | undefined,
+  defaultValue: "left" = "left"
+): "left" | "center" {
+  if (!value) return defaultValue;
+  const normalized = value.toLowerCase();
+  if (normalized === "left" || normalized === "center") {
+    return normalized;
+  }
+  return defaultValue;
+}
+
+/**
+ * Normalize header lockup size prop values
+ */
+export function normalizeHeaderLockupSize(
+  value: string | undefined,
+  defaultValue: "L" = "L"
+): "L" | "M" {
+  if (!value) return defaultValue;
+  const normalized = value.toUpperCase();
+  if (normalized === "L" || normalized === "M") {
+    return normalized;
+  }
+  return defaultValue;
+}
+
+/**
+ * Normalize text input size prop values
+ */
+export function normalizeTextInputSize(
+  value: string | undefined,
+  defaultValue: "medium" = "medium"
+): "small" | "medium" {
+  if (!value) return defaultValue;
+  const normalized = value.toLowerCase();
+  if (normalized === "small" || normalized === "medium") {
+    return normalized;
+  }
+  return defaultValue;
+}
+
 /**
  * Normalize content container size prop values
  */

stories/controls/TextInput.stories.js

@@ -8,13 +8,9 @@ export default {
     layout: "centered",
   },
   argTypes: {
-    size: {
+    inputSize: {
       control: { type: "select" },
-      options: ["small", "medium", "large"],
+      options: ["small", "medium", "Small", "Medium"],
-    },
-    labelVariant: {
-      control: { type: "select" },
-      options: ["default", "horizontal"],
     },
     state: {
       control: { type: "select" },
@@ -45,8 +41,7 @@ export const Default = Template.bind({});
 Default.args = {
   label: "Default Text Input",
   placeholder: "Enter text...",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   state: "default",
 };
 
@@ -55,8 +50,7 @@ export const Small = Template.bind({});
 Small.args = {
   label: "Small Text Input",
   placeholder: "Small size",
-  size: "small",
+  inputSize: "small",
-  labelVariant: "default",
   state: "default",
 };
 
@@ -64,36 +58,7 @@ export const Medium = Template.bind({});
 Medium.args = {
   label: "Medium Text Input",
   placeholder: "Medium size",
-  size: "medium",
+  inputSize: "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",
   state: "default",
 };
 
@@ -102,8 +67,7 @@ export const Active = Template.bind({});
 Active.args = {
   label: "Active State",
   placeholder: "Active input",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   state: "active",
 };
 
@@ -111,8 +75,7 @@ export const Hover = Template.bind({});
 Hover.args = {
   label: "Hover State",
   placeholder: "Hover input",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   state: "hover",
 };
 
@@ -120,8 +83,7 @@ export const Focus = Template.bind({});
 Focus.args = {
   label: "Focus State",
   placeholder: "Focused input",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   state: "focus",
 };
 
@@ -129,8 +91,7 @@ export const Error = Template.bind({});
 Error.args = {
   label: "Error State",
   placeholder: "Error input",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   state: "default",
   error: true,
 };
@@ -139,8 +100,7 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   label: "Disabled State",
   placeholder: "Disabled input",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   state: "default",
   disabled: true,
 };
@@ -163,8 +123,7 @@ export const Interactive = (args) => {
 Interactive.args = {
   label: "Interactive Text Input",
   placeholder: "Type something...",
-  size: "medium",
+  inputSize: "medium",
-  labelVariant: "default",
   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"
+          label="Small Text Input"
-          placeholder="Small with top label"
+          placeholder="Small size input"
-          size="small"
+          inputSize="small"
-          labelVariant="default"
         />
       </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"
+          label="Medium Text Input"
-          placeholder="Medium with top label"
+          placeholder="Medium size input"
-          size="medium"
+          inputSize="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"
         />
       </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",
+  },
+};

tests/components/HeaderLockup.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import HeaderLockup from "../../app/components/type/HeaderLockup";
+import {
+  componentTestSuite,
+  ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+type HeaderLockupProps = React.ComponentProps<typeof HeaderLockup>;
+
+const baseProps: HeaderLockupProps = {
+  title: "Test Title",
+};
+
+const config: ComponentTestSuiteConfig<HeaderLockupProps> = {
+  component: HeaderLockup,
+  name: "HeaderLockup",
+  props: baseProps,
+  requiredProps: ["title"],
+  optionalProps: {
+    description: "Test description",
+    justification: "left",
+    size: "L",
+  },
+  primaryRole: "heading",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+componentTestSuite<HeaderLockupProps>(config);
+
+describe("HeaderLockup (behavioral tests)", () => {
+  it("renders title", () => {
+    render(<HeaderLockup title="Test Title" />);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      "Test Title",
+    );
+  });
+
+  it("renders description when provided", () => {
+    render(
+      <HeaderLockup title="Test Title" description="Test description" />,
+    );
+    expect(screen.getByText("Test description")).toBeInTheDocument();
+  });
+
+  it("does not render description when not provided", () => {
+    const { container } = render(<HeaderLockup title="Test Title" />);
+    const description = container.querySelector("p");
+    expect(description).not.toBeInTheDocument();
+  });
+
+  it("accepts justification prop", () => {
+    const { container } = render(
+      <HeaderLockup title="Test Title" justification="center" />,
+    );
+    const heading = container.querySelector("h1");
+    expect(heading).toHaveClass("text-center");
+  });
+
+  it("accepts size prop", () => {
+    render(<HeaderLockup title="Test Title" size="M" />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("accepts PascalCase props", () => {
+    render(
+      <HeaderLockup
+        title="Test Title"
+        justification="Left"
+        size="L"
+      />,
+    );
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

tests/components/NumberedList.test.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import NumberedList from "../../app/components/type/NumberedList";
+import {
+  componentTestSuite,
+  ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+type NumberedListProps = React.ComponentProps<typeof NumberedList>;
+
+const mockItems = [
+  {
+    title: "First step",
+    description: "This is the first step description",
+  },
+  {
+    title: "Second step",
+    description: "This is the second step description",
+  },
+  {
+    title: "Third step",
+    description: "This is the third step description",
+  },
+];
+
+const baseProps: NumberedListProps = {
+  items: mockItems,
+};
+
+const config: ComponentTestSuiteConfig<NumberedListProps> = {
+  component: NumberedList,
+  name: "NumberedList",
+  props: baseProps,
+  requiredProps: ["items"],
+  optionalProps: {
+    size: "M",
+  },
+  primaryRole: "list",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+componentTestSuite<NumberedListProps>(config);
+
+describe("NumberedList (behavioral tests)", () => {
+  it("renders all items", () => {
+    render(<NumberedList items={mockItems} />);
+    expect(screen.getByText("First step")).toBeInTheDocument();
+    expect(screen.getByText("Second step")).toBeInTheDocument();
+    expect(screen.getByText("Third step")).toBeInTheDocument();
+  });
+
+  it("renders item descriptions", () => {
+    render(<NumberedList items={mockItems} />);
+    expect(
+      screen.getByText("This is the first step description"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders numbered indicators", () => {
+    const { container } = render(<NumberedList items={mockItems} />);
+    const numbers = container.querySelectorAll("ol > li");
+    expect(numbers).toHaveLength(3);
+  });
+
+  it("accepts size prop", () => {
+    const { container } = render(<NumberedList items={mockItems} size="S" />);
+    const list = container.querySelector("ol");
+    expect(list).toBeInTheDocument();
+  });
+
+  it("accepts PascalCase size prop", () => {
+    const { container } = render(<NumberedList items={mockItems} size="M" />);
+    const list = container.querySelector("ol");
+    expect(list).toBeInTheDocument();
+  });
+});

tests/components/TextInput.test.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
 import TextInput from "../../app/components/controls/TextInput";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
@@ -13,6 +16,7 @@ componentTestSuite<TextInputProps>({
   requiredProps: ["label"],
   optionalProps: {
     placeholder: "Enter value",
+    inputSize: "medium",
   },
   primaryRole: "textbox",
   testCases: {
@@ -27,3 +31,25 @@ componentTestSuite<TextInputProps>({
     errorProps: { error: true },
   },
 });
+
+describe("TextInput (size tests)", () => {
+  it("renders with medium size by default", () => {
+    const { container } = render(
+      <TextInput label="Test" inputSize="medium" />,
+    );
+    const input = container.querySelector("input");
+    expect(input).toHaveClass("h-[40px]");
+  });
+
+  it("renders with small size", () => {
+    const { container } = render(<TextInput label="Test" inputSize="small" />);
+    const input = container.querySelector("input");
+    expect(input).toHaveClass("h-[32px]");
+  });
+
+  it("accepts PascalCase size prop", () => {
+    const { container } = render(<TextInput label="Test" inputSize="Small" />);
+    const input = container.querySelector("input");
+    expect(input).toHaveClass("h-[32px]");
+  });
+});