playbook_ui 13.13.0 → 13.14.0.pre.alpha.play1101betaicons1798

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

@@ -1,31 +1,59 @@
 <%= content_tag(:div,
-    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") %>
+  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.one_decimal_rating,
+                                        size: "xs",
+                                        classname: "pb_star_rating_number_#{size}",
+                                        dark: dark,
+                                        padding_right: "xxs" }) %>
+      <% when "md" %>
+      <%= pb_rails("body", props: { text: object.one_decimal_rating,
+                                    dark: dark,
+                                    color: "light",
+                                    classname: "pb_star_rating_number_#{size}",
+                                    padding_right: "xxs" }) %>
+      <% when "lg" %>
+      <%= pb_rails("title", props: { text: object.one_decimal_rating,
+                                      size: 2,
+                                      dark: dark,
+                                      color: "light",
+                                      bold: false,
+                                      classname: "pb_star_rating_number_#{size}",
+                                      padding_right: "sm" }) %>
     <% end %>
-
-    <%= 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 %>
+  <%= 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: "xs",
+                                          dark: dark,
+                                          padding_left: "xxs" }) %>
+        <% when "md" %>
+        <%= pb_rails("body", props: { text: "#{object.rating} of #{object.denominator}",
+                                      dark: dark,
+                                      color: "light",
+                                      padding_left: "xxs" }) %>
+        <% when "lg" %>
+        <%= pb_rails("title", props: { text: "#{object.rating} of #{object.denominator}",
+                                        size: 2,
+                                        color: "light",
+                                        bold: false,
+                                        dark: dark }) %>
       <% end %>
-
     <% end %>
+  <% end %>
 <% end %>

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

@@ -3,18 +3,98 @@
 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 one_decimal_rating
+        rating.to_f.round(1)
+      end
+
       def star_count
-        rating.floor
+        rating.round > denominator_style ? denominator_style : rating.round
+      end
+
+      def denominator_style
+        layout_option == "onestar" ? 1 : denominator
+      end
+
+      def empty_stars
+        (denominator_style - star_count).negative? ? 0 : denominator_style - star_count
+      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
       end
 
-      def star_full
-        (rating.to_f % 1).zero?
+      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
       end
 
       def classname

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

@@ -1,24 +1,22 @@
-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).toHaveClass("pb_star_rating_kit");
+    const kit = screen.getByTestId(testId)
+    expect(kit.className).toBe("pb_star_rating_kit")
 
-  });
+  })
 
   test('should render aria-label', () => {
     render(
@@ -27,45 +25,47 @@ describe("Star Rating Kit", () => {
           data={{ testid: testId }}
           rating={2}
       />
-    );
+    )
 
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
-  });
+  })
 
-  test("Displays two highlighted stars", () => {
+  test("Displays correct denominator", () => {
     render(
       <StarRating
           data={{ testid: testId }}
+          denominator={4}
           rating={2}
+          size="xs"
       />
-    );
-
+    )
 
-    const kit = screen.getByTestId(testId);
-    const highlight = kit.querySelector(".pb_star_rating_highlight");
-    const stars = highlight.querySelectorAll(".far.fa-star");
-    const count = stars.length;
+    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(2);
-  });
+    expect(count).toBe(4)
+  })
 
-  test("Displays three highlighted stars and a half star", () => {
+  test("Uses correct size", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          rating={3.5}
+          layoutOption="number"
+          rating={2}
+          size="lg"
       />
-    );
+    )
 
-    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;
+    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
 
-    expect(starCount).toBe(3);
-    expect(halfStarCount).toBe(1);
-  });
-});
+    expect(title.className).toBe("pb_title_kit_size_2_light_thin pr_sm pb_star_rating_number_lg")
+    expect(count).toBe(5)
+  })
+})

data/app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M9.86015 0.4371C9.73527 0.187329 9.4855 0 9.17328 0C8.89229 0 8.64252 0.187329 8.51763 0.4371L6.36335 4.83932L1.58647 5.55742C1.30547 5.58864 1.08692 5.80719 0.99326 6.05696C0.899595 6.33795 0.962038 6.61895 1.18059 6.8375L4.64617 10.2719L3.80319 15.1112C3.77197 15.3922 3.89685 15.7044 4.11541 15.8605C4.36518 16.0166 4.64617 16.0478 4.89594 15.9229L9.17328 13.6126L13.4506 15.9229C13.7004 16.0478 14.0126 16.0166 14.2624 15.8605C14.4809 15.7044 14.6058 15.3922 14.5434 15.1112L13.7316 10.2719L17.1972 6.8375C17.4157 6.61895 17.4782 6.33795 17.3845 6.05696C17.2909 5.80719 17.0723 5.58864 16.7913 5.55742L12.0144 4.83932L9.86015 0.4371Z" fill="#0056CF"/>
+</svg>

