Data page: About this data (& refactor shared components)

datapage/Datapage.ts

@@ -5,10 +5,10 @@ import {
     GdocsContentSource,
     DataPageDataV2,
     OwidVariableWithSource,
-    dayjs,
     gdocIdRegex,
-    getETLPathComponents,
     getAttributionFragmentsFromVariable,
+    getLastUpdatedFromVariable,
+    getNextUpdateFromVariable,
 } from "@ourworldindata/utils"
 import { ExplorerProgram } from "../explorer/ExplorerProgram.js"
 import { Gdoc } from "../db/model/Gdoc/Gdoc.js"
@@ -20,21 +20,8 @@ export const getDatapageDataV2 = async (
 ): Promise<DataPageDataV2> => {
     {
         const processingLevel = variableMetadata.processingLevel ?? "minor"
-        const version =
-            getETLPathComponents(variableMetadata.catalogPath ?? "")?.version ??
-            ""
-        let nextUpdate = undefined
-        if (variableMetadata.updatePeriodDays) {
-            const date = dayjs(version)
-            const nextUpdateDate = date.add(
-                variableMetadata.updatePeriodDays,
-                "day"
-            )
-            // If the next update date is in the past, we set it to the next month
-            if (nextUpdateDate.isBefore(dayjs()))
-                nextUpdate = dayjs().add(1, "month").format("MMMM YYYY")
-            else nextUpdate = nextUpdateDate.format("MMMM YYYY")
-        }
+        const lastUpdated = getLastUpdatedFromVariable(variableMetadata) ?? ""
+        const nextUpdate = getNextUpdateFromVariable(variableMetadata)
         const datapageJson: DataPageDataV2 = {
             status: "draft",
             title:
@@ -54,14 +41,15 @@ export const getDatapageDataV2 = async (
             descriptionProcessing: variableMetadata.descriptionProcessing,
             owidProcessingLevel: processingLevel,
             dateRange: variableMetadata.timespan ?? "",
-            lastUpdated: version,
+            lastUpdated: lastUpdated,
             nextUpdate: nextUpdate,
             relatedData: [],
             allCharts: [],
             relatedResearch: [],
             source: variableMetadata.source,
             origins: variableMetadata.origins ?? [],
             chartConfig: partialGrapherConfig as Record<string, unknown>,
+            unit: variableMetadata.display?.unit ?? variableMetadata.unit,
         }
         return datapageJson
     }

db/model/Variable.ts

@@ -13,6 +13,7 @@ import {
     OwidVariableId,
     retryPromise,
     OwidLicense,
+    OwidProcessingLevel,
 } from "@ourworldindata/utils"
 import {
     GrapherInterface,
@@ -41,7 +42,7 @@ export interface VariableRow {
     catalogPath?: string
     dimensions?: Dimensions
     schemaVersion?: number
-    processingLevel?: "minor" | "major"
+    processingLevel?: OwidProcessingLevel
     titlePublic?: string
     titleVariant?: string
     attributionShort?: string

packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss

@@ -1,7 +1,6 @@
 .ExpandableToggle {
     border-top: 1px solid #d0dae3;
     border-bottom: 1px solid #d0dae3;
-    padding: 0 8px;
 }
 
 .ExpandableToggle--stacked {

packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss

@@ -0,0 +1,44 @@
+.indicator-key-description {
+    .key-info {
+        background-color: $gray-10;
+        border-left: 4px solid $blue-10;
+        padding: 40px;
+        margin: 0 -40px;
+
+        &__title {
+            @include h5-black-caps;
+            color: $blue-50;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        &__content {
+            @include body-2-regular;
+            ul {
+                @include body-2-regular;
+                margin-left: 16px;
+
+                li {
+                    margin-bottom: 1em;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        &__learn-more {
+            @include expandable-paragraph__expand-button--full;
+            margin-top: 24px;
+            svg {
+                font-size: 0.75em;
+                margin-left: 12px;
+            }
+        }
+    }
+
+    .expandable-info-blocks {
+        margin-top: 32px;
+    }
+}

packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx

@@ -0,0 +1,89 @@
+import React from "react"
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { ExpandableToggle } from "../ExpandableToggle/ExpandableToggle.js"
+import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
+
+interface IndicatorDescriptionsProps {
+    descriptionShort?: string
+    descriptionKey?: string[]
+    descriptionFromProducer?: string
+    attributionShort?: string
+    additionalInfo?: string
+    canonicalUrl?: string
+    hasFaqEntries: boolean
+}
+
+export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
+    return (
+        <div className="indicator-key-description">
+            {props.descriptionKey && props.descriptionKey.length > 0 && (
+                <div className="key-info">
+                    <h3 className="key-info__title">
+                        What you should know about this data
+                    </h3>
+                    <div className="key-info__content simple-markdown-text">
+                        {props.descriptionKey.length === 1 ? (
+                            <SimpleMarkdownText
+                                text={props.descriptionKey[0].trim()}
+                            />
+                        ) : (
+                            <ul>
+                                {props.descriptionKey.map((text, i) => (
+                                    <li key={i}>
+                                        <SimpleMarkdownText
+                                            text={text.trim()}
+                                        />{" "}
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                    {props.hasFaqEntries && (
+                        <a
+                            className="key-info__learn-more"
+                            href={(props.canonicalUrl ?? "") + "#faqs"}
+                        >
+                            Learn more in the FAQs
+                            <FontAwesomeIcon icon={faArrowDown} />
+                        </a>
+                    )}
+                </div>
+            )}
+            <div className="expandable-info-blocks">
+                {props.descriptionFromProducer && (
+                    <ExpandableToggle
+                        label={
+                            props.attributionShort
+                                ? `How does the producer of this data - ${props.attributionShort} - describe this data?`
+                                : "How does the producer of this data describe this data?"
+                        }
+                        content={
+                            <div className="simple-markdown-text">
+                                <SimpleMarkdownText
+                                    text={props.descriptionFromProducer.trim()}
+                                />
+                            </div>
+                        }
+                        isExpandedDefault={
+                            !(props.descriptionShort || props.descriptionKey)
+                        }
+                        isStacked={!!props.additionalInfo}
+                    />
+                )}
+                {props.additionalInfo && (
+                    <ExpandableToggle
+                        label="Additional information about this data"
+                        content={
+                            <div className="simple-markdown-text">
+                                <SimpleMarkdownText
+                                    text={props.additionalInfo.trim()}
+                                />
+                            </div>
+                        }
+                    />
+                )}
+            </div>
+        </div>
+    )
+}

packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss

@@ -0,0 +1,41 @@
+.indicator-key-data {
+    @include body-3-medium;
+
+    border-top: 1px solid $blue-20;
+    border-bottom: 1px solid $blue-20;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+
+    .indicator-key-data-item {
+        display: flex;
+        padding: 16px 24px 16px 0;
+
+        @include sm-only {
+            display: block;
+        }
+
+        + .indicator-key-data-item {
+            border-top: 1px solid $blue-20;
+        }
+
+        &__title {
+            flex: 0 0 140px; // using a fixed width here to make sure the content is aligned
+            margin-right: 24px;
+            color: $blue-50;
+
+            @include sm-only {
+                margin-right: 0;
+            }
+        }
+
+        &--span {
+            grid-column: 1 / -1;
+        }
+    }
+
+    a {
+        @include owid-link-90;
+        color: inherit;
+    }
+}