Informational and text templates

2026-02-08 22:04:36 -07:00
parent c43f74f345
commit 2e1538770c
24 changed files with 852 additions and 121 deletions
@@ -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)
-    const sizeStyles = {
-      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)",
-    };
+    // Size styles based on inputSize prop
+    const sizeStyles = inputSize === "small"
+      ? {
+          input: "h-[32px] px-[10px] py-[6px] text-[14px]",
+          label: "text-[12px] leading-[16px] font-medium",
+          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 = (): {
@@ -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;
 }
@@ -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>
        )}
@@ -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;
@@ -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";
+}
@@ -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);
@@ -0,0 +1 @@
+export { default } from "./HeaderLockup.container";
@@ -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;
@@ -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";
+}
@@ -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);
@@ -0,0 +1 @@
+export { default } from "./NumberedList.container";
@@ -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}
      />
    );
@@ -13,6 +13,10 @@ export interface CreateFlowFooterProps {
   * @default true
   */
  progressBar?: boolean;
+  /**
+   * Callback function for Back button click
+   */
+  onBackClick?: () => void;
  /**
   * Additional CSS classes
   */
@@ -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>
@@ -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>
+  );
+}
@@ -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">
-        <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>
+      <CreateFlowLayoutContent>{children}</CreateFlowLayoutContent>
    </CreateFlowProvider>
  );
 }
@@ -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>
+  );
+}
				`@@ -0,0 +1 @@`
				`export { default } from "./HeaderLockup.container";`
				`@@ -0,0 +1 @@`
				`export { default } from "./NumberedList.container";`