playbook_ui 13.11.0 → 13.11.1.pre.alpha.play900startratingasinput1530

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +3 -1
  3. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb +22 -0
  4. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md +3 -0
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb +40 -0
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md +1 -0
  7. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +2 -0
  8. data/app/pb_kits/playbook/pb_collapsible/index.js +4 -0
  9. data/app/pb_kits/playbook/pb_icon/docs/_icon_border_swift.md +7 -0
  10. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md +7 -0
  11. data/app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md +11 -0
  12. data/app/pb_kits/playbook/pb_icon/docs/_icon_props_swift.md +8 -0
  13. data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate_swift.md +11 -0
  14. data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md +46 -0
  15. data/app/pb_kits/playbook/pb_icon/docs/example.yml +8 -0
  16. data/app/pb_kits/playbook/pb_image/docs/_image_props_swift.md +7 -0
  17. data/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md +47 -0
  18. data/app/pb_kits/playbook/pb_image/docs/_size_image_swift.md +47 -0
  19. data/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md +15 -0
  20. data/app/pb_kits/playbook/pb_image/docs/example.yml +5 -0
  21. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default_swift.md +11 -0
  22. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md +72 -0
  23. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md +41 -0
  24. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md +11 -0
  25. data/app/pb_kits/playbook/pb_label_value/docs/example.yml +6 -0
  26. data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md +57 -0
  27. data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md +12 -0
  28. data/app/pb_kits/playbook/pb_message/docs/example.yml +4 -0
  29. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +61 -49
  30. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +151 -54
  31. data/app/pb_kits/playbook/pb_star_rating/custom-icons.js +356 -0
  32. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +7 -0
  33. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +40 -0
  34. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +11 -1
  35. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +17 -2
  36. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +6 -1
  37. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +22 -5
  38. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +12 -0
  39. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +57 -0
  40. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +23 -0
  41. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +59 -0
  42. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +10 -5
  43. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +6 -0
  44. data/app/pb_kits/playbook/pb_star_rating/star.svg +3 -0
  45. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +56 -15
  46. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +49 -6
  47. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +33 -34
  48. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +4 -4
  49. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +26 -2
  50. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +1 -17
  51. data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -3
  52. data/app/pb_kits/playbook/pb_table/table_header.rb +28 -5
  53. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +25 -9
  54. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -2
  56. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +0 -1
  57. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +0 -1
  58. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +0 -1
  59. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +1 -1
  60. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.html.erb +39 -0
  61. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md +5 -0
  62. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +45 -0
  63. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md +3 -0
  64. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -0
  65. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  66. data/app/pb_kits/playbook/pb_tooltip/index.js +6 -0
  67. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -1
  68. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +34 -0
  69. data/app/pb_kits/playbook/playbook-doc.js +1 -1
  70. data/dist/playbook-rails.js +5 -5
  71. data/lib/playbook/pb_doc_helper.rb +2 -21
  72. data/lib/playbook/version.rb +2 -2
  73. metadata +39 -8
  74. data/app/pb_kits/playbook/pb_dawg/docs/example.yml +0 -9
@@ -1,3 +1,9 @@
1
1
  export { default as StarRatingDefault } from './_star_rating_default.jsx'
2
2
 
3
+ export { default as StarRatingColorOptions } from './_star_rating_color_options.jsx'
4
+
3
5
  export { default as StarRatingHide } from './_star_rating_hide.jsx'
