Data page / Sources modal: Bug fixes (#2918)

Addresses feedback and implements various bug fixes etc.
owid · Nov 27, 2023 · d686996 · d686996
2 parents 3233b5c + 4b977e0
commit d686996
Show file tree

Hide file tree

Showing 32 changed files with 742 additions and 435 deletions.
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
@@ -5,15 +5,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCopy } from "@fortawesome/free-solid-svg-icons"
 import { canWriteToClipboard } from "@ourworldindata/utils"
 import cx from "classnames"
+import { SimpleMarkdownText } from "../SimpleMarkdownText"
 
 export const CodeSnippet = ({
     code,
     theme = "dark",
     isTruncated = false,
+    useMarkdown = false,
 }: {
     code: string
     theme?: "dark" | "light"
     isTruncated?: boolean
+    useMarkdown?: boolean
 }) => {
     const [canCopy, setCanCopy] = useState(false)
     const [hasCopied, setHasCopied] = useState(false)
@@ -44,7 +47,11 @@ export const CodeSnippet = ({
                         "wp-code-snippet__code--is-truncated": isTruncated,
                     })}
                 >
-                    {code}
+                    {useMarkdown ? (
+                        <SimpleMarkdownText text={code} useParagraphs={false} />
+                    ) : (
+                        code
+                    )}
                 </code>
             </pre>
             {canCopy && (

diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss
@@ -1,7 +1,7 @@
 .ExpandableToggle {
     --title: var(--expandable-toggle-title, currentColor);
-    --content: var(--expandable-toggle-content, #{$blue-60});
     --border: var(--expandable-toggle-border, #d0dae3);
+    --content: var(--expandable-toggle-content, #{$blue-60});
 
     --button: var(--expandable-toggle-button, #{$blue-90});
     --button-hover: var(--expandable-toggle-button-hover, #{$blue-60});
@@ -34,6 +34,11 @@
     }
 }
 
+.ExpandableToggle--teaser .ExpandableToggle__button,
+.ExpandableToggle--open .ExpandableToggle__button {
+    padding-bottom: 8px;
+}
+
 .ExpandableToggle__title {
     @include h4-semibold;
     margin: 0;
@@ -66,17 +71,21 @@
         font-size: var(--content-size);
     }
 
+    > *:first-child {
+        margin-top: 0;
+    }
+
     > *:last-child {
         margin-bottom: 0;
     }
 }
 
-.ExpandableToggle__content--teaser {
+.ExpandableToggle--teaser .ExpandableToggle__content {
     height: 96px;
     -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent);
 }
 
-.ExpandableToggle__content--open {
+.ExpandableToggle--open .ExpandableToggle__content {
     padding-bottom: 16px;
     height: auto;
     -webkit-mask-image: none;

diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx
@@ -27,6 +27,8 @@ export const ExpandableToggle = ({
         <div
             className={cx("ExpandableToggle", {
                 "ExpandableToggle--stacked": isStacked,
+                "ExpandableToggle--open": isOpen,
+                "ExpandableToggle--teaser": hasTeaser,
             })}
         >
             <button className="ExpandableToggle__button" onClick={toggle}>
@@ -36,14 +38,7 @@ export const ExpandableToggle = ({
                     icon={!isOpen ? faPlus : faMinus}
                 />
             </button>
-            <div
-                className={cx("ExpandableToggle__content", {
-                    "ExpandableToggle__content--open": isOpen,
-                    "ExpandableToggle__content--teaser": hasTeaser,
-                })}
-            >
-                {content}
-            </div>
+            <div className="ExpandableToggle__content">{content}</div>
         </div>
     )
 }
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import {
-    dayjs,
     OwidProcessingLevel,
     getPhraseForProcessingLevel,
     splitSourceTextIntoFragments,
+    formatSourceDate,
 } from "@ourworldindata/utils"
 import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
 import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
@@ -21,18 +21,26 @@ export const makeSource = ({
     const isEmbedded = isEmbeddedInADataPage ?? true
     const processingLevelPhrase =
         getPhraseForProcessingLevel(owidProcessingLevel)
+    const hideProcessingPhase =
+        attribution.toLowerCase() === "our world in data"
     return (
         <>
             <SimpleMarkdownText text={attribution} useParagraphs={false} />
-            {" - "}
-            {isEmbedded ? (
-                <a href={`#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}>
-                    {processingLevelPhrase}
-                </a>
-            ) : (
-                processingLevelPhrase
-            )}{" "}
-            by Our World in Data
+            {!hideProcessingPhase && (
+                <>
+                    {" – "}
+                    {isEmbedded ? (
+                        <a
+                            href={`#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}
+                        >
+                            {processingLevelPhrase}
+                        </a>
+                    ) : (
+                        processingLevelPhrase
+                    )}{" "}
+                    by Our World in Data
+                </>
+            )}
         </>
     )
 }
@@ -42,19 +50,15 @@ export const makeLastUpdated = ({
 }: {
     lastUpdated?: string
 }): React.ReactNode => {
-    const date = dayjs(lastUpdated ?? "", ["YYYY-MM-DD", "YYYY"])
-    if (!date.isValid()) return null
-    return date.format("MMMM D, YYYY")
+    return formatSourceDate(lastUpdated, "MMMM D, YYYY")
 }
 
 export const makeNextUpdate = ({
     nextUpdate,
 }: {
     nextUpdate?: string
 }): React.ReactNode => {
-    const date = dayjs(nextUpdate ?? "", ["YYYY-MM-DD"])
-    if (!date.isValid()) return null
-    return date.format("MMMM YYYY")
+    return formatSourceDate(nextUpdate, "MMMM YYYY")
 }
 
 export const makeDateRange = ({

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss
@@ -1,26 +1,33 @@
 .indicator-processing {
     .data-processing {
-        --content: var(--data-processing-content, currentColor);
+        --content: var(--data-processing-content, #{$blue-60});
         --content-size: var(--data-processing-content-size, 0.875rem);
 
         margin-top: 0;
         margin-bottom: 24px;
+        color: var(--content);
 
         > p {
             @include body-3-medium;
             margin: 0 0 16px;
-            color: var(--content);
             font-size: var(--content-size);
         }
     }
 
     .indicator-processing__link {
-        @include expandable-paragraph__expand-button--full;
+        @include body-3-medium;
+        color: inherit;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+
+        &:hover {
+            text-decoration: none;
+        }
 
         svg {
-            display: none; // used in Grapher's sources modal
             font-size: 0.75em;
-            margin-left: 12px;
+            margin-left: 6px;
+            transform: rotate(-90deg);
         }
     }
 
@@ -48,6 +55,32 @@
             color: var(--content);
             margin: 0;
             font-size: var(--content-size);
+
+            ul {
+                margin-left: 1em;
+
+                li {
+                    margin: 1em 0;
+                    &:first-child {
+                        margin-top: 0;
+                    }
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+
+            > *:first-child {
+                margin-top: 0;
+            }
+
+            > *:last-child {
+                margin-bottom: 0;
+            }
+
+            ul li p {
+                margin: 0;
+            }
         }
 
         a {

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
@@ -41,11 +41,11 @@ export const IndicatorProcessing = (props: IndicatorProcessingProps) => {
                     <h5 className="indicator-processing-callout__title">
                         Notes on our processing step for this indicator
                     </h5>
-                    <p className="indicator-processing-callout__content">
+                    <div className="indicator-processing-callout__content">
                         <SimpleMarkdownText
                             text={props.descriptionProcessing.trim()}
                         />
-                    </p>
+                    </div>
                 </div>
             )}
         </div>

diff --git a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss
@@ -1,49 +1,90 @@
-.indicator-source {
-    .description {
-        margin: 0;
-        margin-bottom: 16px;
-    }
+.indicator-sources {
+    --description-heading: var(
+        --indicator-sources-description-heading,
+        #{$blue-90}
+    );
+    --key-data-title: var(--indicator-sources-key-data-title, #{$blue-90});
+    --content: var(--indicator-sources-content, #{$blue-60});
+
+    .source {
+        color: var(--content);
+
+        .description {
+            margin-bottom: 16px;
+
+            > *:first-child {
+                margin-top: 0;
+            }
 
-    .source-key-data-blocks {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
-        row-gap: 8px;
-        column-gap: 16px;
+            > *:last-child {
+                margin-bottom: 0;
+            }
 
-        .wp-code-snippet {
-            margin-top: 8px;
-            margin-bottom: 0;
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                color: var(--description-heading);
+                font-size: 1em;
+                margin-top: 14px;
+                margin-bottom: 6px;
+            }
+
+            p {
+                margin: 6px 0;
+            }
+
+            ol {
+                margin-left: 1.2em;
+            }
+
+            ul {
+                margin-left: 1em;
+            }
         }
-    }
 
-    .source-key-data {
-        --title: var(--source-key-data-title, #{$blue-90});
-    }
+        .source-key-data-blocks {
+            --code-snippet-text: #{$blue-50};
 
-    .source-key-data--span-2 {
-        grid-column: span 2;
-    }
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+            gap: 16px;
 
-    .source-key-data__title {
-        color: var(--title);
-        white-space: nowrap;
-    }
+            .wp-code-snippet {
+                margin-top: 16px;
+                margin-bottom: 0;
+            }
+        }
 
-    .source-key-data__content--hide-overflow {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
+        .source-key-data--span-2 {
+            grid-column: span 2;
+        }
 
-    a {
-        @include owid-link-90;
-        color: inherit;
+        .source-key-data__title {
+            color: var(--key-data-title);
+            white-space: nowrap;
+        }
+
+        .source-key-data__content {
+            > p:first-of-type {
+                margin-top: 0;
+            }
+            > p:last-of-type {
+                margin-bottom: 0;
+            }
+        }
+
+        a {
+            @include owid-link-90;
+            color: inherit;
+        }
     }
 }
 
 .NonExpandable {
     --title: var(--non-expandable-title, currentColor);
-    --content: var(--non-expandable-content, #{$blue-60});
     --border: var(--non-expandable-border, #d0dae3);
 
     --title-size: var(--non-expandable-title-size, 1rem);
@@ -68,7 +109,6 @@
 
     &__content {
         @include body-3-medium;
-        color: var(--content);
         font-size: var(--content-size);
     }
 }