playbook_ui 13.13.0.pre.alpha.play10821727 → 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784

Sign up to get free protection for your applications and to get access to all the features.
Files changed (182) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +13 -1
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +5 -5
  4. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +3 -3
  5. data/app/pb_kits/playbook/pb_background/_background.tsx +9 -9
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +2 -2
  7. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +3 -3
  8. data/app/pb_kits/playbook/pb_body/_body.tsx +5 -4
  9. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +4 -3
  10. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx +3 -3
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +37 -40
  12. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +3 -3
  13. data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
  14. data/app/pb_kits/playbook/pb_card/_card.tsx +2 -2
  15. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -1
  16. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
  17. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -3
  18. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +9 -9
  19. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +1 -1
  20. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +7 -5
  21. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +2 -2
  22. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +4 -5
  23. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +12 -16
  24. data/app/pb_kits/playbook/pb_contact/_contact.tsx +3 -3
  25. data/app/pb_kits/playbook/pb_currency/_currency.tsx +2 -2
  26. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +1 -1
  27. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +57 -4
  28. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +57 -4
  29. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -20
  30. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx +1 -1
  31. data/app/pb_kits/playbook/pb_date/_date.tsx +7 -7
  32. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -1
  33. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -0
  34. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +11 -10
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.html.erb +29 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.jsx +34 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.md +7 -0
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb +28 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx +34 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md +1 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +2 -2
  42. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  44. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +69 -3
  45. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +2 -2
  46. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +2 -2
  47. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +8 -8
  48. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +2 -2
  49. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +2 -2
  51. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +3 -6
  52. data/app/pb_kits/playbook/pb_detail/_detail.scss +2 -2
  53. data/app/pb_kits/playbook/pb_detail/_detail.tsx +4 -4
  54. data/app/pb_kits/playbook/pb_detail/detail.rb +1 -1
  55. data/app/pb_kits/playbook/pb_detail/detail.test.jsx +2 -2
  56. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +2 -2
  57. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +34 -42
  58. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +5 -4
  60. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +4 -4
  61. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
  62. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
  63. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
  64. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  65. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.tsx +5 -5
  66. data/app/pb_kits/playbook/pb_enhanced_element/element_observer.ts +1 -1
  67. data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
  68. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +1 -1
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -1
  70. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  71. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -1
  72. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +1 -1
  73. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -1
  74. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +1 -1
  75. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +1 -1
  76. data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +1 -1
  77. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +1 -1
  78. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  79. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  80. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +1 -1
  81. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +1 -1
  82. data/app/pb_kits/playbook/pb_image/_image.tsx +1 -1
  83. data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx +1 -1
  84. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  85. data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -1
  86. data/app/pb_kits/playbook/pb_legend/_legend.tsx +1 -1
  87. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +1 -1
  88. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +1 -1
  89. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +1 -1
  90. data/app/pb_kits/playbook/pb_list/_list.tsx +1 -1
  91. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  92. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -1
  93. data/app/pb_kits/playbook/pb_map/_map.tsx +1 -1
  94. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  95. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +1 -1
  96. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +1 -1
  97. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +1 -1
  98. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +1 -1
  99. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  100. data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -1
  101. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  102. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +1 -1
  103. data/app/pb_kits/playbook/pb_person/_person.tsx +1 -1
  104. data/app/pb_kits/playbook/pb_person/docs/_person_default_swift.md +8 -0
  105. data/app/pb_kits/playbook/pb_person/docs/_person_props_swift.md +5 -0
  106. data/app/pb_kits/playbook/pb_person/docs/example.yml +4 -0
  107. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +1 -1
  108. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +1 -1
  109. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  110. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
  111. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +1 -1
  112. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +1 -1
  113. data/app/pb_kits/playbook/pb_progress_step/_progress_step.tsx +1 -1
  114. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx +1 -1
  115. data/app/pb_kits/playbook/pb_radio/_radio.tsx +1 -1
  116. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +1 -1
  117. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +1 -1
  118. data/app/pb_kits/playbook/pb_select/_select.tsx +1 -1
  119. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
  120. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +1 -1
  121. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +1 -1
  122. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +1 -1
  123. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +1 -1
  124. data/app/pb_kits/playbook/pb_source/_source.tsx +1 -1
  125. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +105 -53
  126. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +185 -63
  127. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.html.erb +2 -0
  128. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.jsx +25 -0
  129. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +3 -0
  130. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +31 -0
  131. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +6 -8
  132. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +19 -6
  133. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +4 -1
  134. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +30 -5
  135. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +6 -0
  136. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +58 -0
  137. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +16 -0
  138. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +60 -0
  139. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +12 -5
  140. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +8 -0
  141. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +54 -26
  142. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +86 -6
  143. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +34 -34
  144. data/app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg +3 -0
  145. data/app/pb_kits/playbook/pb_star_rating/stars/star_outline.svg +3 -0
  146. data/app/pb_kits/playbook/pb_star_rating/stars/subtle_dark_star.svg +3 -0
  147. data/app/pb_kits/playbook/pb_star_rating/stars/subtle_star.svg +3 -0
  148. data/app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg +3 -0
  149. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +1 -1
  150. data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx +1 -1
  151. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  152. data/app/pb_kits/playbook/pb_table/_table_row.tsx +1 -1
  153. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  154. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +1 -1
  155. data/app/pb_kits/playbook/pb_time/_time.tsx +1 -1
  156. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  157. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
  158. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  159. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  160. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +1 -1
  161. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  162. data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +1 -1
  163. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +1 -1
  164. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  165. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
  166. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -1
  167. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -1
  168. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  169. data/app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md +37 -0
  170. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +10 -0
  171. data/app/pb_kits/playbook/pb_user/docs/_user_size_swift.md +35 -0
  172. data/app/pb_kits/playbook/pb_user/docs/_user_text_only_swift.md +27 -0
  173. data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size_swift.md +35 -0
  174. data/app/pb_kits/playbook/pb_user/docs/example.yml +7 -0
  175. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +1 -1
  176. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +1 -1
  177. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
  178. data/app/pb_kits/playbook/utilities/props.ts +2 -2
  179. data/dist/playbook-rails.js +6 -6
  180. data/lib/playbook/version.rb +2 -2
  181. metadata +28 -3
  182. data/app/pb_kits/playbook/tokens/exports/exports.d.ts +0 -1