data/app/pb_kits/playbook/pb_star_rating/stars/star_outline.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.91323 5.33377L6.17269 5.29477L6.28801 5.0591L8.44116 0.659187C8.49971 0.543364 8.59517 0.5 8.64884 0.5C8.74499 0.5 8.83506 0.555009 8.88775 0.659235L11.0409 5.0591L11.1562 5.29477L11.4157 5.33377L16.1925 6.05186L16.2021 6.0533L16.2117 6.05436C16.2359 6.05706 16.2671 6.06847 16.3024 6.09973C16.3374 6.13062 16.3686 6.17476 16.3886 6.22412C16.4186 6.32162 16.401 6.40181 16.3198 6.48332C16.3196 6.48353 16.3194 6.48374 16.3192 6.48395L12.8552 9.91671L12.6712 10.0991L12.7141 10.3546L13.5258 15.1939L13.528 15.2068L13.5308 15.2196C13.5488 15.3004 13.5074 15.402 13.4567 15.4462C13.3391 15.5132 13.2227 15.5096 13.1546 15.4781L8.88646 13.1726L8.64884 13.0443L8.41121 13.1726L4.14274 15.4782C4.07877 15.5083 3.99031 15.5147 3.87267 15.4466C3.82302 15.4033 3.76655 15.2914 3.77463 15.1781L4.61431 10.3577L4.65911 10.1005L4.47368 9.91671L1.0097 6.48394C1.00947 6.48372 1.00925 6.4835 1.00903 6.48327C0.927878 6.40178 0.91031 6.3216 0.94026 6.22412C0.960274 6.17476 0.99154 6.13062 1.02646 6.09973C1.0618 6.06847 1.09296 6.05706 1.11724 6.05436L1.12682 6.0533L1.13635 6.05186L5.91323 5.33377Z" stroke="#C1CDD6"/>
+</svg>

data/app/pb_kits/playbook/pb_star_rating/stars/subtle_dark_star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="" fillRule="evenodd" clipRule="evenodd" d="M9.86015 0.4371C9.73527 0.187329 9.4855 0 9.17328 0C8.89229 0 8.64252 0.187329 8.51763 0.4371L6.36335 4.83932L1.58647 5.55742C1.30547 5.58864 1.08692 5.80719 0.99326 6.05696C0.899595 6.33795 0.962038 6.61895 1.18059 6.8375L4.64617 10.2719L3.80319 15.1112C3.77197 15.3922 3.89685 15.7044 4.11541 15.8605C4.36518 16.0166 4.64617 16.0478 4.89594 15.9229L9.17328 13.6126L13.4506 15.9229C13.7004 16.0478 14.0126 16.0166 14.2624 15.8605C14.4809 15.7044 14.6058 15.3922 14.5434 15.1112L13.7316 10.2719L17.1972 6.8375C17.4157 6.61895 17.4782 6.33795 17.3845 6.05696C17.2909 5.80719 17.0723 5.58864 16.7913 5.55742L12.0144 4.83932L9.86015 0.4371Z" fill="#F9BB00"/>
+</svg>

data/app/pb_kits/playbook/pb_star_rating/stars/subtle_star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M9.86015 0.4371C9.73527 0.187329 9.4855 0 9.17328 0C8.89229 0 8.64252 0.187329 8.51763 0.4371L6.36335 4.83932L1.58647 5.55742C1.30547 5.58864 1.08692 5.80719 0.99326 6.05696C0.899595 6.33795 0.962038 6.61895 1.18059 6.8375L4.64617 10.2719L3.80319 15.1112C3.77197 15.3922 3.89685 15.7044 4.11541 15.8605C4.36518 16.0166 4.64617 16.0478 4.89594 15.9229L9.17328 13.6126L13.4506 15.9229C13.7004 16.0478 14.0126 16.0166 14.2624 15.8605C14.4809 15.7044 14.6058 15.3922 14.5434 15.1112L13.7316 10.2719L17.1972 6.8375C17.4157 6.61895 17.4782 6.33795 17.3845 6.05696C17.2909 5.80719 17.0723 5.58864 16.7913 5.55742L12.0144 4.83932L9.86015 0.4371Z" fill="#F9BB00"/>
+</svg>

data/app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M9.86015 0.4371C9.73527 0.187329 9.4855 0 9.17328 0C8.89229 0 8.64252 0.187329 8.51763 0.4371L6.36335 4.83932L1.58647 5.55742C1.30547 5.58864 1.08692 5.80719 0.99326 6.05696C0.899595 6.33795 0.962038 6.61895 1.18059 6.8375L4.64617 10.2719L3.80319 15.1112C3.77197 15.3922 3.89685 15.7044 4.11541 15.8605C4.36518 16.0166 4.64617 16.0478 4.89594 15.9229L9.17328 13.6126L13.4506 15.9229C13.7004 16.0478 14.0126 16.0166 14.2624 15.8605C14.4809 15.7044 14.6058 15.3922 14.5434 15.1112L13.7316 10.2719L17.1972 6.8375C17.4157 6.61895 17.4782 6.33795 17.3845 6.05696C17.2909 5.80719 17.0723 5.58864 16.7913 5.55742L12.0144 4.83932L9.86015 0.4371Z" />
+</svg>

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -22,7 +22,7 @@ type StatChangeProps = {
   change?: 'increase' | 'decrease' | 'neutral',
   className?: string,
   icon?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   value?: string | number,
 }

