Data pages: extract shared component for sources (#2840)

This PR extracts the block about the sources into a separate component in the components repo

baker/formatWordpressPost.tsx

@@ -49,7 +49,7 @@ import {
     renderAdditionalInformation,
 } from "../site/blocks/AdditionalInformation.js"
 import { renderHelp } from "../site/blocks/Help.js"
-import { renderCodeSnippets } from "../site/blocks/CodeSnippet.js"
+import { renderCodeSnippets } from "@ourworldindata/components"
 import { renderExpandableParagraphs } from "../site/blocks/ExpandableParagraph.js"
 import {
     formatUrls,

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

@@ -3,10 +3,8 @@ 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"
-import {
-    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
-    dayjs,
-} from "@ourworldindata/utils"
+import { dayjs } from "@ourworldindata/utils"
+import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
 
 interface IndicatorBriefProps {
     descriptionShort: string | undefined

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

@@ -0,0 +1,122 @@
+import React from "react"
+import { ExpandableToggle } from "../ExpandableToggle/ExpandableToggle.js"
+import { OwidOrigin } from "@ourworldindata/utils"
+import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
+import { CodeSnippet } from "../CodeSnippet/CodeSnippet.js"
+import { REUSE_THIS_WORK_SECTION_ID } from "../SharedDataPageConstants.js"
+
+export type OriginSubset = Pick<
+    OwidOrigin,
+    | "producer"
+    | "descriptionSnapshot"
+    | "dateAccessed"
+    | "urlMain"
+    | "description"
+    | "citationFull"
+>
+
+export interface IndicatorSourcesProps {
+    origins: OriginSubset[]
+}
+
+export const IndicatorSources = (props: IndicatorSourcesProps) => {
+    const citationFullBlockFn = (source: OriginSubset) => {
+        source.citationFull && (
+            <div
+                className="key-data"
+                style={{
+                    gridColumn: "span 2",
+                }}
+            >
+                <div className="key-data__title--dark">Citation</div>
+                This is the citation of the original data obtained from the
+                source, prior to any processing or adaptation by Our World in
+                Data. To cite data downloaded from this page, please use the
+                suggested citation given in{" "}
+                <a href={"#" + REUSE_THIS_WORK_SECTION_ID}>
+                    Reuse This Work
+                </a>{" "}
+                below.
+                <CodeSnippet code={source.citationFull} theme="light" />
+            </div>
+        )
+    }
+    return (
+        <div className="data-sources grid span-cols-12">
+            <h3 className="data-sources__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                This data is based on the following sources
+            </h3>
+            <div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
+                {props.origins.map((source, idx: number, sources) => {
+                    return (
+                        <div className="data-sources__source-item" key={idx}>
+                            <ExpandableToggle
+                                label={
+                                    source.producer ??
+                                    source.descriptionSnapshot ??
+                                    source.description ??
+                                    ""
+                                }
+                                isStacked={idx !== sources.length - 1}
+                                hasTeaser
+                                content={
+                                    <>
+                                        {source.description && (
+                                            <p className="article-block__text">
+                                                <SimpleMarkdownText
+                                                    text={source.description}
+                                                />
+                                            </p>
+                                        )}
+                                        {(source.dateAccessed ||
+                                            source.urlMain) && (
+                                            <div
+                                                className="grid source__key-data"
+                                                style={{
+                                                    gridTemplateColumns:
+                                                        "minmax(0,1fr) minmax(0,2fr)",
+                                                }}
+                                            >
+                                                {source.dateAccessed && (
+                                                    <div className="key-data">
+                                                        <div className="key-data__title--dark">
+                                                            Retrieved on
+                                                        </div>
+                                                        <div>
+                                                            {
+                                                                source.dateAccessed
+                                                            }
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                {source.urlMain && (
+                                                    <div className="key-data key-data--hide-overflow">
+                                                        <div className="key-data__title--dark">
+                                                            Retrieved from
+                                                        </div>
+                                                        <div>
+                                                            <a
+                                                                href={
+                                                                    source.urlMain
+                                                                }
+                                                                target="_blank"
+                                                                rel="noreferrer"
+                                                            >
+                                                                {source.urlMain}
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                {citationFullBlockFn(source)}
+                                            </div>
+                                        )}
+                                    </>
+                                }
+                            />
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}

packages/@ourworldindata/utils/src/SharedConstants.ts → packages/@ourworldindata/components/src/SharedDataPageConstants.ts

@@ -1,2 +1,3 @@
 export const DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID =
     "sources-and-processing" as const
+export const REUSE_THIS_WORK_SECTION_ID = "reuse-this-work"

packages/@ourworldindata/components/src/index.ts

@@ -27,3 +27,19 @@ export {
 export { ExpandableToggle } from "./ExpandableToggle/ExpandableToggle.js"
 
 export { IndicatorBrief } from "./IndicatorBrief/IndicatorBrief.js"
+
+export {
+    IndicatorSources,
+    type OriginSubset,
+} from "./IndicatorSources/IndicatorSources.js"
+
+export {
+    CodeSnippet,
+    hydrateCodeSnippets,
+    renderCodeSnippets,
+} from "./CodeSnippet/CodeSnippet.js"
+
+export {
+    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+    REUSE_THIS_WORK_SECTION_ID,
+} from "./SharedDataPageConstants.js"

packages/@ourworldindata/grapher/src/footer/Footer.tsx

@@ -2,13 +2,12 @@ import React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import parseUrl from "url-parse"
+import { Bounds, DEFAULT_BOUNDS, getRelativeMouse } from "@ourworldindata/utils"
 import {
-    Bounds,
-    DEFAULT_BOUNDS,
-    getRelativeMouse,
     DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
-} from "@ourworldindata/utils"
-import { MarkdownTextWrap, TextWrap } from "@ourworldindata/components"
+    MarkdownTextWrap,
+    TextWrap,
+} from "@ourworldindata/components"
 import { Tooltip } from "../tooltip/Tooltip"
 import { FooterManager } from "./FooterManager"
 import { ActionButtons } from "../controls/ActionButtons"

packages/@ourworldindata/utils/src/index.ts

@@ -611,5 +611,3 @@ export {
     gdocIdRegex,
     detailOnDemandRegex,
 } from "./GdocsConstants.js"
-
-export { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "./SharedConstants"

site/DataPageContent.tsx

@@ -2,21 +2,21 @@ import React, { useEffect } from "react"
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { Grapher, GrapherInterface } from "@ourworldindata/grapher"
-import { ExpandableToggle } from "@ourworldindata/components"
+import {
+    ExpandableToggle,
+    CodeSnippet,
+    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+} from "@ourworldindata/components"
 import ReactDOM from "react-dom"
 import { GrapherWithFallback } from "./GrapherWithFallback.js"
 import { formatAuthors } from "./clientFormatting.js"
 import { ArticleBlocks } from "./gdocs/ArticleBlocks.js"
 import { RelatedCharts } from "./blocks/RelatedCharts.js"
-import {
-    DataPageContentFields,
-    DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
-} from "@ourworldindata/utils"
+import { DataPageContentFields } from "@ourworldindata/utils"
 import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js"
 import StickyNav from "./blocks/StickyNav.js"
 import cx from "classnames"
 import { DebugProvider } from "./gdocs/DebugContext.js"
-import { CodeSnippet } from "./blocks/CodeSnippet.js"
 import { DATA_API_URL } from "../settings/clientSettings.js"
 
 declare global {