🔨 extract section class names into constants

owid · Feb 4, 2025 · ee3d517 · ee3d517
1 parent 427005e
commit ee3d517
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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
@@ -19,6 +19,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"
@@ -732,7 +733,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
@@ -17,6 +17,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"
 
@@ -308,7 +309,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)}