Learn page svgs updated

tests/components/ContentBanner.test.tsx

@@ -62,6 +62,61 @@ describe("ContentBanner", () => {
     expect(screen.getByText("Test description")).toBeInTheDocument();
   });
 
+  it("renders article banner with horizontal thumbnail below md and section SVG at md+", () => {
+    const { container } = render(
+      <ContentBanner
+        post={{
+          ...mockPost,
+          slug: "resolving-active-conflicts",
+          frontmatter: {
+            ...mockPost.frontmatter,
+            thumbnail: {
+              vertical: "resolving-active-conflicts-vertical.svg",
+              horizontal: "resolving-active-conflicts-horizontal.svg",
+            },
+          },
+        }}
+      />,
+    );
+
+    const banner = container.querySelector('[data-node-id="19189:9053"]');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass("min-h-[275px]", "md:min-h-[224px]", "xl:min-h-[504px]");
+
+    const horizontalBackground = container.querySelector(
+      '[data-name="ContentBannerBackgroundHorizontal"]',
+    );
+    expect(horizontalBackground).toHaveClass(
+      "absolute",
+      "inset-x-0",
+      "top-0",
+      "md:hidden",
+    );
+    expect(horizontalBackground?.querySelector("img")).toHaveAttribute(
+      "src",
+      "/content/blog/resolving-active-conflicts-horizontal.svg",
+    );
+
+    const sectionBackground = container.querySelector(
+      '[data-name="ContentBannerBackgroundSection"]',
+    );
+    expect(sectionBackground).toHaveClass(
+      "absolute",
+      "inset-x-0",
+      "top-0",
+      "hidden",
+      "md:block",
+    );
+    expect(sectionBackground?.querySelector("img")).toHaveAttribute(
+      "src",
+      "/content/blog/resolving-active-conflicts-section.svg",
+    );
+
+    const copyColumn = container.querySelector('[data-node-id="19189:9010"]');
+    expect(copyColumn).toHaveClass("md:max-w-[280px]", "lg:max-w-[365px]", "xl:max-w-[623px]");
+    expect(copyColumn).not.toHaveClass("h-[160px]");
+  });
+
   it("renders useCase variant rule preview as link when href is set", () => {
     const { container } = render(
       <ContentBanner

tests/pages/blog.test.jsx

@@ -246,12 +246,16 @@ describe("BlogPostPage", () => {
       .getByText(/This is the article content/)
       .closest("div.post-body");
     expect(contentDiv).toHaveClass("post-body");
-    expect(contentDiv).toHaveClass("-mt-[var(--spacing-scale-048)]");
     expect(contentDiv).toHaveClass(
       "text-[var(--color-content-inverse-primary)]",
     );
     expect(contentDiv).toHaveClass("text-[16px]");
     expect(contentDiv).toHaveClass("leading-[24px]");
+
+    const article = contentDiv?.closest("article");
+    expect(article).toHaveClass("p-[var(--spacing-scale-024)]");
+    expect(article).toHaveClass("sm:py-[var(--spacing-scale-032)]");
+    expect(article).not.toHaveClass("-mt-[var(--spacing-scale-048)]");
   });
 
   it("applies responsive text sizing", async () => {
@@ -280,7 +284,6 @@ describe("BlogPostPage", () => {
     const contentDiv = screen
       .getByText(/This is the article content/)
       .closest("div.post-body");
-    expect(contentDiv).toHaveClass("sm:mx-auto");
     expect(contentDiv).toHaveClass("sm:max-w-[390px]");
     expect(contentDiv).toHaveClass("md:max-w-[472px]");
     expect(contentDiv).toHaveClass("lg:max-w-[700px]");

tests/unit/ContentContainer.test.jsx

@@ -4,18 +4,25 @@ import ContentContainer from "../../app/components/content/ContentContainer";
 
 // Mock asset utils
 vi.mock("../../lib/assetUtils", () => ({
-  getAssetPath: vi.fn((asset) => `/assets/${asset}`),
   contentBlogTagPath: vi.fn((slug) => `/content/blog/${slug}-tag.svg`),
+  contentCatalogSlugForFallback: vi.fn((slug) => {
+    const catalog = [
+      "resolving-active-conflicts",
+      "operational-security-mutual-aid",
+      "making-decisions-without-hierarchy",
+    ];
+    if (!slug) return catalog[0];
+    const index =
+      Math.abs(
+        slug.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0),
+      ) % catalog.length;
+    return catalog[index];
+  }),
   CONTENT_CATALOG_SLUG_ORDER: [
     "resolving-active-conflicts",
     "operational-security-mutual-aid",
     "making-decisions-without-hierarchy",
   ],
-  ASSETS: {
-    ICON_1: "Icon_1.svg",
-    ICON_2: "Icon_2.svg",
-    ICON_3: "Icon_3.svg",
-  },
 }));
 
 // Mock blog post data
@@ -52,7 +59,10 @@ describe("ContentContainer", () => {
 
     const icon = screen.getByAltText("Icon for Test Article Title");
     expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute("src", "/assets/Icon_1.svg");
+    expect(icon).toHaveAttribute(
+      "src",
+      "/content/blog/resolving-active-conflicts-tag.svg",
+    );
     expect(icon).toHaveClass("w-[60px]", "h-[30px]", "object-contain");
   });
 
@@ -159,7 +169,10 @@ describe("ContentContainer", () => {
     const { rerender } = render(<ContentContainer post={mockPost} />);
 
     let icon = screen.getByAltText("Icon for Test Article Title");
-    expect(icon).toHaveAttribute("src", "/assets/Icon_1.svg");
+    expect(icon).toHaveAttribute(
+      "src",
+      "/content/blog/resolving-active-conflicts-tag.svg",
+    );
 
     const post2 = { ...mockPost, slug: "operational-security-mutual-aid" };
     rerender(<ContentContainer post={post2} />);