From 38bb57733c6b50ba6cfca5ac565debbc1f58ec19 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Tue, 4 Feb 2025 17:03:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20extract=20section=20class=20name?=
 =?UTF-8?q?s=20into=20constants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/captionedChart/CaptionedChart.tsx           | 3 ++-
 .../@ourworldindata/grapher/src/core/GrapherConstants.ts    | 5 +++++
 packages/@ourworldindata/grapher/src/footer/Footer.tsx      | 3 ++-
 packages/@ourworldindata/grapher/src/header/Header.tsx      | 6 +++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index 251e344923..6e32b62e77 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -21,6 +21,7 @@ import {
     STATIC_EXPORT_DETAIL_SPACING,
     GRAPHER_FRAME_PADDING_VERTICAL,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
+    GRAPHER_CHART_AREA_CLASS,
 } from "../core/GrapherConstants"
 import { MapChartManager } from "../mapCharts/MapChartConstants"
 import { ChartManager } from "../chart/ChartManager"
@@ -595,7 +596,7 @@ export class StaticCaptionedChart extends CaptionedChart {
                     targetY={paddedBounds.y}
                 />
                 <g
-                    id={makeIdForHumanConsumption("chart-area")}
+                    id={makeIdForHumanConsumption(GRAPHER_CHART_AREA_CLASS)}
                     style={{ pointerEvents: "none" }}
                 >
                     {/*
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 05a465a25d..786aec3860 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -14,6 +14,11 @@ export const GRAPHER_TIMELINE_CLASS = "timeline-component"
 export const GRAPHER_SIDE_PANEL_CLASS = "side-panel"
 export const GRAPHER_SETTINGS_CLASS = "settings-menu-contents"
 
+// The Figma plugin uses these class names to identify sections of the chart
+export const GRAPHER_CHART_AREA_CLASS = "chart-area"
+export const GRAPHER_HEADER_CLASS = "header"
+export const GRAPHER_FOOTER_CLASS = "footer"
+
 export const DEFAULT_GRAPHER_ENTITY_TYPE = "country or region"
 export const DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL = "countries and regions"
 
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
index 18bf72ae8d..f36beebaf6 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -18,6 +18,7 @@ import { FooterManager } from "./FooterManager"
 import { ActionButtons } from "../controls/ActionButtons"
 import {
     BASE_FONT_SIZE,
+    GRAPHER_FOOTER_CLASS,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
 } from "../core/GrapherConstants"
 import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
@@ -731,7 +732,7 @@ export class StaticFooter extends Footer<StaticFooterProps> {
 
         return (
             <g
-                id={makeIdForHumanConsumption("footer")}
+                id={makeIdForHumanConsumption(GRAPHER_FOOTER_CLASS)}
                 className="SourcesFooter"
                 style={{ fill: this.textColor }}
             >
diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
index cc6661ef6d..ad67eeabf5 100644
--- a/packages/@ourworldindata/grapher/src/header/Header.tsx
+++ b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -16,6 +16,7 @@ import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
+    GRAPHER_HEADER_CLASS,
 } from "../core/GrapherConstants"
 import { GRAPHER_DARK_TEXT, GRAY_100, GRAY_80 } from "../color/ColorConstants"
 
@@ -307,7 +308,10 @@ export class StaticHeader extends Header<StaticHeaderProps> {
         const { targetX: x, targetY: y } = this.props
         const { title, logo, subtitle, manager, maxWidth } = this
         return (
-            <g id={makeIdForHumanConsumption("header")} className="HeaderView">
+            <g
+                id={makeIdForHumanConsumption(GRAPHER_HEADER_CLASS)}
+                className="HeaderView"
+            >
                 {logo &&
                     logo.height > 0 &&
                     logo.renderSVG(x + maxWidth - logo.width, y)}