Create Community stage implemented

tests/components/AuthModalContext.test.tsx

@@ -57,7 +57,7 @@ function LoginTrigger() {
         onClick={() =>
           openLogin({
             variant: "saveProgress",
-            nextPath: "/create/community-size?syncDraft=1",
+            nextPath: "/create/community-structure?syncDraft=1",
           })
         }
       >
@@ -143,7 +143,7 @@ describe("AuthModalProvider (header overlay)", () => {
     await waitFor(() => {
       expect(requestMagicLink).toHaveBeenCalledWith(
         "guest@example.com",
-        "/create/community-size?syncDraft=1",
+        "/create/community-structure?syncDraft=1",
       );
     });
     expect(setTransferPendingFlag).toHaveBeenCalled();

tests/components/CreateFlowFooter.test.tsx

@@ -48,6 +48,22 @@ describe("CreateFlowFooter (behavioral tests)", () => {
       name: "Create Flow Footer",
     });
     expect(footer).toBeInTheDocument();
+    const bar = screen.getByRole("progressbar");
+    expect(bar).toHaveAttribute("aria-valuenow", String(1 / 6));
+  });
+
+  it("passes proportionBarProgress to the progress bar", () => {
+    render(
+      <CreateFlowFooter
+        progressBar={true}
+        proportionBarProgress="1-1"
+        proportionBarVariant="segmented"
+      />,
+    );
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuenow",
+      String(2 / 6),
+    );
   });
 
   it("does not render progress bar when progressBar is false", () => {

tests/components/HeaderLockup.test.tsx

@@ -49,6 +49,22 @@ describe("HeaderLockup (behavioral tests)", () => {
     expect(screen.getByText("Test description")).toBeInTheDocument();
   });
 
+  it("renders ReactNode description (rich inline)", () => {
+    render(
+      <HeaderLockup
+        title="Test Title"
+        description={
+          <>
+            Before <span className="underline">link</span> after
+          </>
+        }
+      />,
+    );
+    expect(screen.getByText(/Before/)).toBeInTheDocument();
+    expect(screen.getByText("link")).toBeInTheDocument();
+    expect(screen.getByText(/after/)).toBeInTheDocument();
+  });
+
   it("does not render description when not provided", () => {
     const { container } = render(<HeaderLockup title="Test Title" />);
     const description = container.querySelector("p");

tests/components/InformationalPage.test.tsx

@@ -22,6 +22,13 @@ describe("InformationalScreen", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders workshop as a link (URL TBD) with underline per Figma", () => {
+    render(<InformationalScreen />);
+    const workshop = screen.getByRole("link", { name: "workshop" });
+    expect(workshop).toHaveAttribute("href", "#");
+    expect(workshop.className).toMatch(/underline/);
+  });
+
   it("renders first numbered list item title", () => {
     render(<InformationalScreen />);
     expect(

tests/components/LoginForm.test.tsx

@@ -119,7 +119,7 @@ describe("LoginForm", () => {
       <Suspense fallback={null}>
         <LoginForm
           variant="saveProgress"
-          magicLinkNextPath="/create/community-size?syncDraft=1"
+          magicLinkNextPath="/create/community-structure?syncDraft=1"
         />
       </Suspense>,
     );
@@ -133,7 +133,7 @@ describe("LoginForm", () => {
     await waitFor(() => {
       expect(requestMagicLink).toHaveBeenCalledWith(
         "save@example.com",
-        "/create/community-size?syncDraft=1",
+        "/create/community-structure?syncDraft=1",
       );
     });
     expect(setTransferPendingFlag).toHaveBeenCalled();

tests/components/ProportionBar.test.tsx

@@ -22,6 +22,7 @@ const config: ComponentTestSuiteConfig<ProportionBarProps> = {
   optionalProps: {
     progress: "3-2",
     className: "custom-class",
+    variant: "segmented",
   },
   primaryRole: "progressbar",
   testCases: {

tests/components/SelectPage.test.tsx

@@ -8,22 +8,14 @@ describe("CommunitySizeSelectScreen", () => {
     render(<CommunitySizeSelectScreen />);
     expect(
       screen.getByRole("heading", {
-        name: "How large is your community?",
+        name: "How many people will be in your community in the near term?",
       }),
     ).toBeInTheDocument();
   });
 
-  it("renders MultiSelect add control", () => {
-    render(<CommunitySizeSelectScreen />);
-    const addButtons = screen.getAllByRole("button", {
-      name: "Add organization type",
-    });
-    expect(addButtons.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it("renders preset chip labels", () => {
+  it("renders preset size chips", () => {
     render(<CommunitySizeSelectScreen />);
     expect(screen.getByText("1 member")).toBeInTheDocument();
-    expect(screen.getByText("2-10 members")).toBeInTheDocument();
+    expect(screen.getByText("2-5 members")).toBeInTheDocument();
   });
 });

tests/components/TextPage.test.tsx

@@ -31,7 +31,7 @@ describe("CreateFlowTextFieldScreen (community name)", () => {
       screen.getByText("This will be the name of your community"),
     ).toBeInTheDocument();
     expect(
-      screen.getByPlaceholderText("Enter your community name"),
+      screen.getByPlaceholderText("Enter community name"),
     ).toBeInTheDocument();
   });
 });

tests/components/Upload.test.tsx

@@ -20,6 +20,7 @@ componentTestSuite<UploadProps>({
     label: "Upload",
     active: true,
     showHelpIcon: true,
+    hintText: "Add image from your device",
   },
   primaryRole: "button",
   testCases: {
@@ -81,14 +82,14 @@ describe("Upload (behavioral tests)", () => {
   it("displays description text", () => {
     render(<Upload label="Upload" />);
     expect(
-      screen.getByText(/Add images, PDFs, and other files to the policy/i),
+      screen.getByText(/Add image from your device/i),
     ).toBeInTheDocument();
   });
 
   it("applies active state styles correctly", () => {
     render(<Upload label="Upload" active={true} />);
     const descriptionText = screen.getByText(
-      /Add images, PDFs, and other files to the policy/i,
+      /Add image from your device/i,
     );
     const descriptionContainer = descriptionText.parentElement;
     expect(descriptionContainer).toHaveClass(
@@ -99,7 +100,7 @@ describe("Upload (behavioral tests)", () => {
   it("applies inactive state styles correctly", () => {
     render(<Upload label="Upload" active={false} />);
     const descriptionText = screen.getByText(
-      /Add images, PDFs, and other files to the policy/i,
+      /Add image from your device/i,
     );
     const descriptionContainer = descriptionText.parentElement;
     expect(descriptionContainer).toHaveClass(

tests/components/UploadPage.test.tsx

@@ -8,7 +8,7 @@ describe("CommunityUploadScreen", () => {
     render(<CommunityUploadScreen />);
     expect(
       screen.getByRole("heading", {
-        name: "How should conflicts be resolved?",
+        name: "Add a photo to identify your group",
       }),
     ).toBeInTheDocument();
   });
@@ -17,7 +17,9 @@ describe("CommunityUploadScreen", () => {
     render(<CommunityUploadScreen />);
     expect(screen.getByRole("button", { name: "Upload" })).toBeInTheDocument();
     expect(
-      screen.getByText(/Add images, PDFs, and other files to the policy/i),
+      screen.getByText(
+        /This photo be used as a profile picture for your group/i,
+      ),
     ).toBeInTheDocument();
   });
 });