@@ -2,61 +2,113 @@
2
2
  @import "../tokens/opacity";
3
3
  @import "../tokens/spacing";
4
4
 
5
- $pb_star_rating_number_width: 30px;
6
- $pb_star_rating_wrapper_width: 90px;
7
- $pb_star_rating_height: 26px;
8
5
 
9
- [class^=pb_star_rating_kit] {
10
- position: relative;
11
- display: inline-flex;
6
+ [class*=pb_star_rating_kit] {
7
+ display: flex;
8
+ align-items: flex-end;
12
9
  justify-content: flex-start;
13
- align-items: flex-start;
14
-
15
- .pb_star_rating_number {
16
- flex-shrink: 0;
17
- flex-grow: 0;
18
- flex-basis: $pb_star_rating_number_width;
19
- width: $pb_star_rating_number_width;
20
- min-height: $pb_star_rating_height;
21
- padding: 0 $space-xs 0;
22
- color: $text_lt_light;
23
- font-size: $text-small;
24
- display: flex;
25
- justify-content: center;
26
- align-items: center;
27
- }
28
-
29
- .pb_star_rating_wrapper {
30
- position: relative;
31
- width: $pb_star_rating_wrapper_width;
32
- flex-basis: $pb_star_rating_wrapper_width;
33
- flex-shrink: 0;
34
- flex-grow: 1;
35
- min-height: $pb_star_rating_height;
36
-
37
- .pb_star_rating_highlight {
38
- display: flex;
39
- position: absolute;
40
- top: 5px;
41
- left: 0;
42
- z-index: 5;
43
- color: $yellow;
44
- line-height: $pb_star_rating_height;
45
- }
46
- .pb_star_rating_base {
47
- display: flex;
48
- position: absolute;
49
- top: 5px;
50
- left: 0;
51
- z-index: 0;
52
- color: rgba($slate, $opacity-4);
53
- line-height: $pb_star_rating_height;
54
- }
55
- }
56
-
57
- &[class*=_hide_rating] {
58
- .pb_star_rating_number {
59
- display: none;
10
+
11
+ path {
12
+ &.suble_star_dark {
13
+ fill: $text_dk_default;
14
+ }
15
+ &.suble_star_light {
16
+ fill: $text_lt_default;
17
+ }
18
+ &.outline_star_dark {
19
+ stroke: $text_dk_lighter;
20
+ }
21
+ &.outline_star_light {
22
+ stroke: $text_lt_lighter;
23
+ }
24
+ &.empty_star_dark {
25
+ fill: $border_dark;
26
+ }
27
+ &.empty_star_light {
28
+ fill: $border_light;
29
+ }
30
+ }
31
+
32
+ .pb_star_rating_number_xs {
33
+ max-height: 14px;
34
+ }
35
+
36
+ .pb_star_rating_number_sm {
37
+ max-height: 14px;
38
+ }
39
+
40
+ .pb_star_rating_number_md {
41
+ max-height: 24px;
42
+ }
43
+
44
+ .pb_star_rating_number_lg {
45
+ max-height: 40px;
46
+ height: 29px;
47
+ }
48
+
49
+
50
+ $star-styles: (
51
+ yellow_star: (color: #F9BB00),
52
+ primary_star: (color: #0056CF),
53
+ suble_star_light: (color: $text_lt_default),
54
+ suble_star_dark: (color: $text_dk_default),
55
+ empty_star_dark: (color: $border_dark),
56
+ empty_star_light: (color: $border_light),
57
+ outline_empty_star_dark: (color: transparent),
58
+ outline_empty_star_light: (color: transparent)
59
+ );
60
+
61
+ @each $class, $styles in $star-styles {
62
+ .#{$class} {
63
+ @each $property, $value in $styles {
64
+ #{$property}: $value;
65
+ }
66
+ }
67
+ }
68
+
69
+
70
+ $star-styles: (
71
+ pb_star_react_xs: (font-size: $text_small, ),
72
+ pb_star_react_sm: (font-size: $text_base, ),
73
+ pb_star_react_md: (font-size: 24px, ),
74
+ pb_star_react_lg: (font-size: 48px, )
75
+ );
76
+
77
+ @each $class, $styles in $star-styles {
78
+ .#{$class} {
79
+ @each $property, $value in $styles {
80
+ #{$property}: $value;
81
+ }
82
+ }
83
+ }
84
+
85
+ $star-styles: (
86
+ pb_star_xs: (font-size: $text_small, width: 1em, margin-right: 4px),
87
+ pb_star_sm: (font-size: $text_base, width: 1em, margin-right: 4px),
88
+ pb_star_md: (font-size: 24px, width: 1em, margin-right: 6px),
89
+ pb_star_lg: (font-size: 48px, width: 1em, margin-right: 12px)
90
+ );
91
+
92
+ @each $class, $styles in $star-styles {
93
+ .#{$class} {
94
+ @each $property, $value in $styles {
95
+ #{$property}: $value;
96
+ }
97
+ }
98
+ }
99
+
100
+ $star-padding: (
101
+ pb_star_padding_xs: (margin-right: 4px),
102
+ pb_star_padding_sm: (margin-right: 4px),
103
+ pb_star_padding_md: (margin-right: 6px),
104
+ pb_star_padding_lg: (margin-right: 12px)
105
+ );
106
+
107
+ @each $class, $styles in $star-padding {
108
+ .#{$class} {
109
+ @each $property, $value in $styles {
110
+ #{$property}: $value;
111
+ }
60
112
  }
61
113
  }
62
114
  }
@@ -1,44 +1,86 @@
1
1
  import React from "react"
2
2
  import classnames from "classnames"
3
3
 
4
- import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
4
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
6
 
6
- import Icon from "../pb_icon/_icon"
7
+ import Caption from '../pb_caption/_caption'
8
+ import Body from '../pb_body/_body'
9
+ import Title from '../pb_title/_title'
10
+ import Icon from '../pb_icon/_icon'
11
+ import Flex from '../pb_flex/_flex'
7
12
 
8
13
  type StarRatingProps = {
9
14
  aria?: {[key: string]: string},
10
15
  className?: string,
11
16
  data?: object,
17
+ dark?: boolean,
12
18
  fixedWidth?: boolean,
13
- hideRating: boolean,
14
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
+ layoutOption?: "default" | "number" | "onestar",
20
+ htmlOptions?: {[key: string]: string | number | boolean | Function},
15
21
  icon?: string,
16
22
  id?: string,
17
23
  rating: number,
18
- };
24
+ denominator: number,
25
+ colorOption?: "yellow" | "primary" | "subtle" | "outline",
26
+ backgroundType?: "fill" | "outline",
27
+ size?: "xs" | "sm" | "md" | "lg";
28
+ } & GlobalProps
19
29
 
