V3 customer case block results

src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx

@@ -2,6 +2,7 @@ import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/l
 
 import ImageSection from "./image/ImageSection";
 import QuoteBlock from "./quote/QuoteBlock";
+import ResultBlock from "./results/ResultBlock";
 import RichTextSection from "./richText/RichTextSection";
 import SplitSection from "./splitSection/SplitSection";
 
@@ -19,5 +20,7 @@ export function CustomerCaseSection({
       return <QuoteBlock section={section} />;
     case "imageBlock":
       return <ImageSection section={section} />;
+    case "resultBlock":
+      return <ResultBlock section={section} />;
   }
 }

src/components/customerCases/customerCase/sections/results/ResultBlock.tsx

@@ -0,0 +1,32 @@
+import Text from "src/components/text/Text";
+import { ResultBlock as ResultBlockObject } from "studioShared/lib/interfaces/resultBlock";
+
+import styles from "./resultBlock.module.css";
+
+export interface ResultBlockProps {
+  section: ResultBlockObject;
+}
+
+export default function QuoteBlock({ section }: ResultBlockProps) {
+  return (
+    section.resultBlockTitle && (
+      <div className={styles.wrapper}>
+        <div className={styles.resultblock}>
+          <Text type="h4" className={styles.blocktitle}>
+            {section.resultBlockTitle}
+          </Text>
+          <div className={styles.resultrow}>
+            {section.resultList?.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>
+      </div>
+    )
+  );
+}

src/components/customerCases/customerCase/sections/results/resultBlock.module.css

@@ -0,0 +1,55 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.resultblock {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2.25rem;
+  max-width: 960px;
+  width: 100%;
+}
+
+.blocktitle {
+  font-size: 1.5rem;
+  font-style: normal;
+  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;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 20%;
+  align-items: center;
+
+  @media (max-width: 1024px) {
+    max-width: 100%;
+  }
+}
+
+.mainresult {
+  color: var(--blue-dark);
+  font-size: 3rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+}

src/components/text/text.module.css

@@ -1,14 +1,17 @@
-.desktopLink,
+/*
+---- Declaring color here will overwrite any other color applied later
+:where(.desktopLink,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6,
-.bodyXl {
-  color: var(--primary-black);
+.bodyXl) {
+ color: var(--primary-black);
   font-family: var(--font-britti-sans);
 }
+*/
 
 .bodyBig,
 .bodyNormal,
@@ -24,8 +27,8 @@
 .bodyNormal,
 .bodyBig,
 .list {
-  color: var(--primary-black);
-  font-family: var(--font-britti-sans);
+  /*color: var(--primary-black);
+  font-family: var(--font-britti-sans);*/
   line-height: 140%;
 }
 

src/styles/global.css

@@ -27,6 +27,8 @@ html {
 
   --focus-color: #8b0f40;
 
+  --blue-dark: #0014cd;
+
   /* TODO: upgrade color-scheme with correct colors */
   --secondary-red: #f0503f;
 
@@ -47,6 +49,7 @@ body {
   width: 100vw;
   background-color: var(--primary-bg);
   font-family: var(--font-britti-sans);
+  color: var(--primary-black);
 }
 
 h1,

studioShared/lib/interfaces/customerCases.ts

@@ -2,6 +2,7 @@ import { IImage } from "studio/lib/interfaces/media";
 
 import { ImageBlock } from "./imageBlock";
 import { QuoteBlock } from "./quoteBlock";
+import { ResultBlock } from "./resultBlock";
 import { RichTextBlock } from "./richTextBlock";
 import { SplitSection } from "./splitSection";
 
@@ -30,7 +31,10 @@ export interface CustomerCaseBase {
 
 export type BaseCustomerCaseSection = RichTextBlock | ImageBlock | QuoteBlock;
 
-export type CustomerCaseSection = BaseCustomerCaseSection | SplitSection;
+export type CustomerCaseSection =
+  | BaseCustomerCaseSection
+  | SplitSection
+  | ResultBlock;
 
 export interface CustomerCase extends CustomerCaseBase {
   projectInfo: CustomerCaseProjectInfo;

studioShared/lib/interfaces/resultBlock.ts

@@ -0,0 +1,12 @@
+interface ResultListItem {
+  result: string;
+  description: string;
+  _key: string;
+}
+
+export interface ResultBlock {
+  _key: string;
+  _type: "resultBlock";
+  resultBlockTitle?: string;
+  resultList?: ResultListItem[];
+}

studioShared/lib/queries/customerCases.ts

@@ -74,6 +74,14 @@ export const CUSTOMER_CASE_QUERY = groq`
           ${BASE_SECTIONS_FRAGMENT}
         }
       },
+      _type == "resultBlock" => {
+        "resultBlockTitle": ${translatedFieldFragment("resultBlockTitle")},
+        "resultList": resultList[] {
+          _key,
+          result,
+          "description": ${translatedFieldFragment("description")},
+          }
+        },
       ${BASE_SECTIONS_FRAGMENT}
     },
     "featuredCases": featuredCases[] -> {

studioShared/schemas/documents/customerCase.ts

@@ -8,12 +8,17 @@ 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 resultBlock from "studioShared/schemas/objects/resultBlock";
 import { baseCustomerCaseSections } from "studioShared/schemas/objects/sections";
 import splitSection from "studioShared/schemas/objects/splitSection";
 
 export const customerCaseID = "customerCase";
 
-export const customerCaseSections = [...baseCustomerCaseSections, splitSection];
+export const customerCaseSections = [
+  ...baseCustomerCaseSections,
+  splitSection,
+  resultBlock,
+];
 
 const customerCase = defineType({
   name: customerCaseID,

studioShared/schemas/objects/resultBlock.ts

@@ -0,0 +1,88 @@
+import { defineField } from "sanity";
+
+import { isInternationalizedString } from "studio/lib/interfaces/global";
+import { firstTranslation } from "studio/utils/i18n";
+
+const resultBlock = defineField({
+  name: "resultBlock",
+  type: "object",
+  title: "Result Block",
+  description: "This block can be used to add some results from the project.",
+  fields: [
+    {
+      name: "resultBlockTitle",
+      title: "Result Block Title",
+      description:
+        "Please provide a title for the result block, for example: 'These are the results from the project'",
+      type: "internationalizedArrayString",
+    },
+    {
+      name: "resultList",
+      title: "List of results",
+      description: "Add up to five results to be included in this list",
+      type: "array",
+      validation: (rule) =>
+        rule.max(5).error("You can add a maximum of five results"),
+      of: [
+        {
+          type: "object",
+          title: "Result List Item",
+          name: "resultlistitem",
+          fields: [
+            {
+              name: "result",
+              type: "string",
+              title: "Result",
+              description: "Add result, for example '+ 72%'",
+            },
+            {
+              name: "description",
+              type: "internationalizedArrayString",
+              title: "Description of the result, for example 'Satisfied users'",
+            },
+          ],
+          preview: {
+            select: {
+              item: "description",
+              subtitle: "result",
+            },
+            prepare({ item, subtitle }) {
+              if (item !== undefined && !isInternationalizedString(item)) {
+                throw new TypeError(
+                  `Expected 'title' to be InternationalizedString, was ${typeof item}`,
+                );
+              }
+              return {
+                title:
+                  item !== undefined
+                    ? (firstTranslation(item) ?? undefined)
+                    : undefined,
+                subtitle: subtitle,
+              };
+            },
+          },
+        },
+      ],
+    },
+  ],
+  preview: {
+    select: {
+      title: "resultBlockTitle",
+    },
+    prepare({ title }) {
+      if (title !== undefined && !isInternationalizedString(title)) {
+        throw new TypeError(
+          `Expected 'title' to be InternationalizedString, was ${typeof title}`,
+        );
+      }
+      return {
+        title:
+          title !== undefined
+            ? (firstTranslation(title) ?? undefined)
+            : undefined,
+      };
+    },
+  },
+});
+
+export default resultBlock;