refactor: move IndicatorDescriptions into Grapher

owid · Nov 24, 2023 · 225fe84 · 225fe84
1 parent 7258812
commit 225fe84
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 63 deletions.
diff --git a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss b/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss
diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
@@ -29,7 +29,6 @@ export {
     makeUnitConversionFactor,
     makeLinks,
 } from "./IndicatorKeyData/IndicatorKeyData.js"
-export { IndicatorDescriptions } from "./IndicatorDescriptions/IndicatorDescriptions.js"
 export { IndicatorProcessing } from "./IndicatorProcessing/IndicatorProcessing.js"
 
 export { Checkbox } from "./Checkbox.js"

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -9,7 +9,6 @@
 @import "../../../components/src/Tabs/Tabs.scss";
 @import "../../../components/src/Tabs/ExpandableTabs.scss";
 
-@import "../../../components/src/IndicatorDescriptions/IndicatorDescriptions.scss";
 @import "../../../components/src/IndicatorSources/IndicatorSources.scss";
 @import "../../../components/src/IndicatorProcessing/IndicatorProcessing.scss";
 
@@ -73,6 +72,7 @@ $zindex-controls-drawer: 140;
     @import "../footer/Footer.scss";
     @import "../header/Header.scss";
     @import "../modal/SourcesKeyDataTable.scss";
+    @import "../modal/SourcesDescriptions.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss
@@ -0,0 +1,55 @@
+.sources-descriptions {
+    .key-info {
+        background-color: $gray-10;
+        border-left: 4px solid $blue-10;
+        margin: 24px 0;
+        padding: 32px;
+
+        &__title {
+            @include h5-black-caps;
+            color: #a1a1a1;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        &__content,
+        &__content ul {
+            @include body-2-regular;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        &__content ul {
+            li {
+                margin-bottom: 1em;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        &__learn-more {
+            @include body-3-medium;
+            margin-top: 24px;
+            text-decoration: underline;
+            text-underline-offset: 4px;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            svg {
+                font-size: 0.75em;
+                margin-left: 12px;
+                display: inline-block;
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
+    a {
+        @include owid-link-60;
+        color: inherit;
+    }
+}
diff --git a/...torDescriptions/IndicatorDescriptions.tsx → ...grapher/src/modal/SourcesDescriptions.tsx b/...torDescriptions/IndicatorDescriptions.tsx → ...grapher/src/modal/SourcesDescriptions.tsx
@@ -1,13 +1,13 @@
 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 {
+    ExpandableToggle,
     HtmlOrSimpleMarkdownText,
     SimpleMarkdownText,
-} from "../SimpleMarkdownText.js"
+} from "@ourworldindata/components"
 
-interface IndicatorDescriptionsProps {
+interface SourcesDescriptionsProps {
     descriptionShort?: string
     descriptionKey?: string[]
     descriptionFromProducer?: string
@@ -17,10 +17,10 @@ interface IndicatorDescriptionsProps {
     isEmbeddedInADataPage?: boolean // true by default
 }
 
-export const IndicatorDescriptions = (props: IndicatorDescriptionsProps) => {
+export const SourcesDescriptions = (props: SourcesDescriptionsProps) => {
     const isEmbeddedInADataPage = props.isEmbeddedInADataPage ?? true
     return (
-        <div className="indicator-descriptions">
+        <div className="sources-descriptions">
             {props.descriptionKey && props.descriptionKey.length > 0 && (
                 <div className="key-info">
                     <h3 className="key-info__title">

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -15,7 +15,6 @@ import {
 import {
     Tabs,
     ExpandableTabs,
-    IndicatorDescriptions,
     IndicatorSources,
     IndicatorProcessing,
 } from "@ourworldindata/components"
@@ -27,6 +26,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { CoreColumn, OwidColumnDef } from "@ourworldindata/core-table"
 import { Modal } from "./Modal"
 import { SourcesKeyDataTable } from "./SourcesKeyDataTable"
+import { SourcesDescriptions } from "./SourcesDescriptions.js"
 
 // keep in sync with variables in SourcesModal.scss
 const MAX_WIDTH = 832
@@ -307,7 +307,7 @@ export class Source extends React.Component<{
                     }
                 />
                 {this.showDescriptions && (
-                    <IndicatorDescriptions
+                    <SourcesDescriptions
                         descriptionShort={this.def.descriptionShort}
                         descriptionKey={this.def.descriptionKey ?? []}
                         hasFaqEntries={this.datapageHasFAQSection}

diff --git a/site/owid.scss b/site/owid.scss
@@ -27,7 +27,6 @@
 
 @import "../packages/@ourworldindata/components/src/CodeSnippet/code-snippet.scss";
 @import "../packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss";
-@import "../packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss";
 @import "../packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss";
 @import "../packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss";