playbook_ui 13.13.0.pre.alpha.play900startratingasinput1657 → 13.13.0.pre.alpha.play10221678

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -0
  3. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -0
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +11 -10
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.html.erb +29 -0
  6. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.jsx +34 -0
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.md +7 -0
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb +28 -0
  9. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx +34 -0
  10. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md +1 -0
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +2 -2
  12. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  14. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +69 -3
  15. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +53 -105
  16. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +62 -179
  17. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +8 -6
  18. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +6 -19
  19. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +1 -3
  20. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +5 -22
  21. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +5 -12
  22. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +0 -8
  23. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +26 -48
  24. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +6 -82
  25. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +34 -34
  26. data/dist/playbook-rails.js +5 -5
  27. data/lib/playbook/version.rb +1 -1
  28. metadata +8 -15
  29. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.html.erb +0 -2
  30. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.jsx +0 -25
  31. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +0 -3
  32. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +0 -31
  33. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +0 -6
  34. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +0 -58
  35. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +0 -16
  36. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +0 -60
  37. data/app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg +0 -3
  38. data/app/pb_kits/playbook/pb_star_rating/stars/star_outline.svg +0 -3
  39. data/app/pb_kits/playbook/pb_star_rating/stars/subtle_dark_star.svg +0 -3
  40. data/app/pb_kits/playbook/pb_star_rating/stars/subtle_star.svg +0 -3
  41. data/app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg +0 -3
@@ -1,87 +1,44 @@
1
1
  import React from "react"
2
2
  import classnames from "classnames"
3
3
 
4
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
- import { globalProps, GlobalProps } from '../utilities/globalProps'
4
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
6
5
 
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'
6
+ import Icon from "../pb_icon/_icon"
12
7
 
13
8
  type StarRatingProps = {
14
9
  aria?: {[key: string]: string},
15
10
  className?: string,
16
11
  data?: object,
17
- dark?: boolean,
18
12
  fixedWidth?: boolean,
19
- layoutOption?: "default" | "number" | "onestar",
13
+ hideRating: boolean,
20
14
  htmlOptions?: {[key: string]: string | number | boolean | Function},
21
15
  icon?: string,
22
16
  id?: string,
23
17
  rating: number,
24
- denominator: number,
25
- colorOption?: "yellow" | "primary" | "subtle" | "outline",
26
- backgroundType?: "fill" | "outline",
27
- size?: "xs" | "sm" | "md" | "lg";
28
- } & GlobalProps
18
+ };
29
19
 
30
- const StarRating = (props: StarRatingProps) => {
31
- const {
20
+ const StarRating = ({
32
21
  aria = {},
33
22
  className,
34
23
  data = {},
35
- dark = false,
36
- layoutOption = "default",
37
24
  htmlOptions = {},
25
+ hideRating = false,
38
26
  id,
39
27
  rating = 0,
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)
28
+ }: StarRatingProps) => {
47
29
  const ariaProps = buildAriaProps(aria)
48
30
  const dataProps = buildDataProps(data)
49
31
  const htmlProps = buildHtmlProps(htmlOptions)
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
- // let iconSize = ``
54
- let iconSize = `pb_star_${size}`
55
- // let iconDivClass = `pb_star_padding_${size}`
56
-
57
- const starYellow = (
58
- <svg className="iamyellow" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
59
- <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"/>
60
- </svg>
61
- )
62
-
63
- const starPrimary = (
64
- <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
65
- <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"/>
66
- </svg>
67
- );
32
+ const css = classnames([
33
+ "pb_star_rating_kit", className,
34
+ ])
68
35
 
69
- const starSubtle = (
70
- <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
71
- <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" />
72
- </svg>
73
- );
74
-
75
- const starBackground = (
76
- <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
77
- <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" />
78
- </svg>
36
+ const starCount = () => (
37
+ [...Array(Math.floor(rating))]
79
38
  )
80
39
 
81
- const starOutline = (
82
- <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
83
- <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"/>
84
- </svg>
40
+ const hasHalfStar = () => (
41
+ rating % 1 !== 0
85
42
  )
86
43
 
87
44
  return (
@@ -89,130 +46,56 @@ const StarRating = (props: StarRatingProps) => {
89
46
  {...ariaProps}
90
47
  {...dataProps}
91
48
  {...htmlProps}
92
- className={classes}
49
+ className={css}
93
50
  id={id}
94
51
  >
95
- {layoutOption === "number" && (
96
- <>
97
- {size === 'xs' && (
98
- <Caption
99
- text={rating.toString()}
100
- size="xs"
101
- paddingRight="xs"
102
- dark={dark}
103
- className="pb_star_rating_number_sm"
104
- />
105
- )}
106
- {size === 'sm' && (
107
- <Caption
108
- text={rating.toString()}
109
- size="xs"
110
- paddingRight="xs"
111
- dark={dark}
112
- className="pb_star_rating_number_sm"
113
- />
114
- )}
115
- {size === 'md' && (
116
- <Body
117
- text={rating.toString()}
118
- paddingRight="xs"
119
- dark={dark}
120
- className="pb_star_rating_number_md"
121
- />
122
- )}
123
- {size === 'lg' && (
124
- <Title
125
- text={rating.toString()}
126
- size={2}
127
- paddingRight="sm"
128
- dark={dark}
129
- className="pb_star_rating_number_lg"
130
- />
131
- )}
132
- </>
133
- )}
134
- <Flex className="star_flex_area">
135
- {[...Array(activeStars)].map((_, index) => (
136
- <React.Fragment key={index}>
137
- {colorOption === 'yellow' && (
138
- <Icon
139
- // @ts-ignore
140
- customIcon={starYellow}
141
- className={iconSize}
142
- />
143
- ) }
144
- {colorOption === 'primary' && (
145
- <Icon
146
- // @ts-ignore
147
- customIcon={starPrimary}
148
- className={iconSize}
149
- />
150
- ) }
151
- {colorOption === 'subtle' && (
152
- <Icon
153
- // @ts-ignore
154
- customIcon={starSubtle}
155
- className={iconSize}
156
- />
157
- ) }
158
- </React.Fragment>
159
- ))}
160
- {[...Array(emptyStars)].map((_, index) => (
161
- <React.Fragment key={index}>
162
- {backgroundType === 'outline' && (
163
- <Icon
164
- // @ts-ignore
165
- customIcon={starOutline}
166
- className={iconSize}
167
- />
168
- ) }
169
- {backgroundType !== 'outline' && (
170
- <Icon
171
- // @ts-ignore
172
- customIcon={starBackground}
173
- className={iconSize}
174
- />
175
- ) }
176
- </React.Fragment>
177
- ))}
178
- </Flex>
179
- {layoutOption === "onestar" && (
180
- <>
181
- {size === 'xs' && (
182
- <Caption
183
- text={`${rating.toString()} of ${denominator}`}
184
- size="sm"
185
- dark={dark}
186
- className="pb_star_rating_number_sm"
187
- />
188
- )}
189
- {size === 'sm' && (
190
- <Caption
191
- text={`${rating.toString()} of ${denominator}`}
192
- size="sm"
193
- dark={dark}
194
- className="pb_star_rating_number_sm"
195
- />
196
- )}
197
- {size === 'md' && (
198
- <Body
199
- text={`${rating.toString()} of ${denominator}`}
200
- dark={dark}
201
- className="pb_star_rating_number_md"
202
- />
203
- )}
204
- {size === 'lg' && (
205
- <Title
206
- text={`${rating.toString()} of ${denominator}`}
207
- size={2}
208
- dark={dark}
209
- className="pb_star_rating_number_lg"
210
- />
211
- )}
212
- </>
213
- )}
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>
214
96
  </div>
215
- )
216
- }
97
+ </div>
98
+ )
99
+ }
217
100
 
218
101
  export default StarRating
@@ -1,11 +1,13 @@
1
- <%= pb_rails("star_rating", props: { padding_bottom: "xs" }) %>
1
+ <%= pb_rails("star_rating") %>
2
2
 
3
- <%= pb_rails("star_rating", props: { rating: 1, padding_bottom: "xs" }) %>
3
+ <br>
4
4
 
5
- <%= pb_rails("star_rating", props: { rating: 2, padding_bottom: "xs" }) %>
5
+ <%= pb_rails("star_rating", props: { rating: 3 }) %>
6
6
 
7
- <%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
7
+ <br>
8
8
 
9
- <%= pb_rails("star_rating", props: { rating: 4, padding_bottom: "xs" }) %>
9
+ <%= pb_rails("star_rating", props: { rating: 1.5 }) %>
10
10
 
11
- <%= pb_rails("star_rating", props: { rating: 5, padding_bottom: "xs" }) %>
11
+ <br>
12
+
13
+ <%= pb_rails("star_rating", props: { rating: 5 }) %>
@@ -4,38 +4,25 @@ import StarRating from '../_star_rating'
4
4
 
5
5
  const StarRatingDefault = (props) => (
6
6
  <>
7
- <StarRating
8
- paddingBottom="xs"
9
- {...props}
10
- />
7
+ <StarRating />
11
8
 
9
+ <br />
12
10
 
13
11
  <StarRating
14
- paddingBottom="xs"
15
- rating={0.9}
12
+ rating={3}
16
13
  {...props}
17
14
  />
18
15
 
19
- <StarRating
20
- paddingBottom="xs"
21
- rating={1.5}
22
- {...props}
23
- />
16
+ <br />
24
17
 
25
18
  <StarRating
26
- paddingBottom="xs"
27
- rating={3}
19
+ rating={1.5}
28
20
  {...props}
29
21
  />
30
22
 
31
- <StarRating
32
- paddingBottom="xs"
33
- rating={4.2}
34
- {...props}
35
- />
23
+ <br />
36
24
 
37
25
  <StarRating
38
- paddingBottom="xs"
39
26
  rating={5}
40
27
  {...props}
41
28
  />
@@ -1,3 +1 @@
1
- <%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
2
- <%= pb_rails("star_rating", props: { rating: 3, layout_option: "number", padding_bottom: "xs" }) %>
3
- <%= pb_rails("star_rating", props: { rating: 3, layout_option: "onestar", padding_bottom: "xs" }) %>
1
+ <%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>
@@ -3,30 +3,13 @@ import React from 'react'
3
3
  import StarRating from '../_star_rating'
4
4
 
5
5
  const StarRatingHide = (props) => (
6
- <>
7
6
 
8
- <StarRating
9
- paddingBottom="xs"
10
- rating={3}
11
- {...props}
12
- />
7
+ <StarRating
8
+ hideRating
9
+ rating={3.5}
10
+ {...props}
11
+ />
13
12
 
14
-
15
- <StarRating
16
- layoutOption={"number"}
17
- paddingBottom="xs"
18
- rating={3}
19
- {...props}
20
- />
21
-
22
- <StarRating
23
- layoutOption={"onestar"}
24
- paddingBottom="xs"
25
- rating={3}
26
- {...props}
27
- />
28
-
29
- </>
30
13
  )
31
14
 
32
15
  export default StarRatingHide
@@ -1,16 +1,9 @@
1
1
  examples:
2
+
2
3
  rails:
3
- - star_rating_default: Default
4
- - star_rating_color_options: Color Options
5
- - star_rating_background_options: Background Options
6
- - star_rating_hide: Layout Options
7
- - star_rating_number_config: Number Config
8
- - star_rating_size_options: Size Options
4
+ - star_rating_default: Default
5
+ - star_rating_hide: Hide Rating Value
9
6
 
10
7
  react:
11
- - star_rating_default: Default
12
- - star_rating_color_options: Color Options
13
- - star_rating_background_options: Background Options
14
- - star_rating_hide: Layout Options
15
- - star_rating_number_config: Number Config
16
- - star_rating_size_options: Size Options
8
+ - star_rating_default: Default
9
+ - star_rating_hide: Hide Rating Value
@@ -1,11 +1,3 @@
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
-
5
- export { default as StarRatingBackgroundOptions } from './_star_rating_background_options.jsx'
6
-
7
3
  export { default as StarRatingHide } from './_star_rating_hide.jsx'
8
-
9
- export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
10
-
11
- export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'
@@ -1,53 +1,31 @@
1
1
  <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname) do %>
5
- <% if layout_option == "number" %>
6
- <% case object.size %>
7
- <% when "xs", "sm" %>
8
- <%= pb_rails("caption", props: { text: object.rating,
9
- size: "sm",
10
- classname: "pb_star_rating_number_#{size}",
11
- dark: dark,
12
- padding_right: "xxs" }) %>
13
- <% when "md" %>
14
- <%= pb_rails("body", props: { text: object.rating,
15
- dark: dark,
16
- classname: "pb_star_rating_number_#{size}",
17
- padding_right: "xxs" }) %>
18
- <% when "lg" %>
19
- <%= pb_rails("title", props: { text: object.rating,
20
- size: 2,
21
- dark: dark,
22
- classname: "pb_star_rating_number_#{size}",
23
- padding_right: "sm" }) %>
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname) do %>
5
+ <%# Rating value %>
6
+ <% if !object.hide_rating %>
7
+ <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
24
8
  <% end %>
25
- <% end %>
26
- <%= pb_rails("flex", props: { }) do %>
27
- <% object.star_count.times do %>
28
- <%= pb_rails("icon", props: { classname: "#{star_color} pb_star_#{size}" , custom_icon: Playbook::Engine.root.join(star_svg_path) } ) %>
29
- <% end %>
30
- <% object.empty_stars.times do %>
31
- <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size}", custom_icon: Playbook::Engine.root.join(background_star_path) } ) %>
32
- <% end %>
33
- <% end %>
34
- <% if layout_option == "onestar" %>
35
- <%= content_tag(:div, class: "pb_star_rating_number_#{size}") do %>
36
- <% case object.size %>
37
- <% when "xs", "sm" %>
38
- <%= pb_rails("caption", props: { text: "#{object.rating} of #{object.denominator}",
39
- size: "sm",
40
- dark: dark,
41
- padding_left: "xxs" }) %>
42
- <% when "md" %>
43
- <%= pb_rails("body", props: { text: "#{object.rating} of #{object.denominator}",
44
- dark: dark,
45
- padding_left: "xxs" }) %>
46
- <% when "lg" %>
47
- <%= pb_rails("title", props: { text: "#{object.rating} of #{object.denominator}",
48
- size: 2,
49
- dark: dark }) %>
9
+
10
+ <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
11
+ <%# Gold stars generated by rating value %>
12
+ <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
13
+ <% object.star_count.times do %>
14
+ <%= pb_rails("icon", props: { icon: "star" }) %>
15
+ <% end %>
16
+ <% unless object.star_full %>
17
+ <%= pb_rails("icon", props: { icon: "star-half" }) %>
18
+ <% end %>
19
+ <% 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" }) %>
50
28
  <% end %>