data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx

@@ -7,7 +7,7 @@ import Title from '../pb_title/_title'
 
 type StatValueProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   unit?: string,
   value: string | number,

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -14,7 +14,7 @@ type TableProps = {
   data?: { [key: string]: string },
   dataTable: boolean,
   disableHover: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   responsive: "collapse" | "scroll" | "none",
   singleLine: boolean,

data/app/pb_kits/playbook/pb_table/_table_row.tsx

@@ -8,7 +8,7 @@ type TableRowPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   sideHighlightColor: string,
 }

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -17,7 +17,7 @@ type TextInputProps = {
   dark?: boolean,
   disabled?: boolean,
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   name: string,

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -22,7 +22,7 @@ type TextareaProps = {
   data?: {[key: string]: string},
   disabled?: boolean,
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   object?: string,

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -16,7 +16,7 @@ type TimeProps = {
   date: Date;
   dark?: boolean;
   id?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   showIcon?: boolean;
   size?: "md" | "sm";
   showTimezone?: boolean;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx

@@ -12,7 +12,7 @@ import Icon from '../pb_icon/_icon'
 type TimeRangeInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   data?: { [key: string]: string },
   alignment?: "left" | "center" | "vertical",

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -14,7 +14,7 @@ type TimeStackedProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   date?: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   time?: number | Date,
   timeZone?: string,

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -10,7 +10,7 @@ type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
   date?: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -10,7 +10,7 @@ type TimelineProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   orientation?: string,
   showDate?: boolean,

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -16,7 +16,7 @@ type TimestampProps = {
   text: string,
   timestamp: Date | string,
   timezone: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   showDate?: boolean,
   showUser?: boolean,

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -31,10 +31,6 @@
     @include pb_title_thin;
   }
 
-  &[class*=_truncate] {
-    @include title_truncate;
-  }
-
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");
@@ -46,7 +42,6 @@
           @else if $title_size_value == 3 { @include pb_title_3; }
           @else if $title_size_value == 4 { @include pb_title_4; }
           @include title_colors;
-          @include title_truncate;
           @if $title_size_value != 4 { @include pb_title_bold; }
         }
       }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -13,12 +13,11 @@ type TitleProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
-  truncate?: null | "1" | "2" | "3" | "4" | "5",
   variant?: null | "link",
 } & GlobalProps
 
@@ -36,7 +35,6 @@ const Title = (props: TitleProps): React.ReactElement => {
     bold = true,
     tag = 'h3',
     text,
-    truncate = null,
     variant = null,
   } = props
 
@@ -44,7 +42,6 @@ const Title = (props: TitleProps): React.ReactElement => {
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const getBold = bold ? '' : 'thin'
-  const isTruncated = truncate ? `truncate-${truncate}` : null
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
 
   const buildResponsiveSizeCss = () => {
@@ -60,7 +57,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   }
 
   const classes = classnames(
-    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold, isTruncated),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
     buildResponsiveSizeCss(),
     className

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -16,22 +16,3 @@ $pb_title_colors: (
     }
   }
 }
-
-$pb_title_truncate: (
-  truncate-1: 1,
-  truncate-2: 2,
-  truncate-3: 3,
-  truncate-4: 4,
-  truncate-5: 5
-);
-
-@mixin title_truncate {
-  @each $name, $number in $pb_title_truncate {
-    &[class*=_#{$name}] {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: $number;
-      -webkit-box-orient: vertical;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,15 +16,12 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
-      prop :truncate, type: Playbook::Props::Enum,
-                      values: [nil, "1", "2", "3", "4", "5"],
-                      default: nil
 
       def classname
         if is_size_responsive
-          generate_classname("pb_title_kit", variant, color, is_bold, is_truncated) + generate_responsive_size_classname
+          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold, is_truncated)
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
         end
       end
 
@@ -32,10 +29,6 @@ module Playbook
         bold ? nil : "thin"
       end
 
-      def is_truncated
-        truncate ? "truncate-#{truncate}" : nil
-      end
-
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx

@@ -16,7 +16,7 @@ type TitleCountProps = {
   count?: number,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   title?: string,
   size?: "lg" | "sm",

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx

@@ -13,7 +13,7 @@ type TitleDetailProps = {
   className?: string,
   data?: { [key: string]: string },
   detail: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   title: string,
 } & GlobalProps

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -17,7 +17,7 @@ type Props = {
   children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -23,7 +23,7 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   interaction?: boolean,
   placement?: Placement,

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -25,7 +25,7 @@ type TreemapChartProps = {
   drillable: boolean;
   grouped: boolean;
   height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id: number | string;
   title?: string;
   tooltipHtml: string;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -34,7 +34,7 @@ type TypeaheadProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   error?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
   loadOptions?: string | Noop,

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -16,7 +16,7 @@ type UserProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
   orientation?: "horizontal" | "vertical",