V3 - feat: make ResultBlock responsive and colorable (#948)

Co-authored-by: Petter Hohle <[email protected]>
varianter · Dec 5, 2024 · 7eb239f · 7eb239f
1 parent 7d8c494
commit 7eb239f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 12 deletions.
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -48,7 +48,11 @@ export default async function CustomerCase({
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (
-            <CustomerCaseSection key={section._key} section={section} />
+            <CustomerCaseSection
+              key={section._key}
+              section={section}
+              clientColors={customerCase.clientColors}
+            />
           ))}
         </div>
         {consultantsResult?.ok && (

diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
@@ -1,4 +1,7 @@
-import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/lib/interfaces/customerCases";
+import {
+  CustomerCaseClientColors,
+  CustomerCaseSection as CustomerCaseSectionObject,
+} from "studioShared/lib/interfaces/customerCases";
 
 import ImageSection from "./image/ImageSection";
 import ListBlock from "./list/ListBlock";
@@ -7,16 +10,20 @@ import SplitSection from "./splitSection/SplitSection";
 
 export function CustomerCaseSection({
   section,
+  clientColors,
 }: {
   section: CustomerCaseSectionObject;
+  clientColors?: CustomerCaseClientColors;
 }) {
   switch (section._type) {
     case "splitSection":
       return <SplitSection section={section} />;
     case "imageBlock":
       return <ImageSection section={section} />;
     case "resultsBlock":
-      return <ResultsBlock section={section} />;
+      return (
+        <ResultsBlock section={section} blockColor={clientColors?.color} />
+      );
     case "listBlock":
       return <ListBlock section={section} />;
   }

diff --git a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
@@ -5,23 +5,31 @@ import styles from "./resultsBlock.module.css";
 
 export interface ResultsBlockProps {
   section: ResultsBlockObject;
+  blockColor?: string;
 }
 
-export default function ResultsBlock({ section }: ResultsBlockProps) {
+export default function ResultsBlock({
+  section,
+  blockColor,
+}: ResultsBlockProps) {
   return (
     section.resultsBlockTitle && (
       <div className={styles.wrapper}>
         <div>
-          <StackedHighlights section={section}></StackedHighlights>
+          <StackedHighlights section={section} blockColor={blockColor} />
         </div>
       </div>
     )
   );
 }
 
-function StackedHighlights({ section }: ResultsBlockProps) {
+function StackedHighlights({ section, blockColor }: ResultsBlockProps) {
+  const style = {
+    "--block-color": blockColor ?? "var(--surface-yellow)",
+  } as React.CSSProperties;
+
   return (
-    <div className={styles.highlightWrapper}>
+    <div className={styles.highlightWrapper} style={style}>
       <div className={styles.highlightBlock}>
         <Text type="labelRegular" className={styles.highlightOutside}>
           {section.resultsBlockTitle}

diff --git a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
@@ -5,9 +5,9 @@
 }
 
 .highlightCard {
-  border: 3px solid var(--surface-yellow);
+  border: 3px solid var(--block-color);
   border-radius: 0.25rem;
-  background-color: var(--surface-yellow);
+  background-color: var(--block-color);
 }
 
 .highlightCard .innerContent {
@@ -29,7 +29,7 @@
 }
 
 .highlightOutside {
-  background-color: var(--surface-yellow);
+  background-color: var(--block-color);
   color: var(--text-primary);
   display: inline-block;
   padding: 0.25rem 1.25rem;
@@ -77,6 +77,7 @@
   margin-top: calc(3px * -1);
   border-top-left-radius: 0;
   height: auto;
+  width: 100%;
 }
 
 .highlightRow .highlightCard:not(:last-child) {
@@ -93,6 +94,28 @@
   border-top-left-radius: 0;
 }
 
-.highlightRow .highlightCard {
-  width: 100%;
+@media (max-width: 425px) {
+  div:has(> .highlightWrapper) {
+    width: 100%;
+  }
+
+  .highlightOutside {
+    margin-bottom: 0;
+  }
+
+  .highlightRow {
+    flex-direction: column;
+  }
+
+  .highlightRow .highlightCard:first-child {
+    border-top-right-radius: 0.25rem;
+  }
+
+  .highlightRow .highlightCard:last-child {
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .highlightRow .highlightCard:not(:first-child) {
+    border-left: 3px solid var(--block-color);
+  }
 }