refactor(datapage): split IndicatorBrief into two components

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

@@ -0,0 +1,37 @@
+.indicator-key-data {
+    @include body-3-medium;
+    border-bottom: 1px solid $blue-20;
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    @include sm-only {
+        grid-template-columns: max-content 1fr;
+    }
+
+    &__title,
+    &__content {
+        padding: 16px 0;
+        border-top: 1px solid $blue-20;
+
+        &.empty {
+            @include sm-only {
+                display: none;
+            }
+        }
+    }
+
+    &__title {
+        color: $blue-50;
+        padding-right: 24px;
+    }
+
+    &__content-source {
+        grid-column: 2 / -1;
+    }
+
+    a {
+        @include owid-link-90;
+        color: inherit;
+    }
+}

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

@@ -0,0 +1,60 @@
+import React from "react"
+import { dayjs } from "@ourworldindata/utils"
+import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
+
+interface IndicatorKeyDataProps {
+    attribution: string
+    processedAdapted: string
+    dateRange?: string
+    lastUpdated: string
+    nextUpdate?: string
+    unit?: string
+}
+
+export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
+    const lastUpdated = dayjs(props.lastUpdated, ["YYYY", "YYYY-MM-DD"])
+    const keyDataCount = 3 + (props.nextUpdate ? 1 : 0) + (props.unit ? 1 : 0)
+    return (
+        <div className="indicator-key-data">
+            <div className="indicator-key-data__title">Source</div>
+            <div className="indicator-key-data__content indicator-key-data__content-source">
+                {props.attribution} – with{" "}
+                <a href={`#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}>
+                    {props.processedAdapted}
+                </a>{" "}
+                by Our World In Data
+            </div>
+            <div className="indicator-key-data__title">Last updated</div>
+            <div className="indicator-key-data__content">
+                {lastUpdated.format("MMMM D, YYYY")}
+            </div>
+            {props.nextUpdate && (
+                <>
+                    <div className="indicator-key-data__title">
+                        Next expected update
+                    </div>
+                    <div className="indicator-key-data__content">
+                        {props.nextUpdate}
+                    </div>
+                </>
+            )}
+            <div className="indicator-key-data__title">Date range</div>
+            <div className="indicator-key-data__content">{props.dateRange}</div>
+            {props.unit && (
+                <>
+                    <div className="indicator-key-data__title">Unit</div>
+                    <div className="indicator-key-data__content">
+                        {props.unit}
+                    </div>
+                </>
+            )}
+            {/* needed for its top-border */}
+            {keyDataCount % 2 === 0 && (
+                <>
+                    <div className="indicator-key-data__title empty" />
+                    <div className="indicator-key-data__content empty" />
+                </>
+            )}
+        </div>
+    )
+}

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

@@ -0,0 +1,40 @@
+.indicator-key-description {
+    .key-info {
+        background-color: $gray-10;
+        border-left: 4px solid $blue-10;
+        padding: 40px;
+        margin: 0 -40px 32px -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-bottom: 16px;
+                margin-left: 16px;
+
+                li {
+                    margin-bottom: 1em;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        &__learn-more {
+            @include expandable-paragraph__expand-button--full;
+            svg {
+                font-size: 0.75em;
+                margin-left: 12px;
+            }
+        }
+    }
+}