feat(richTextBlock): highlight option

varianter · Oct 31, 2024 · d03d308 · d03d308
1 parent d0d2971
commit d03d308
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
       };
     },
   },