V3 update text block formatting (#888)

* Wip update text block formatting * Style textblock and remove framed from textblocktype * Comment out framed textBlock (to be resolved at a later date)
varianter · Nov 22, 2024 · 8a344cd · 8a344cd
1 parent 23ffa74
commit 8a344cd
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 32 deletions.
diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
@@ -4,7 +4,6 @@ import ImageSection from "./image/ImageSection";
 import ListBlock from "./list/ListBlock";
 import ResultsBlock from "./results/ResultsBlock";
 import SplitSection from "./splitSection/SplitSection";
-import TextSection from "./text/TextSection";
 
 export function CustomerCaseSection({
   section,
@@ -14,8 +13,6 @@ export function CustomerCaseSection({
   switch (section._type) {
     case "splitSection":
       return <SplitSection section={section} />;
-    case "textBlock":
-      return <TextSection section={section} />;
     case "imageBlock":
       return <ImageSection section={section} />;
     case "resultsBlock":

diff --git a/src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx b/src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx
@@ -1,4 +1,5 @@
 import { CustomerCaseSection } from "src/components/customerCases/customerCase/sections/CustomerCaseSection";
+import TextSection from "src/components/customerCases/customerCase/sections/text/TextSection";
 import {
   SplitSection as SplitSectionObject,
   SplitSectionSection as SplitSectionSectionObject,
@@ -18,6 +19,8 @@ function SplitSectionSection({
   switch (section._type) {
     case "emptySection":
       return <div className={styles.emptySection}></div>;
+    case "textBlock":
+      return <TextSection section={section} />;
   }
   return <CustomerCaseSection section={section} />;
 }

diff --git a/src/components/customerCases/customerCase/sections/text/TextSection.tsx b/src/components/customerCases/customerCase/sections/text/TextSection.tsx
@@ -17,18 +17,26 @@ export default function TextSection({ section }: TextSectionProps) {
     <div className={styles.wrapper}>
       <div
         className={
-          styles.content +
-          (section.textBlockType === "framed" ? ` ${styles.highlighted}` : "")
+          styles.content /* +
+          (section.textBlockType === "framed" ? ` ${styles.framed}` : "") */
         }
       >
         <div className={styles.innerContent}>
           <div>
             {section.sectionTitle && (
-              <Text className={styles.header} type={"h5"}>
+              <Text className={styles.title} type={"h4"}>
                 {section.sectionTitle}
               </Text>
             )}
-            <Text>{section.text}</Text>
+            <Text
+              type={
+                section.textBlockType === "highlighted"
+                  ? "bodyXl"
+                  : "bodyNormal"
+              }
+            >
+              {section.text}
+            </Text>
           </div>
           <div className={styles.link}>
             {section.url && (

diff --git a/src/components/customerCases/customerCase/sections/text/textSection.module.css b/src/components/customerCases/customerCase/sections/text/textSection.module.css
@@ -2,14 +2,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2rem;
+  gap: 0.5rem;
 }
 
 .content {
   max-width: 960px;
 }
 
-.content.highlighted {
+.content.framed {
   border: 2px solid var(--primary-yellow-warning);
   border-radius: 0.25rem;
   background-color: var(--primary-yellow-warning);
@@ -21,20 +21,22 @@
   justify-content: space-between;
 }
 
-.highlighted .innerContent {
+.framed .innerContent {
   background-color: var(--primary-bg);
   border-radius: 1.25rem;
   padding: 1rem;
   height: fit-content;
 }
-.header {
-  /* TODO: this needs to be changed */
-  margin-top: 0px;
-  margin-bottom: 16px;
-}
 
 .link {
   margin-top: 2rem;
   text-decoration: none;
   color: var(--primary-black-darker);
 }
+
+.title {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  font-weight: 450;
+  line-height: 2rem;
+}
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
@@ -69,8 +69,10 @@
 }
 
 .bodyXl {
-  font-size: 2.125rem;
-  font-weight: 500;
+  font-size: 2.5rem;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: 0.025rem;
 }
 
 .bodyBig {

diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
@@ -4,7 +4,6 @@ import { ImageBlock } from "./imageBlock";
 import { ListBlock } from "./listBlock";
 import { ResultsBlock } from "./resultsBlock";
 import { SplitSection } from "./splitSection";
-import { TextBlock } from "./textBlock";
 
 export interface CustomerCaseProjectInfo {
   customer: string;
@@ -52,10 +51,8 @@ export interface CustomerCaseBase {
   image: IImage;
 }
 
-export type BaseCustomerCaseSection = TextBlock | ImageBlock;
-
 export type CustomerCaseSection =
-  | BaseCustomerCaseSection
+  | ImageBlock
   | SplitSection
   | ResultsBlock
   | ListBlock;

diff --git a/studioShared/lib/interfaces/splitSection.ts b/studioShared/lib/interfaces/splitSection.ts
@@ -1,14 +1,15 @@
 import { isSanityKeyTypeObject } from "studio/lib/interfaces/global";
 import { splitSectionSections } from "studioShared/schemas/objects/splitSection";
 
-import { BaseCustomerCaseSection } from "./customerCases";
+import { ImageBlock } from "./imageBlock";
+import { TextBlock } from "./textBlock";
 
 export interface EmptySection {
   _key: string;
   _type: "emptySection";
 }
 
-export type SplitSectionSection = BaseCustomerCaseSection | EmptySection;
+export type SplitSectionSection = TextBlock | ImageBlock | EmptySection;
 
 export interface SplitSection {
   _key: string;

diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -28,7 +28,8 @@ export const CUSTOMER_CASES_QUERY = groq`
   }
 `;
 
-export const BASE_SECTIONS_FRAGMENT = groq`
+export const SPLIT_SECTIONS_FRAGMENT = groq`
+  _type == "emptySection" => {},
   _type == "textBlock" => {
     "sectionTitle": ${translatedFieldFragment("sectionTitle")},
     "text": ${translatedFieldFragment("text")},
@@ -71,8 +72,8 @@ export const CUSTOMER_CASE_QUERY = groq`
         "sections": sections[] {
           _key,
           _type,
-          _type == "emptySection" => {},
-          ${BASE_SECTIONS_FRAGMENT}
+          
+          ${SPLIT_SECTIONS_FRAGMENT}
         }
       },
       _type == "resultsBlock" => {
@@ -95,7 +96,10 @@ export const CUSTOMER_CASE_QUERY = groq`
           "text": ${translatedFieldFragment("text")},
           },
         }, 
-      ${BASE_SECTIONS_FRAGMENT}
+      _type == "imageBlock" => {
+        "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}},
+        fullWidth
+        },
     },
     "featuredCases": featuredCases[] -> {
       ${CUSTOMER_CASE_BASE_FRAGMENT}

diff --git a/studioShared/schemas/documents/customerCase.ts b/studioShared/schemas/documents/customerCase.ts
@@ -9,15 +9,15 @@ import { titleSlug } from "studio/schemas/schemaTypes/slug";
 import { buildDraftId, buildPublishedId } from "studio/utils/documentUtils";
 import { firstTranslation } from "studio/utils/i18n";
 import { customerCaseProjectInfo } from "studioShared/schemas/fields/customerCaseProjectInfo";
+import imageBlock from "studioShared/schemas/objects/imageBlock";
 import listBlock from "studioShared/schemas/objects/listBlock";
 import resultsBlock from "studioShared/schemas/objects/resultsBlock";
-import { baseCustomerCaseSections } from "studioShared/schemas/objects/sections";
 import splitSection from "studioShared/schemas/objects/splitSection";
 
 export const customerCaseID = "customerCase";
 
 export const customerCaseSections = [
-  ...baseCustomerCaseSections,
+  imageBlock,
   splitSection,
   resultsBlock,
   listBlock,

diff --git a/studioShared/schemas/objects/splitSection.ts b/studioShared/schemas/objects/splitSection.ts
@@ -5,9 +5,10 @@ import { humanizeCamelCase } from "studio/utils/stringUtils";
 import { isSplitSectionSections } from "studioShared/lib/interfaces/splitSection";
 
 import emptySection from "./emptySection";
-import { baseCustomerCaseSections } from "./sections";
+import imageBlock from "./imageBlock";
+import textBlock from "./textBlock";
 
-export const splitSectionSections = [...baseCustomerCaseSections, emptySection];
+export const splitSectionSections = [textBlock, imageBlock, emptySection];
 
 const splitSection = defineField({
   name: "splitSection",

diff --git a/studioShared/schemas/objects/textBlock.ts b/studioShared/schemas/objects/textBlock.ts
@@ -84,7 +84,7 @@ const textBlock = defineField({
         list: [
           { title: "Normal", value: "normal" },
           { title: "Highlighted", value: "highlighted" },
-          { title: "Framed", value: "framed" },
+          /* { title: "Framed", value: "framed" }, */
         ],
         layout: "radio",
         direction: "vertical",