[Tech Debt] Update header/select to use BEM and shared vars

18F · Oct 16, 2024 · aa11b7b · aa11b7b
1 parent 3dd1148
commit aa11b7b
Show file tree

Hide file tree

Showing 38 changed files with 591 additions and 597 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,4 @@
-<header id="analytics-header" class="grid-row">
+<header id="analytics-header" class="grid-row padding-3">
   <h1>
     <img
       src="{{ site.baseurl }}/images/analytics.svg"

diff --git a/js/components/agency_select/AgencySelect.js b/js/components/agency_select/AgencySelect.js
@@ -44,7 +44,10 @@ function AgencySelect({ mainAgencyName, agencies, pathSuffix = "" }) {
 
   return (
     <>
-      <label className="usa-label" htmlFor="analytics-agency-select">
+      <label
+        className="usa-label text--centered margin-y-1"
+        htmlFor="analytics-agency-select"
+      >
         Select an agency to display results
       </label>
       <select

diff --git a/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap b/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`AgencySelect when all params are provided and subagencies do not exist renders 1`] = `
 [
   <label
-    className="usa-label"
+    className="usa-label text--centered margin-y-1"
     htmlFor="analytics-agency-select"
   >
     Select an agency to display results
@@ -34,7 +34,7 @@ exports[`AgencySelect when all params are provided and subagencies do not exist
 exports[`AgencySelect when all params are provided and subagencies exist renders 1`] = `
 [
   <label
-    className="usa-label"
+    className="usa-label text--centered margin-y-1"
     htmlFor="analytics-agency-select"
   >
     Select an agency to display results
@@ -79,7 +79,7 @@ exports[`AgencySelect when all params are provided and subagencies exist renders
 exports[`AgencySelect when optional params are not provided renders 1`] = `
 [
   <label
-    className="usa-label"
+    className="usa-label text--centered margin-y-1"
     htmlFor="analytics-agency-select"
   >
     Select an agency to display results

diff --git a/js/components/chart/ConsolidatedBarChart.js b/js/components/chart/ConsolidatedBarChart.js
@@ -41,7 +41,7 @@ function ConsolidatedBarChart({ dataUrl, chartDataKey, maxItems }) {
 
   return (
     <figure id={`chart_${chartDataKey}`} ref={ref}>
-      <div className="data chart__bar-chart"></div>
+      <div className="data chart__bar-chart margin-top-4"></div>
     </figure>
   );
 }