Merge pull request #789 from citizensadvice/update-scores-to-render-half-stars

chore/Update scores to render half stars

Author: KPobeeNorris

app/components/csr_table/score_component.html.haml

@@ -1,7 +1,7 @@
 .score
   %p.score__text
     = score_text
-  = render CsrTable::StarsComponent.new(highlight_stars: highlight_stars?, score: score_number) if scored?
+  = render CsrTable::StarsComponent.new(highlight_stars: highlight_stars?, score: score_number, half_stars: half_stars?) if scored?
   - if content?
     %p.score__content
       = content

app/components/csr_table/score_component.rb

@@ -2,12 +2,13 @@
 
 module CsrTable
   class ScoreComponent < ViewComponent::Base
-    def initialize(score:, show_decimal_score: false, decimal_places: 1, highlight_stars: false)
+    def initialize(score:, show_decimal_score: false, decimal_places: 1, highlight_stars: false, half_stars: false)
       super()
       @score = score
       @show_decimal_score = show_decimal_score
       @decimal_places = decimal_places
       @highlight_stars = highlight_stars
+      @half_stars = half_stars
     end
 
     def render?
@@ -24,6 +25,10 @@ def show_decimal_score?
       @show_decimal_score
     end
 
+    def half_stars?
+      @half_stars
+    end
+
     def highlight_stars?
       @highlight_stars
     end

app/components/csr_table/score_summary_component.html.haml

@@ -7,19 +7,19 @@
     %li.score-summary__item
       %p.score-summary__text
         Overall rating
-      = render CsrTable::ScoreComponent.new(score: supplier.overall_rating, show_decimal_score: true, decimal_places: 2, highlight_stars: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.overall_rating, show_decimal_score: true, decimal_places: 2, highlight_stars: true, half_stars: true)
     %li.score-summary__item
       %p.score-summary__text
         Fewer complaints received
-      = render CsrTable::ScoreComponent.new(score: supplier.complaints_rating, show_decimal_score: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.complaints_rating, show_decimal_score: true, half_stars: true)
     %li.score-summary__item
       %p.score-summary__text
         Contact waiting time
-      = render CsrTable::ScoreComponent.new(score: supplier.contact_rating, show_decimal_score: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.contact_rating, show_decimal_score: true, half_stars: true)
     %li.score-summary__item
       %p.score-summary__text
         Billing and metering
-      = render CsrTable::ScoreComponent.new(score: supplier.bill_accuracy_and_metering_rating, show_decimal_score: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.bill_accuracy_and_metering_rating, show_decimal_score: true, half_stars: true)
     %li.score-summary__item
       %p.score-summary__text
         Customer commitments

app/components/csr_table/star/highlighted_half_component.html.haml

@@ -0,0 +1,2 @@
+%svg.star.star--half{ width: "17", height: "14", viewBox: "0 0 17 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }
+  %use{ href:"#highlightedHalfStar" }

app/components/csr_table/star/highlighted_half_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module CsrTable
+  module Star
+    class HighlightedHalfComponent < ViewComponent::Base
+    end
+  end
+end

app/components/csr_table/stars_component.rb

@@ -6,10 +6,11 @@ class StarsComponent < ViewComponent::Base
 
     attr_reader :score
 
-    def initialize(score:, highlight_stars: false)
+    def initialize(score:, highlight_stars: false, half_stars: false)
       super()
       @highlight_stars = highlight_stars
       @score = score
+      @half_stars = half_stars
     end
 
     def star_classes
@@ -25,26 +26,32 @@ def stars
       empty_stars = MAX_SCORE - full_stars - half_stars
 
       full_stars.times { star_list << :full }
-      half_stars.times { star_list << :half }
+      half_stars.times { star_list << half_star_type }
       empty_stars.times { star_list << :empty }
 
       star_list
     end
 
     def half_stars
-      return 0 unless @highlight_stars
+      return 0 unless @half_stars
 
       score_decimal = @score.to_s.split(".").last
 
       score_decimal.to_i < 5 ? 0 : 1
     end
 
+    def half_star_type
+      @highlight_stars ? :highlighted_half : :half
+    end
+
     def render_star(star)
       case star
       when :full
         render CsrTable::Star::FullComponent.new
       when :half
         render CsrTable::Star::HalfComponent.new
+      when :highlighted_half
+        render CsrTable::Star::HighlightedHalfComponent.new
       else
         render CsrTable::Star::EmptyComponent.new
       end

app/components/csr_table/supplier_table_row_component.html.haml

@@ -10,13 +10,13 @@
       = render_overall_score
   %td.supplier-table__complaints
     .cads-table__content
-      = render CsrTable::ScoreComponent.new(score: supplier.complaints_rating, show_decimal_score: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.complaints_rating, show_decimal_score: true, half_stars: true)
   %td.supplier-table__response
     .cads-table__content
-      = render CsrTable::ScoreComponent.new(score: supplier.contact_rating, show_decimal_score: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.contact_rating, show_decimal_score: true, half_stars: true)
   %td.supplier-table__billing
     .cads-table__content
-      = render CsrTable::ScoreComponent.new(score: supplier.bill_accuracy_and_metering_rating, show_decimal_score: true)
+      = render CsrTable::ScoreComponent.new(score: supplier.bill_accuracy_and_metering_rating, show_decimal_score: true, half_stars: true)
   %td.supplier-table__guarantee
     .cads-table__content
       = render CsrTable::ScoreComponent.new(score: supplier.guarantee_rating)

app/components/csr_table/supplier_table_row_component.rb

@@ -29,11 +29,11 @@ def row_classes
     def render_overall_score
       if highlight?
         render CsrTable::ScoreComponent.new(score: supplier.overall_rating, show_decimal_score: true, decimal_places: 2,
-                                            highlight_stars: true)
+                                            highlight_stars: true, half_stars: true)
       else
         render CsrTable::ScoreComponent.new(score: supplier.overall_rating,
                                             show_decimal_score: true, decimal_places: 2,
-                                            highlight_stars: true).with_content(more_details_link)
+                                            highlight_stars: true, half_stars: true).with_content(more_details_link)
       end
     end
 

app/views/layouts/application.html.haml

@@ -23,6 +23,7 @@
   %body{ class: ("cas" if scotland?) }
     = render "shared/google_tag_manager_no_script"
     = render "shared/half_star_svg"
+    = render "shared/highlighted_half_star_svg"
     - unless cookies_preference_page?
       = render CitizensAdviceCookiePreferences::CookieBanner.new
 

app/views/shared/_half_star_svg.html.haml

@@ -3,5 +3,5 @@
     %path{ d: "M8.40002 0L10.1961 5.52786H16.0085L11.3062 8.94427L13.1023 14.4721L8.40002 11.0557L3.69774 14.4721L5.49385 8.94427L0.791572 5.52786H6.60391L8.40002 0Z", fill: "url(#paint0_linear_658_12679)" }
     %defs
       %lineargradient{ id: "paint0_linear_658_12679", x1: "8.15002", y1: "7.00012", x2: "8.65002", y2: "7.00012", gradientUnits: "userSpaceOnUse" }
-        %stop{ offset: "0.507812", "stop-color": "#FFD250" }
-        %stop{ offset: "0.515625", "stop-color": "white" }
+        %stop{ offset: "0.507812", "stop-color": "#004b88" }
+        %stop{ offset: "0.515625", "stop-color": "white" }