Profile page UI and functionality implemented

stories/asset/Icon.stories.js

@@ -1,4 +1,4 @@
-import { Icon } from "../../app/components/asset";
+import { Icon, ICON_NAME_OPTIONS } from "../../app/components/asset";
 
 export default {
   title: "Components/Asset/Icon",
@@ -9,7 +9,7 @@ export default {
   argTypes: {
     name: {
       control: "select",
-      options: ["exclamation"],
+      options: [...ICON_NAME_OPTIONS],
       description: "Name of the icon to render",
     },
     size: {

stories/layout/List.stories.js

@@ -0,0 +1,97 @@
+import List from "../../app/components/layout/List";
+
+const fiveItems = [
+  {
+    id: "1",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "2",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "3",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "4",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "5",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+];
+
+export default {
+  title: "Components/Layout/List",
+  component: List,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "Figma list frames: S (21863:45631), M (21863:45493), L (21844:4405). Built from ListEntry (21844:4118).",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[480px] bg-[var(--color-surface-default-primary)] p-6">
+        <div className="mx-auto max-w-[1044px]">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  argTypes: {
+    size: { control: { type: "select" }, options: ["s", "m", "l"] },
+    topDivider: { control: { type: "boolean" } },
+    leadingIcon: {
+      control: { type: "select" },
+      options: ["edit", "mail", "warning"],
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    items: fiveItems,
+    size: "m",
+    topDivider: true,
+    leadingIcon: "edit",
+  },
+};
+
+export const NoTopDivider = {
+  args: {
+    ...Default.args,
+    topDivider: false,
+  },
+};
+
+export const Small = {
+  args: {
+    ...Default.args,
+    size: "s",
+  },
+};
+
+export const Large = {
+  args: {
+    ...Default.args,
+    size: "l",
+  },
+};

stories/layout/ListEntry.stories.js

@@ -0,0 +1,63 @@
+import ListEntry from "../../app/components/layout/ListEntry";
+
+export default {
+  title: "Components/Layout/ListEntry",
+  component: ListEntry,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          'Figma "Base / Interactive" (21844:4118). One row: rules, icon, title, description, chevron.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[200px] bg-[var(--color-surface-default-primary)] p-6">
+        <div className="mx-auto max-w-[1044px]">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  argTypes: {
+    size: { control: { type: "select" }, options: ["s", "m", "l"] },
+    topDivider: { control: { type: "boolean" } },
+    bottomDivider: { control: { type: "boolean" } },
+    showDescription: { control: { type: "boolean" } },
+    leadingIcon: {
+      control: { type: "select" },
+      options: ["edit", "mail", "warning"],
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    title: "Item",
+    description: "Description/text only option here.",
+    size: "m",
+    href: "#",
+    topDivider: true,
+    bottomDivider: true,
+    showDescription: true,
+    leadingIcon: "edit",
+  },
+};
+
+export const SizeSmall = {
+  args: {
+    ...Default.args,
+    size: "s",
+  },
+};
+
+export const SizeLarge = {
+  args: {
+    ...Default.args,
+    size: "l",
+  },
+};

stories/modals/Create.stories.js

@@ -34,7 +34,7 @@ export default {
     },
     backdropVariant: {
       control: { type: "select" },
-      options: ["default", "loginYellow"],
+      options: ["default", "blurredYellow"],
     },
     currentStep: {
       control: { type: "number", min: 1, max: 5 },
@@ -174,7 +174,7 @@ LoginYellowBackdrop.args = {
   isOpen: true,
   title: "Horizontalism",
   description: "Edit or add to this description to describe what this value means to your community.",
-  backdropVariant: "loginYellow",
+  backdropVariant: "blurredYellow",
   children: (
     <div className="space-y-4">
       <p className="text-[var(--color-content-default-primary)]">

stories/navigation/Link.stories.js

@@ -0,0 +1,106 @@
+import Link from "../../app/components/navigation/Link";
+
+export default {
+  title: "Components/Navigation/Link",
+  component: Link,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Figma Navigation / Link (21861:21428). States are CSS-only (hover, focus-visible, active).",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "paragraph"],
+    },
+    theme: {
+      control: { type: "select" },
+      options: ["light", "dark"],
+    },
+    leadingIcon: { control: { type: "boolean" } },
+    trailingIcon: { control: { type: "boolean" } },
+    href: { control: { type: "text" } },
+    children: { control: { type: "text" } },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    children: "Link Text",
+    type: "primary",
+    variant: "paragraph",
+    theme: "light",
+    href: "#",
+  },
+};
+
+/**
+ * Static grid: type × variant × theme (use browser :hover / Tab for states).
+ */
+export const Matrix = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-6">
+      <div>
+        <p className="mb-3 font-inter text-sm text-[var(--color-content-default-secondary)]">
+          Light background
+        </p>
+        <div className="flex flex-col gap-4 rounded-lg bg-white p-4">
+          <div className="flex flex-wrap gap-6">
+            <Link type="primary" variant="default" theme="light" href="#">
+              Primary / default
+            </Link>
+            <Link type="primary" variant="paragraph" theme="light" href="#">
+              Primary / paragraph
+            </Link>
+            <Link type="secondary" variant="default" theme="light" href="#">
+              Secondary / default
+            </Link>
+            <Link type="secondary" variant="paragraph" theme="light" href="#">
+              Secondary / paragraph
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p className="mb-3 font-inter text-sm text-[var(--color-content-default-secondary)]">
+          Dark background
+        </p>
+        <div className="flex flex-col gap-4 rounded-lg bg-[var(--color-gray-800)] p-4">
+          <div className="flex flex-wrap gap-6">
+            <Link type="primary" variant="default" theme="dark" href="#">
+              Primary / default
+            </Link>
+            <Link type="primary" variant="paragraph" theme="dark" href="#">
+              Primary / paragraph
+            </Link>
+            <Link type="secondary" variant="default" theme="dark" href="#">
+              Secondary / default
+            </Link>
+            <Link type="secondary" variant="paragraph" theme="dark" href="#">
+              Secondary / paragraph
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const AsButton = {
+  args: {
+    children: "Action",
+    type: "primary",
+    variant: "paragraph",
+    theme: "light",
+    onClick: () => {},
+  },
+};

stories/pages/CompletedPage.stories.js

@@ -1,4 +1,24 @@
 import { CompletedScreen } from "../../app/(app)/create/screens/completed/CompletedScreen";
+import { CREATE_FLOW_LAST_PUBLISHED_KEY } from "../../lib/create/lastPublishedRule";
+
+const storySessionFixture = {
+  id: "story-rule",
+  title: "Storybook Community Rule",
+  summary: "Preview copy loaded from sessionStorage for this story.",
+  document: {
+    sections: [
+      {
+        categoryName: "Values",
+        entries: [
+          {
+            title: "Preview value",
+            body: "Example body so the document column is populated in Storybook.",
+          },
+        ],
+      },
+    ],
+  },
+};
 
 export default {
   title: "Pages/Create Flow/Completed",
@@ -13,11 +33,19 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
-      <div className="min-h-screen bg-[var(--color-teal-teal50,#c9fef9)] flex flex-col items-center">
-        <Story />
-      </div>
-    ),
+    (Story) => {
+      if (typeof sessionStorage !== "undefined") {
+        sessionStorage.setItem(
+          CREATE_FLOW_LAST_PUBLISHED_KEY,
+          JSON.stringify(storySessionFixture),
+        );
+      }
+      return (
+        <div className="min-h-screen bg-[var(--color-teal-teal50,#c9fef9)] flex flex-col items-center">
+          <Story />
+        </div>
+      );
+    },
   ],
   tags: ["autodocs"],
 };

stories/utility/Divider.stories.js

@@ -0,0 +1,74 @@
+import Divider from "../../app/components/utility/Divider";
+
+export default {
+  title: "Components/Utility/Divider",
+  component: Divider,
+  parameters: {
+    layout: "padded",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "Figma Utility / Divider (450:1941). Content uses border secondary; Menu uses tertiary. Horizontal and vertical orientations.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: { control: { type: "select" }, options: ["horizontal", "vertical"] },
+    type: { control: { type: "select" }, options: ["content", "menu"] },
+  },
+  tags: ["autodocs"],
+};
+
+export const ContentHorizontal = {
+  args: {
+    type: "content",
+    orientation: "horizontal",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-md bg-[var(--color-surface-default-primary)] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const MenuHorizontal = {
+  args: {
+    type: "menu",
+    orientation: "horizontal",
+  },
+  decorators: [ContentHorizontal.decorators[0]],
+};
+
+export const ContentVertical = {
+  args: {
+    type: "content",
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <div className="flex h-20 w-full max-w-md items-stretch bg-[var(--color-surface-default-primary)] p-4">
+      <span className="text-xs text-[var(--color-content-default-secondary)]">A</span>
+      <Divider {...args} className="mx-2" />
+      <span className="text-xs text-[var(--color-content-default-secondary)]">B</span>
+    </div>
+  ),
+};
+
+export const Matrix = {
+  render: () => (
+    <div className="space-y-8 bg-[var(--color-surface-default-primary)] p-6 text-[var(--color-content-default-primary)]">
+      <div>
+        <p className="mb-2 text-xs text-[var(--color-content-default-tertiary)]">Content</p>
+        <div className="max-w-sm space-y-1">
+          <Divider type="content" orientation="horizontal" />
+        </div>
+        <p className="mb-2 mt-6 text-xs text-[var(--color-content-default-tertiary)]">Menu</p>
+        <div className="max-w-sm space-y-1">
+          <Divider type="menu" orientation="horizontal" />
+        </div>
+      </div>
+    </div>
+  ),
+};