feat: Show box with ASCOR country details

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;
+      }
+    }
+  }
 }

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>

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 %>

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)