6
+
7
+ export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
8
+
9
+ export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'
@@ -0,0 +1,3 @@
1
+ <svg width="50" height="48" viewBox="0 0 50 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M26.7271 1.3113C26.3525 0.561986 25.6032 0 24.6665 0C23.8235 0 23.0742 0.561986 22.6996 1.3113L16.2367 14.518L1.90607 16.6723C1.06309 16.7659 0.40744 17.4216 0.126447 18.1709C-0.154546 19.0139 0.0327825 19.8568 0.688433 20.5125L11.0852 30.8156L8.55624 45.3335C8.46257 46.1765 8.83723 47.1132 9.49288 47.5815C10.2422 48.0498 11.0852 48.1435 11.8345 47.7688L24.6665 40.8377L37.4985 47.7688C38.2478 48.1435 39.1845 48.0498 39.9338 47.5815C40.5895 47.1132 40.9641 46.1765 40.7768 45.3335L38.3415 30.8156L48.7382 20.5125C49.3939 19.8568 49.5812 19.0139 49.3002 18.1709C49.0192 17.4216 48.3636 16.7659 47.5206 16.6723L33.19 14.518L26.7271 1.3113Z" fill="#0056CF"/>
3
+ </svg>
@@ -3,29 +3,70 @@
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
5
  <%# Rating value %>
6
- <% if !object.hide_rating %>
7
- <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
6
+ <% if layout_option == "number" %>
7
+ <%= content_tag(:div, class: "number_rails_#{size}") do %>
8
+ <% case object.size %>
9
+ <% when "xs", "sm" %>
10
+ <%= pb_rails("caption", props: { text: object.rating,
11
+ size: "sm",
12
+ dark: dark,
13
+ padding_right: "xxs" }) %>
14
+ <% when "md" %>
15
+ <%= pb_rails("body", props: { text: object.rating,
16
+ dark: dark,
17
+ padding_right: "xxs" }) %>
18
+ <% when "lg" %>
19
+ <%= pb_rails("title", props: { text: object.rating,
20
+ size: 2,
21
+ dark: dark,
22
+ padding_right: "sm" }) %>
23
+ <% end %>
24
+ <% end %>
8
25
  <% end %>
9
-
10
26
  <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
11
27
  <%# Gold stars generated by rating value %>
12
28
  <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
13
29
  <% object.star_count.times do %>
14
- <%= pb_rails("icon", props: { icon: "star" }) %>
30
+ <svg width="<%= svg_size %>" height="<%= svg_size %>" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
31
+ <% case object.color_option %>
32
+ <% when "yellow"%>
33
+ <path fill-rule="evenodd" clip-rule="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"/>
34
+ <% when "primary", "outline" %>
35
+ <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"/>
36
+ <% when "subtle"%>
37
+ <path fill="<%= subtle_star_color %>" fill-rule="evenodd" clip-rule="evenodd" d="M8.90904 0.4371C8.78416 0.187329 8.53438 0 8.22217 0C7.94118 0 7.69141 0.187329 7.56652 0.4371L5.41224 4.83932L0.635357 5.55742C0.354364 5.58864 0.135813 5.80719 0.042149 6.05696C-0.0515154 6.33795 0.0109275 6.61895 0.229478 6.8375L3.69506 10.2719L2.85208 15.1112C2.82086 15.3922 2.94574 15.7044 3.16429 15.8605C3.41407 16.0166 3.69506 16.0478 3.94483 15.9229L8.22217 13.6126L12.4995 15.9229C12.7493 16.0478 13.0615 16.0166 13.3113 15.8605C13.5298 15.7044 13.6547 15.3922 13.5923 15.1112L12.7805 10.2719L16.2461 6.8375C16.4646 6.61895 16.5271 6.33795 16.4334 6.05696C16.3397 5.80719 16.1212 5.58864 15.8402 5.55742L11.0633 4.83932L8.90904 0.4371Z" />
38
+ <% end %>
39
+ </svg>
15
40
  <% end %>
