From d5865700592bce391d76259962a8f9cbf3b43bb6 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Thu, 9 Nov 2023 07:46:34 +0000
Subject: [PATCH] refactor: move KeyDataTable into modal folder

---
 .../grapher/src/core/grapher.scss             |  2 +-
 .../SourcesKeyDataTable.scss}                 | 12 +--
 .../SourcesKeyDataTable.tsx}                  | 73 ++++++++-----------
 .../grapher/src/modal/SourcesModal.tsx        |  4 +-
 4 files changed, 41 insertions(+), 50 deletions(-)
 rename packages/@ourworldindata/grapher/src/{keyDataTable/KeyDataTable.scss => modal/SourcesKeyDataTable.scss} (80%)
 rename packages/@ourworldindata/grapher/src/{keyDataTable/KeyDataTable.tsx => modal/SourcesKeyDataTable.tsx} (54%)

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index c5a6df63c90..e348f1d2f72 100644
--- 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/packages/@ourworldindata/grapher/src/keyDataTable/KeyDataTable.scss b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
similarity index 80%
rename from packages/@ourworldindata/grapher/src/keyDataTable/KeyDataTable.scss
rename to packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
index 3b70397e53d..43ae8d1020d 100644
--- a/packages/@ourworldindata/grapher/src/keyDataTable/KeyDataTable.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
@@ -1,4 +1,4 @@
-.key-data-table {
+.sources-key-data-table {
     $border: #e7e7e7;
 
     @include label-2-medium;
@@ -15,7 +15,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 
-    .key-data-table-item {
+    .key-data {
         display: flex;
         padding: 16px 24px 16px 0;
 
@@ -23,12 +23,12 @@
             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/packages/@ourworldindata/grapher/src/keyDataTable/KeyDataTable.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.tsx
similarity index 54%
rename from packages/@ourworldindata/grapher/src/keyDataTable/KeyDataTable.tsx
rename to packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.tsx
index a4cfde309e2..f41d385d14c 100644
--- a/packages/@ourworldindata/grapher/src/keyDataTable/KeyDataTable.tsx
+++ b/packages/@ourworldindata/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
index c3195d314e1..0315594b43e 100644
--- 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}