feat(BoxWithImage): add easyLanguage variant

digitalservicebund · Aug 2, 2024 · 2d2659e · 2d2659e
1 parent 15741bc
commit 2d2659e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/app/components/BoxWithImage.tsx b/app/components/BoxWithImage.tsx
@@ -4,13 +4,28 @@ import RichText from "./RichText";
 
 export type BoxWithImageProps = {
   image: ImageProps;
+  variant?: "default" | "easyLanguage";
   identifier?: string;
   heading?: HeadingProps;
   imageLabel?: string;
   content?: string;
 };
 
+const variantStyles = {
+  default: {
+    textSize: "1rem",
+    headingSize: "1.625rem",
+    imageWidth: "w-[160px]",
+  },
+  easyLanguage: {
+    textSize: "20px",
+    headingSize: "30px",
+    imageWidth: "w-[320px]",
+  },
+} as const;
+
 const BoxWithImage = ({
+  variant = "default",
   identifier,
   heading,
   image,
@@ -20,22 +35,27 @@ const BoxWithImage = ({
   return (
     <div
       id={identifier}
-      className="flex flex-row items-start gap-32 max-[499px]:flex-col"
+      className="flex flex-row items-start gap-24 max-[499px]:flex-col"
     >
-      <div className="ds-stack-16">
+      <div
+        className={`ds-stack-16 ${content ? variantStyles[variant].imageWidth : "max-w-none"}`}
+      >
         {imageLabel && (
           <p className="ds-label-section pt-4 text-gray-800">{imageLabel}</p>
         )}
-        <Image
-          {...image}
-          {...{
-            className: content ? "w-[160px]" : "max-w-none",
-          }}
-        />
+        <Image {...image} />
       </div>
       <div className={"ds-stack-8 break-words w-full"}>
-        {heading && <Heading {...heading} />}
-        {content && <RichText markdown={content} />}
+        {heading && (
+          <div style={{ fontSize: variantStyles[variant].headingSize }}>
+            <Heading {...heading} />
+          </div>
+        )}
+        {content && (
+          <div style={{ fontSize: variantStyles[variant].textSize }}>
+            <RichText markdown={content} />
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/app/services/cms/models/StrapiBoxWithImage.ts b/app/services/cms/models/StrapiBoxWithImage.ts
@@ -32,7 +32,7 @@ export const getBoxWithImageProps = ({
 }: z.infer<typeof StrapiBoxWithImageSchema>): BoxWithImageProps => {
   const { content, identifier, imageLabel } = omitNull(props);
   return {
-    image: getImageProps(image),
+    image: getImageProps(image) ?? {},
     identifier,
     heading: heading ? getHeadingProps(heading) : undefined,
     imageLabel,