16
- <% unless object.star_full %>
17
- <%= pb_rails("icon", props: { icon: "star-half" }) %>
41
+ <% object.empty_stars.times do %>
42
+ <svg width="<%= svg_size %>" height="<%= svg_size %>" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
43
+ <% if object.color_option == "outline" %>
44
+ <path stroke="<%= outline_star_color %>" 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.48394L12.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.910311 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" />
45
+ <% else %>
46
+ <path fill="<%= empty_star_color %>" fill-rule="evenodd" clip-rule="evenodd" d="M9.31126 0.4371C9.18638 0.187329 8.93661 0 8.62439 0C8.3434 0 8.09363 0.187329 7.96874 0.4371L5.81446 4.83932L1.03758 5.55742C0.756585 5.58864 0.538035 5.80719 0.444371 6.05696C0.350706 6.33795 0.413149 6.61895 0.631699 6.8375L4.09728 10.2719L3.2543 15.1112C3.22308 15.3922 3.34797 15.7044 3.56652 15.8605C3.81629 16.0166 4.09728 16.0478 4.34705 15.9229L8.62439 13.6126L12.9017 15.9229C13.1515 16.0478 13.4637 16.0166 13.7135 15.8605C13.932 15.7044 14.0569 15.3922 13.9945 15.1112L13.1827 10.2719L16.6483 6.8375C16.8669 6.61895 16.9293 6.33795 16.8356 6.05696C16.742 5.80719 16.5234 5.58864 16.2424 5.55742L11.4655 4.83932L9.31126 0.4371Z" />
47
+ <% end %>
48
+ </svg>
18
49
  <% end %>
19
50
  <% end %>
20
-
21
- <%# Grey background stars as base %>
22
- <%= content_tag(:div, class: "pb_star_rating_base") do %>
23
- <%= pb_rails("icon", props: { icon: "star" }) %>
24
- <%= pb_rails("icon", props: { icon: "star" }) %>
25
- <%= pb_rails("icon", props: { icon: "star" }) %>
26
- <%= pb_rails("icon", props: { icon: "star" }) %>
27
- <%= pb_rails("icon", props: { icon: "star" }) %>
51
+ <% end %>
52
+ <% if layout_option == "onestar" %>
53
+ <%= content_tag(:div, class: "number_rails_#{size}") do %>
54
+ <% case object.size %>
55
+ <% when "xs", "sm" %>
56
+ <%= pb_rails("caption", props: { text: "#{object.rating} of #{object.denominator}",
57
+ size: "xs",
58
+ dark: dark,
59
+ padding_left: "xxs" }) %>
60
+ <% when "md" %>
61
+ <%= pb_rails("body", props: { text: "#{object.rating} of #{object.denominator}",
62
+ dark: dark,
63
+ padding_left: "xxs" }) %>
64
+ <% when "lg" %>
65
+ <%= pb_rails("title", props: { text: "#{object.rating} of #{object.denominator}",
66
+ size: 2,
67
+ dark: dark,
68
+ padding_left: "sm" }) %>
69
+ <% end %>
28
70
  <% end %>
29
-
30
71
  <% end %>
31
72
  <% end %>
@@ -3,18 +3,61 @@
3
3
  module Playbook
4
4
  module PbStarRating
5
5
  class StarRating < Playbook::KitBase
6
- prop :hide_rating, type: Playbook::Props::Boolean,
7
- default: false
8
-
9
6
  prop :rating, type: Playbook::Props::Numeric,
10
7
  default: 0
11
8
 
9
+ prop :denominator, type: Playbook::Props::Numeric,
10
+ default: 5
11
+
12
+ prop :layout_option, type: Playbook::Props::Enum,
13
+ values: %w[default onestar number],
14
+ default: "default"
15
+
16
+ prop :color_option, type: Playbook::Props::Enum,
17
+ values: %w[yellow primary subtle outline],
18
+ default: "yellow"
19
+
20
+ prop :size, type: Playbook::Props::Enum,
21
+ values: %w[xs sm md lg],
22
+ default: "sm"
23
+
12
24
  def star_count
13
- rating.floor
25
+ rating.floor > denominator_style ? denominator_style : rating.floor
26
+ end
27
+
28
+ def denominator_style
29
+ layout_option == "onestar" ? 1 : denominator
30
+ end
31
+
32
+ def empty_stars
33
+ (denominator_style - rating.floor).negative? ? 0 : denominator_style - rating.floor
34
+ end
35
+
36
+ def empty_star_color
37
+ dark ? "$border_dark" : "#E4E8F0"
38
+ end
39
+
40
+ def outline_star_color
41
+ dark ? "$text_dk_lighter" : "#C1CDD6"
42
+ end
43
+
44
+ def subtle_star_color
45
+ dark ? "$text_dk_default" : "#242B42"
14
46
  end
