🎉 add hasOutline property to archie Images

owid · May 20, 2024 · d71f3f2 · d71f3f2
1 parent 020a6ea
commit d71f3f2
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 1 deletion.
diff --git a/db/model/Gdoc/enrichedToRaw.ts b/db/model/Gdoc/enrichedToRaw.ts
@@ -155,7 +155,11 @@ export function enrichedBlockToRawBlock(
                 type: b.type,
                 value: {
                     filename: b.filename,
+                    smallFilename: b.smallFilename,
                     alt: b.alt,
+                    caption: b.caption && spansToHtmlText(b.caption),
+                    size: b.size,
+                    hasOutline: String(b.hasOutline),
                 },
             })
         )

diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
@@ -629,13 +629,26 @@ const parseImage = (image: RawBlockImage): EnrichedBlockImage => {
         ? htmlToSpans(image.value.caption)
         : undefined
 
+    if (
+        image.value.hasOutline &&
+        image.value.hasOutline !== "true" &&
+        image.value.hasOutline !== "false"
+    ) {
+        return createError({
+            message:
+                "If set, image `hasOutline` property must be true or false",
+        })
+    }
+    const hasOutline = Boolean(image.value.hasOutline === "true")
+
     return {
         type: "image",
         filename,
         smallFilename: image.value.smallFilename,
         alt: image.value.alt,
         caption,
         size,
+        hasOutline,
         originalWidth: undefined,
         parseErrors: [],
     }

diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
@@ -186,6 +186,7 @@ export type RawBlockImage = {
         alt?: string
         caption?: string
         size?: BlockImageSize
+        hasOutline?: string
     }
 }
 
@@ -197,6 +198,7 @@ export type EnrichedBlockImage = {
     caption?: Span[]
     originalWidth?: number
     size: BlockImageSize
+    hasOutline: boolean
 } & EnrichedBlockWithParseErrors
 
 export type RawBlockVideo = {

diff --git a/packages/@ourworldindata/utils/src/Util.test.ts b/packages/@ourworldindata/utils/src/Util.test.ts
@@ -639,6 +639,7 @@ describe(traverseEnrichedBlock, () => {
                 {
                     type: "image",
                     filename: "logo.png",
+                    hasOutline: false,
                     size: BlockImageSize.Narrow,
                     parseErrors: [],
                 },

diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
@@ -254,6 +254,7 @@ export default function ArticleBlock({
                     filename={block.filename}
                     smallFilename={block.smallFilename}
                     alt={block.alt}
+                    hasOutline={block.hasOutline}
                     containerType={containerType}
                 />
                 {block.caption ? (

diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
@@ -6,6 +6,7 @@ import {
     ImageMetadata,
     getFilenameMIMEType,
 } from "@ourworldindata/utils"
+import cx from "classnames"
 import { LIGHTBOX_IMAGE_CLASS } from "../../Lightbox.js"
 import {
     IMAGE_HOSTING_R2_BUCKET_SUBFOLDER_PATH,
@@ -51,17 +52,23 @@ export default function Image(props: {
     filename: string
     smallFilename?: string
     alt?: string
+    hasOutline?: boolean
     className?: string
     containerType?: ImageParentContainer
     shouldLightbox?: boolean
 }) {
     const {
         filename,
         smallFilename,
-        className = "",
+        hasOutline,
         containerType = "default",
         shouldLightbox = true,
     } = props
+
+    const className = cx(props.className, {
+        "image--has-outline": hasOutline,
+    })
+
     const { isPreviewing } = useContext(DocumentContext)
     const image = useImage(filename)
     const smallImage = useImage(smallFilename)

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -260,6 +260,10 @@ h3.article-block__heading {
     width: 100%;
     margin: 32px 0;
 
+    & .image--has-outline {
+        outline: 1px solid #f2f2f2;
+    }
+
     picture {
         // fixes strange extra height that is otherwise added to the element on firefox
         display: flex;