feat(design): Disable side padding for containers on formflow pages

digitalservicebund · Feb 14, 2024 · 3a1807b · 3a1807b
1 parent 951b9e7
commit 3a1807b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/app/components/CommonWrapperProps.ts b/app/components/CommonWrapperProps.ts
@@ -19,6 +19,7 @@ export type CommonWrapperProps = {
   backgroundColor?: BackgroundColor;
   paddingTop?: Padding;
   paddingBottom?: Padding;
+  fullScreen?: boolean;
 };
 
 const convertCmsPixels = (cmsPadding: StrapiPadding | null | undefined) =>

diff --git a/app/components/Container.tsx b/app/components/Container.tsx
@@ -15,6 +15,7 @@ export default function Container({
   paddingBottom = "default",
   backgroundColor = "default",
   overhangingBackground,
+  fullScreen = true,
   children,
 }: ContainerProps) {
   let cssClasses = classNames(
@@ -24,6 +25,10 @@ export default function Container({
       paddingBottom === "default" ? DEFAULT_PADDING_BOTTOM : paddingBottom
     }`,
     backgroundColor !== "default" && "text-black",
+    {
+      "!pl-0": !fullScreen && !overhangingBackground,
+      "!pr-0": !fullScreen && !overhangingBackground,
+    },
   );
 
   if (backgroundColor === "default") {
@@ -37,15 +42,15 @@ export default function Container({
       `before:${BACKGROUND_COLORS[backgroundColor]}`,
     );
 
-    return (
-      <div
-        className="overflow-x-hidden rounded-lg"
-        // Matches padding of .container (see style.css)
-        style={{
+    // Matches padding of .container (see style.css)
+    const style = fullScreen
+      ? {
           marginLeft: "clamp(1rem, 5vw, 3rem)",
           marginRight: "clamp(1rem, 5vw, 3rem)",
-        }}
-      >
+        }
+      : {};
+    return (
+      <div className="overflow-x-hidden rounded-lg" style={style}>
         <div className={cssClasses}>
           <div className="relative">{children}</div>
         </div>

diff --git a/app/components/PageContent.tsx b/app/components/PageContent.tsx
@@ -40,21 +40,30 @@ import { renderAlertFromStrapi } from "~/services/cms/models/StrapiAlert";
 type PageContentProps = {
   readonly content: Array<StrapiContent>;
   readonly templateReplacements?: Replacements;
+  readonly fullScreen?: boolean;
   readonly className?: string;
 };
 
 export const keyFromElement = (element: StrapiContent) =>
   `${element.__component}_${element.id ?? 0}`;
 
-function wrapInContainer(cmsData: StrapiContent, reactElement: ReactElement) {
+function wrapInContainer(
+  cmsData: StrapiContent,
+  reactElement: ReactElement,
+  fullScreen: boolean | undefined,
+) {
   if (!("container" in cmsData) || cmsData.container === null)
     return reactElement;
   const isBox = cmsData.__component === "page.box";
   const isBoxWithImage = cmsData.__component === "page.box-with-image";
 
   const props = wrapperPropsFromCms(cmsData.container);
   return (
-    <Container {...props} overhangingBackground={isBox || isBoxWithImage}>
+    <Container
+      {...props}
+      overhangingBackground={isBox || isBoxWithImage}
+      fullScreen={fullScreen}
+    >
       {reactElement}
     </Container>
   );
@@ -128,6 +137,7 @@ const skipComponents = ["page.array-summary"];
 const PageContent = ({
   content = [],
   templateReplacements = {},
+  fullScreen,
   className,
 }: PageContentProps) => (
   <div className={className}>
@@ -137,7 +147,11 @@ const PageContent = ({
         <div key={keyFromElement(el)}>
           {wrapInBackground(
             el,
-            wrapInContainer(el, cmsToReact(el, templateReplacements)),
+            wrapInContainer(
+              el,
+              cmsToReact(el, templateReplacements),
+              fullScreen,
+            ),
           )}
         </div>
       ))}

diff --git a/app/routes/shared/components/StepWithPreHeading.tsx b/app/routes/shared/components/StepWithPreHeading.tsx
@@ -68,6 +68,7 @@ export function StepWithPreHeading() {
             <PageContent
               content={content}
               templateReplacements={templateReplacements}
+              fullScreen={false}
               className="ds-stack-16"
             />
           </div>
@@ -107,6 +108,7 @@ export function StepWithPreHeading() {
                 <PageContent
                   content={postFormContent}
                   templateReplacements={templateReplacements}
+                  fullScreen={false}
                 />
               )}
               <ButtonNavigation {...buttonNavigationProps} />