15
47
 
16
- def star_full
17
- (rating.to_f % 1).zero?
48
+ def svg_size
49
+ case size
50
+ when "sx"
51
+ 14
52
+ when "sm"
53
+ 16
54
+ when "md"
55
+ 24
56
+ when "lg"
57
+ 48
58
+ else
59
+ 16
60
+ end
18
61
  end
19
62
 
20
63
  def classname
@@ -1,24 +1,22 @@
1
- import React from "react";
2
- import { render, screen } from "../utilities/test-utils";
1
+ import React from "react"
2
+ import { render, screen } from "../utilities/test-utils"
3
3
 
4
- import StarRating from "./_star_rating";
4
+ import StarRating from "./_star_rating"
5
5
 
6
- const testId = "star-rating-kit";
6
+ const testId = "star-rating-kit"
7
7
 
8
8
  describe("Star Rating Kit", () => {
9
9
  test("Expects to have correct classname", () => {
10
10
  render(
11
11
  <StarRating
12
12
  data={{ testid: testId }}
13
- rating={2}
14
13
  />
15
- );
16
-
14
+ )
17
15
 
18
- const kit = screen.getByTestId(testId);
19
- expect(kit).toHaveClass("pb_star_rating_kit");
16
+ const kit = screen.getByTestId(testId)
17
+ expect(kit.className).toBe("pb_star_rating_kit")
20
18
 
21
- });
19
+ })
22
20
 
23
21
  test('should render aria-label', () => {
24
22
  render(
@@ -27,45 +25,46 @@ describe("Star Rating Kit", () => {
27
25
  data={{ testid: testId }}
28
26
  rating={2}
29
27
  />
30
- );
28
+ )
31
29
 
32
30
  const kit = screen.getByTestId(testId)
33
31
  expect(kit).toHaveAttribute('aria-label', testId)
34
- });
32
+ })
35
33
 
36
- test("Displays two highlighted stars", () => {
34
+ test("Displays correct denominator", () => {
37
35
  render(
38
36
  <StarRating
39
37
  data={{ testid: testId }}
38
+ denominator={4}
40
39
  rating={2}
41
40
  />
42
- );
43
-
41
+ )
44
42
 
45
- const kit = screen.getByTestId(testId);
46
- const highlight = kit.querySelector(".pb_star_rating_highlight");
47
- const stars = highlight.querySelectorAll(".far.fa-star");
48
- const count = stars.length;
43
+ const kit = screen.getByTestId(testId)
44
+ const highlight = kit.querySelector(".pb_star_rating_wrapper")
45
+ const stars = highlight.querySelectorAll(".pb_star_sm")
46
+ const count = stars.length
49
47
 
50
- expect(count).toBe(2);
51
- });
48
+ expect(count).toBe(4)
49
+ })
52
50
 
53
- test("Displays three highlighted stars and a half star", () => {
51
+ test("Uses correct size", () => {
54
52
  render(
55
53
  <StarRating
56
54
  data={{ testid: testId }}
57
- rating={3.5}
55
+ layoutOption="number"
56
+ rating={2}
57
+ size="lg"
58
58
  />
59
- );
59
+ )
60
60
 
61
- const kit = screen.getByTestId(testId);
62
- const highlight = kit.querySelector(".pb_star_rating_highlight");
63
- const stars = highlight.querySelectorAll(".far.fa-star");
64
- const halfStars = highlight.querySelectorAll(".far.fa-star-half");
65
- const starCount = stars.length;
66
- const halfStarCount = halfStars.length;
61
+ const kit = screen.getByTestId(testId)
62
+ const highlight = kit.querySelector(".pb_star_rating_wrapper")
63
+ const title = kit.querySelector(".pb_star_rating_number_lg")
64
+ const stars = highlight.querySelectorAll(".pb_star_lg")
65
+ const count = stars.length
67
66
 
68
- expect(starCount).toBe(3);
69
- expect(halfStarCount).toBe(1);
70
- });
71
- });
67
+ expect(title.className).toBe("pb_star_rating_number_lg")
68
+ expect(count).toBe(5)
69
+ })
70
+ })
@@ -39,10 +39,10 @@
39
39
  text: "Full Name",
