From d03d308b3a6380e561b898e16e95a19e60335b00 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Thu, 31 Oct 2024 12:26:10 +0100
Subject: [PATCH] feat(richTextBlock): highlight option

---
 .../sections/richText/RichTextSection.tsx          | 10 ++++++++--
 .../sections/richText/richTextSection.module.css   | 12 ++++++++++++
 studioShared/lib/interfaces/richTextBlock.ts       |  1 +
 studioShared/lib/queries/customerCases.ts          |  1 +
 studioShared/schemas/objects/richTextBlock.ts      | 14 +++++++++++++-
 5 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx b/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx
index b428aeaee..65239a01d 100644
--- a/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx
+++ b/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx
@@ -10,8 +10,14 @@ export interface RichTextSectionProps {
 export default function RichTextSection({ section }: RichTextSectionProps) {
   return (
     <div className={styles.wrapper}>
-      <div className={styles.content}>
-        <RichText value={section.richText} />
+      <div
+        className={
+          styles.content + (section.highlighted ? ` ${styles.highlighted}` : "")
+        }
+      >
+        <div className={styles.innerContent}>
+          <RichText value={section.richText} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css b/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css
index adeff28df..bfdc18925 100644
--- a/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css
+++ b/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css
@@ -7,3 +7,15 @@
 .content {
   max-width: 960px;
 }
+
+.content.highlighted {
+  border: 2px solid var(--primary-yellow-warning);
+  border-radius: 0.25rem;
+  background-color: var(--primary-yellow-warning);
+}
+
+.highlighted .innerContent {
+  background-color: var(--primary-bg);
+  border-radius: 1.25rem;
+  padding: 1rem;
+}
diff --git a/studioShared/lib/interfaces/richTextBlock.ts b/studioShared/lib/interfaces/richTextBlock.ts
index 330201a4e..1ce18fac8 100644
--- a/studioShared/lib/interfaces/richTextBlock.ts
+++ b/studioShared/lib/interfaces/richTextBlock.ts
@@ -4,4 +4,5 @@ export interface RichTextBlock {
   _key: string;
   _type: "richTextBlock";
   richText: PortableTextBlock[];
+  highlighted: boolean;
 }
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
index 2f8640b37..7fc6d18d7 100644
--- a/studioShared/lib/queries/customerCases.ts
+++ b/studioShared/lib/queries/customerCases.ts
@@ -31,6 +31,7 @@ export const CUSTOMER_CASES_QUERY = groq`
 export const BASE_SECTIONS_FRAGMENT = groq`
   _type == "richTextBlock" => {
     "richText": ${translatedFieldFragment("richText")},
+    highlighted
   },
   _type == "imageBlock" => {
     "images": images[] {
diff --git a/studioShared/schemas/objects/richTextBlock.ts b/studioShared/schemas/objects/richTextBlock.ts
index 74ce0164a..c23e77ad6 100644
--- a/studioShared/schemas/objects/richTextBlock.ts
+++ b/studioShared/schemas/objects/richTextBlock.ts
@@ -14,12 +14,20 @@ const richTextBlock = defineField({
       title: "Rich Text",
       type: "internationalizedArrayRichText",
     },
+    {
+      name: "highlighted",
+      title: "Highlighted",
+      type: "boolean",
+      description: "Display the rich text with a highlight frame",
+      initialValue: false,
+    },
   ],
   preview: {
     select: {
       richText: "richText",
+      highlighted: "highlighted",
     },
-    prepare({ richText }) {
+    prepare({ richText, highlighted }) {
       if (!isInternationalizedRichText(richText)) {
         throw new TypeError(
           `Expected 'richText' to be InternationalizedRichText, was ${typeof richText}`,
@@ -31,6 +39,10 @@ const richTextBlock = defineField({
           translatedRichText !== null
             ? richTextPreview(translatedRichText)
             : undefined,
+        subtitle:
+          typeof highlighted === "boolean" && highlighted
+            ? "Highlighted"
+            : undefined,
       };
     },
   },