Update stories to match new component organization

stories/content/ContentContainer.stories.js

@@ -0,0 +1,71 @@
+import ContentContainer from "../../app/components/content/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/Content/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/content/ContentThumbnailTemplate.stories.js

@@ -0,0 +1,90 @@
+import ContentThumbnailTemplate from "../../app/components/content/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",
+  },
+};
+
+const mockSlugOrder = ["sample-article", "another-article", "third-article"];
+
+export default {
+  title: "Components/Content/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: "object",
+      description: "Array of slugs for consistent background cycling",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal"],
+      description: "Layout variant for the thumbnail",
+    },
+  },
+};
+
+export const Vertical = {
+  args: {
+    post: mockPost,
+    slugOrder: mockSlugOrder,
+    variant: "vertical",
+  },
+};
+
+export const Horizontal = {
+  args: {
+    post: mockPost,
+    slugOrder: mockSlugOrder,
+    variant: "horizontal",
+  },
+};
+
+export const SecondStyle = {
+  args: {
+    post: { ...mockPost, slug: "another-article" },
+    slugOrder: mockSlugOrder,
+    variant: "vertical",
+  },
+};
+
+export const ThirdStyle = {
+  args: {
+    post: { ...mockPost, slug: "third-article" },
+    slugOrder: mockSlugOrder,
+    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: mockSlugOrder,
+    variant: "vertical",
+  },
+};