refactor: move KeyDataTable into modal folder

owid · Nov 16, 2023 · d586570 · d586570
1 parent 5bb2071
commit d586570
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 50 deletions.
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -72,7 +72,7 @@ $zindex-controls-drawer: 140;
     @import "../loadingIndicator/LoadingIndicator.scss";
     @import "../footer/Footer.scss";
     @import "../header/Header.scss";
-    @import "../keyDataTable/KeyDataTable.scss";
+    @import "../modal/SourcesKeyDataTable.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers

diff --git a/...rapher/src/keyDataTable/KeyDataTable.scss → ...rapher/src/modal/SourcesKeyDataTable.scss b/...rapher/src/keyDataTable/KeyDataTable.scss → ...rapher/src/modal/SourcesKeyDataTable.scss
@@ -1,4 +1,4 @@
-.key-data-table {
+.sources-key-data-table {
     $border: #e7e7e7;
 
     @include label-2-medium;
@@ -15,20 +15,20 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 
-    .key-data-table-item {
+    .key-data {
         display: flex;
         padding: 16px 24px 16px 0;
 
         @include sm-only {
             display: block;
         }
 
-        &:not(.key-data-table-source) {
+        &:not(.key-data-source) {
             border-top: 1px solid $border;
         }
 
         &__title {
-            flex: 0 0 130px; // using a fixed width here to make sure the content is aligned
+            flex: 0 0 140px; // using a fixed width here to make sure the content is aligned
             margin-right: 24px;
             color: $light-text;
 
@@ -52,8 +52,8 @@
     }
 }
 
-&.GrapherComponentNarrow .key-data-table {
-    .indicator-key-data-item {
+&.GrapherComponentNarrow .sources-key-data-table {
+    .key-data {
         display: block;
     }
 }
diff --git a/...grapher/src/keyDataTable/KeyDataTable.tsx → ...grapher/src/modal/SourcesKeyDataTable.tsx b/...grapher/src/keyDataTable/KeyDataTable.tsx → ...grapher/src/modal/SourcesKeyDataTable.tsx
@@ -11,7 +11,7 @@ import {
     makeLinks,
 } from "@ourworldindata/components"
 
-interface KeyDataTableProps {
+interface SourcesKeyDataTableProps {
     attribution?: string
     dateRange?: string
     lastUpdated?: string
@@ -27,7 +27,7 @@ interface KeyDataTableProps {
     hideBottomBorder?: boolean
 }
 
-export const KeyDataTable = (props: KeyDataTableProps) => {
+export const SourcesKeyDataTable = (props: SourcesKeyDataTableProps) => {
     const source = makeSource(props)
     const lastUpdated = makeLastUpdated(props)
     const nextUpdate = makeNextUpdate(props)
@@ -38,100 +38,91 @@ export const KeyDataTable = (props: KeyDataTableProps) => {
 
     return (
         <div
-            className={cx("key-data-table", {
-                "key-data-table--top-border": !props.hideTopBorder,
-                "key-data-table--bottom-border": !props.hideBottomBorder,
+            className={cx("sources-key-data-table", {
+                "sources-key-data-table--top-border": !props.hideTopBorder,
+                "sources-key-data-table--bottom-border":
+                    !props.hideBottomBorder,
             })}
         >
             {source && (
-                <div className="key-data-table-item key-data-table-source key-data-table-item--span">
-                    <div className="key-data-table-item__title">Source</div>
-                    <div className="key-data-table-item__content">{source}</div>
+                <div className="key-data key-data-source key-data--span">
+                    <div className="key-data__title">Source</div>
+                    <div className="key-data__content">{source}</div>
                 </div>
             )}
             {lastUpdated && (
                 <div
-                    className={cx("key-data-table-item", {
-                        "key-data-table-item--span":
+                    className={cx("key-data", {
+                        "key-data--span":
                             !nextUpdate &&
                             !dateRange &&
                             !unit &&
                             !unitConversionFactor,
                     })}
                 >
-                    <div className="key-data-table-item__title">
-                        Last updated
-                    </div>
-                    <div className="key-data-table-item__content">
-                        {lastUpdated}
-                    </div>
+                    <div className="key-data__title">Last updated</div>
+                    <div className="key-data__content">{lastUpdated}</div>
                 </div>
             )}
             {nextUpdate && (
                 <div
-                    className={cx("key-data-table-item", {
-                        "key-data-table-item--span":
+                    className={cx("key-data", {
+                        "key-data--span":
                             !dateRange &&
                             !lastUpdated &&
                             !unit &&
                             !unitConversionFactor,
                     })}
                 >
-                    <div className="key-data-table-item__title">
-                        Next expected update
-                    </div>
-                    <div className="key-data-table-item__content">
-                        {nextUpdate}
-                    </div>
+                    <div className="key-data__title">Next expected update</div>
+                    <div className="key-data__content">{nextUpdate}</div>
                 </div>
             )}
             {dateRange && (
                 <div
-                    className={cx("key-data-table-item", {
-                        "key-data-table-item--span":
+                    className={cx("key-data", {
+                        "key-data--span":
                             !unit &&
                             !unitConversionFactor &&
                             isEven(count(lastUpdated, nextUpdate)),
                     })}
                 >
-                    <div className="key-data-table-item__title">Date range</div>
-                    <div className="key-data-table-item__content">
-                        {dateRange}
-                    </div>
+                    <div className="key-data__title">Date range</div>
+                    <div className="key-data__content">{dateRange}</div>
                 </div>
             )}
             {unit && (
                 <div
-                    className={cx("key-data-table-item", {
-                        "key-data-table-item--span":
+                    className={cx("key-data", {
+                        "key-data--span":
                             !unitConversionFactor &&
                             isEven(count(lastUpdated, nextUpdate, dateRange)),
                     })}
                 >
-                    <div className="key-data-table-item__title">Unit</div>
-                    <div className="key-data-table-item__content">{unit}</div>
+                    <div className="key-data__title">Unit</div>
+                    <div className="key-data__content">{unit}</div>
                 </div>
             )}
             {unitConversionFactor && (
                 <div
-                    className={cx("key-data-table-item", {
-                        "key-data-table-item--span": isEven(
+                    className={cx("key-data", {
+                        "key-data--span": isEven(
                             count(lastUpdated, nextUpdate, dateRange, unit)
                         ),
                     })}
                 >
-                    <div className="key-data-table-item__title">
+                    <div className="key-data__title">
                         Unit conversion factor
                     </div>
-                    <div className="key-data-table-item__content">
+                    <div className="key-data__content">
                         {unitConversionFactor}
                     </div>
                 </div>
             )}
             {links && (
-                <div className="key-data-table-item key-data-table-item--span">
-                    <div className="key-data-table-item__title">Links</div>
-                    <div className="key-data-table-item__content">{links}</div>
+                <div className="key-data key-data--span">
+                    <div className="key-data__title">Links</div>
+                    <div className="key-data__content">{links}</div>
                 </div>
             )}
         </div>

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -26,7 +26,7 @@ import { faPencilAlt } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { CoreColumn, OwidColumnDef } from "@ourworldindata/core-table"
 import { Modal } from "./Modal"
-import { KeyDataTable } from "../keyDataTable/KeyDataTable"
+import { SourcesKeyDataTable } from "./SourcesKeyDataTable"
 
 // keep in sync with variables in SourcesModal.scss
 const MAX_WIDTH = 832
@@ -287,7 +287,7 @@ export class Source extends React.Component<{
                 {this.def.descriptionShort && (
                     <p>{this.def.descriptionShort}</p>
                 )}
-                <KeyDataTable
+                <SourcesKeyDataTable
                     attribution={this.attributions}
                     owidProcessingLevel={this.def.owidProcessingLevel}
                     dateRange={this.def.timespan}