29
+
51
30
  <% end %>
52
- <% end %>
53
31
  <% end %>
@@ -3,94 +3,18 @@
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
+
6
9
  prop :rating, type: Playbook::Props::Numeric,
7
10
  default: 0
8
11
 
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],
18
- default: "yellow"
19
-
20
- prop :size, type: Playbook::Props::Enum,
21
- values: %w[xs sm md lg],
22
- default: "sm"
23
-
24
- prop :background_type, type: Playbook::Props::Enum,
25
- values: %w[fill outline],
26
- default: "fill"
27
-
28
12
  def star_count
29
- rating.floor > denominator_style ? denominator_style : rating.floor
30
- end
31
-
32
- def denominator_style
33
- layout_option == "onestar" ? 1 : denominator
34
- end
35
-
36
- def empty_stars
37
- (denominator_style - rating.floor).negative? ? 0 : denominator_style - rating.floor
38
- end
39
-
40
- def star_color
41
- case color_option
42
- when "yellow"
43
- "yellow_star"
44
- when "primary"
45
- "primary_star"
46
- when "subtle"
47
- dark ? "suble_star_dark" : "suble_star_light"
48
- end
49
- end
50
-
51
- def background_star_color
52
- if background_type === "outline"
53
- dark ? "outline_empty_star_dark" : "outline_empty_star_light"
54
- else
55
- dark ? "empty_star_dark" : "empty_star_light"
56
- end
57
- end
58
-
59
- def svg_size
60
- sizes = { "xs": "pb_star_xs",
61
- "sm": "pb_star_sm",
62
- "md": "pb_star_md",
63
- "lg": "pb_star_lg" }
64
- sizes[size.to_sym]
65
- end
66
-
67
- def svg_class
68
- "pb_star_#{size}"
69
- end
70
-
71
- def background_star_path
72
- if background_type === "outline"
73
- "app/pb_kits/playbook/pb_star_rating/stars/star_outline.svg"
74
- else
75
- "app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg"
76
- end
13
+ rating.floor
77
14
  end
78
15
 
79
- def star_svg_path
80
- case color_option
81
- when "yellow"
82
- "app/pb_kits/playbook/pb_star_rating/stars/yellow_star.svg"
83
- when "primary"
84
- "app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg"
85
- when "subtle"
86
- if dark == true
87
- "app/pb_kits/playbook/pb_star_rating/stars/subtle_dark_star.svg"
88
- else
89
- "app/pb_kits/playbook/pb_star_rating/stars/subtle_star.svg"
90
- end
91
- else
92
- "app/pb_kits/playbook/pb_star_rating/stars/primary_star.svg"
93
- end
16
+ def star_full
17
+ (rating.to_f % 1).zero?
94
18
  end
95
19
 
96
20
  def classname