feat(add InlineNotice to InfoBoxItem)

app/components/InfoBoxItem.tsx

@@ -1,4 +1,6 @@
 import classNames from "classnames";
+import type { InlineNoticeProps } from "~/components/InlineNotice";
+import { InlineNotice } from "~/components/InlineNotice";
 import { arrayIsNonEmpty } from "~/util/array";
 import Button, { type ButtonProps } from "./Button";
 import ButtonContainer from "./ButtonContainer";
@@ -14,6 +16,7 @@ export type InfoBoxItemProps = {
   image?: ImageProps;
   content?: string;
   details?: DetailsProps[];
+  inlineNotices?: InlineNoticeProps[];
   buttons?: ButtonProps[];
   separator?: boolean;
 };
@@ -25,6 +28,7 @@ const InfoBoxItem = ({
   image,
   content,
   details,
+  inlineNotices,
   buttons,
   separator,
 }: InfoBoxItemProps) => {
@@ -53,10 +57,12 @@ const InfoBoxItem = ({
         {label && <Heading {...label} />}
         {headline && <Heading {...headline} />}
         {content && <RichText markdown={content} />}
-        {details &&
-          details.map((details) => (
-            <Details key={details.title} {...details} />
-          ))}
+        {details?.map((details) => (
+          <Details key={details.title} {...details} />
+        ))}
+        {inlineNotices?.map((inlineNotice) => (
+          <InlineNotice key={inlineNotice.title} {...inlineNotice} />
+        ))}
         {arrayIsNonEmpty(buttons) && (
           <ButtonContainer>
             {buttons.map((button) => (

app/components/__test__/InfoBoxItem.test.tsx

@@ -15,4 +15,25 @@ describe("InfoBoxItem", () => {
       container.querySelector(separatorStyleClass),
     ).not.toBeInTheDocument();
   });
+  it("should correctly renders inline notices when provided", () => {
+    const inlineNoticeTitle = "Inline Notice";
+    const inlineNoticeContent =
+      "Testing an inline notice inside of an InfoBoxItem.";
+    const { getByRole } = render(
+      <InfoBoxItem
+        inlineNotices={[
+          {
+            title: inlineNoticeTitle,
+            content: inlineNoticeContent,
+            tagName: "h1",
+            look: "tips",
+          },
+        ]}
+      />,
+    );
+    const inlineNotice = getByRole("note");
+    expect(inlineNotice).toBeInTheDocument();
+    expect(inlineNotice).toHaveTextContent(inlineNoticeTitle);
+    expect(inlineNotice).toHaveTextContent(inlineNoticeContent);
+  });
 });

app/services/cms/models/StrapiInfoBoxItem.ts

@@ -1,6 +1,10 @@
 import pick from "lodash/pick";
 import { z } from "zod";
 import type { InfoBoxItemProps } from "~/components/InfoBoxItem";
+import {
+  getInlineNoticeProps,
+  StrapiInlineNoticeSchema,
+} from "~/services/cms/models/StrapiInlineNotice";
 import { omitNull } from "~/util/omitNull";
 import { HasOptionalStrapiIdSchema } from "./HasStrapiId";
 import { OptionalStrapiLinkIdentifierSchema } from "./HasStrapiLinkIdentifier";
@@ -16,6 +20,7 @@ export const StrapiInfoBoxItemSchema = z
     image: StrapiImageSchema.nullable(),
     content: z.string().nullable(),
     detailsSummary: z.array(StrapiDetailsSchema),
+    inlineNotice: z.array(StrapiInlineNoticeSchema),
     buttons: z.array(StrapiButtonSchema),
   })
   .merge(HasOptionalStrapiIdSchema)
@@ -28,6 +33,7 @@ export const getInfoBoxItemProps = (
 ): InfoBoxItemProps =>
   omitNull({
     details: cmsData.detailsSummary.map(getDetailsProps),
+    inlineNotices: cmsData.inlineNotice.map(getInlineNoticeProps),
     image: getImageProps(cmsData.image),
     ...pick(cmsData, "label", "headline", "content", "buttons", "identifier"),
   });

app/services/cms/models/StrapiInlineNotice.tsx

@@ -7,7 +7,7 @@ import { OptionalStrapiLinkIdentifierSchema } from "../models/HasStrapiLinkIdent
 import { StrapiBackgroundSchema } from "../models/StrapiBackground";
 import { StrapiContainerSchema } from "../models/StrapiContainer";
 
-const StrapiInlineNoticeSchema = z
+export const StrapiInlineNoticeSchema = z
   .object({
     title: z.string(),
     tagName: z.enum(["h1", "h2", "h3", "h4", "h5", "h6", "p", "div"]),

app/services/errorPages/fallbackInfobox.ts

@@ -10,6 +10,7 @@ const fallbackStrapiInfoBox = {
     {
       label: { text: "500", look: "ds-label-01-reg", tagName: "div" },
       detailsSummary: [],
+      inlineNotice: [],
       headline: {
         text: "Unerwarteter Fehler",
         look: "ds-heading-02-reg",

stories/InfoBoxItem.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Container from "../app/components/Container";
+import InfoBoxItem, { InfoBoxItemProps } from "~/components/InfoBoxItem";
+
+const meta = {
+  title: "Content/InfoBoxItem",
+  component: InfoBoxItem,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof InfoBoxItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs: InfoBoxItemProps = {
+  identifier: "default-info-box-item-id",
+  headline: {
+    text: "InfoBoxItem Header",
+  },
+  content: "InfoBoxItem Content",
+};
+
+export const Default: Story = {
+  args: defaultArgs,
+};
+
+export const InContainer: Story = {
+  decorators: (Story) => (
+    <Container>
+      <Story />
+    </Container>
+  ),
+  args: defaultArgs,
+};
+
+export const WithInlineNotice: Story = {
+  args: {
+    ...defaultArgs,
+    inlineNotices: [
+      {
+        title: "InlineNotice Title",
+        tagName: "h3",
+        look: "tips",
+        content: "Lorem **ipsum**\n\n* Lorem ipsum\n* Lorem ipsum",
+      },
+    ],
+  },
+};