Content page storybook added

stories/AskOrganizer.stories.js

@@ -34,7 +34,7 @@ export default {
     },
     variant: {
       control: { type: "select" },
-      options: ["centered", "left-aligned", "compact"],
+      options: ["centered", "left-aligned", "compact", "inverse"],
       description: "Layout variant for the component",
     },
     onContactClick: {
@@ -76,3 +76,14 @@ export const Compact = {
     onContactClick: (data) => console.log("Contact clicked:", data),
   },
 };
+
+export const Inverse = {
+  args: {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    buttonText: "Ask an organizer",
+    buttonHref: "#contact",
+    variant: "inverse",
+    onContactClick: (data) => console.log("Contact clicked:", data),
+  },
+};

stories/ConditionalHeader.stories.js

@@ -0,0 +1,38 @@
+import ConditionalHeader from "../app/components/ConditionalHeader";
+
+export default {
+  title: "Components/ConditionalHeader",
+  component: ConditionalHeader,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The ConditionalHeader component conditionally renders either HomeHeader or Header based on the current pathname.",
+      },
+    },
+  },
+  argTypes: {
+    pathname: {
+      control: "text",
+      description: "Current pathname to determine which header to render",
+    },
+  },
+};
+
+export const HomePage = {
+  args: {
+    pathname: "/",
+  },
+};
+
+export const BlogPage = {
+  args: {
+    pathname: "/blog/sample-article",
+  },
+};
+
+export const OtherPage = {
+  args: {
+    pathname: "/about",
+  },
+};

stories/ContentBanner.stories.js

@@ -0,0 +1,68 @@
+import ContentBanner from "../app/components/ContentBanner";
+
+const mockBlogPost = {
+  slug: "sample-article",
+  frontmatter: {
+    title: "Sample Article Title",
+    description:
+      "This is a sample article description that explains what the article covers.",
+    author: "Sample Author",
+    date: "2025-01-15",
+  },
+  htmlContent:
+    "<p>This is the main content of the sample article.</p><p>It has multiple paragraphs.</p>",
+};
+
+export default {
+  title: "Components/ContentBanner",
+  component: ContentBanner,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The ContentBanner component displays the header information for blog articles, including title, description, author, and date.",
+      },
+    },
+  },
+  argTypes: {
+    post: {
+      control: "object",
+      description: "Blog post object with frontmatter and content",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    post: mockBlogPost,
+  },
+};
+
+export const LongTitle = {
+  args: {
+    post: {
+      ...mockBlogPost,
+      frontmatter: {
+        ...mockBlogPost.frontmatter,
+        title:
+          "This is a Very Long Article Title That Tests How the Component Handles Extended Text",
+        description:
+          "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display.",
+      },
+    },
+  },
+};
+
+export const DifferentAuthor = {
+  args: {
+    post: {
+      ...mockBlogPost,
+      frontmatter: {
+        ...mockBlogPost.frontmatter,
+        title: "Article by Different Author",
+        author: "Community Organizer",
+        date: "2025-02-20",
+      },
+    },
+  },
+};

stories/ContentContainer.stories.js

@@ -0,0 +1,71 @@
+import ContentContainer from "../app/components/ContentContainer";
+
+const mockPost = {
+  slug: "sample-article",
+  frontmatter: {
+    title: "Sample Article Title",
+    description:
+      "This is a sample article description that explains what the article covers.",
+    author: "Sample Author",
+    date: "2025-01-15",
+  },
+};
+
+export default {
+  title: "Components/ContentContainer",
+  component: ContentContainer,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The ContentContainer component displays article metadata including title, description, author, and date in a structured layout.",
+      },
+    },
+  },
+  argTypes: {
+    post: {
+      control: "object",
+      description: "Blog post object with frontmatter",
+    },
+    slugOrder: {
+      control: "number",
+      description: "Order index for cycling through different icon styles",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    post: mockPost,
+    slugOrder: 0,
+  },
+};
+
+export const SecondStyle = {
+  args: {
+    post: mockPost,
+    slugOrder: 1,
+  },
+};
+
+export const ThirdStyle = {
+  args: {
+    post: mockPost,
+    slugOrder: 2,
+  },
+};
+
+export const LongContent = {
+  args: {
+    post: {
+      ...mockPost,
+      frontmatter: {
+        ...mockPost.frontmatter,
+        title: "This is a Very Long Article Title That Tests Text Wrapping",
+        description:
+          "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display within the container.",
+      },
+    },
+    slugOrder: 0,
+  },
+};

stories/ContentThumbnailTemplate.stories.js

