playbook_ui 13.13.0.pre.alpha.play900startratingasinput1657 → 13.13.0

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,53 +1,31 @@
 <%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname) do %>
-  <% if layout_option == "number" %>
-    <% case object.size %>
-      <% when "xs", "sm" %>
-      <%= pb_rails("caption", props: { text: object.rating,
-                                        size: "sm",
-                                        classname: "pb_star_rating_number_#{size}",
-                                        dark: dark,
-                                        padding_right: "xxs" }) %>
-      <% when "md" %>
-      <%= pb_rails("body", props: { text: object.rating,
-                                    dark: dark,
-                                    classname: "pb_star_rating_number_#{size}",
-                                    padding_right: "xxs" }) %>
-      <% when "lg" %>
-      <%= pb_rails("title", props: { text: object.rating,
-                                      size: 2,
-                                      dark: dark,
-                                      classname: "pb_star_rating_number_#{size}",
-                                      padding_right: "sm" }) %>
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%# Rating value %>
+    <% if !object.hide_rating %>
+      <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
     <% end %>
-  <% end %>
-  <%= pb_rails("flex", props: { }) do %>
-    <% object.star_count.times do %>
-        <%= pb_rails("icon", props: { classname: "#{star_color} pb_star_#{size}" , custom_icon: Playbook::Engine.root.join(star_svg_path) } ) %>
-    <% end %>
-    <% object.empty_stars.times do %>
-        <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size}", custom_icon: Playbook::Engine.root.join(background_star_path) } ) %>
-    <% end %>
-  <% end %>
-  <% if layout_option == "onestar" %>
-    <%= content_tag(:div, class: "pb_star_rating_number_#{size}") do %>
-      <% case object.size %>
-        <% when "xs", "sm" %>
-        <%= pb_rails("caption", props: { text: "#{object.rating} of #{object.denominator}",
-                                          size: "sm",
-                                          dark: dark,
-                                          padding_left: "xxs" }) %>
-        <% when "md" %>
-        <%= pb_rails("body", props: { text: "#{object.rating} of #{object.denominator}",
-                                      dark: dark,
-                                      padding_left: "xxs" }) %>
-        <% when "lg" %>
-        <%= pb_rails("title", props: { text: "#{object.rating} of #{object.denominator}",
-                                        size: 2,
-                                        dark: dark }) %>
+
+    <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
+      <%# Gold stars generated by rating value %>
+      <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
+        <% object.star_count.times do %>
+          <%= pb_rails("icon", props: { icon: "star" }) %>
+        <% end %>
+        <% unless object.star_full %>
+          <%= pb_rails("icon", props: { icon: "star-half" }) %>
+        <% end %>
+      <% end %>
+
+      <%# Grey background stars as base %>
+      <%= content_tag(:div, class: "pb_star_rating_base") do %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
       <% end %>
+
     <% end %>
-  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -3,94 +3,18 @@
 module Playbook
   module PbStarRating
     class StarRating < Playbook::KitBase
+      prop :hide_rating, type: Playbook::Props::Boolean,
+                         default: false
+
       prop :rating, type: Playbook::Props::Numeric,
                     default: 0
 
-      prop :denominator, type: Playbook::Props::Numeric,
-                         default: 5
-
-      prop :layout_option, type: Playbook::Props::Enum,
-                           values: %w[default onestar number],
-                           default: "default"
-
-      prop :color_option, type: Playbook::Props::Enum,
-                          values: %w[yellow primary subtle],
-                          default: "yellow"
-
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg],
-                  default: "sm"
-
-      prop :background_type, type: Playbook::Props::Enum,
-                             values: %w[fill outline],
-                             default: "fill"
-
       def star_count
-        rating.floor > denominator_style ? denominator_style : rating.floor
-      end
-
-      def denominator_style
-        layout_option == "onestar" ? 1 : denominator
-      end
-
-      def empty_stars
-        (denominator_style - rating.floor).negative? ? 0 : denominator_style - rating.floor
-      end
-
-      def star_color
-        case color_option
-        when "yellow"
-          "yellow_star"
-        when "primary"
-          "primary_star"
-        when "subtle"
-          dark ? "suble_star_dark" : "suble_star_light"
-        end
-      end
-
-      def background_star_color
-        if background_type === "outline"
-          dark ? "outline_empty_star_dark" : "outline_empty_star_light"
-        else
-          dark ? "empty_star_dark" : "empty_star_light"
-        end
-      end
-
-      def svg_size
-        sizes = { "xs": "pb_star_xs",
-                  "sm": "pb_star_sm",
-                  "md": "pb_star_md",
-                  "lg": "pb_star_lg" }
-        sizes[size.to_sym]
-      end
-
-      def svg_class
-        "pb_star_#{size}"
-      end
-
-      def background_star_path
-        if background_type === "outline"
-          "app/pb_kits/playbook/pb_star_rating/stars/star_outline.svg"
-        else
-          "app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg"
-        end
+        rating.floor
       end
 
-      def star_svg_path
-        case color_option
-        when "yellow"
-          "app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg"
-        when "primary"
-          "app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg"
-        when "subtle"
-          if dark == true
-            "app/pb_kits/playbook/pb_star_rating/stars/subtle_dark_star.svg"
-          else
-            "app/pb_kits/playbook/pb_star_rating/stars/subtle_star.svg"
-          end
-        else
-          "app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg"
-        end
+      def star_full
+        (rating.to_f % 1).zero?
       end
 
       def classname

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -1,22 +1,24 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
 
-import StarRating from "./_star_rating"
+import StarRating from "./_star_rating";
 
-const testId = "star-rating-kit"
+const testId = "star-rating-kit";
 
 describe("Star Rating Kit", () => {
   test("Expects to have correct classname", () => {
     render(
       <StarRating
           data={{ testid: testId }}
+          rating={2}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    expect(kit.className).toBe("pb_star_rating_kit")
 
-  })
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_star_rating_kit");
+
+  });
 
   test('should render aria-label', () => {
     render(
@@ -25,47 +27,45 @@ describe("Star Rating Kit", () => {
           data={{ testid: testId }}
           rating={2}
       />
-    )
+    );
 
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
-  })
+  });
 
-  test("Displays correct denominator", () => {
+  test("Displays two highlighted stars", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          denominator={4}
           rating={2}
-          size="xs"
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".star_flex_area")
-    const stars = highlight.querySelectorAll(".pb_star_xs")
-    const count = stars.length
 
-    expect(count).toBe(4)
-  })
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const count = stars.length;
 
-  test("Uses correct size", () => {
+    expect(count).toBe(2);
+  });
+
+  test("Displays three highlighted stars and a half star", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          layoutOption="number"
-          rating={2}
-          size="lg"
+          rating={3.5}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".star_flex_area")
-    const title = kit.querySelector(".pb_star_rating_number_lg")
-    const stars = highlight.querySelectorAll(".pb_star_lg")
-    const count = stars.length
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const halfStars = highlight.querySelectorAll(".far.fa-star-half");
+    const starCount = stars.length;
+    const halfStarCount = halfStars.length;
 
-    expect(title.className).toBe("pb_title_kit_size_2 pr_sm pb_star_rating_number_lg")
-    expect(count).toBe(5)
-  })
-})
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});