From 2db2614142dbe46b6e80b0ff58c403ac2ea7873e Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 9 Nov 2023 08:10:35 +0000 Subject: [PATCH] refactor: move IndicatorDescriptions into Grapher --- .../IndicatorDescriptions.scss | 53 ------------------ .../@ourworldindata/components/src/index.ts | 1 - .../grapher/src/core/grapher.scss | 2 +- .../src/modal/SourcesDescriptions.scss | 55 +++++++++++++++++++ .../src/modal/SourcesDescriptions.tsx} | 10 ++-- .../grapher/src/modal/SourcesModal.tsx | 4 +- site/owid.scss | 1 - 7 files changed, 63 insertions(+), 63 deletions(-) delete mode 100644 packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss create mode 100644 packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss rename packages/@ourworldindata/{components/src/IndicatorDescriptions/IndicatorDescriptions.tsx => grapher/src/modal/SourcesDescriptions.tsx} (92%) diff --git a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss b/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss deleted file mode 100644 index e1b66108223..00000000000 --- a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.scss +++ /dev/null @@ -1,53 +0,0 @@ -.indicator-descriptions { - .key-info { - --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); - --content-size: var(--indicator-key-info-content-size, 1rem); - - background-color: var(--background); - border-left: 4px solid var(--border-left); - padding: 40px; - margin: 32px -40px; - - &__title { - @include h5-black-caps; - color: var(--title); - margin-top: 0; - margin-bottom: 16px; - } - - &__content, - &__content ul { - @include body-2-regular; - color: var(--content); - font-size: var(--content-size); - } - - &__content ul { - margin-left: 16px; - li { - margin-bottom: 1em; - - &:last-child { - margin-bottom: 0; - } - } - } - - &__learn-more { - @include expandable-paragraph__expand-button--full; - margin-top: 24px; - svg { - font-size: 0.75em; - margin-left: 12px; - } - } - } - - a { - @include owid-link-60; - color: inherit; - } -} diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts index 69725b7c45c..073c1c8ac21 100644 --- 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 index e348f1d2f72..c1f888833c7 100644 --- 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 new file mode 100644 index 00000000000..c4b0c58c42a --- /dev/null +++ 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/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.tsx similarity index 92% rename from packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx rename to packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.tsx index c8c2fb3c53c..ebfdcdcaec6 100644 --- a/packages/@ourworldindata/components/src/IndicatorDescriptions/IndicatorDescriptions.tsx +++ b/packages/@ourworldindata/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 ( -
+
{props.descriptionKey && props.descriptionKey.length > 0 && (

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx index 0315594b43e..afc1ddf56ba 100644 --- 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 && ( -