From ce3da15d5cedb0599950a601ccddb500fd6eb8a2 Mon Sep 17 00:00:00 2001
From: martintomas <martintomas.it@gmail.com>
Date: Mon, 27 Nov 2023 11:02:49 +0100
Subject: [PATCH] refactoring: Remove pillar show/hide areas option

---
 app/assets/stylesheets/tpi/pages/ascor.scss   |  4 ---
 .../components/tpi/AscorQuestionLegend.js     | 26 ++-----------------
 app/views/tpi/ascor/_assessment.html.erb      |  1 -
 3 files changed, 2 insertions(+), 29 deletions(-)

diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
index 53d9f862d..d3f8bd093 100644
--- a/app/assets/stylesheets/tpi/pages/ascor.scss
+++ b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -296,10 +296,6 @@ $see-more-width-tablet: 130px;
       }
     }
 
-    &__areas {
-      display: none;
-    }
-
     &__area {
       outline: solid 1px $grey-lighter-medium;
       padding: 15px 20px 30px 20px;
diff --git a/app/javascript/components/tpi/AscorQuestionLegend.js b/app/javascript/components/tpi/AscorQuestionLegend.js
index 792cd0568..08687e74c 100644
--- a/app/javascript/components/tpi/AscorQuestionLegend.js
+++ b/app/javascript/components/tpi/AscorQuestionLegend.js
@@ -1,9 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import cx from 'classnames';
+import React, { useEffect } from 'react';
 
 const AscorQuestionLegend = () => {
-  const [isVisible, setVisible] = useState(false);
-
   const isCheckedArea = () => {
     let anyChecked = false;
 
@@ -22,16 +19,6 @@ 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
@@ -43,15 +30,6 @@ const AscorQuestionLegend = () => {
         eventListeners.push([input, listener]);
       });
 
-    document
-      .querySelectorAll(
-        '.country-assessment > input.toggle.pillar'
-      )
-      .forEach((input) => {
-        const listener = input.addEventListener('click', isCheckedPillar);
-        eventListeners.push([input, listener]);
-      });
-
     return () => {
       eventListeners.forEach(([input, listener]) => {
         input.removeEventListener('click', listener);
@@ -60,7 +38,7 @@ const AscorQuestionLegend = () => {
   });
 
   return (
-    <div className={cx('banking-question-legend', { 'banking-question-legend--active': isVisible })}>
+    <div className="banking-question-legend banking-question-legend--active">
       <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
index a78353827..fd78cddc1 100644
--- a/app/views/tpi/ascor/_assessment.html.erb
+++ b/app/views/tpi/ascor/_assessment.html.erb
@@ -10,7 +10,6 @@
     <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>
 
     <div class="country-assessment__areas" for="pillar-<%= dom_id(pillar) %>">