40
40
  colspan: 2,
41
41
  sort_menu: [
42
- { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
43
- { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
44
- { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
45
- { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
42
+ { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
43
+ { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
44
+ { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
45
+ { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
46
46
  ],
47
47
  }) %>
48
48
  <%= pb_rails("table/table_header", props: {
@@ -1,6 +1,7 @@
1
1
  @import "../../tokens/opacity";
2
2
 
3
3
  $transition-speed: 0.2s;
4
+ $border_hover_color_dark: lighten($border_dark, 5%);
4
5
 
5
6
  [class^=pb_table] {
6
7
  &.table-sm,
@@ -15,9 +16,9 @@ $transition-speed: 0.2s;
15
16
  td {
16
17
  border-top-color: transparent;
17
18
  border-top-width: 0;
18
- transition: all $transition-speed ease;
19
+ transition: all $transition-speed ease;
19
20
  }
20
- @media (hover:hover) {
21
+ @media (hover:hover) {
21
22
  td {
22
23
  position: relative;
23
24
  &:after {
@@ -69,6 +70,29 @@ $transition-speed: 0.2s;
69
70
  }
70
71
  }
71
72
  }
73
+
74
+ &.dark {
75
+ tbody {
76
+ tr {
77
+ @media (hover:hover) {
78
+ &:hover {
79
+ box-shadow: 0 2px 10px 0 $shadow_dark;
80
+ td {
81
+ border-top-width: 0;
82
+ border-top-color: transparent;
83
+ border-color: $border_hover_color_dark !important;
84
+ &:after {
85
+ transition: background-color $transition-speed ease, height $transition-speed ease;
86
+ background-color: $border_hover_color_dark !important;
87
+ height: 1px;
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }
93
+ }
94
+ }
95
+
72
96
  }
73
97
  }
74
98
  }
@@ -1,6 +1,6 @@
1
1
  @import "../../tokens/screen_sizes";
2
2
 
3
- $table-dark-card-bg: $bg_dark;
3
+ $table-dark-card-bg: $card_dark;
4
4
 
5
5
  [class^=pb_table] {
6
6
  &.table-sm,
@@ -24,7 +24,6 @@ $table-dark-card-bg: $bg_dark;
24
24
 
25
25
  td {
26
26
  border-color: $border_dark !important;
27
- border-bottom-width: 0 !important;
28
27
  color: $white;
29
28
 
30
29
  &:before {
@@ -39,21 +38,6 @@ $table-dark-card-bg: $bg_dark;
39
38
  }
40
39
  }
41
40
 
42
- &:not(.no-hover) {
43
- tbody {
44
- tr {
45
- @media (hover:hover) {
46
- &:hover {
47
- td {
48
- border-color: $border_dark !important;
49
- background: $bg_dark;
50
- }
51
- }
52
- }
53
- }
54
- }
55
- }
56
-
57
41
  &.table-card {
58
42
  background: $table-dark-card-bg !important;
59
43
  }
@@ -28,15 +28,16 @@
28
28
  position: object.placement ,
29
29
  padding: 'none'}) do %>
30
30
  <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
31
- <% object.sort_menu.each_with_index do |item, index| %>
31
+ <% object.sort_items.each do |sort_item| %>
32
+ <% item = active_or_first_item(sort_items_for(sort_item)) %>
32
33
  <%= pb_rails("nav/item", props: {
33
34
  text: item[:item],
34
- link: item[:link],
35
+ link: next_link(sort_item: sort_item),
35
36
  highlighted_border: false,
36
37
  padding: "xs",
37
38
  icon_right: sort_icon(item[:direction], item[:active]),
38
39
  active: item[:active],
39
- classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
40
+ classname: "header_nav_item"
40
41
  }) %>
41
42
  <% end %>
42
43
  <% end %>
@@ -32,20 +32,43 @@ module Playbook
32
32
  align.present? ? "align_#{align}" : nil
33
33
  end
34
34
 
35
- def next_link
36
- return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
35
+ def next_link(sort_item: "")
36
+ sort_menu_for = if sort_item.blank?
37
+ sort_menu
38
+ else
39
+ sort_items_for(sort_item)
40
+ end
41
+
42
+ return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
37
43
 
38
44
  link = ""
39
45
 
40
- sort_menu.each_with_index do |item, index|
46
+ sort_menu_for.each_with_index do |item, index|
41
47
  if item[:active] == true
42
- next_index = (index + 1) % sort_menu.length
43
- link = sort_menu[next_index][:link]
48
+ next_index = (index + 1) % sort_menu_for.length
49
+ link = sort_menu_for[next_index][:link]
44
50
  end
45
51
  end
46
52
  link
47
53
  end
48
54
 
55
+ def sort_items
56
+ sort_menu.map { |hash| hash[:item] }.uniq
57
+ end
58
+
59
+ def sort_items_for(sort_item)
60
+ sort_menu.find_all { |hash| hash[:item] == sort_item }
61
+ end
62
+
63
+ def active_or_first_item(items)
64
+ active_item = items.find { |hash| hash[:active] == true }
65
+ if active_item.present?
66
+ active_item
67
+ else
68
+ items[0]
69
+ end
70
+ end
71
+
49
72
  def sorting_style?
50
73
  sort_menu != [{}]
51
74
  end
@@ -1,4 +1,4 @@
1
- import React, { useRef, useState } from "react"
1
+ import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
2
2
 
3
3
  import {
4
4
  arrow,
@@ -28,9 +28,10 @@ type TooltipProps = {
28
28
  placement?: Placement,
29
29
  position?: "absolute" | "fixed";
30
30
  text: string,
31
+ showTooltip?: boolean,
31
32
  } & GlobalProps
32
33
 
33
- const Tooltip = (props: TooltipProps): React.ReactElement => {
34
+ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
34
35
  const {
35
36
  aria = {},
36
37
  className,
@@ -42,6 +43,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
42
43
  placement: preferredPlacement = "top",
43
44
  position = "absolute",
44
45
  text,
46
+ showTooltip = true,
45
47
  zIndex,
46
48
  ...rest
47
49
  } = props
@@ -59,10 +61,9 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
59
61
 
60
62
  const {
61
63
  context,
62
- floating,
63
64
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, },
64
65
  placement,
65
- reference,
66
+ refs,
66
67
  strategy,
67
68
  x,
68
69
  y,
@@ -82,12 +83,16 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
82
83
  ],
83
84
  open,
84
85
  onOpenChange(open) {
85
- setOpen(open)
86
+ if(!showTooltip) {
87
+ return
88
+ } else {
89
+ setOpen(open)
90
+ }
86
91
  },
87
92
  placement: preferredPlacement
88
93
  })
89
94
 
90
-
95
+
91
96
  const { getFloatingProps } = useInteractions([
92
97
  useHover(context, {
93
98
  delay,
@@ -108,7 +113,16 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
108
113
  <>
109
114
  <div
110
115
  className={`pb_tooltip_kit ${css}`}
111
- ref={reference}
116
+ ref={(element) => {
117
+ refs.setReference(element);
118
+ if (ref) {
119
+ if (typeof ref === "function") {
120
+ ref(element);
121
+ } else if (typeof ref === "object") {
122
+ ref.current = element;
123
+ }
124
+ }
125
+ }}
112
126
  role="tooltip_trigger"
113
127
  style={{ display: "inline-flex" }}
114
128
  {...ariaProps}
@@ -120,7 +134,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
120
134
  <div
121
135
  {...getFloatingProps({
122
136
  className: `tooltip_tooltip ${placement} visible`,
123
- ref: floating,
137
+ ref: refs.setFloating,
124
138
  role: "tooltip",
125
139
  style: {
126
140
  position: strategy,
@@ -153,6 +167,8 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
153
167
  )}
154
168
  </>
155
169
  )
156
- }
170
+ })
171
+
172
+ Tooltip.displayName = "Tooltip"
157
173
 
158
174
  export default Tooltip
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
1
+ <%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
2
2
  <%= pb_rails("flex/flex_item") do %>
3
3
  <span id='regular-tooltip-1'>Hover here (Top)</span>
4
4
 
@@ -9,12 +9,10 @@ const TooltipDefaultReact = (props) => {
9
9
  <Flex
10
10
  flexDirection='row'
11
11
  gap='md'
12
- justifyContent='center'
13
12
  wrap
14
13
  >
15
14
  <FlexItem>
16
15
  <Tooltip
17
- className={"customClassNameHere"}
18
16
  placement='top'
19
17
  text="Whoa. I'm a Tooltip"
20
18
  zIndex={10}
@@ -9,7 +9,6 @@ const TooltipDelay = (props) => {
9
9
  <Flex
10
10
  flexDirection='row'
11
11
  gap='md'
12
- justifyContent='center'
13
12
  wrap
14
13
  >
15
14
  <FlexItem>
@@ -9,7 +9,6 @@ const TooltipInteraction = (props) => {
9
9
  <Flex
10
10
  flexDirection='row'
11
11
  gap='md'
12
- justifyContent='center'
13
12
  wrap
14
13
  >
15
14
  <FlexItem>
@@ -7,7 +7,6 @@ const TooltipMargin = (props) => {
7
7
  return (
8
8
  <Flex
9
9
  flexDirection='row'
10
- justifyContent='center'
11
10
  wrap
12
11
  >
13
12
  <Tooltip
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
1
+ <%= pb_rails("flex", props: { orientation: "column" }) do %>
2
2
  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
3
3
  <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
4
4
  <% end %>
@@ -0,0 +1,39 @@
1
+
2
+ <%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
3
+ <%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
4
+ <%= pb_rails("body") do %>
5
+ Tooltip is: <code id="show-tooltip-state">enabled</code>
6
+ <% end %>
7
+ <%= pb_rails("flex/flex_item") do %>
8
+ <span id="truncated-tooltip-1">Hover me</span>
9
+ <%= pb_rails("tooltip", props: {
10
+ trigger_element_selector: "#truncated-tooltip-1",
11
+ tooltip_id: "truncated-1",
12
+ position: "right",
13
+ }) do %>
14
+ Tooltip is enabled
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+
19
+
20
+ <script>
21
+ const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
22
+ const showTooltipStateText = document.getElementById("show-tooltip-state");
23
+
24
+ function hideTooltipIfNotTruncated(tooltipId) {
25
+ const tooltipElement = document.querySelector(
26
+ `[data-pb-tooltip-tooltip-id="${tooltipId}"]`
27
+ );
28
+
29
+ tooltipElement.dataset.pbTooltipShowTooltip =
30
+ tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";
31
+
32
+ showTooltipStateText.innerText =
33
+ tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
34
+ }
35
+
36
+ toggleTooltipButton.addEventListener("click", () => {
37
+ hideTooltipIfNotTruncated("truncated-1");
38
+ });
39
+ </script>
@@ -0,0 +1,5 @@
1
+ You can build your own logic to control whether to show or hide the tooltip.
2
+
3
+ Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.
4
+
5
+ Each Tooltip has a `dataset` with the `pbTooltipShowTooltip` property set to true by default. To update it, access the `pbTooltipShowTooltip` in the dataset of your tooltip element: `yourTooltip.dataset.pbTooltipShowTooltip = 'false'`