Add optional icon to callout block

For now, we only support the `info` icon.

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,

packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts

@@ -512,13 +512,15 @@ export type EnrichedBlockProminentLink = {
 export type RawBlockCallout = {
     type: "callout"
     value: {
+        icon?: "info"
         title?: string
         text: (RawBlockText | RawBlockHeading | RawBlockList)[]
     }
 }
 
 export type EnrichedBlockCallout = {
     type: "callout"
+    icon?: "info"
     title?: string
     text: (EnrichedBlockText | EnrichedBlockHeading | EnrichedBlockList)[]
 } & EnrichedBlockWithParseErrors

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

site/gdocs/components/Callout.scss

@@ -0,0 +1,3 @@
+.callout-icon {
+    margin-right: 8px;
+}

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>
+    )
+}

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;

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 {

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";