From a982f24f3ed9132c53c295fd1f470ae9cb1d312f Mon Sep 17 00:00:00 2001
From: martintomas <martintomas.it@gmail.com>
Date: Mon, 20 Nov 2023 12:18:29 +0100
Subject: [PATCH] feat: Show box with ASCOR country details

---
 app/assets/stylesheets/tpi/pages/ascor.scss   | 51 ++++++++++++++++++-
 app/views/tpi/ascor/_country_details.html.erb | 29 +++++++++++
 app/views/tpi/ascor/show.html.erb             |  2 +
 spec/system/public/tpi/ascor_spec.rb          | 14 +++++
 4 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 app/views/tpi/ascor/_country_details.html.erb

diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
index 533f99bf1..964369d1a 100644
--- a/app/assets/stylesheets/tpi/pages/ascor.scss
+++ b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -252,7 +252,7 @@ $see-more-width-tablet: 130px;
   }
 
   .country-assessment {
-    margin-top: 60px;
+    margin-top: 30px;
     margin-bottom: 30px;
 
     &__pillar {
@@ -604,4 +604,53 @@ $see-more-width-tablet: 130px;
       }
     }
   }
+
+  .summary-box {
+    outline: solid 1px $grey-lighter-medium;
+    background-color: transparentize($ascor-background-color, 0.96);
+    margin-top: 1.5rem;
+    padding: 40px;
+    height: 100%;
+
+    h3 {
+      font-size: 16px;
+      line-height: 20px;
+    }
+
+    small {
+      font-size: 12px;
+      color: $grey-dark;
+    }
+
+    @include until($desktop) {
+      padding: 1.5rem 0.75rem;
+
+      .mq-level {
+        font-size: 1.5rem;
+      }
+    }
+
+    @include until($desktop) {
+      .columns {
+        display: table;
+
+        .column {
+          display: inline-flex;
+          width: 50%;
+        }
+      }
+    }
+
+    @include desktop {
+      .columns {
+        justify-content: space-evenly;
+      }
+
+      .column {
+        flex-basis: unset;
+        flex-grow: unset;
+        flex-shrink: unset;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/app/views/tpi/ascor/_country_details.html.erb b/app/views/tpi/ascor/_country_details.html.erb
new file mode 100644
index 000000000..35acb59b4
--- /dev/null
+++ b/app/views/tpi/ascor/_country_details.html.erb
@@ -0,0 +1,29 @@
+<section class="container summary-box">
+  <div class="columns">
+    <div class="column">
+      <%= render 'tpi/shared/property', highlight: false, name: 'ISO' do %>
+        <%= country.iso %>
+      <% end %>
+    </div>
+    <div class="column">
+      <%= render 'tpi/shared/property', highlight: false, name: 'Region' do %>
+        <%= country.region %>
+      <% end %>
+    </div>
+    <div class="column">
+      <%= render 'tpi/shared/property', highlight: false, name: 'World Bank lending group' do %>
+        <%= country.wb_lending_group %>
+      <% end %>
+    </div>
+    <div class="column">
+      <%= render 'tpi/shared/property', highlight: false, name: 'International Monetary Fund fiscal monitor category' do %>
+        <%= country.fiscal_monitor_category %>
+      <% end %>
+    </div>
+    <div class="column">
+      <%= render 'tpi/shared/property', highlight: false, name: 'Type of Party to the United Nations Framework Convention on Climate Change' do %>
+        <%= country.type_of_party %>
+      <% end %>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/app/views/tpi/ascor/show.html.erb b/app/views/tpi/ascor/show.html.erb
index ba0bd8141..698e72ded 100644
--- a/app/views/tpi/ascor/show.html.erb
+++ b/app/views/tpi/ascor/show.html.erb
@@ -33,6 +33,8 @@
     </div>
   </div>
 
+  <%= render 'country_details', country: @country %>
+
   <% if @assessment.present? %>
     <section class="container country-assessment" id="assessment">
       <%= render 'assessment', assessment: @assessment %>
diff --git a/spec/system/public/tpi/ascor_spec.rb b/spec/system/public/tpi/ascor_spec.rb
index fe8255f62..353dc4402 100644
--- a/spec/system/public/tpi/ascor_spec.rb
+++ b/spec/system/public/tpi/ascor_spec.rb
@@ -38,6 +38,20 @@
       visit '/ascor/japan'
     end
 
+    it 'shows country specific information' do
+      expect(page).to have_text('Japan')
+      expect(page).to have_text('ISO')
+      expect(page).to have_text('JPN')
+      expect(page).to have_text('Region')
+      expect(page).to have_text('Asia')
+      expect(page).to have_text('World Bank lending group')
+      expect(page).to have_text('High-income economies')
+      expect(page).to have_text('International Monetary Fund fiscal monitor category')
+      expect(page).to have_text('Advanced economies')
+      expect(page).to have_text('Type of Party to the United Nations Framework Convention on Climate Change')
+      expect(page).to have_text('Annex I')
+    end
+
     it 'shows assessment pillars' do
       ASCOR::AssessmentIndicator.pillar.order(:id).each do |pillar|
         expect(page).to have_text(pillar.text.upcase)