feat: Possibility to show/hide ASCOR pillar assessments

Vizzuality · Nov 20, 2023 · 0c0f510 · 0c0f510
1 parent da64870
commit 0c0f510
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 29 deletions.
diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -264,6 +264,11 @@ $see-more-width-tablet: 130px;
         background-color: transparentize($ascor-background-color, 0.96);
       }
 
+      &__header {
+        position: relative;
+        padding-bottom: 10px;
+      }
+
       &__title {
         color: $dark;
         font-family: $family-sans-serif;
@@ -285,6 +290,10 @@ $see-more-width-tablet: 130px;
       }
     }
 
+    &__areas {
+      display: none;
+    }
+
     &__area {
       outline: solid 1px $grey-lighter-medium;
       padding: 15px 20px 30px 20px;
@@ -493,7 +502,26 @@ $see-more-width-tablet: 130px;
       }
     }
 
-    input.toggle:checked + .country-assessment__area-block {
+    input.toggle.pillar:checked + .country-assessment__pillar {
+      .country-assessment__areas {
+        display: block;
+      }
+
+      .country-assessment__more.pillar {
+        top: 25px;
+        bottom: -1px;
+
+        &:before {
+          content: 'See less';
+        }
+
+        &::after {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+
+    input.toggle.area:checked + .country-assessment__area-block {
       .country-assessment__indicators {
         display: block;
       }

diff --git a/app/javascript/components/tpi/AscorQuestionLegend.js b/app/javascript/components/tpi/AscorQuestionLegend.js
@@ -1,15 +1,18 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
+import cx from 'classnames';
 
 const AscorQuestionLegend = () => {
-  const isChecked = () => {
+  const [isVisible, setVisible] = useState(false);
+
+  const isCheckedArea = () => {
     let anyChecked = false;
 
     document
       .querySelectorAll('.country-assessment > .country-assessment__pillar')
       .forEach((section) => {
         let areaChecked = false;
 
-        section.querySelectorAll('input.toggle').forEach((input) => {
+        section.querySelectorAll('.country-assessment__areas > input.toggle').forEach((input) => {
           areaChecked = areaChecked || input.checked;
           anyChecked = anyChecked || input.checked;
         });
@@ -19,14 +22,33 @@ const AscorQuestionLegend = () => {
       });
   };
 
+  const isCheckedPillar = () => {
+    let anyChecked = false;
+
+    document.querySelectorAll('.country-assessment > input.toggle.pillar').forEach((input) => {
+      anyChecked = anyChecked || input.checked;
+    });
+
+    setVisible(anyChecked);
+  };
+
   useEffect(() => {
     const eventListeners = [];
     document
       .querySelectorAll(
-        '.country-assessment > .country-assessment__pillar > input.toggle'
+        '.country-assessment .country-assessment__areas > input.toggle'
+      )
+      .forEach((input) => {
+        const listener = input.addEventListener('click', isCheckedArea);
+        eventListeners.push([input, listener]);
+      });
+
+    document
+      .querySelectorAll(
+        '.country-assessment > input.toggle.pillar'
       )
       .forEach((input) => {
-        const listener = input.addEventListener('click', isChecked);
+        const listener = input.addEventListener('click', isCheckedPillar);
         eventListeners.push([input, listener]);
       });
 
@@ -38,7 +60,7 @@ const AscorQuestionLegend = () => {
   });
 
   return (
-    <div className="country-question-legend country-question-legend--active">
+    <div className={cx('banking-question-legend', { 'banking-question-legend--active': isVisible })}>
       <div className="banking-question-legend__header">Legend</div>
       <div className="country-question-legend__content">
         <div className="country-question-legend-answer country-question-legend-answer--no">

diff --git a/app/views/tpi/ascor/_assessment.html.erb b/app/views/tpi/ascor/_assessment.html.erb
@@ -5,32 +5,38 @@
 
 <%= react_component('AscorQuestionLegend') %>
 <% pillars.each_with_index do |pillar, i| %>
+  <input id="pillar-<%= dom_id(pillar) %>" type="checkbox" class="toggle pillar" />
   <div class="country-assessment__pillar">
-    <div class="country-assessment__pillar__subtitle"><%= "Pillar #{i + 1}" %></div>
-    <h2 class="country-assessment__pillar__title"><%= pillar.text %></h2>
+    <div class="country-assessment__pillar__header">
+      <div class="country-assessment__pillar__subtitle"><%= "Pillar #{i + 1}" %></div>
+      <h2 class="country-assessment__pillar__title"><%= pillar.text %></h2>
+      <label class="country-assessment__more pillar" for="pillar-<%= dom_id(pillar) %>"></label>
+    </div>
 
-    <% ascor_sub_indicators_for(pillar, areas).each do |area| %>
-      <input id="<%= dom_id(area) %>" type="checkbox" class="toggle" />
-      <div class="country-assessment__area-block">
-        <div class="country-assessment__area">
-          <div class="country-assessment__area__title country-assessment__icon country-assessment__icon--<%= ascor_icon_for(area, @assessment) %>">
-            <div><%= "Area #{area.code}" %></div>
-            <div><strong><%= area.text %></strong></div>
+    <div class="country-assessment__areas" for="pillar-<%= dom_id(pillar) %>">
+      <% ascor_sub_indicators_for(pillar, areas).each do |area| %>
+        <input id="area-<%= dom_id(area) %>" type="checkbox" class="toggle area" />
+        <div class="country-assessment__area-block">
+          <div class="country-assessment__area">
+            <div class="country-assessment__area__title country-assessment__icon country-assessment__icon--<%= ascor_icon_for(area, @assessment) %>">
+              <div><%= "Area #{area.code}" %></div>
+              <div><strong><%= area.text %></strong></div>
+            </div>
+            <label class="country-assessment__more" for="area-<%= dom_id(area) %>"></label>
           </div>
-          <label class="country-assessment__more" for="<%= dom_id(area) %>"></label>
-        </div>
 
-        <div class="country-assessment__indicators" for="<%= dom_id(area) %>">
-          <% if ascor_sub_indicators_for(area, indicators).present? %>
-            <%= render 'tpi/ascor/assessment_indicators', area: area, indicators: ascor_sub_indicators_for(area, indicators), metrics: metrics %>
-            <% if area.code == 'EP.2' %>
-              <%= render 'tpi/ascor/benchmarks_chart' %>
+          <div class="country-assessment__indicators" for="area-<%= dom_id(area) %>">
+            <% if ascor_sub_indicators_for(area, indicators).present? %>
+              <%= render 'tpi/ascor/assessment_indicators', area: area, indicators: ascor_sub_indicators_for(area, indicators), metrics: metrics %>
+              <% if area.code == 'EP.2' %>
+                <%= render 'tpi/ascor/benchmarks_chart' %>
+              <% end %>
+            <% else %>
+              <%= render 'tpi/ascor/assessment_metrics', metrics: ascor_sub_indicators_for(area, metrics) %>
             <% end %>
-          <% else %>
-            <%= render 'tpi/ascor/assessment_metrics', metrics: ascor_sub_indicators_for(area, metrics) %>
-          <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
   </div>
 <% end %>
diff --git a/spec/system/public/tpi/ascor_spec.rb b/spec/system/public/tpi/ascor_spec.rb
@@ -38,7 +38,14 @@
       visit '/ascor/japan'
     end
 
+    it 'shows assessment pillars' do
+      ASCOR::AssessmentIndicator.pillar.order(:id).each do |pillar|
+        expect(page).to have_text(pillar.text.upcase)
+      end
+    end
+
     it 'shows assessment results' do
+      find_all('label.country-assessment__more.pillar').each(&:click)
       areas = ASCOR::AssessmentIndicator.area.order(:id)
       ASCOR::AssessmentIndicator.pillar.order(:id).each do |pillar|
         within_ascor_pillar pillar.text do
@@ -50,7 +57,8 @@
     end
 
     it 'generates EP.1.a.i and EP.1.a.ii metrics' do
-      find("label[for='ascor_assessment_indicator_#{ASCOR::AssessmentIndicator.find_by(code: 'EP.1').id}']").click
+      find_all('label.country-assessment__more.pillar').each(&:click)
+      find("label[for='area-ascor_assessment_indicator_#{ASCOR::AssessmentIndicator.find_by(code: 'EP.1').id}']").click
       expect(page).to have_text("i. What is the country's most recent emissions level?")
       expect(page).to have_text("ii. What is the country's most recent emissions trend?")
     end