From 119e14e34206204b2cb81bb2440dbb52d31de5ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Tue, 17 Dec 2024 12:10:25 +0100
Subject: [PATCH] Add optional icon to callout block

For now, we only support the `info` icon.
---
 db/model/Gdoc/rawToEnriched.ts                |  1 +
 .../types/src/gdocTypes/ArchieMlComponents.ts |  2 ++
 site/gdocs/components/ArticleBlock.tsx        | 13 +++-----
 site/gdocs/components/Callout.scss            |  3 ++
 site/gdocs/components/Callout.tsx             | 32 +++++++++++++++++++
 site/gdocs/components/centered-article.scss   |  1 +
 site/gdocs/pages/AboutPage.scss               |  4 +++
 site/owid.scss                                |  1 +
 8 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 site/gdocs/components/Callout.scss
 create mode 100644 site/gdocs/components/Callout.tsx

diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
index bae5d4e3b7f..2585f2e5994 100644
--- a/db/model/Gdoc/rawToEnriched.ts
+++ b/db/model/Gdoc/rawToEnriched.ts
@@ -1398,6 +1398,7 @@ function parseCallout(raw: RawBlockCallout): EnrichedBlockCallout {
 
     return {
         type: "callout",
+        icon: raw.value.icon,
         parseErrors: [],
         text: excludeNullish(enrichedTextBlocks),
         title: raw.value.title,
diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
index 90aa20c4299..082af863238 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
@@ -512,6 +512,7 @@ export type EnrichedBlockProminentLink = {
 export type RawBlockCallout = {
     type: "callout"
     value: {
+        icon?: "info"
         title?: string
         text: (RawBlockText | RawBlockHeading | RawBlockList)[]
     }
@@ -519,6 +520,7 @@ export type RawBlockCallout = {
 
 export type EnrichedBlockCallout = {
     type: "callout"
+    icon?: "info"
     title?: string
     text: (EnrichedBlockText | EnrichedBlockHeading | EnrichedBlockList)[]
 } & EnrichedBlockWithParseErrors
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index c0471598197..b4998618028 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import cx from "classnames"
 
+import Callout from "./Callout.js"
 import ChartStory from "./ChartStory.js"
 import Scroller from "./Scroller.js"
 import Chart from "./Chart.js"
@@ -261,14 +262,10 @@ export default function ArticleBlock({
             />
         ))
         .with({ type: "callout" }, (block) => (
-            <div className={getLayout("callout", containerType)}>
-                {block.title ? (
-                    <h4 className="h4-semibold">{block.title}</h4>
-                ) : null}
-                {block.text.map((textBlock, i) => (
-                    <ArticleBlock key={i} b={textBlock} />
-                ))}
-            </div>
+            <Callout
+                className={getLayout("callout", containerType)}
+                block={block}
+            />
         ))
         .with({ type: "chart-story" }, (block) => (
             <ChartStory
diff --git a/site/gdocs/components/Callout.scss b/site/gdocs/components/Callout.scss
new file mode 100644
index 00000000000..ac47335f78f
--- /dev/null
+++ b/site/gdocs/components/Callout.scss
@@ -0,0 +1,3 @@
+.callout-icon {
+    margin-right: 8px;
+}
diff --git a/site/gdocs/components/Callout.tsx b/site/gdocs/components/Callout.tsx
new file mode 100644
index 00000000000..ffeb172fe67
--- /dev/null
+++ b/site/gdocs/components/Callout.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+import { EnrichedBlockCallout } from "@ourworldindata/types"
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { ArticleBlocks } from "./ArticleBlocks.js"
+
+const iconMap = {
+    info: faInfoCircle,
+}
+
+export default function Callout({
+    className,
+    block,
+}: {
+    className?: string
+    block: EnrichedBlockCallout
+}) {
+    return (
+        <div className={className}>
+            {block.icon ? (
+                <FontAwesomeIcon
+                    className="callout-icon"
+                    icon={iconMap[block.icon]}
+                />
+            ) : null}
+            {block.title ? (
+                <h4 className="h4-semibold">{block.title}</h4>
+            ) : null}
+            <ArticleBlocks blocks={block.text} />
+        </div>
+    )
+}
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index 6dd9713fec9..3b1ba69a712 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -1034,6 +1034,7 @@ div.raw-html-table__container {
 // A small grey block
 .article-block__callout {
     h4 {
+        display: inline;
         color: $blue-90;
         margin-bottom: 8px;
         margin-top: 8px;
diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss
index 436b27a151d..6c1ea506d20 100644
--- a/site/gdocs/pages/AboutPage.scss
+++ b/site/gdocs/pages/AboutPage.scss
@@ -91,6 +91,10 @@
     .article-block__callout {
         margin-top: 0;
         margin-bottom: 24px;
+
+        .article-block__text {
+            font-size: 14px;
+        }
     }
 
     .article-block__code-snippet {
diff --git a/site/owid.scss b/site/owid.scss
index 58145608ab6..25301c6b8fe 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -87,6 +87,7 @@
 @import "./Breadcrumb/Breadcrumb.scss";
 @import "./gdocs/components/centered-article.scss";
 @import "./gdocs/components/topic-page.scss";
+@import "./gdocs/components/Callout.scss";
 @import "./gdocs/components/DataInsightDateline.scss";
 @import "./gdocs/components/DataInsightsNewsletter.scss";
 @import "./gdocs/components/Donors.scss";