feat(infoBox): add separator toggle and tests (#844)

* feat(infoBox): add separator toggle and tests

Co-authored-by: Eli Flores <eli.flores@digitalservice.bund.de>

* feat(infoBox): let zod set default value

Co-authored-by: Eli Flores <eli.flores@digitalservice.bund.de>

* feat(infoBox): use screen instead of querySelector

Co-authored-by: Eli Flores <eli.flores@digitalservice.bund.de>

---------

Co-authored-by: Eli Flores <eli.flores@digitalservice.bund.de>

app/components/InfoBox.tsx

@@ -1,22 +1,30 @@
 import { z } from "zod";
 import Heading, { HeadingPropsSchema } from "./Heading";
 import InfoBoxItem, { InfoBoxItemPropsSchema } from "./InfoBoxItem";
+import classNames from "classnames";
 
 export const InfoBoxPropsSchema = z.object({
   identifier: z.string().optional(),
   heading: HeadingPropsSchema.optional(),
+  separator: z.boolean().optional().default(true),
   items: z.array(InfoBoxItemPropsSchema),
 });
 
-type InfoBoxProps = z.infer<typeof InfoBoxPropsSchema>;
+type InfoBoxProps = z.input<typeof InfoBoxPropsSchema>;
 
-const InfoBox = ({ identifier, items, heading }: InfoBoxProps) => {
+const InfoBox = ({ identifier, items, heading, separator }: InfoBoxProps) => {
   return (
     <div className="ds-stack-8 scroll-my-40" id={identifier}>
       {heading && <Heading {...heading} />}
-      <ul className="list-none ds-stack-32 ps-0 info-box">
+      <ul
+        className={classNames("list-none ps-0 info-box", {
+          "ds-stack-48": !separator,
+          "ds-stack-32": separator,
+        })}
+      >
         {items.map((item) => (
           <InfoBoxItem
+            separator={separator}
             {...item}
             key={
               item.identifier ??

app/components/InfoBoxItem.tsx

@@ -5,6 +5,7 @@ import Image, { ImagePropsSchema } from "./Image";
 import RichText from "./RichText";
 import ButtonContainer from "./ButtonContainer";
 import { DetailsSummary, DetailsSummarySchema } from "./DetailsSummary";
+import classNames from "classnames";
 
 export const InfoBoxItemPropsSchema = z.object({
   identifier: z.string().optional(),
@@ -16,6 +17,7 @@ export const InfoBoxItemPropsSchema = z.object({
     z.array(DetailsSummarySchema).optional(),
   ),
   buttons: z.array(ButtonPropsSchema).optional(),
+  separator: z.boolean().optional(),
 });
 
 type InfoBoxItemProps = z.infer<typeof InfoBoxItemPropsSchema>;
@@ -28,13 +30,18 @@ const InfoBoxItem = ({
   content,
   detailsSummary,
   buttons,
+  separator,
 }: InfoBoxItemProps) => {
   return (
     <li
       id={identifier}
-      className={
-        "flex flex-row items-center justify-center max-w-none max-[499px]:flex-col pt-32 first:pt-0 scroll-my-40 border-0 border-solid border-0 border-t-2 border-gray-400 first:border-none"
-      }
+      className={classNames(
+        "flex flex-row items-center justify-center max-w-none max-[499px]:flex-col first:pt-0 scroll-my-40",
+        {
+          "pt-32 border-0 border-solid border-0 border-t-2 border-gray-400 first:border-none":
+            separator,
+        },
+      )}
     >
       {image && (
         <Image

app/components/__test__/InfoBox.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import InfoBox, { InfoBoxPropsSchema } from "~/components/InfoBox";
+
+const mockInfoBoxItems = [
+  {
+    label: undefined,
+    headline: undefined,
+    image: undefined,
+    content: "Lorem1",
+    buttons: [],
+  },
+  {
+    label: undefined,
+    headline: undefined,
+    image: undefined,
+    content: "Lorem2",
+    buttons: [],
+  },
+];
+
+describe("InfoBox", () => {
+  it("has expected padding when the separator is enabled", () => {
+    render(<InfoBox separator={true} items={mockInfoBoxItems} />);
+    expect(screen.getByRole("list")).toHaveClass("ds-stack-32");
+  });
+  it("has expected padding when the separator is disabled", () => {
+    render(<InfoBox separator={false} items={mockInfoBoxItems} />);
+    expect(screen.getByRole("list")).toHaveClass("ds-stack-48");
+  });
+  it("has expected padding when the separator is unset", () => {
+    const infoBoxProps = InfoBoxPropsSchema.parse({
+      items: mockInfoBoxItems,
+    });
+
+    render(<InfoBox {...infoBoxProps} />);
+    expect(screen.getByRole("list")).toHaveClass("ds-stack-32");
+  });
+});

app/components/__test__/InfoBoxItem.test.tsx

@@ -0,0 +1,18 @@
+import { render } from "@testing-library/react";
+import InfoBoxItem from "~/components/InfoBoxItem";
+
+const separatorStyleClass =
+  ".pt-32.border-0.border-solid.border-0.border-t-2.border-gray-400.first\\:border-none";
+
+describe("InfoBoxItem", () => {
+  it("has expected class properties when the separator is enabled", () => {
+    const { container } = render(<InfoBoxItem separator={true} />);
+    expect(container.querySelector(separatorStyleClass)).toBeInTheDocument();
+  });
+  it("has expected class properties when the separator is disabled", () => {
+    const { container } = render(<InfoBoxItem separator={false} />);
+    expect(
+      container.querySelector(separatorStyleClass),
+    ).not.toBeInTheDocument();
+  });
+});

app/services/cms/models/StrapiInfoBox.ts

@@ -16,6 +16,7 @@ const StrapiInfoBoxSchema = z
     heading: StrapiHeadingSchema.nullable(),
     items: z.array(StrapiInfoBoxItemSchema),
     outerBackground: StrapiBackgroundSchema.nullable(),
+    separator: z.boolean().nullable(),
     container: StrapiContainerSchema,
   })
   .merge(HasOptionalStrapiIdSchema)

app/services/errorPages/fallbackInfobox.ts

@@ -5,6 +5,7 @@ const fallbackStrapiInfoBox = {
   identifier: null,
   heading: null,
   outerBackground: null,
+  separator: null,
   items: [
     {
       label: { text: "500", look: "ds-label-01-reg", tagName: "div" },