Merge pull request #1701 from ClimateWatch-Vizzuality/2025-ndc-tracke…

…r-feedback-s-4 (2.5) Add 'Explore NDC Content' button to 2025 tracker chart section
ClimateWatch-Vizzuality · Oct 10, 2024 · 831d1f1 · 831d1f1
2 parents b0a6964 + fbaf063
commit 831d1f1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/...s/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx b/...s/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx
@@ -14,6 +14,7 @@ import {
 } from 'recharts';
 import { Switch } from 'cw-components';
 import { Link } from 'react-router-dom';
+import Button from 'components/button';
 import ButtonGroup from 'components/button-group';
 import { generateLinkToDataExplorer } from 'utils/data-explorer';
 import ModalMetadata from 'components/modal-metadata';
@@ -246,6 +247,14 @@ const Ndc2025TrackerChartComponent = props => {
                 }
               ]}
             />
+            <Button
+              className={styles.exploreNdcContentButton}
+              variant="primary"
+              href="/ndcs-explore"
+              // TODO: Analytics? Category, etc
+            >
+              Explore NDC Content
+            </Button>
           </div>
           <p>
             Track which countries have submitted a new NDC. You can compare

diff --git a/...dcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss b/...dcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss
@@ -10,13 +10,14 @@
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 34px;
-    gap: 8px;
+    gap: 20px;
   }
 
   h2 {
     font-size: $font-size-large;
     color: $theme-color;
     font-weight: $font-weight;
+    flex: 1;
   }
 }
 
@@ -34,14 +35,17 @@
   }
 }
 
+.exploreNdcContentButton {
+  width: auto;
+}
+
 .cards {
   display: grid;
   // For use when displaying extra indicator cards
   // grid-template-columns: 160px repeat(4, 1fr);
   // column-gap: 20px;
   grid-template-columns: 160px repeat(3, 1fr);
   column-gap: 32px;
-
   margin-block: 45px 30px;
   row-gap: 6px;
 
@@ -66,10 +70,10 @@
 
     &:nth-child(2),
     &:nth-child(3) {
-    // For use when displaying enhanced card
-    // &:nth-child(4),
-    // For use when displaying extra indicator cards
-    // &:nth-child(5) {
+      // For use when displaying enhanced card
+      // &:nth-child(4),
+      // For use when displaying extra indicator cards
+      // &:nth-child(5) {
       @media #{$tablet-portrait} {
         font-size: $font-size-large;
       }