Sources modal: Multiple indicators (#2886)

Displays expandable tabs for multiple indicators. I haven't been very disciplined about pushing changes to the branches they belong to. So, this branch also contains various bug fixes that touch on data pages and the sources modal.
owid · Nov 27, 2023 · 99feeb6 · 99feeb6
2 parents c98ca82 + 8fcf5c3
commit 99feeb6
Show file tree

Hide file tree

Showing 24 changed files with 593 additions and 102 deletions.
diff --git a/datapage/Datapage.ts b/datapage/Datapage.ts
@@ -50,6 +50,7 @@ export const getDatapageDataV2 = async (
             origins: variableMetadata.origins ?? [],
             chartConfig: partialGrapherConfig as Record<string, unknown>,
             unit: variableMetadata.display?.unit ?? variableMetadata.unit,
+            unitConversionFactor: variableMetadata.display?.conversionFactor,
         }
         return datapageJson
     }

diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss
@@ -6,6 +6,9 @@
     --button: var(--expandable-toggle-button, #{$blue-90});
     --button-hover: var(--expandable-toggle-button-hover, #{$blue-60});
 
+    --title-size: var(--expandable-toggle-title-size, 1rem);
+    --content-size: var(--expandable-toggle-content-size, 0.875rem);
+
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }
@@ -35,6 +38,11 @@
     @include h4-semibold;
     margin: 0;
     color: var(--title);
+    font-size: var(--title-size);
+
+    &:hover {
+        color: var(--button-hover);
+    }
 }
 
 .ExpandableToggle__icon {
@@ -47,11 +55,15 @@
     overflow: hidden;
     color: var(--content);
 
+    @include body-3-medium;
+    font-size: var(--content-size);
+
     .article-block__text,
     .article-block__list,
     .article-block__html,
     .article-block__numbered-list {
         @include body-3-medium;
+        font-size: var(--content-size);
     }
 
     > *:last-child {

diff --git a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss b/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss
@@ -4,11 +4,12 @@
         --border-left: var(--indicator-key-info-border-left, #{$blue-10});
         --title: var(--indicator-key-info-title, #{$blue-50});
         --content: var(--indicator-key-info-content, currentColor);
+        --content-size: var(--indicator-key-info-content-size, 1rem);
 
         background-color: var(--background);
         border-left: 4px solid var(--border-left);
         padding: 40px;
-        margin: 0 -40px;
+        margin: 32px -40px;
 
         &__title {
             @include h5-black-caps;
@@ -17,19 +18,20 @@
             margin-bottom: 16px;
         }
 
-        &__content {
+        &__content,
+        &__content ul {
             @include body-2-regular;
             color: var(--content);
-            ul {
-                @include body-2-regular;
-                margin-left: 16px;
+            font-size: var(--content-size);
+        }
 
-                li {
-                    margin-bottom: 1em;
+        &__content ul {
+            margin-left: 16px;
+            li {
+                margin-bottom: 1em;
 
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
+                &:last-child {
+                    margin-bottom: 0;
                 }
             }
         }
@@ -44,16 +46,8 @@
         }
     }
 
-    .expandable-info-blocks {
-        margin-top: 32px;
-    }
-
-    .simple-markdown-text {
-        @include body-3-medium;
-
-        a {
-            @include owid-link-60;
-            color: inherit;
-        }
+    a {
+        @include owid-link-60;
+        color: inherit;
     }
 }
diff --git a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx b/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx
@@ -26,7 +26,7 @@ export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
                     <h3 className="key-info__title">
                         What you should know about this data
                     </h3>
-                    <div className="key-info__content simple-markdown-text">
+                    <div className="key-info__content">
                         {props.descriptionKey.length === 1 ? (
                             <SimpleMarkdownText
                                 text={props.descriptionKey[0].trim()}
@@ -60,7 +60,7 @@ export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
                                 : "How does the producer of this data describe this data?"
                         }
                         content={
-                            <div className="simple-markdown-text">
+                            <div className="expandable-info-blocks__content">
                                 <SimpleMarkdownText
                                     text={props.descriptionFromProducer.trim()}
                                 />
@@ -76,7 +76,7 @@ export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
                     <ExpandableToggle
                         label="Additional information about this data"
                         content={
-                            <div className="simple-markdown-text">
+                            <div className="expandable-info-blocks__content">
                                 <HtmlOrSimpleMarkdownText
                                     text={props.additionalInfo.trim()}
                                 />

diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss
@@ -5,8 +5,13 @@
 
     @include body-3-medium;
 
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
+    &--top-border {
+        border-top: 1px solid var(--border);
+    }
+
+    &--bottom-border {
+        border-bottom: 1px solid var(--border);
+    }
 
     display: grid;
     grid-template-columns: repeat(2, 1fr);

diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
@@ -4,6 +4,7 @@ import {
     dayjs,
     OwidProcessingLevel,
     getPhraseForProcessingLevel,
+    splitSourceTextIntoFragments,
 } from "@ourworldindata/utils"
 import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
 import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
@@ -15,8 +16,13 @@ interface IndicatorKeyDataProps {
     nextUpdate?: string
     unit?: string
     owidProcessingLevel?: OwidProcessingLevel
-    links?: string[]
+    link?: string
+    unitConversionFactor?: number
     isEmbeddedInADataPage?: boolean // true by default
+
+    // styling
+    hideTopBorder?: boolean
+    hideBottomBorder?: boolean
 }
 
 export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
@@ -25,14 +31,40 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
         props.owidProcessingLevel
     )
 
-    const lastUpdated = dayjs(props.lastUpdated ?? "", ["YYYY", "YYYY-MM-DD"])
+    const lastUpdated = dayjs(props.lastUpdated ?? "", ["YYYY-MM-DD", "YYYY"])
     const showLastUpdated = lastUpdated.isValid()
 
-    const nextUpdate = dayjs(props.nextUpdate ?? "", ["YYYY", "YYYY-MM-DD"])
+    const nextUpdate = dayjs(props.nextUpdate ?? "", ["YYYY-MM-DD"])
     const showNextUpdate = nextUpdate.isValid()
 
+    const showUnitConversionFactor =
+        props.unitConversionFactor && props.unitConversionFactor !== 1
+
+    const linkFragments = splitSourceTextIntoFragments(props.link)
+    const link = linkFragments.join("\n")
+
+    const keyDataCount = count(
+        props.attribution,
+        showLastUpdated,
+        showNextUpdate,
+        props.dateRange,
+        props.unit,
+        showUnitConversionFactor,
+        link
+    )
+    const hasSingleRow =
+        keyDataCount === 1 ||
+        (keyDataCount === 2 && !props.attribution && !link)
+
     return (
-        <div className="indicator-key-data">
+        <div
+            className={cx("indicator-key-data", {
+                "indicator-key-data--top-border":
+                    !hasSingleRow && !props.hideTopBorder,
+                "indicator-key-data--bottom-border":
+                    !hasSingleRow && !props.hideBottomBorder,
+            })}
+        >
             {props.attribution && (
                 <div className="indicator-key-data-item indicator-key-data-item--span">
                     <div className="indicator-key-data-item__title">Source</div>
@@ -56,7 +88,10 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
                 <div
                     className={cx("indicator-key-data-item", {
                         "indicator-key-data-item--span":
-                            !showNextUpdate && !props.dateRange && !props.unit,
+                            !showNextUpdate &&
+                            !props.dateRange &&
+                            !props.unit &&
+                            !showUnitConversionFactor,
                     })}
                 >
                     <div className="indicator-key-data-item__title">
@@ -71,7 +106,10 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
                 <div
                     className={cx("indicator-key-data-item", {
                         "indicator-key-data-item--span":
-                            !props.dateRange && !props.unit && !showLastUpdated,
+                            !props.dateRange &&
+                            !showLastUpdated &&
+                            !props.unit &&
+                            !showUnitConversionFactor,
                     })}
                 >
                     <div className="indicator-key-data-item__title">
@@ -87,6 +125,7 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
                     className={cx("indicator-key-data-item", {
                         "indicator-key-data-item--span":
                             !props.unit &&
+                            !showUnitConversionFactor &&
                             isEven(count(showLastUpdated, showNextUpdate)),
                     })}
                 >
@@ -99,41 +138,53 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
                 </div>
             )}
             {props.unit && (
+                <div
+                    className={cx("indicator-key-data-item", {
+                        "indicator-key-data-item--span":
+                            !showUnitConversionFactor &&
+                            isEven(
+                                count(
+                                    props.lastUpdated,
+                                    props.nextUpdate,
+                                    props.dateRange
+                                )
+                            ),
+                    })}
+                >
+                    <div className="indicator-key-data-item__title">Unit</div>
+                    <div className="indicator-key-data-item__content">
+                        {props.unit}
+                    </div>
+                </div>
+            )}
+            {showUnitConversionFactor && (
                 <div
                     className={cx("indicator-key-data-item", {
                         "indicator-key-data-item--span": isEven(
                             count(
                                 props.lastUpdated,
                                 props.nextUpdate,
-                                props.dateRange
+                                props.dateRange,
+                                props.unit
                             )
                         ),
                     })}
                 >
-                    <div className="indicator-key-data-item__title">Unit</div>
+                    <div className="indicator-key-data-item__title">
+                        Unit conversion factor
+                    </div>
                     <div className="indicator-key-data-item__content">
-                        {props.unit}
+                        {props.unitConversionFactor}
                     </div>
                 </div>
             )}
-            {props.links && props.links.length > 0 && (
+            {link && (
                 <div className="indicator-key-data-item indicator-key-data-item--span">
                     <div className="indicator-key-data-item__title">
-                        {props.links.length > 1 ? "Links" : "Link"}
+                        {linkFragments.length > 1 ? "Links" : "Link"}
                     </div>
                     <div className="indicator-key-data-item__content">
-                        {props.links.map((link, index, links) => (
-                            <>
-                                <a
-                                    href={link}
-                                    target="_blank"
-                                    rel="nopener noreferrer"
-                                >
-                                    {link}
-                                </a>
-                                {index < links.length - 1 && <br />}
-                            </>
-                        ))}
+                        <SimpleMarkdownText text={link} />
                     </div>
                 </div>
             )}

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss
@@ -1,6 +1,7 @@
 .indicator-processing {
     .data-processing {
         --content: var(--data-processing-content, currentColor);
+        --content-size: var(--data-processing-content-size, 0.875rem);
 
         margin-top: 0;
         margin-bottom: 24px;
@@ -9,6 +10,7 @@
             @include body-3-medium;
             margin: 0 0 16px;
             color: var(--content);
+            font-size: var(--content-size);
         }
     }
 
@@ -26,6 +28,7 @@
         --background: var(--indicator-processing-background, #{$white});
         --title: var(--indicator-processing-title, currentColor);
         --content: var(--indicator-processing-content, #{$blue-60});
+        --content-size: var(--indicator-processing-content-size, 0.875rem);
 
         display: flex;
         flex-direction: column;
@@ -44,6 +47,7 @@
             @include body-3-medium;
             color: var(--content);
             margin: 0;
+            font-size: var(--content-size);
         }
 
         a {