@@ -0,0 +1,89 @@
+import ContentThumbnailTemplate from "../app/components/ContentThumbnailTemplate";
+
+const mockPost = {
+  slug: "sample-article",
+  frontmatter: {
+    title: "Sample Article Title",
+    description:
+      "This is a sample article description that explains what the article covers.",
+    author: "Sample Author",
+    date: "2025-01-15",
+  },
+};
+
+export default {
+  title: "Components/ContentThumbnailTemplate",
+  component: ContentThumbnailTemplate,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The ContentThumbnailTemplate component displays blog post previews with background images, content, and metadata in both vertical and horizontal layouts.",
+      },
+    },
+  },
+  argTypes: {
+    post: {
+      control: "object",
+      description: "Blog post object with frontmatter",
+    },
+    slugOrder: {
+      control: "number",
+      description:
+        "Order index for cycling through different background and icon styles",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal"],
+      description: "Layout variant for the thumbnail",
+    },
+  },
+};
+
+export const Vertical = {
+  args: {
+    post: mockPost,
+    slugOrder: 0,
+    variant: "vertical",
+  },
+};
+
+export const Horizontal = {
+  args: {
+    post: mockPost,
+    slugOrder: 0,
+    variant: "horizontal",
+  },
+};
+
+export const SecondStyle = {
+  args: {
+    post: mockPost,
+    slugOrder: 1,
+    variant: "vertical",
+  },
+};
+
+export const ThirdStyle = {
+  args: {
+    post: mockPost,
+    slugOrder: 2,
+    variant: "vertical",
+  },
+};
+
+export const LongContent = {
+  args: {
+    post: {
+      ...mockPost,
+      frontmatter: {
+        ...mockPost.frontmatter,
+        title: "This is a Very Long Article Title That Tests Text Wrapping",
+        description:
+          "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display within the thumbnail.",
+      },
+    },
+    slugOrder: 0,
+    variant: "vertical",
+  },
+};

stories/RelatedArticles.stories.js

@@ -0,0 +1,121 @@
+import RelatedArticles from "../app/components/RelatedArticles";
+
+const mockRelatedPosts = [
+  {
+    slug: "related-article-1",
+    frontmatter: {
+      title: "Related Article One",
+      description: "This is the first related article description.",
+      author: "Author One",
+      date: "2025-01-10",
+    },
+  },
+  {
+    slug: "related-article-2",
+    frontmatter: {
+      title: "Related Article Two",
+      description: "This is the second related article description.",
+      author: "Author Two",
+      date: "2025-01-12",
+    },
+  },
+  {
+    slug: "related-article-3",
+    frontmatter: {
+      title: "Related Article Three",
+      description: "This is the third related article description.",
+      author: "Author Three",
+      date: "2025-01-14",
+    },
+  },
+];
+
+export default {
+  title: "Components/RelatedArticles",
+  component: RelatedArticles,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The RelatedArticles component displays a carousel of related blog posts with progress bars on mobile and a scrollable slider on desktop.",
+      },
+    },
+  },
+  argTypes: {
+    relatedPosts: {
+      control: "object",
+      description: "Array of related blog post objects",
+    },
+    currentPostSlug: {
+      control: "text",
+      description: "Slug of the current post to exclude from related articles",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    relatedPosts: mockRelatedPosts,
+    currentPostSlug: "current-article",
+  },
+};
+
+export const TwoArticles = {
+  args: {
+    relatedPosts: mockRelatedPosts.slice(0, 2),
+    currentPostSlug: "current-article",
+  },
+};
+
+export const OneArticle = {
+  args: {
+    relatedPosts: mockRelatedPosts.slice(0, 1),
+    currentPostSlug: "current-article",
+  },
+};
+
+export const Empty = {
+  args: {
+    relatedPosts: [],
+    currentPostSlug: "current-article",
+  },
+};
+
+export const LongTitles = {
+  args: {
+    relatedPosts: [
+      {
+        slug: "long-title-1",
+        frontmatter: {
+          title:
+            "This is a Very Long Article Title That Tests Text Wrapping and Display",
+          description:
+            "This is a longer description that tests how the component handles extended text content.",
+          author: "Author One",
+          date: "2025-01-10",
+        },
+      },
+      {
+        slug: "long-title-2",
+        frontmatter: {
+          title: "Another Very Long Article Title for Testing Purposes",
+          description:
+            "Another longer description for testing text handling in the component.",
+          author: "Author Two",
+          date: "2025-01-12",
+        },
+      },
+      {
+        slug: "long-title-3",
+        frontmatter: {
+          title: "Third Long Article Title to Complete the Set",
+          description:
+            "Final longer description to test the component's text handling capabilities.",
+          author: "Author Three",
+          date: "2025-01-14",
+        },
+      },
+    ],
+    currentPostSlug: "current-article",
+  },
+};