feat(grapher): new sources modal

owid · Oct 30, 2023 · 1de66ea · 1de66ea
1 parent 0599d5f
commit 1de66ea
Show file tree

Hide file tree

Showing 20 changed files with 454 additions and 405 deletions.
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/code-snippet.scss b/packages/@ourworldindata/components/src/CodeSnippet/code-snippet.scss
@@ -1,14 +1,24 @@
 .wp-code-snippet {
+    --text: var(--code-snippet-text, #{$blue-60});
+    --border: var(--code-snippet-border, #{$blue-20});
+
+    --background: var(--code-snippet-background, #{$gray-10});
+    --background-light: var(--code-snippet-background-light, #{$white});
+
+    --button: var(--code-snippet-button, #{$blue-60});
+    --button-hover: var(--code-snippet-button-hover, #{$blue-90});
+    --button-active: var(--code-snippet-button-active, #{$blue-100});
+
     margin-bottom: 32px;
     font-size: 12px;
     line-height: calc(16 / 12);
     display: flex;
     align-items: stretch;
 
-    background-color: $gray-10;
+    background-color: var(--background);
     padding: 16px 24px;
-    border: 1px solid $blue-20;
-    color: $blue-60;
+    border: 1px solid var(--border);
+    color: var(--text);
 
     pre {
         margin: 0;
@@ -32,7 +42,7 @@
         flex: 0 0 64px;
         max-height: 32px;
         text-align: right;
-        color: $blue-60;
+        color: var(--button);
         cursor: pointer;
 
         &::before {
@@ -45,11 +55,11 @@
         }
 
         &:hover {
-            color: $blue-90;
+            color: var(--button-hover);
         }
 
         &:active {
-            color: $blue-100;
+            color: var(--button-active);
         }
 
         &.code-copy-button--has-copied {
@@ -59,5 +69,5 @@
 }
 
 .wp-code-snippet--light {
-    background-color: $white;
+    background-color: var(--background-light);
 }
diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss
@@ -1,6 +1,13 @@
 .ExpandableToggle {
-    border-top: 1px solid #d0dae3;
-    border-bottom: 1px solid #d0dae3;
+    --title: var(--expandable-toggle-title, currentColor);
+    --content: var(--expandable-toggle-content, #{$blue-60});
+    --border: var(--expandable-toggle-border, #d0dae3);
+
+    --button: var(--expandable-toggle-button, #{$blue-90});
+    --button-hover: var(--expandable-toggle-button-hover, #{$blue-60});
+
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
     padding: 0 8px;
 }
 
@@ -14,14 +21,14 @@
     align-items: center;
     width: 100%;
     padding: 16px 0;
-    color: $blue-90;
+    color: var(--button);
     background-color: transparent;
     border: none;
     cursor: pointer;
     text-align: left;
 
     &:hover {
-        color: $blue-60;
+        color: var(--button-hover);
     }
 }
 
@@ -38,7 +45,7 @@
 .ExpandableToggle__content {
     height: 0;
     overflow: hidden;
-    color: $blue-60;
+    color: var(--content);
 
     .article-block__text,
     .article-block__list,

diff --git a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss b/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss
@@ -1,19 +1,25 @@
-.indicator-key-description {
+.indicator-descriptions {
     .key-info {
-        background-color: $gray-10;
-        border-left: 4px solid $blue-10;
+        --background: var(--indicator-key-info-background, #{$gray-10});
+        --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);
+
+        background-color: var(--background);
+        border-left: 4px solid var(--border-left);
         padding: 40px;
         margin: 0 -40px;
 
         &__title {
             @include h5-black-caps;
-            color: $blue-50;
+            color: var(--title);
             margin-top: 0;
             margin-bottom: 16px;
         }
 
         &__content {
             @include body-2-regular;
+            color: var(--content);
             ul {
                 @include body-2-regular;
                 margin-left: 16px;

diff --git a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx b/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx
@@ -2,21 +2,25 @@ 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"
+import {
+    HtmlOrSimpleMarkdownText,
+    SimpleMarkdownText,
+} from "../SimpleMarkdownText.js"
 
 interface IndicatorDescriptionsProps {
     descriptionShort?: string
     descriptionKey?: string[]
     descriptionFromProducer?: string
     attributionShort?: string
     additionalInfo?: string
-    canonicalUrl?: string
     hasFaqEntries: boolean
+    isEmbeddedInADataPage?: boolean // true by default
 }
 
 export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
+    const isEmbeddedInADataPage = props.isEmbeddedInADataPage ?? true
     return (
-        <div className="indicator-key-description">
+        <div className="indicator-descriptions">
             {props.descriptionKey && props.descriptionKey.length > 0 && (
                 <div className="key-info">
                     <h3 className="key-info__title">
@@ -37,11 +41,8 @@ export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
                             </ul>
                         )}
                     </div>
-                    {props.hasFaqEntries && (
-                        <a
-                            className="key-info__learn-more"
-                            href={(props.canonicalUrl ?? "") + "#faqs"}
-                        >
+                    {isEmbeddedInADataPage && props.hasFaqEntries && (
+                        <a className="key-info__learn-more" href="#faqs">
                             Learn more in the FAQs
                             <FontAwesomeIcon icon={faArrowDown} />
                         </a>
@@ -74,7 +75,7 @@ export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
                         label="Additional information about this data"
                         content={
                             <div className="simple-markdown-text">
-                                <SimpleMarkdownText
+                                <HtmlOrSimpleMarkdownText
                                     text={props.additionalInfo}
                                 />
                             </div>

diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss
@@ -1,6 +1,10 @@
 .indicator-key-data {
+    --title: var(--indicator-key-data-title, #{$blue-50});
+    --content: var(--indicator-key-data-content, currentColor);
+    --border: var(--indicator-key-data-border, #{$blue-20});
+
     @include body-3-medium;
-    border-bottom: 1px solid $blue-20;
+    border-bottom: 1px solid var(--border);
 
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -11,8 +15,8 @@
 
     &__title,
     &__content {
-        padding: 16px 0;
-        border-top: 1px solid $blue-20;
+        padding: 16px 24px 16px 0;
+        border-top: 1px solid var(--border);
 
         &.empty {
             @include sm-only {
@@ -22,8 +26,11 @@
     }
 
     &__title {
-        color: $blue-50;
-        padding-right: 24px;
+        color: var(--title);
+    }
+
+    &__content {
+        color: var(--content);
     }
 
     &__content-source {

diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
@@ -13,11 +13,11 @@ interface IndicatorKeyDataProps {
     nextUpdate?: string
     unit?: string
     owidProcessingLevel?: OwidProcessingLevel
-    canonicalUrl?: string
+    isEmbeddedInADataPage?: boolean // true by default
 }
 
 export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
-    const canonicalUrl = props.canonicalUrl ?? ""
+    const isEmbeddedInADataPage = props.isEmbeddedInADataPage ?? true
     const processedAdapted = getPhraseForProcessingLevel(
         props.owidProcessingLevel ?? OwidProcessingLevel.minor
     )
@@ -29,11 +29,13 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
             <div className="indicator-key-data__title">Source</div>
             <div className="indicator-key-data__content indicator-key-data__content-source">
                 {props.attribution} – with{" "}
-                <a
-                    href={`${canonicalUrl}#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}
-                >
-                    {processedAdapted}
-                </a>{" "}
+                {isEmbeddedInADataPage ? (
+                    <a href={`#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}>
+                        {processedAdapted}
+                    </a>
+                ) : (
+                    processedAdapted
+                )}{" "}
                 by Our World In Data
             </div>
             <div className="indicator-key-data__title">Last updated</div>

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss
@@ -1,7 +1,10 @@
 .indicator-processing {
     .data-processing {
+        --content: var(--data-processing-content, currentColor);
+
         &__content {
             margin-bottom: 24px;
+            color: var(--content);
         }
 
         &__paragraph {
@@ -20,36 +23,26 @@
         }
     }
 
-    .variable-processing-info {
+    .indicator-processing {
+        --background: var(--indicator-processing-background, #{$white});
+        --title: var(--indicator-processing-title, currentColor);
+        --content: var(--indicator-processing-content, #{$blue-60});
+
         display: flex;
         flex-direction: column;
-        background-color: $white;
+        background-color: var(--background);
         margin: 32px -24px 0;
         padding: 24px;
 
-        &__header {
+        &__title {
             @include overline-black-caps;
             text-transform: uppercase;
             margin: 0 0 8px;
+            color: var(--title);
         }
 
-        &__description {
-            color: $blue-60;
-
-            .article-block__text,
-            .article-block__list,
-            .article-block__html,
-            .article-block__numbered-list {
-                @include body-3-medium;
-            }
-
-            > *:first-child {
-                margin-top: 0;
-            }
-
-            > *:last-child {
-                margin-bottom: 0;
-            }
+        &__content {
+            color: var(--content);
         }
 
         .article-block__text a {

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
@@ -37,11 +37,11 @@ export const IndicatorProcessing = (props: IndicatorProcessingProps) => {
                 <FontAwesomeIcon icon={faArrowDown} />
             </a>
             {props.descriptionProcessing && (
-                <div className="variable-processing-info">
-                    <h5 className="variable-processing-info__header">
+                <div className="indicator-processing">
+                    <h5 className="indicator-processing__title">
                         Notes on our processing step for this indicator
                     </h5>
-                    <div className="variable-processing-info__description">
+                    <div className="indicator-processing__content">
                         <p className="simple-markdown-text">
                             <SimpleMarkdownText
                                 text={props.descriptionProcessing}

diff --git a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss
@@ -1,10 +1,10 @@
-.source-content {
+.indicator-source {
     .description {
         @include body-3-medium;
         margin: 0;
     }
 
-    .key-info {
+    .source-key-data-blocks {
         margin-top: 16px;
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
@@ -16,23 +16,25 @@
         }
     }
 
-    .key-data {
+    .source-key-data {
+        --title: var(--source-key-data-title, #{$blue-90});
+
         @include body-3-medium;
         a {
             @include owid-link-90;
             color: inherit;
         }
     }
 
-    .key-data--span-2 {
+    .source-key-data--span-2 {
         grid-column: span 2;
     }
 
-    .key-data__title {
-        color: $blue-90;
+    .source-key-data__title {
+        color: var(--title);
     }
 
-    .key-data--hide-overflow div:last-child {
+    .source-key-data--hide-overflow div:last-child {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;