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, }; }, },