Merge branch 'v3' into employee-list-filters

varianter · Nov 20, 2024 · 332b5b8 · 332b5b8
2 parents 9021cba + 8a3e178
commit 332b5b8
Show file tree

Hide file tree

Showing 13 changed files with 198 additions and 162 deletions.
diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
@@ -2,7 +2,6 @@ import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/l
 
 import ImageSection from "./image/ImageSection";
 import ListBlock from "./list/ListBlock";
-import QuoteBlock from "./quote/QuoteBlock";
 import ResultsBlock from "./results/ResultsBlock";
 import SplitSection from "./splitSection/SplitSection";
 import TextSection from "./text/TextSection";
@@ -17,8 +16,6 @@ export function CustomerCaseSection({
       return <SplitSection section={section} />;
     case "textBlock":
       return <TextSection section={section} />;
-    case "quoteBlock":
-      return <QuoteBlock section={section} />;
     case "imageBlock":
       return <ImageSection section={section} />;
     case "resultsBlock":

diff --git a/src/components/customerCases/customerCase/sections/quote/QuoteBlock.tsx b/src/components/customerCases/customerCase/sections/quote/QuoteBlock.tsx
diff --git a/src/components/customerCases/customerCase/sections/quote/quoteBlock.module.css b/src/components/customerCases/customerCase/sections/quote/quoteBlock.module.css
diff --git a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
@@ -11,22 +11,42 @@ export default function ResultsBlock({ section }: ResultsBlockProps) {
   return (
     section.resultsBlockTitle && (
       <div className={styles.wrapper}>
-        <div className={styles.resultblock}>
-          <Text type="h4" className={styles.blocktitle}>
-            {section.resultsBlockTitle}
-          </Text>
-          <div className={styles.resultrow}>
-            {section.resultsList?.map((result) => (
-              <div className={styles.results} key={result._key}>
-                <Text type="h2" className={styles.mainresult}>
-                  {result.result}
-                </Text>
-                <Text type="labelRegular">{result.description}</Text>
-              </div>
-            ))}
-          </div>
+        <div>
+          <StackedHighlights section={section}></StackedHighlights>
         </div>
       </div>
     )
   );
 }
+
+function StackedHighlights({ section }: ResultsBlockProps) {
+  return (
+    <div className={styles.highlightWrapper}>
+      <div className={styles.highlightBlock}>
+        <Text type="labelRegular" className={styles.highlightOutside}>
+          {section.resultsBlockTitle}
+        </Text>
+        {section.quote?.map((quote) => (
+          <div className={styles.highlightCard} key={quote._key}>
+            <div className={styles.innerContent}>
+              <Text type="h2">{quote.quoteText}</Text>
+              <p className={styles.subtitle}>{quote.quoteAuthor}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className={styles.highlightRow}>
+        {section.resultsList?.map((result) => (
+          <div className={styles.highlightCard} key={result._key}>
+            <div className={styles.innerContent}>
+              <Text type="h2" className={styles.result}>
+                {result.result}
+              </Text>
+              <p className={styles.subtitle}>{result.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
@@ -4,52 +4,95 @@
   align-items: center;
 }
 
-.resultblock {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2.25rem;
-  max-width: 960px;
-  width: 100%;
+.highlightCard {
+  border: 3px solid var(--primary-yellow-warning);
+  border-radius: 0.25rem;
+  background-color: var(--primary-yellow-warning);
+}
+
+.highlightCard .innerContent {
+  background-color: var(--primary-bg);
+  border-radius: 1.5rem;
+  padding: 1rem;
+  height: 100%;
+}
+
+.result {
+  white-space: nowrap;
 }
 
-.blocktitle {
-  font-size: 1.5rem;
-  font-style: normal;
+.subtitle {
+  color: var(--primary-grey);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.highlightOutside {
+  background-color: var(--primary-yellow-warning);
+  color: var(--secondary-text-black-darker);
+  display: inline-block;
+  padding: 0.25rem 1.25rem;
+  z-index: 2;
+  line-height: 1.5;
+  margin-right: auto;
+  border-radius: 0.25rem 0.25rem 0rem 0rem;
+  margin-bottom: 3px;
   font-weight: 500;
-  line-height: 120%;
 }
 
-.resultrow {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  align-self: stretch;
-  text-wrap: wrap;
+.highlightBlock {
+  display: inline-flex;
+  flex-direction: column;
+  align-self: start;
+}
+
+.highlightCard:not(:first-child) {
+  margin-top: calc(3px * -1);
+}
 
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    align-items: center;
-  }
+.highlightBlock .highlightCard {
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.results {
+.highlightWrapper:has(.highlightRow:empty) .highlightCard {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.highlightWrapper {
+  border-radius: inherit;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  max-width: 20%;
   align-items: center;
+}
+
+.highlightRow {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
 
-  @media (max-width: 1024px) {
-    max-width: 100%;
-  }
+.highlightRow .highlightCard {
+  margin-top: calc(3px * -1);
+  border-top-left-radius: 0;
+  height: auto;
 }
 
-.mainresult {
-  color: var(--blue-dark);
-  font-size: 3rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
+.highlightRow .highlightCard:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.highlightRow .highlightCard:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-left: 1.5rem;
+}
+
+.highlightRow .highlightCard:first-child {
+  border-top-left-radius: 0;
+}
+
+.highlightRow .highlightCard {
+  width: 100%;
 }
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -21,6 +21,8 @@ html {
   --primary-black-darker: #000000;
   --primary-grey: #5e5e5e;
 
+  --secondary-text-black-darker: #222424;
+
   --secondary-off-white1: #f4efe8;
   --secondary-off-white2: #ece1d3;
 

diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
@@ -2,7 +2,6 @@ import { IImage } from "studio/lib/interfaces/media";
 
 import { ImageBlock } from "./imageBlock";
 import { ListBlock } from "./listBlock";
-import { QuoteBlock } from "./quoteBlock";
 import { ResultsBlock } from "./resultsBlock";
 import { SplitSection } from "./splitSection";
 import { TextBlock } from "./textBlock";
@@ -30,7 +29,7 @@ export interface CustomerCaseBase {
   image: IImage;
 }
 
-export type BaseCustomerCaseSection = TextBlock | ImageBlock | QuoteBlock;
+export type BaseCustomerCaseSection = TextBlock | ImageBlock;
 
 export type CustomerCaseSection =
   | BaseCustomerCaseSection

diff --git a/studioShared/lib/interfaces/quoteBlock.ts b/studioShared/lib/interfaces/quoteBlock.ts
diff --git a/studioShared/lib/interfaces/resultsBlock.ts b/studioShared/lib/interfaces/resultsBlock.ts
@@ -4,9 +4,16 @@ interface ResultsListItem {
   _key: string;
 }
 
+interface Quote {
+  _key: string;
+  quoteText?: string;
+  quoteAuthor?: string;
+}
+
 export interface ResultsBlock {
   _key: string;
   _type: "resultsBlock";
   resultsBlockTitle?: string;
+  quote?: Quote[];
   resultsList?: ResultsListItem[];
 }
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -39,10 +39,6 @@ export const BASE_SECTIONS_FRAGMENT = groq`
     "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}},
     fullWidth
   },
-  _type == "quoteBlock" => {
-    "quote": ${translatedFieldFragment("quote")},
-    "author": ${translatedFieldFragment("author")},
-  },
 `;
 
 export const CUSTOMER_CASE_QUERY = groq`
@@ -71,11 +67,16 @@ export const CUSTOMER_CASE_QUERY = groq`
       },
       _type == "resultsBlock" => {
         "resultsBlockTitle": ${translatedFieldFragment("resultsBlockTitle")},
+        "quote": quote[] {
+          _key,
+          "quoteText": ${translatedFieldFragment("quoteText")},
+          "quoteAuthor": ${translatedFieldFragment("quoteAuthor")},
+        },
         "resultsList": resultsList[] {
           _key,
           result,
           "description": ${translatedFieldFragment("description")},
-          }
+          },
         },
       _type == "listBlock" => {
         "description": ${translatedFieldFragment("description")},

diff --git a/studioShared/schemas/objects/quoteBlock.ts b/studioShared/schemas/objects/quoteBlock.ts