Display harvey balls with white backgrounds and display no-zone harvey balls

app/assets/stylesheets/dashboard.scss

@@ -13,7 +13,7 @@
   font-family: 'Cabin', sans-serif;
 }
 
-.harvey-ball__legend {
+.harvey-ball-legend {
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -23,12 +23,11 @@
 }
 
 .subcategory-card {
-  border: 1px solid #CECECE;
+  border: 1px solid $gray-2;
   background-color: $gray-3;
   min-width: 95%;
   margin: auto;
   padding: 8px;
-  border: 1px solid #CECECE;
   font-size: 14px;
 }
 
@@ -70,3 +69,32 @@
 .zone-header {
   @extend .sub-header-4;
 }
+
+.harvey-ball {
+  stroke: $black;
+}
+
+.harvey-ball__ideal {
+  fill: $purple;
+}
+
+.harvey-ball__approval {
+  fill: $purple;
+}
+
+.harvey-ball__growth {
+  fill: $gold;
+}
+
+.harvey-ball__watch {
+  fill: $gold;
+}
+
+.harvey-ball__warning {
+  fill: $white;
+}
+
+.harvey-ball__no_zone {
+  stroke: $gray-2;
+  fill: $gray-3;
+}

app/presenters/subcategory_card_presenter.rb

@@ -5,18 +5,14 @@ class SubcategoryCardPresenter
     @score = score
   end
 
-  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",
+      warning: "full-circle",
-      no_zone: "empty-circle"
+      no_zone: "full-circle"
     }
     icons_by_zone_type[zone.type]
   end

app/views/dashboard/_subcategory_card.html.erb

@@ -1,8 +1,6 @@
 <div class="subcategory-card__benchmark-item">
   <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-    <% if presenter.display_icon? %>
+    <use class="harvey-ball harvey-ball__<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
-      <use class="fill-<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
-    <% end %>
   </svg>
 
   <div class="subcategory-card__name"><%= subcategory.name %></div>

app/views/dashboard/index.html.erb

@@ -3,11 +3,8 @@
 <% end %>
 
 <svg class="d-none">
-  <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">
+    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
     <path d="
                       M 12 0
                       A 12 12 0 0 1 24 12
@@ -15,10 +12,11 @@
                       L 12 0"
           stroke="none"
       />
-    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+    <circle cx="12" cy="12" r="11.5" fill="none" />
   </symbol>
 
   <symbol viewBox="0 0 24 24" id="half-circle">
+    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
     <path d="
                       M 12 0
                       A 12 12 0 1 1 12 24
@@ -26,10 +24,11 @@
                       L 12 0"
           stroke="none"
       />
-    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+    <circle cx="12" cy="12" r="11.5" fill="none" />
   </symbol>
 
   <symbol viewBox="0 0 24 24" id="three-quarter-circle">
+    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
     <path d="
                       M 12 0
                       A 12 12 0 1 1 0 12
@@ -37,11 +36,11 @@
                       L 12 0"
           stroke="none"
       />
-    <circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
+    <circle cx="12" cy="12" r="11.5" fill="none" />
   </symbol>
 
   <symbol viewBox="0 0 24 24" id="full-circle">
-    <circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
+    <circle cx="12" cy="12" r="11.5" />
   </symbol>
 </svg>
 
@@ -49,22 +48,22 @@
   <div class="d-flex justify-content-between align-items-center">
     <h2 class="sub-header-2">School Quality Framework Indicators</h2>
 
-    <div class="harvey-ball__legend">
+    <div class="harvey-ball-legend">
       <div class="font-size-14">Warning</div>
       <svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="fill-warning" xlink:href="#empty-circle"></use>
+        <use class="harvey-ball harvey-ball__warning" xlink:href="#full-circle"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="fill-watch" xlink:href="#one-quarter-circle"></use>
+        <use class="harvey-ball harvey-ball__watch" xlink:href="#one-quarter-circle"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="fill-growth" xlink:href="#half-circle"></use>
+        <use class="harvey-ball harvey-ball__growth" xlink:href="#half-circle"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="fill-approval" xlink:href="#three-quarter-circle"></use>
+        <use class="harvey-ball harvey-ball__approval" xlink:href="#three-quarter-circle"></use>
       </svg>
       <svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="fill-ideal" xlink:href="#full-circle"></use>
+        <use class="harvey-ball harvey-ball__ideal" xlink:href="#full-circle"></use>
       </svg>
       <div class="font-size-14">Ideal</div>
     </div>

spec/presenters/subcategory_card_presenter_spec.rb

@@ -15,12 +15,8 @@ describe SubcategoryCardPresenter do
   context 'when the given score is in the Warning zone for the given scale' do
     let(:score) { 1 }
 
-    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"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
     end
 
     it 'returns the color class of the zone' do
@@ -31,10 +27,6 @@ describe SubcategoryCardPresenter do
   context 'when the given score is in the Watch zone for the given scale' do
     let(:score) { 2 }
 
-    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
@@ -47,10 +39,6 @@ describe SubcategoryCardPresenter do
   context 'when the given score is in the Growth zone for the given scale' do
     let(:score) { 3 }
 
-    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
@@ -63,10 +51,6 @@ describe SubcategoryCardPresenter do
   context 'when the given score is in the Approval zone for the given scale' do
     let(:score) { 4 }
 
-    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
@@ -79,10 +63,6 @@ describe SubcategoryCardPresenter do
   context 'when the given score is in the Ideal zone for the given scale' do
     let(:score) { 5 }
 
-    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
@@ -95,8 +75,8 @@ describe SubcategoryCardPresenter do
   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
+    it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.display_icon?).to be_falsey
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
     end
   end
 end