20
- const StarRating = ({
30
+ const StarRating = (props: StarRatingProps) => {
31
+ const {
21
32
  aria = {},
22
33
  className,
23
34
  data = {},
35
+ dark = false,
36
+ layoutOption = "default",
24
37
  htmlOptions = {},
25
- hideRating = false,
26
38
  id,
27
39
  rating = 0,
28
- }: StarRatingProps) => {
40
+ denominator = 5,
41
+ colorOption = "yellow",
42
+ backgroundType = "fill",
43
+ size = "sm",
44
+ } = props
45
+
46
+ const classes = classnames(buildCss('pb_star_rating_kit'), globalProps(props), className)
29
47
  const ariaProps = buildAriaProps(aria)
30
48
  const dataProps = buildDataProps(data)
31
49
  const htmlProps = buildHtmlProps(htmlOptions)
32
- const css = classnames([
33
- "pb_star_rating_kit", className,
34
- ])
50
+ const denominatorStyle = layoutOption === "onestar" ? 1 : denominator
51
+ const activeStars = Math.round(rating) > denominatorStyle ? denominatorStyle : Math.round(rating)
52
+ const emptyStars = denominatorStyle - Math.round(rating) < 0 ? 0 : denominatorStyle - Math.round(rating)
53
+ const oneDecimalRating = rating.toFixed(1)
54
+ let iconSize = `pb_star_${size}`
55
+
56
+ const starYellow = (
57
+ <svg className="iamyellow" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
58
+ <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"/>
59
+ </svg>
60
+ )
61
+
62
+ const starPrimary = (
63
+ <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
64
+ <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"/>
65
+ </svg>
66
+ );
35
67
 
36
- const starCount = () => (
37
- [...Array(Math.floor(rating))]
68
+ const starSubtle = (
69
+ <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
70
+ <path className={dark === true ? "suble_star_dark" : "suble_star_light"} fillRule="evenodd" clipRule="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" />
71
+ </svg>
72
+ );
73
+
74
+ const starBackground = (
75
+ <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
76
+ <path className={dark === true ? "empty_star_dark" : "empty_star_light"} fillRule="evenodd" clipRule="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" />
77
+ </svg>
38
78
  )
39
79
 
40
- const hasHalfStar = () => (
41
- rating % 1 !== 0
80
+ const starOutline = (
81
+ <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
82
+ <path className={dark === true ? "outline_star_dark" : "outline_star_light"} 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"/>
83
+ </svg>
42
84
  )
43
85
 
44
86
  return (
@@ -46,56 +88,136 @@ const StarRating = ({
46
88
  {...ariaProps}
47
89
  {...dataProps}
48
90
  {...htmlProps}
49
- className={css}
91
+ className={classes}
50
92
  id={id}
51
93
  >
52
- {!hideRating && (
53
- <div className="pb_star_rating_number">
54
- {rating}
55
- </div>
56
- )}
57
- <div className="pb_star_rating_wrapper">
58
- <div className="pb_star_rating_highlight">
59
- {starCount().map((_, index) => (
60
- <Icon
61
- fixedWidth={false}
62
- icon="star"
63
- key={index}
64
- />
65
- ))}
66
- {hasHalfStar() && (
67
- <Icon
68
- fixedWidth={false}
69
- icon="star-half"
70
- />
71
- )}
72
- </div>
73
-
74
- <div className="pb_star_rating_base">
75
- <Icon
76
- fixedWidth={false}
77
- icon="star"
78
- />
79
- <Icon
80
- fixedWidth={false}
81
- icon="star"
82
- />
83
- <Icon
84
- fixedWidth={false}
85
- icon="star"
86
- />
87
- <Icon
88
- fixedWidth={false}
89
- icon="star"
90
- />
91
- <Icon
92
- fixedWidth={false}
93
- icon="star"
94
- />
95
- </div>
94
+ {layoutOption === "number" && (
95
+ <>
96
+ {size === 'xs' && (
97
+ <Caption
98
+ text={oneDecimalRating.toString()}
99
+ size="xs"
100
+ paddingRight="xs"
101
+ dark={dark}
102
+ className="pb_star_rating_number_sm"
103
+ />
104
+ )}
105
+ {size === 'sm' && (
106
+ <Caption
107
+ text={oneDecimalRating.toString()}
108
+ size="xs"
109
+ paddingRight="xs"
110
+ dark={dark}
111
+ className="pb_star_rating_number_sm"
112
+ />
113
+ )}
114
+ {size === 'md' && (
115
+ <Body
116
+ text={oneDecimalRating.toString()}
117
+ paddingRight="xs"
118
+ dark={dark}
119
+ color="light"
120
+ className="pb_star_rating_number_md"
121
+ />
122
+ )}
123
+ {size === 'lg' && (
124
+ <Title
125
+ text={oneDecimalRating.toString()}
126
+ size={2}
127
+ paddingRight="sm"
128
+ dark={dark}
129
+ color="light"
130
+ bold={false}
131
+ className="pb_star_rating_number_lg"
132
+ />
133
+ )}
134
+ </>
135
+ )}
136
+ <Flex className="star_flex_area">
137
+ {[...Array(activeStars)].map((_, index) => (
138
+ <React.Fragment key={index}>
139
+ {colorOption === 'yellow' && (
140
+ <Icon
141
+ // @ts-ignore
142
+ customIcon={starYellow}
143
+ className={iconSize}
144
+ />
145
+ ) }
146
+ {colorOption === 'primary' && (
147
+ <Icon
148
+ // @ts-ignore
149
+ customIcon={starPrimary}
150
+ className={iconSize}
151
+ />
152
+ ) }
153
+ {colorOption === 'subtle' && (
154
+ <Icon
155
+ // @ts-ignore
156
+ customIcon={starSubtle}
157
+ className={iconSize}
158
+ />
159
+ ) }
160
+ </React.Fragment>
161
+ ))}
162
+ {[...Array(emptyStars)].map((_, index) => (
163
+ <React.Fragment key={index}>
164
+ {backgroundType === 'outline' && (
165
+ <Icon
166
+ // @ts-ignore
167
+ customIcon={starOutline}
168
+ className={iconSize}
169
+ />
170
+ ) }
171
+ {backgroundType !== 'outline' && (
172
+ <Icon
173
+ // @ts-ignore
174
+ customIcon={starBackground}
175
+ className={iconSize}
176
+ />
177
+ ) }
178
+ </React.Fragment>
179
+ ))}
180
+ </Flex>
181
+ {layoutOption === "onestar" && (
182
+ <>
183
+ {size === 'xs' && (
184
+ <Caption
185
+ text={`${rating.toString()} of ${denominator}`}
186
+ size="xs"
187
+ dark={dark}
188
+ className="pb_star_rating_number_sm"
189
+ />
190
+ )}
191
+ {size === 'sm' && (
192
+ <Caption
193
+ text={`${rating.toString()} of ${denominator}`}
194
+ size="xs"
195
+ dark={dark}
196
+ className="pb_star_rating_number_sm"
197
+ />
198
+ )}
199
+ {size === 'md' && (
200
+ <Body
201
+ text={`${rating.toString()} of ${denominator}`}
202
+ dark={dark}
203
+ color="light"
204
+ className="pb_star_rating_number_md"
205
+ />
206
+ )}
207
+ {size === 'lg' && (
208
+ <Title
209
+ text={`${rating.toString()} of ${denominator}`}
210
+ size={2}
211
+ dark={dark}
212
+ color="light"
213
+ bold={false}
214
+ className="pb_star_rating_number_lg"
215
+ />
216
+ )}
217
+ </>
218
+ )}
96
219
  </div>
97
- </div>
98
- )
99
- }
220
+ )
221
+ }
100
222
 
101
223
  export default StarRating
@@ -0,0 +1,2 @@
1
+ <%= pb_rails("star_rating", props: { rating: 3, background_type: "fill", padding_bottom: "xs" }) %>
2
+ <%= pb_rails("star_rating", props: { rating: 3, background_type: "outline", padding_bottom: "xs" }) %>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+
3
+ import StarRating from '../_star_rating'
4
+
5
+ const StarRatingBackgroundOptions = (props) => (
6
+ <>
7
+
8
+ <StarRating
9
+ paddingBottom="xs"
10
+ rating={3}
11
+ {...props}
12
+ />
13
+
14
+
15
+ <StarRating
16
+ backgroundType='outline'
17
+ paddingBottom="xs"
18
+ rating={3}
19
+ {...props}
20
+ />
21
+
22
+ </>
23
+ )
24
+
25
+ export default StarRatingBackgroundOptions
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
2
+ <%= pb_rails("star_rating", props: { rating: 3, color_option: "primary", padding_bottom: "xs" }) %>
3
+ <%= pb_rails("star_rating", props: { rating: 3, color_option: "subtle", padding_bottom: "xs" }) %>
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+
3
+ import StarRating from '../_star_rating'
4
+
5
+ const StarRatingColorOptions = (props) => (
6
+ <>
7
+
8
+ <StarRating
9
+ paddingBottom="xs"
10
+ rating={3}
11
+ {...props}
12
+ />
13
+
14
+ <StarRating
15
+ colorOption='primary'
16
+ paddingBottom="xs"
17
+ rating={3}
18
+ {...props}
19
+ />
20
+
21
+ <StarRating
22
+ colorOption='subtle'
23
+ paddingBottom="xs"
24
+ rating={3}
25
+ {...props}
26
+ />
27
+
28
+ </>
29
+ )
30
+
31
+ export default StarRatingColorOptions
@@ -1,13 +1,11 @@
1
- <%= pb_rails("star_rating") %>
1
+ <%= pb_rails("star_rating", props: { padding_bottom: "xs" }) %>
2
2
 
3
- <br>
3
+ <%= pb_rails("star_rating", props: { rating: 0.9, padding_bottom: "xs" }) %>
4
4
 
5
- <%= pb_rails("star_rating", props: { rating: 3 }) %>
5
+ <%= pb_rails("star_rating", props: { rating: 1.5, padding_bottom: "xs" }) %>
6
6
 
7
- <br>
7
+ <%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
8
8
 
9
- <%= pb_rails("star_rating", props: { rating: 1.5 }) %>
9
+ <%= pb_rails("star_rating", props: { rating: 4.2, padding_bottom: "xs" }) %>
10
10
 
11
- <br>
12
-
13
- <%= pb_rails("star_rating", props: { rating: 5 }) %>
11
+ <%= pb_rails("star_rating", props: { rating: 5, padding_bottom: "xs" }) %>
@@ -4,25 +4,38 @@ import StarRating from '../_star_rating'
4
4
 
5
5
  const StarRatingDefault = (props) => (
6
6
  <>
7
- <StarRating />
7
+ <StarRating
8
+ paddingBottom="xs"
9
+ {...props}
10
+ />
8
11
 
9
- <br />
10
12
 
11
13
  <StarRating
12
- rating={3}
14
+ paddingBottom="xs"
15
+ rating={0.9}
13
16
  {...props}
14
17
  />
15
18
 
16
- <br />
17
-
18
19
  <StarRating
20
+ paddingBottom="xs"
19
21
  rating={1.5}
20
22
  {...props}
21
23
  />
22
24
 
23
- <br />
25
+ <StarRating
26
+ paddingBottom="xs"
27
+ rating={3}
28
+ {...props}
29
+ />
30
+
31
+ <StarRating
32
+ paddingBottom="xs"
33
+ rating={4.2}
34
+ {...props}
35
+ />
24
36
 
25
37
  <StarRating
38
+ paddingBottom="xs"
26
39
  rating={5}
27
40
  {...props}
28
41
  />
@@ -1 +1,4 @@
1
- <%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>
1
+ <%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
2
+ <%= pb_rails("star_rating", props: { rating: 2.8, layout_option: "number", padding_bottom: "xs" }) %>
3
+ <%= pb_rails("star_rating", props: { rating: 3, layout_option: "number", padding_bottom: "xs" }) %>
4
+ <%= pb_rails("star_rating", props: { rating: 1, layout_option: "onestar", padding_bottom: "xs" }) %>
@@ -3,13 +3,38 @@ import React from 'react'
3
3
  import StarRating from '../_star_rating'
4
4
 
5
5
  const StarRatingHide = (props) => (
6
+ <>
6
7
 
7
- <StarRating
8
- hideRating
9
- rating={3.5}
10
- {...props}
11
- />
8
+ <StarRating
9
+ paddingBottom="xs"
10
+ rating={3}
11
+ {...props}
12
+ />
12
13
 
14
+
15
+ <StarRating
16
+ layoutOption={"number"}
17
+ paddingBottom="xs"
18
+ rating={2.8}
19
+ {...props}
20
+ />
21
+
22
+
23
+ <StarRating
24
+ layoutOption={"number"}
25
+ paddingBottom="xs"
26
+ rating={3}
27
+ {...props}
28
+ />
29
+
30
+ <StarRating
31
+ layoutOption={"onestar"}
32
+ paddingBottom="xs"
33
+ rating={3}
34
+ {...props}
35
+ />
36
+
37
+ </>
13
38
  )
14
39
 
15
40
  export default StarRatingHide
@@ -0,0 +1,6 @@
1
+ <%= pb_rails("star_rating", props: { rating: 3, denominator: 3, padding_bottom: "xs" }) %>
2
+ <%= pb_rails("star_rating", props: { rating: 3, denominator: 4, padding_bottom: "xs" }) %>
3
+ <%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
4
+ <%= pb_rails("star_rating", props: { rating: 3, denominator: 6, padding_bottom: "xs" }) %>
5
+ <%= pb_rails("star_rating", props: { rating: 3, denominator: 7, padding_bottom: "xs" }) %>
6
+ <%= pb_rails("star_rating", props: { rating: 3, denominator: 8, padding_bottom: "xs" }) %>