Harvey balls depicting how a sub-category is performing quickly [179843984]

app/assets/stylesheets/dashboard.scss

@@ -60,17 +60,14 @@
 }
 
 .subcategory-card__circle {
-  min-width: 26px;
-  min-height: 26px;
+  min-width: 24px;
+  min-height: 24px;
   margin-right: 4px;
-  border-radius: 50%;
   height: 26px;
   width: 26px;
   display: flex;
   justify-content: center;
   align-items: center;
-  @extend .font-cabin;
-  @extend .weight-400;
 }
 
 .subcategory-card__benchmark-label {

app/presenters/subcategory_card_presenter.rb

@@ -5,13 +5,24 @@ class SubcategoryCardPresenter
     @score = score
   end
 
-  def abbreviation
-    abbreviations = { approval: "A", ideal: "I", growth: "G", watch: "Wa", warning: "Wr", no_zone: "N" }
-    abbreviations[zone.type]
+  def display_icon?
+    zone.type != :no_zone
+  end
+
+  def harvey_ball_icon
+    icons_by_zone_type = {
+      ideal: "full-circle",
+      approval: "three-quarter-circle",
+      growth: "half-circle",
+      watch: "one-quarter-circle",
+      warning: "empty-circle",
+      no_zone: "empty-circle"
+    }
+    icons_by_zone_type[zone.type]
   end
 
   def color
-    "bg-#{zone.type}"
+    zone.type.to_s
   end
 
   private

app/views/dashboard/_quality_framework_indicators.erb

@@ -1,3 +1,47 @@
+<svg>
+  <symbol viewBox="0 0 24 24" id="empty-circle">
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="one-quarter-circle">
+    <path d="
+                      M 12 0
+                      A 12 12 0 0 1 24 12
+                      L 12 12
+                      L 12 0"
+          stroke="none"
+      />
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="half-circle">
+    <path d="
+                      M 12 0
+                      A 12 12 0 1 1 12 24
+                      L 12 12
+                      L 12 0"
+          stroke="none"
+      />
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="three-quarter-circle">
+    <path d="
+                      M 12 0
+                      A 12 12 0 1 1 0 12
+                      L 12 12
+                      L 12 0"
+          stroke="none"
+      />
+    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="full-circle">
+    <circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
+  </symbol>
+</svg>
+
+
 <div class="school-quality-frameworks card mt-5 p-4 border-radius-8">
   <h2 class="sub-header-2">School Quality Framework Indicators</h2>
 
@@ -18,7 +62,12 @@
               <% category_presenter.subcategories.each do |subcategory | %>
                 <% presenter = subcategory.subcategory_card_presenter %>
                 <div class="subcategory-card__benchmark-item">
-                  <div class="subcategory-card__circle <%= presenter.color %>"><%= presenter.abbreviation%></div>
+                  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+                    <% if presenter.display_icon? %>
+                      <use class="fill-<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
+                    <% end %>
+                  </svg>
+
                   <div class="subcategory-card__name"><%= subcategory.name %></div>
                 </div>
               <% end %>

spec/presenters/subcategory_card_presenter_spec.rb

@@ -14,56 +14,89 @@ describe SubcategoryCardPresenter do
 
   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"
+
+    it 'returns a boolean indicating that the icon should be displayed' do
+      expect(subcategory_card_presenter.display_icon?).to be_truthy
+    end
+
+    it 'returns the icon that represents the zone' do
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "empty-circle"
     end
 
     it 'returns the color class of the zone' do
-      expect(subcategory_card_presenter.color).to eq "bg-warning"
+      expect(subcategory_card_presenter.color).to eq "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"
+
+    it 'returns a boolean indicating that the icon should be displayed' do
+      expect(subcategory_card_presenter.display_icon?).to be_truthy
+    end
+
+    it 'returns the icon that represents the zone' do
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "one-quarter-circle"
     end
 
     it 'returns the color class of the zone' do
-      expect(subcategory_card_presenter.color).to eq "bg-watch"
+      expect(subcategory_card_presenter.color).to eq "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"
+
+    it 'returns a boolean indicating that the icon should be displayed' do
+      expect(subcategory_card_presenter.display_icon?).to be_truthy
+    end
+
+    it 'returns the icon that represents the zone' do
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "half-circle"
     end
 
     it 'returns the color class of the zone' do
-      expect(subcategory_card_presenter.color).to eq "bg-growth"
+      expect(subcategory_card_presenter.color).to eq "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"
+
+    it 'returns a boolean indicating that the icon should be displayed' do
+      expect(subcategory_card_presenter.display_icon?).to be_truthy
+    end
+
+    it 'returns the icon that represents the zone' do
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "three-quarter-circle"
     end
 
     it 'returns the color class of the zone' do
-      expect(subcategory_card_presenter.color).to eq "bg-approval"
+      expect(subcategory_card_presenter.color).to eq "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"
+
+    it 'returns a boolean indicating that the icon should be displayed' do
+      expect(subcategory_card_presenter.display_icon?).to be_truthy
+    end
+
+    it 'returns the icon that represents the zone' do
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
     end
 
     it 'returns the color class of the zone' do
-      expect(subcategory_card_presenter.color).to eq "bg-ideal"
+      expect(subcategory_card_presenter.color).to eq "ideal"
+    end
+  end
+
+  context 'when the given score is invalid for the given scale' do
+    let(:score) { 0 }
+
+    it 'returns a boolean indicating that the icon should be displayed' do
+      expect(subcategory_card_presenter.display_icon?).to be_falsey
     end
   end
 end

spec/presenters/subcategory_presenter_spec.rb

@@ -33,10 +33,6 @@ describe SubcategoryPresenter do
     expect(subcategory_presenter.gauge_presenter.title).to eq 'Growth'
   end
 
-  it 'returns a measure presenter for each measure in the subcategory' do
-    # expect(category_presenter.subcategories.map(&:name)).to eq ['A subcategory', 'Another subcategory']
-  end
-
   def create_survey_item_responses_for_different_years_and_schools(survey_item)
     create(:survey_item_response, survey_item: survey_item, school: school, likert_score: 1)
     create(:survey_item_response, survey_item: survey_item, academic_year: academic_year, likert_score: 1)