Add grid size option

Add CMS option for 2 columns with 5/12 and 7/12 size
Zenmo · Jul 17, 2024 · 6ceb884 · 6ceb884
1 parent 910c9a6
commit 6ceb884
Show file tree

Hide file tree

Showing 7 changed files with 1,046 additions and 247 deletions.
diff --git a/frontend/components/Blocks/ParagraphBlock/ParagraphBlock.tsx b/frontend/components/Blocks/ParagraphBlock/ParagraphBlock.tsx
@@ -1,5 +1,5 @@
 import RawHtml from "@/components/RawHtml";
-import { getGrid } from "services/grid";
+import { getGridCss } from "services/grid";
 import { GridLayout, Background } from "../types";
 
 type Props = {
@@ -24,7 +24,7 @@ export default function Paragraph({ data, ignoreLayout }: Props) {
   const backgroundLeftColor =
     data.value.background.size == "bg__full" ? "" : data.value.background.color;
 
-  const gridValue = getGrid(data.value.gridLayout.grid);
+  const gridValue = getGridCss(data.value.gridLayout.grid);
 
   if (ignoreLayout === true) {
     return <RawHtml html={data.value?.text} />;
@@ -35,7 +35,8 @@ export default function Paragraph({ data, ignoreLayout }: Props) {
       <div className="holonContentContainer">
         <div className="flex flex-col lg:flex-row">
           <div
-            className={`flex flex-col relative defaultBlockPadding ${gridValue.left} ${backgroundLeftColor}`}
+            css={gridValue.left}
+            className={`flex flex-col relative defaultBlockPadding ${backgroundLeftColor}`}
             data-testid="paragraph">
             {data.value.background.size !== "bg_full" && (
               <span className={`extra_bg ${backgroundLeftColor}`}></span>

diff --git a/frontend/components/Blocks/SectionBlock/SectionBlock.tsx b/frontend/components/Blocks/SectionBlock/SectionBlock.tsx
@@ -6,7 +6,7 @@ import {Graphcolor, SectionVariant} from "@/containers/types";
 import { ScenarioContext } from "context/ScenarioContext";
 import { debounce } from "lodash";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { getGrid } from "services/grid";
+import { getGridCss } from "services/grid";
 import {InteractiveElement} from "../../../api/holon";
 import { WikiLink } from "../../../containers/types";
 import { HolarchyFeedbackImageProps } from "../HolarchyFeedbackImage/HolarchyFeedbackImage";
@@ -93,7 +93,7 @@ export default function SectionBlock({
   // Otherwise they will overlap and will the left be darker since 2 layers
   const backgroundLeftColor =
     data.value.background.size == "bg__full" ? "" : data.value.background.color;
-  const gridValue = getGrid(data.value.gridLayout.grid);
+  const gridValue = getGridCss(data.value.gridLayout.grid);
 
   const debouncedCalculateKPIs = useMemo(() => debounce(calculateKPIsCb, 1000), []);
 
@@ -310,7 +310,8 @@ export default function SectionBlock({
       <div className="holonContentContainer">
         <div className={`flex flex-col lg:flex-row ${backgroundFullcolor} relative`}>
           <div
-            className={`flex flex-col py-12 px-10 lg:px-16 lg:pt-16 relative ${gridValue.left} ${backgroundLeftColor}`}
+              css={gridValue.left}
+            className={`flex flex-col py-12 px-10 lg:px-16 lg:pt-16 relative ${backgroundLeftColor}`}
           >
             {data.value.background.size !== "bg_full" && !holarchyModal ? (
               <span className={`extra_bg ${backgroundLeftColor}`}></span>
@@ -328,7 +329,7 @@ export default function SectionBlock({
             )}
           </div>
 
-          <div className={`relative flex flex-col ${gridValue.right}`}>
+          <div className="relative flex flex-col" css={gridValue.right}>
             {dirtyState && (
               <div
                 className="absolute flex justify-center items-start p-12 top-0 left-0 w-full h-full bg-black/[.8] z-20">

diff --git a/frontend/components/Blocks/TextAndMediaBlock/TextAndMediaBlock.tsx b/frontend/components/Blocks/TextAndMediaBlock/TextAndMediaBlock.tsx
@@ -1,7 +1,7 @@
 import RawHtml from "@/components/RawHtml";
 import MediaContent from "@/components/MediaContent/MediaContent";
 import ButtonBlock from "@/components/Button/ButtonBlock";
-import { getGrid } from "services/grid";
+import { getGridCss } from "services/grid";
 import { GridLayout, Background } from "../types";
 
 type Props = {
@@ -29,7 +29,7 @@ export default function TextAndMedia({ data }: Props) {
   const backgroundLeftColor =
     data.value.background.size == "bg__full" ? "" : data.value.background.color;
 
-  const gridValue = getGrid(data.value.gridLayout.grid);
+  const gridValue = getGridCss(data.value.gridLayout.grid);
   const direction =
     data.value.columnOrder === "invert" ? "lg:flex-row-reverse inverseColumns" : "lg:flex-row";
 
@@ -38,15 +38,16 @@ export default function TextAndMedia({ data }: Props) {
       <div className="holonContentContainer">
         <div className={`flex flex-col ${direction}`}>
           <div
-            className={`flex flex-col relative defaultBlockPadding ${gridValue.left} ${backgroundLeftColor}`}
+            css={gridValue.left}
+            className={`flex flex-col relative defaultBlockPadding ${backgroundLeftColor}`}
             data-testid="textMedia">
             {data.value.background.size !== "bg_full" && (
               <span className={`extra_bg ${backgroundLeftColor}`}></span>
             )}
             <RawHtml html={data.value?.text} />
           </div>
 
-          <div className={`flex flex-col ${gridValue.right}`}>
+          <div className="flex flex-col" css={gridValue.right}>
             <div className="lg:sticky defaultBlockPadding top-0">
               <MediaContent media={data.value.media} alt={data.value.altText} />
             </div>