✨ all-charts block code review enhancements

owid · Feb 4, 2025 · 26ea232 · 26ea232
1 parent 36da2f2
commit 26ea232
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 29 deletions.
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
@@ -414,7 +414,8 @@ ${dataInsights
                     homepageMetadata: get(post, "homepageMetadata", {}),
                     latestWorkLinks: get(post, "latestWorkLinks", []),
                     linkedChartViews: get(post, "linkedChartViews", {}),
-                    tags: get(post, "tags", []) ?? [],
+                    // lodash doesn't use fallback when value is null
+                    tags: post.tags ?? [],
                 }}
             >
                 <AtomArticleBlocks blocks={post.content.body} />

diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
@@ -94,7 +94,8 @@ export function OwidGdoc({
                 homepageMetadata: get(props, "homepageMetadata", {}),
                 latestWorkLinks: get(props, "latestWorkLinks", []),
                 linkedChartViews: get(props, "linkedChartViews", {}),
-                tags: get(props, "tags", []) ?? [],
+                // lodash doesn't use fallback when value is null
+                tags: props.tags ?? [],
             }}
         >
             <DocumentContext.Provider value={{ isPreviewing }}>

diff --git a/site/gdocs/components/AllCharts.scss b/site/gdocs/components/AllCharts.scss
@@ -2,10 +2,6 @@
     h1.h1-semibold {
         margin: 0;
         flex: 1 1 0%;
-        .deep-link {
-            // Any value smaller than -16 causes the h1 to wrap in Firefox
-            margin-left: -16px;
-        }
     }
 
     display: flex;
@@ -14,20 +10,8 @@
     align-items: center;
     margin-bottom: 40px;
 
-    .owid-button {
-        line-height: 40px;
-        text-align: center;
-        padding: 0 24px;
-        height: 40px;
-        flex-shrink: 0;
+    .owid-btn {
         align-self: start;
-        background-color: $vermillion;
-        svg {
-            margin-left: 8px;
-        }
-        &:hover {
-            background-color: $accent-vermillion;
-        }
         @include sm-only {
             order: 3;
             margin-top: 24px;

diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
@@ -10,9 +10,8 @@ import {
 } from "@ourworldindata/utils"
 import { AttachmentsContext } from "../AttachmentsContext.js"
 import { RelatedCharts } from "../../blocks/RelatedCharts.js"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
 import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
+import { Button } from "@ourworldindata/components"
 
 type AllChartsProps = EnrichedBlockAllCharts & {
     className?: string
@@ -70,15 +69,11 @@ export function AllCharts(props: AllChartsProps) {
                     href={`#${ALL_CHARTS_ID}`}
                 />
             </h1>
-            <a
-                className="owid-button"
+            <Button
+                theme="solid-vermillion"
+                text="See all charts on this topic"
                 href={`${urljoin(BAKED_BASE_URL, `/data`, firstTagDataCatalogQueryString)}`}
-            >
-                <span className="body-3-medium">
-                    See all charts on this topic
-                    <FontAwesomeIcon icon={faArrowRight} />
-                </span>
-            </a>
+            />
             <RelatedCharts
                 showKeyChartsOnly={true}
                 charts={sortedRelatedCharts}