Style Category cards

app/assets/stylesheets/buttons.scss

@@ -8,5 +8,4 @@
   color: $white;
   padding: 8px 16px;
   border: 0px;
-  width: 70%;
 }

app/assets/stylesheets/clear-margin-padding.scss

@@ -1,5 +1,3 @@
-// reset.css
-
 html,
 body,
 div,
@@ -82,23 +80,7 @@ mark,
 audio,
 video {
   border: 0;
-  font: inherit;
-  font-size: 100%;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
 }
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}

app/assets/stylesheets/dashboard.scss

@@ -12,17 +12,16 @@
 .category-card {
   flex-basis: 20%;
   align-items: center;
-  padding: 0 10px;
+  justify-content: space-between;
+  height: 600px;
 }
 
 .category-card__title {
   flex-basis: 20%;
-  text-align: center;
 }
 
 .category-card__description {
   flex-basis: 20%;
-  text-align: center;
 }
 
 .subcategory-card {
@@ -30,6 +29,7 @@
   border: 1px solid #CECECE;
   background-color: $gray-4;
   width: 90%;
+  margin: auto;
   padding: 8px;
   border: 1px solid #CECECE;
   font-size: 14px;
@@ -38,19 +38,20 @@
 .subcategory-card__benchmark-icon {
   fill: Red;
 }
-.subcategory-card__name {
-  flex-basis: 20%;
-}
+
 .subcategory-card__benchmark-item {
   align-items: center;
 }
+
 .subcategory-card__circle-container {
-  flex-basis: 30%;
+  flex: 0 0 50px;
+  padding: 0;
 }
 
 .subcategory-card__benchmark-label {
   font-size: 30px;
 }
+
 .school-quality-frameworks {
   background-color: $white;
 }

app/assets/stylesheets/sqm_application.scss

@@ -1,6 +1,7 @@
 @import "bootstrap-overrides";
 @import "bootstrap";
-@import "reset";
+@import "clear-margin-padding";
+@import "fonts";
 @import "colors";
 @import "fonts";
 @import "borders";

app/presenters/subcategory_card_presenter.rb

@@ -6,7 +6,7 @@ class SubcategoryCardPresenter
   end
 
   def abbreviation
-    abbreviations = { approval: "A", ideal: "I", growth: "G", watch: "Wa", warning: "Wr" , no_zone: "N"}
+    abbreviations = { approval: "A", ideal: "I", growth: "G", watch: "Wa", warning: "Wr", no_zone: "N" }
     abbreviations[zone.type]
   end
 
@@ -20,21 +20,7 @@ class SubcategoryCardPresenter
   end
 
   def color
-    case zone.type
-    when :warning
-      return "fill-warning"
-    when :watch
-      return "fill-watch"
-    when :growth
-      return "fill-growth"
-    when :approval
-      return "fill-approval"
-    when :ideal
-      return "fill-ideal"
-    else
-      return "fill-warning"
-    end
-
+    "fill-#{zone.type}"
   end
 
   private

app/presenters/subcategory_presenter.rb

@@ -42,3 +42,4 @@ class SubcategoryPresenter
     @measures ||= @subcategory.measures
   end
 end
+

app/views/dashboard/_quality_framework_indicators.erb

@@ -3,26 +3,26 @@
 
   <div class="row">
     <% category_presenters.each do |category_presenter| %>
-      <section class="category-card column">
-        <div class="category-card__title"><h3><%= category_presenter.name %></h3></div>
-        <p class="category-card__description">This category measures the relevant abilities of a school's teachers and the degree to which they are receiving the support they need to grow as professionals. </p>
-        <div class="subcategory-card border-radius-8 fdc">
-          <div class="subcategory-card__benchmark-list" >
+      <section class="category-card column d-flex flex-column">
+        <div class="category-card__title text-center"><h3><%= category_presenter.name %></h3></div>
+        <p class="category-card__description text-center"><%= category_presenter.description %></p>
+        <div class="subcategory-card border-radius-8">
+          <div class="subcategory-card__benchmark-list">
             <% category_presenter.subcategories.each do |subcategory | %>
               <% presenter = subcategory.subcategory_card_presenter %>
               <div class="subcategory-card__benchmark-item row">
-                <div class="subcategory-card__circle-container " style="width:50px; height:50px;">
-                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <div class="subcategory-card__circle-container">
+                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:50px; height:50px;">
                     <circle class="subcategory-card__benchmark-icon <%= presenter.color %>" cx="50" cy="50" r="35"/>
                     <text class="subcategory-card__benchmark-label" x="<%= presenter.offset %>" y= "55"><%= presenter.abbreviation %></text>
                   </svg>
                 </div>
-                  <p class="subcategory-card__name"><%= subcategory.name %></p>
+                  <div class="subcategory-card__name col"><%= subcategory.name %></div>
                 </div>
             <% end %>
           </div>
         </div>
-        <button class="view-details mt-3">View Details</button>
+        <div class="text-center"><button class="view-details mt-3">View Details</button></div>
       </section>
     <% end %>
 

spec/presenters/category_presenter_spec.rb

@@ -5,16 +5,13 @@ describe CategoryPresenter do
     subcategory1 = Subcategory.new(name: 'A subcategory')
     subcategory2 = Subcategory.new(name: 'Another subcategory')
 
-    category = SqmCategory.new(name: 'Some Category', description: 'Some category description', subcategories: [subcategory1, subcategory2])
+    category = SqmCategory.new(name: 'Some Category', subcategories: [subcategory1, subcategory2], description: 'A description for some Category')
     return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
   end
 
-  it 'returns the name of the category' do
+  it 'returns the name and description of the category' do
     expect(category_presenter.name).to eq 'Some Category'
-  end
-
-  it 'returns the description of the category' do
-    expect(category_presenter.description).to eq 'Some category description'
+    expect(category_presenter.description).to eq 'A description for some Category'
   end
 
   it 'maps subcategories to subcategory presenters' do

spec/presenters/subcategory_card_presenter_spec.rb

@@ -0,0 +1,69 @@
+require 'rails_helper'
+
+describe SubcategoryCardPresenter do
+  let(:scale) do
+    Scale.new(
+      watch_low_benchmark: 1.5,
+      growth_low_benchmark: 2.5,
+      approval_low_benchmark: 3.5,
+      ideal_low_benchmark: 4.5,
+    )
+  end
+
+  let(:subcategory_card_presenter) { SubcategoryCardPresenter.new(scale: scale, score: score)}
+
+  context 'when the given score is in the Warning zone for the given scale' do
+    let(:score) { 1 }
+    it 'returns the abbreviation of the zone' do
+      expect(subcategory_card_presenter.abbreviation).to eq "Wr"
+    end
+
+    it 'returns the color class of the zone' do
+      expect(subcategory_card_presenter.color).to eq "fill-warning"
+    end
+  end
+
+  context 'when the given score is in the Watch zone for the given scale' do
+    let(:score) { 2 }
+    it 'returns the abbreviation of the zone' do
+      expect(subcategory_card_presenter.abbreviation).to eq "Wa"
+    end
+
+    it 'returns the color class of the zone' do
+      expect(subcategory_card_presenter.color).to eq "fill-watch"
+    end
+  end
+
+  context 'when the given score is in the Growth zone for the given scale' do
+    let(:score) { 3 }
+    it 'returns the abbreviation of the zone' do
+      expect(subcategory_card_presenter.abbreviation).to eq "G"
+    end
+
+    it 'returns the color class of the zone' do
+      expect(subcategory_card_presenter.color).to eq "fill-growth"
+    end
+  end
+
+  context 'when the given score is in the Approval zone for the given scale' do
+    let(:score) { 4 }
+    it 'returns the abbreviation of the zone' do
+      expect(subcategory_card_presenter.abbreviation).to eq "A"
+    end
+
+    it 'returns the color class of the zone' do
+      expect(subcategory_card_presenter.color).to eq "fill-approval"
+    end
+  end
+
+  context 'when the given score is in the Ideal zone for the given scale' do
+    let(:score) { 5 }
+    it 'returns the abbreviation of the zone' do
+      expect(subcategory_card_presenter.abbreviation).to eq "I"
+    end
+
+    it 'returns the color class of the zone' do
+      expect(subcategory_card_presenter.color).to eq "fill-ideal"
+    end
+  end
+end