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 (
-
);
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..971bf4832 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,
};
},
},