playbook_ui 13.12.0.pre.alpha.play900startratingasinput1543 → 13.12.0.pre.alpha.play900startratingasinput1612

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
  3. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
  4. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
  5. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
  6. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
  7. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
  8. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
  9. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
  10. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
  11. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
  12. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +50 -52
  13. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +63 -31
  14. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +39 -42
  15. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +5 -12
  16. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +5 -4
  17. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
  18. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
  19. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
  20. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
  21. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
  22. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
  23. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
  24. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
  25. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
  26. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
  27. data/lib/playbook/version.rb +1 -1
  28. metadata +18 -3
  29. data/app/pb_kits/playbook/pb_star_rating/star.svg +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2daeb37609ca6ef566bc397c5088084ebac5857f79f989201bbd33c538e1e35a
4
- data.tar.gz: 853196b395dd63bf09b59d8374bb7784d3339cbf3d4e11197daccaca6b76426f
3
+ metadata.gz: 3b90330bfe6cb188da22c83d743c53b85d4906b6606052e2c157fb6ed76b19b6
4
+ data.tar.gz: b24b4d58c99b4dc61863a4f6845c7b64001b1d1c68aa2b9cd1873307d182de9f
5
5
  SHA512:
6
- metadata.gz: 57caaf48d216427e283dcd3fd6067c8cd5e9361e60cda1044c978f2210ef4bc1144359297a1e8abfe62a2555991fcf5d6e4f566acfc074a0a6872a896c2901fa
7
- data.tar.gz: 3706eb8a4ed554d67f5cea0087ada781752d9a158cda4c5f952631a444a2dbc8a10af929f5e1561a4a68609641043f95c90850b5256ae48daa4e17ff946bd9c0
6
+ metadata.gz: 5fac6891a0bd6fe16224f3b6319ade251567ff5e617fb4a0022ef90e5969a883e1a08d7a030bb931ccc922a726d706f23bc7294332a1a5133a2549ad24d1d292
7
+ data.tar.gz: 3461691e90464afb2ccb7ec68af97e76bacd36021c3d1a76482ede27ea813f04ac0fed5b60a7068ea19d966e1310e16478b24075805be989218d82a8ef8540d1
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md ADDED
@@ -0,0 +1,11 @@
1
+ ![mulitple-users-default](https://github.com/powerhome/playbook/assets/92755007/73dffd55-14f7-468e-b6ea-4e700980183d)
2
+
3
+ ```swift
4
+
5
+ let twoUsers = [andrew, picAndrew]
6
+
7
+ PBDoc(title: "xSmall") {
8
+ PBMultipleUsers(users: twoUsers, size: .xSmall)
9
+ }
10
+
11
+ ```
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md ADDED
@@ -0,0 +1,7 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Users** | `[PBUser]` | Sets the user's avatars | | |
5
+ | **Size** | `AvatarSize` | Changes the size of the avatars | `.small` | `.xSmall` `.small` |
6
+ | **Reversed** | `Bool` | Changes the order of the avatars | `false` | `true` `false` |
7
+ | **Max Displayed Users** | `Int` | Limits the number of avatars displayed | `4` | |
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md ADDED
@@ -0,0 +1,13 @@
1
+ ![multiple-users-reverse](https://github.com/powerhome/playbook/assets/92755007/be3f6f7d-f699-40f2-bbb6-8a99144a8744)
2
+
3
+ ```swift
4
+
5
+ let multipleUsers = [andrew, picAndrew, andrew, andrew]
6
+ let twoUsers = [andrew, picAndrew]
7
+
8
+ VStack(alignment: .leading, spacing: Spacing.small) {
9
+ PBMultipleUsers(users: multipleUsers, size: .small, reversed: true)
10
+ PBMultipleUsers(users: twoUsers, size: .small, reversed: true)
11
+ }
12
+
13
+ ```
data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md ADDED
@@ -0,0 +1,11 @@
1
+ ![mulitple-users-size](https://github.com/powerhome/playbook/assets/92755007/5c15b862-fb32-4e0a-a826-bc25b1db555e)
2
+
3
+ ```swift
4
+
5
+ let multipleUsers = [andrew, picAndrew, andrew, andrew]
6
+
7
+ PBDoc(title: "Small") {
8
+ PBMultipleUsers(users: multipleUsers, size: .small)
9
+ }
10
+
11
+ ```
data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml CHANGED
@@ -10,3 +10,9 @@ examples:
10
10
  - multiple_users_default: Default
11
11
  - multiple_users_reverse: Reverse
12
12
  - multiple_users_size: Size
13
+
14
+ swift:
15
+ - multiple_users_default_swift: Default
16
+ - multiple_users_reverse_swift: Reverse
17
+ - multiple_users_size_swift: Small
18
+ - multiple_users_props_swift: ""
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md ADDED
@@ -0,0 +1,15 @@
1
+ ![mulitple-users-stacked-default](https://github.com/powerhome/playbook/assets/92755007/180e1275-3eb6-4b28-b1ef-bdde45ab3c2e)
2
+
3
+ ```swift
4
+
5
+ let oneUser = [andrew]
6
+ let twoUsers = [andrew, picAndrew]
7
+ let multipleUsers = [andrew, picAndrew, andrew, andrew]
8
+
9
+ HStack(spacing: Spacing.xSmall) {
10
+ PBMultipleUsersStacked(users: oneUser, size: .default)
11
+ PBMultipleUsersStacked(users: twoUsers, size: .default)
12
+ PBMultipleUsersStacked(users: multipleUsers, size: .default)
13
+ }
14
+
15
+ ```
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md ADDED
@@ -0,0 +1,5 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **Users** | `[PBUser]` | Sets the user's avatars | | |
5
+ | **Size** | `Size` | Changes the size of the avatars | `.small` | `.default` `.small` `.xSmall` |
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md ADDED
@@ -0,0 +1,15 @@
1
+ ![mulitple-users-stacked-small](https://github.com/powerhome/playbook/assets/92755007/277fd685-6302-462e-a02a-18a8fcb57715)
2
+
3
+ ```swift
4
+
5
+ let oneUser = [andrew]
6
+ let twoUsers = [andrew, picAndrew]
7
+ let multipleUsers = [andrew, picAndrew, andrew, andrew]
8
+
9
+ HStack(spacing: Spacing.xSmall) {
10
+ PBMultipleUsersStacked(users: oneUser)
11
+ PBMultipleUsersStacked(users: twoUsers)
12
+ PBMultipleUsersStacked(users: multipleUsers)
13
+ }
14
+
15
+ ```
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md ADDED
@@ -0,0 +1,15 @@
1
+ ![mulitple-users-stacked-xsmall](https://github.com/powerhome/playbook/assets/92755007/4f31976f-a41b-4923-9230-5015f6ad75f8)
2
+
3
+ ```swift
4
+
5
+ let oneUser = [andrew]
6
+ let twoUsers = [andrew, picAndrew]
7
+ let multipleUsers = [andrew, picAndrew, andrew, andrew]
8
+
9
+ HStack(spacing: Spacing.xSmall) {
10
+ PBMultipleUsersStacked(users: oneUser, size: .xSmall)
11
+ PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
12
+ PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
13
+ }
14
+
15
+ ```
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml CHANGED
@@ -6,3 +6,9 @@ examples:
6
6
 
7
7
  react:
8
8
  - multiple_users_stacked_default: Default
9
+
10
+ swift:
11
+ - multiple_users_stacked_default_swift: Default
12
+ - multiple_users_stacked_small_swift: Small
13
+ - multiple_users_stacked_xsmall_swift: xSmall
14
+ - multiple_users_stacked_props_swift: ""
data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss CHANGED
@@ -10,86 +10,84 @@
10
10
 
11
11
  path {
12
12
  &.suble_star_dark {
13
- fill: $text_dk_default; // Replace "red" with your desired color
13
+ fill: $text_dk_default;
14
14
  }
15
15
  &.suble_star_light {
16
- fill: #242B42; // Replace "red" with your desired color
16
+ fill: $text_lt_default;
17
17
  }
18
18
  &.outline_star_dark {
19
- stroke: $text_dk_lighter; // Replace "red" with your desired color
19
+ stroke: $text_dk_lighter;
20
20
  }
21
21
  &.outline_star_light {
22
- stroke: #C1CDD6; // Replace "red" with your desired color
22
+ stroke: $text_lt_lighter;
23
23
  }
24
24
  &.empty_star_dark {
25
- fill: $border_dark; // Replace "red" with your desired color
25
+ fill: $border_dark;
26
26
  }
27
27
  &.empty_star_light {
28
- fill: #E4E8F0; // Replace "red" with your desired color
28
+ fill: $border_light;
29
29
  }
30
30
  }
31
31
 
32
- .number_rails_xs {
33
- height: 22px !important;
34
- }
35
-
36
- .number_rails_sm {
37
- height: 22px !important;
38
- }
39
-
40
- .number_rails_md {
41
- height: 26px;
42
- }
43
-
44
- .number_rails_lg {
45
- height: 38px;
46
- }
47
-
48
- .pb_star_rating_wrapper {
49
- display: flex;
50
- }
51
-
52
32
  .pb_star_rating_number_xs {
53
- max-height: 16px;
33
+ max-height: 14px;
54
34
  }
55
35
 
56
36
  .pb_star_rating_number_sm {
57
- max-height: 16px;
37
+ max-height: 14px;
58
38
  }
59
39
 
60
40
  .pb_star_rating_number_md {
61
- max-height: 32px;
41
+ max-height: 24px;
62
42
  }
63
43
 
64
44
  .pb_star_rating_number_lg {
65
- max-height: 56px;
66
- }
67
-
68
- .pb_star_xs {
69
- display: flex;
70
- align-items: center;
71
- justify-content: center;
72
- padding-right: 4px;
45
+ max-height: 40px;
46
+ height: 29px;
73
47
  }
74
48
 
75
- .pb_star_sm {
76
- display: flex;
77
- align-items: center;
78
- justify-content: center;
79
- padding-right: 4px;
49
+ $star-styles: (
50
+ pb_star_xs: (font-size: 14px, padding-right: 4px),
51
+ pb_star_sm: (font-size: 16px, padding-right: 4px),
52
+ pb_star_md: (font-size: 24px, padding-right: 6px),
53
+ pb_star_lg: (font-size: 48px, padding-right: 12px)
54
+ );
55
+
56
+ @each $class, $styles in $star-styles {
57
+ .#{$class} {
58
+ @each $property, $value in $styles {
59
+ #{$property}: $value;
60
+ }
61
+ }
80
62
  }
81
63
 
82
- .pb_star_md {
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- padding-right: 6px;
64
+ $star-container: (
65
+ pb_star_container_xs: (font-size: 14px ),
66
+ pb_star_container_sm: (font-size: 16px ),
67
+ pb_star_container_md: (font-size: 24px ),
68
+ pb_star_container_lg: (font-size: 48px )
69
+ );
70
+
71
+ @each $class, $styles in $star-container {
72
+ .#{$class} {
73
+ @each $property, $value in $styles {
74
+ #{$property}: $value;
75
+ }
76
+ }
87
77
  }
88
78
 
89
- .pb_star_lg {
90
- display: flex;
91
- align-items: center;
92
- justify-content: center;
93
- padding-right: 12px;
79
+ $star-padding: (
80
+ pb_star_padding_xs: (padding-right: 4px),
81
+ pb_star_padding_sm: (padding-right: 4px),
82
+ pb_star_padding_md: (padding-right: 6px),
83
+ pb_star_padding_lg: (padding-right: 12px)
84
+ );
85
+
86
+ @each $class, $styles in $star-padding {
87
+ .#{$class} {
88
+ @each $property, $value in $styles {
89
+ #{$property}: $value;
90
+ }
91
+ }
94
92
  }
95
93
  }
data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx CHANGED
@@ -5,6 +5,8 @@ import { buildAriaProps, buildDataProps } from "../utilities/props"
5
5
  import Caption from '../pb_caption/_caption'
6
6
  import Body from '../pb_body/_body'
7
7
  import Title from '../pb_title/_title'
8
+ import Icon from '../pb_icon/_icon'
9
+ import Flex from '../pb_flex/_flex'
8
10
 
9
11
  type StarRatingProps = {
10
12
  aria?: {[key: string]: string},
@@ -42,47 +44,45 @@ const StarRating = ({
42
44
  const denominatorStyle = layoutOption === "onestar" ? 1 : denominator
43
45
  const activeStars = Math.round(rating) > denominatorStyle ? denominatorStyle : Math.round(rating)
44
46
  const emptyStars = denominatorStyle - Math.round(rating) < 0 ? 0 : denominatorStyle - Math.round(rating)
45
- let svgSize
47
+ let iconSize = ""
46
48
 
47
49
  if (size === 'xs') {
48
- svgSize = 14;
50
+ iconSize = "pb_star_xs"
49
51
  } else if (size === 'sm') {
50
- svgSize = 16;
52
+ iconSize = "pb_star_sm"
51
53
  } else if (size === 'md') {
52
- svgSize = 24;
54
+ iconSize = "pb_star_md"
53
55
  } else if (size === 'lg') {
54
- svgSize = 48;
55
- } else {
56
- svgSize = 16;
56
+ iconSize = "pb_star_lg"
57
57
  }
58
58
 
59
59
  const starYellow = (
60
- <svg width={svgSize} height={svgSize} viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
60
+ <svg className="iamyellow" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
61
61
  <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"/>
62
62
  </svg>
63
63
  )
64
64
 
65
65
  const starPrimary = (
66
- <svg width={svgSize} height={svgSize} viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
66
+ <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
67
67
  <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"/>
68
68
  </svg>
69
69
  );
70
70
 
71
71
  const starSubtle = (
72
- <svg width={svgSize} height={svgSize} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
73
- <path fill={dark === true ? "#FFFFFF" : "#242B42"} 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 viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
73
+ <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" />
74
74
  </svg>
75
75
  );
76
76
 
77
77
  const starBackground = (
78
- <svg width={svgSize} height={svgSize} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
79
- <path fill={dark === true ? "#CECDD3" : "#E4E8F0"} 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 viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
79
+ <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" />
80
80
  </svg>
81
81
  )
82
82
 
83
83
  const starOutline = (
84
- <svg width={svgSize} height={svgSize} fill="none" xmlns="http://www.w3.org/2000/svg">
85
- <path stroke={dark === true ? "rgba(255,255,255,0.4)" : "#C1CDD6"} 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 viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
85
+ <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"/>
86
86
  </svg>
87
87
  )
88
88
 
@@ -94,13 +94,14 @@ const StarRating = ({
94
94
  id={id}
95
95
  >
96
96
  {layoutOption === "number" && (
97
- <div className={`pb_star_rating_number_${size}`}>
97
+ <>
98
98
  {size === 'xs' && (
99
99
  <Caption
100
100
  text={rating.toString()}
101
101
  size="xs"
102
102
  paddingRight="xs"
103
103
  dark={dark}
104
+ className="pb_star_rating_number_sm"
104
105
  />
105
106
  )}
106
107
  {size === 'sm' && (
@@ -109,6 +110,7 @@ const StarRating = ({
109
110
  size="xs"
110
111
  paddingRight="xs"
111
112
  dark={dark}
113
+ className="pb_star_rating_number_sm"
112
114
  />
113
115
  )}
114
116
  {size === 'md' && (
@@ -116,6 +118,7 @@ const StarRating = ({
116
118
  text={rating.toString()}
117
119
  paddingRight="xs"
118
120
  dark={dark}
121
+ className="pb_star_rating_number_md"
119
122
  />
120
123
  )}
121
124
  {size === 'lg' && (
@@ -124,45 +127,71 @@ const StarRating = ({
124
127
  size={2}
125
128
  paddingRight="sm"
126
129
  dark={dark}
130
+ className="pb_star_rating_number_lg"
127
131
  />
128
132
  )}
129
- </div>
133
+ </>
130
134
  )}
131
- <div className={`pb_star_rating_wrapper ${layoutOption}`}>
135
+ <Flex className="star_flex_area">
132
136
  {[...Array(activeStars)].map((_, index) => (
133
- <div className={`pb_star_${size}`} key={index}>
137
+ <React.Fragment key={index}>
134
138
  {colorOption === 'yellow' && (
135
- starYellow
139
+ <Icon
140
+ // @ts-ignore
141
+ customIcon={starYellow}
142
+ className={iconSize}
143
+ />
136
144
  ) }
137
145
  {colorOption === 'primary' && (
138
- starPrimary
146
+ <Icon
147
+ // @ts-ignore
148
+ customIcon={starPrimary}
149
+ className={iconSize}
150
+ />
139
151
  ) }
140
152
  {colorOption === 'outline' && (
141
- starPrimary
153
+ <Icon
154
+ // @ts-ignore
155
+ customIcon={starPrimary}
156
+ className={iconSize}
157
+ />
142
158
  ) }
143
159
  {colorOption === 'subtle' && (
144
- starSubtle
160
+ <Icon
161
+ // @ts-ignore
162
+ customIcon={starSubtle}
163
+ className={iconSize}
164
+ />
145
165
  ) }
146
- </div>
166
+ </React.Fragment>
147
167
  ))}
148
168
  {[...Array(emptyStars)].map((_, index) => (
149
- <div className={`pb_star_${size}`} key={index}>
169
+ <React.Fragment key={index}>
150
170
  {colorOption === 'outline' && (
151
- starOutline
171
+ <Icon
172
+ // @ts-ignore
173
+ customIcon={starOutline}
174
+ className={iconSize}
175
+ />
152
176
  ) }
153
177
  {colorOption !== 'outline' && (
154
- starBackground
178
+ <Icon
179
+ // @ts-ignore
180
+ customIcon={starBackground}
181
+ className={iconSize}
182
+ />
155
183
  ) }
156
- </div>
184
+ </React.Fragment>
157
185
  ))}
158
- </div>
186
+ </Flex>
159
187
  {layoutOption === "onestar" && (
160
- <div className={`pb_star_rating_number_${size}`}>
188
+ <>
161
189
  {size === 'xs' && (
162
190
  <Caption
163
191
  text={`${rating.toString()} of ${denominator}`}
164
192
  size="xs"
165
193
  dark={dark}
194
+ className="pb_star_rating_number_sm"
166
195
  />
167
196
  )}
168
197
  {size === 'sm' && (
@@ -170,12 +199,14 @@ const StarRating = ({
170
199
  text={`${rating.toString()} of ${denominator}`}
171
200
  size="xs"
172
201
  dark={dark}
202
+ className="pb_star_rating_number_sm"
173
203
  />
174
204
  )}
175
205
  {size === 'md' && (
176
206
  <Body
177
207
  text={`${rating.toString()} of ${denominator}`}
178
208
  dark={dark}
209
+ className="pb_star_rating_number_md"
179
210
  />
180
211
  )}
181
212
  {size === 'lg' && (
@@ -183,9 +214,10 @@ const StarRating = ({
183
214
  text={`${rating.toString()} of ${denominator}`}
184
215
  size={2}
185
216
  dark={dark}
217
+ className="pb_star_rating_number_lg"
186
218
  />
187
219
  )}
188
- </div>
220
+ </>
189
221
  )}
190
222
  </div>
191
223
  )
data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb CHANGED
@@ -4,53 +4,51 @@
4
4
  class: object.classname) do %>
5
5
  <%# Rating value %>
6
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,
7
+ <% case object.size %>
8
+ <% when "xs", "sm" %>
9
+ <%= pb_rails("caption", props: { text: object.rating,
10
+ size: "sm",
11
+ classname: "pb_star_rating_number_#{size}",
21
12
  dark: dark,
22
- padding_right: "sm" }) %>
23
- <% end %>
13
+ padding_right: "xxs" }) %>
14
+ <% when "md" %>
15
+ <%= pb_rails("body", props: { text: object.rating,
16
+ dark: dark,
17
+ classname: "pb_star_rating_number_#{size}",
18
+ padding_right: "xxs" }) %>
19
+ <% when "lg" %>
20
+ <%= pb_rails("title", props: { text: object.rating,
21
+ size: 2,
22
+ dark: dark,
23
+ classname: "pb_star_rating_number_#{size}",
24
+ padding_right: "sm" }) %>
24
25
  <% end %>
25
26
  <% end %>
26
- <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
27
- <%# Gold stars generated by rating value %>
28
- <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
29
- <% object.star_count.times do %>
30
- <svg width="<%= svg_size %>" class="<%= %>" 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 class="<%= 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>
40
- <% end %>
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 class="<%= 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 class="<%= 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>
27
+ <%= pb_rails("flex", props: {classname: svg_size }) do %>
28
+ <% object.star_count.times do %>
29
+ <svg class="<%= "pb_star_padding_#{size}" %>" width="100%" height="1em" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
30
+ <% case object.color_option %>
31
+ <% when "yellow"%>
32
+ <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"/>
33
+ <% when "primary", "outline" %>
34
+ <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"/>
35
+ <% when "subtle"%>
36
+ <path class="<%= 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" />
49
37
  <% end %>
38
+ </svg>
39
+ <% end %>
40
+ <% object.empty_stars.times do %>
41
+ <svg class="<%= "pb_star_padding_#{size}" %>" width="100%" height="1em" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
42
+ <% if object.color_option == "outline" %>
43
+ <path class="<%= 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" />
44
+ <% else %>
45
+ <path class="<%= 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" />
46
+ <% end %>
47
+ </svg>
50
48
  <% end %>
51
49
  <% end %>
52
50
  <% if layout_option == "onestar" %>
53
- <%= content_tag(:div, class: "number_rails_#{size}") do %>
51
+ <%= content_tag(:div, class: "pb_star_rating_number_#{size}") do %>
54
52
  <% case object.size %>
55
53
  <% when "xs", "sm" %>
56
54
  <%= pb_rails("caption", props: { text: "#{object.rating} of #{object.denominator}",
@@ -64,8 +62,7 @@
64
62
  <% when "lg" %>
65
63
  <%= pb_rails("title", props: { text: "#{object.rating} of #{object.denominator}",
66
64
  size: 2,
67
- dark: dark,
68
- padding_left: "sm" }) %>
65
+ dark: dark }) %>
69
66
  <% end %>
70
67
  <% end %>
71
68
  <% end %>
data/app/pb_kits/playbook/pb_star_rating/star_rating.rb CHANGED
@@ -46,18 +46,11 @@ module Playbook
46
46
  end
47
47
 
48
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
49
+ sizes = { "sx": "pb_star_xs",
50
+ "sm": "pb_star_sm",
51
+ "md": "pb_star_md",
52
+ "lg": "pb_star_lg" }
53
+ sizes[size.to_sym]
61
54
  end
62
55
 
63
56
  def classname
data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js CHANGED
@@ -37,12 +37,13 @@ describe("Star Rating Kit", () => {
37
37
  data={{ testid: testId }}
38
38
  denominator={4}
39
39
  rating={2}
40
+ size="xs"
40
41
  />
41
42
  )
42
43
 
43
44
  const kit = screen.getByTestId(testId)
44
- const highlight = kit.querySelector(".pb_star_rating_wrapper")
45
- const stars = highlight.querySelectorAll(".pb_star_sm")
45
+ const highlight = kit.querySelector(".star_flex_area")
46
+ const stars = highlight.querySelectorAll(".pb_star_xs")
46
47
  const count = stars.length
47
48
 
48
49
  expect(count).toBe(4)
@@ -59,12 +60,12 @@ describe("Star Rating Kit", () => {
59
60
  )
60
61
 
61
62
  const kit = screen.getByTestId(testId)
62
- const highlight = kit.querySelector(".pb_star_rating_wrapper")
63
+ const highlight = kit.querySelector(".star_flex_area")
63
64
  const title = kit.querySelector(".pb_star_rating_number_lg")
64
65
  const stars = highlight.querySelectorAll(".pb_star_lg")
65
66
  const count = stars.length
66
67
 
67
- expect(title.className).toBe("pb_star_rating_number_lg")
68
+ expect(title.className).toBe("pb_title_kit_size_2 pr_sm pb_star_rating_number_lg")
68
69
  expect(count).toBe(5)
69
70
  })
70
71
  })
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md ADDED
@@ -0,0 +1,35 @@
1
+ ![text-input-add-on](https://github.com/powerhome/playbook/assets/92755007/65a28e6a-9e65-4ca1-af8d-91dae6eac4f5)
2
+
3
+ ```swift
4
+
5
+ PBTextInput(
6
+ "ADD ON WITH DEFAULTS",
7
+ text: $textAddOn,
8
+ style: .rightIcon(.user, divider: true)
9
+ )
10
+
11
+ PBTextInput(
12
+ "RIGHT-ALIGNED ADD ON WITH BORDER",
13
+ text: $textAddOnRight,
14
+ style: .rightIcon(.user, divider: true)
15
+ )
16
+
17
+ PBTextInput(
18
+ "RIGHT-ALIGNED ADD ON WITH NO BORDER",
19
+ text: $textAddOnRightNoBorder,
20
+ style: .rightIcon(.user, divider: false)
21
+ )
22
+
23
+ PBTextInput(
24
+ "LEFT-ALIGNED ADD ON WITH NO BORDER",
25
+ text: $textAddOnLeft,
26
+ style: .leftIcon(.user, divider: false)
27
+ )
28
+
29
+ PBTextInput(
30
+ "LEFT-ALIGNED ADD ON WITH BORDER",
31
+ text: $textAddOnLeftNoBorder,
32
+ style: .leftIcon(.user, divider: true)
33
+ )
34
+
35
+ ```
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md ADDED
@@ -0,0 +1,29 @@
1
+ ![text-input-default](https://github.com/powerhome/playbook/assets/92755007/625a246e-9d5c-42ea-8c6e-7afcf0984c9a)
2
+
3
+
4
+ ```swift
5
+
6
+ @State private var textFirstName: String = ""
7
+ @State private var textLastName: String = ""
8
+ @State private var textPhone: String = ""
9
+
10
+ PBTextInput(
11
+ "First name",
12
+ text: $textFirstName,
13
+ placeholder: "Enter first name"
14
+ )
15
+
16
+ PBTextInput(
17
+ "Last name",
18
+ text: $textLastName,
19
+ placeholder: "Enter last name"
20
+ )
21
+
22
+ PBTextInput(
23
+ "Phone number",
24
+ text: $textPhone,
25
+ placeholder: "Enter phone number",
26
+ keyboardType: .phonePad
27
+ )
28
+
29
+ ```
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md ADDED
@@ -0,0 +1,13 @@
1
+ ![text-input-disabled](https://github.com/powerhome/playbook/assets/92755007/0e08256e-dd76-4528-b748-826f38bbe6a0)
2
+
3
+
4
+ ```swift
5
+
6
+ PBTextInput(
7
+ "Last name",
8
+ text: $textDisabled,
9
+ placeholder: "Enter last name",
10
+ style: .disabled
11
+ )
12
+
13
+ ```
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md ADDED
@@ -0,0 +1,24 @@
1
+ ![text-input-error](https://github.com/powerhome/playbook/assets/92755007/7c664f75-1d7a-4a94-bc59-6f845a68ce19)
2
+
3
+
4
+ ```swift
5
+
6
+ @State private var textError: String = ""
7
+ @State private var textConfirmError: String = ""
8
+
9
+ PBTextInput(
10
+ "Email address",
11
+ text: $textError,
12
+ placeholder: "Enter email address",
13
+ error: (true, "Insert a valid email"),
14
+ style: .leftIcon(.user, divider: true)
15
+ )
16
+
17
+ PBTextInput(
18
+ "Confirm email address",
19
+ text: $textConfirmError,
20
+ placeholder: "Confirm email address",
21
+ style: .leftIcon(.user, divider: true)
22
+ )
23
+
24
+ ```
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md ADDED
@@ -0,0 +1,13 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **title** | `String` | Adds a title | `nil` | |
5
+ | **placeholder** | `String` | Adds placeholder text | `""` | |
6
+ | **error** | `(Bool, String)` | Changes the style of the Text Input | `nil` | |
7
+ | **style** | `Style` | Changes the style of the Text Input | `.default` | `.default` `.rightIcon` `.leftIcon` `.inline` `.disabled` |
8
+ | **onChange** | `Bool` | Adds an event handler | `nil` | |
9
+ | **keyboardType** | `UIKeyboardType` | Speficies the keyboard type (ios only) | `.default` | |
10
+ | **text** | `String` | Sets the Text Input's text value | | |
11
+ | **selected** | `Bool` | Changes the style of the Text Input | | `true` `false` |
12
+ | **isHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
13
+ | **isIconHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
data/app/pb_kits/playbook/pb_text_input/docs/example.yml CHANGED
@@ -16,3 +16,10 @@ examples:
16
16
  - text_input_add_on: Add On
17
17
  - text_input_inline: Inline
18
18
  - text_input_no_label: No Label
19
+
20
+ swift:
21
+ - text_input_default_swift: Default
22
+ - text_input_error_swift: With Error
23
+ - text_input_disabled_swift: Disabled
24
+ - text_input_add_on_swift: Add On
25
+ - text_input_props_swift: ""
data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md ADDED
@@ -0,0 +1,11 @@
1
+ ![toggle-default](https://github.com/powerhome/playbook/assets/92755007/bd99bd01-d577-4455-b1f9-a88b637e8a60)
2
+
3
+
4
+ ```swift
5
+
6
+ VStack(spacing: Spacing.small) {
7
+ PBToggle(checked: true)
8
+ PBToggle(checked: false)
9
+ }
10
+
11
+ ```
data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md ADDED
@@ -0,0 +1,10 @@
1
+ ![toggle-name](https://github.com/powerhome/playbook/assets/92755007/e45a575c-ab14-4181-a5e8-eb8d1f57ab4d)
2
+
3
+ ```swift
4
+
5
+ VStack(spacing: Spacing.small) {
6
+ PBToggle(label: "car", checked: false)
7
+ PBToggle(label: "bike", checked: false)
8
+ }
9
+
10
+ ```
data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md ADDED
@@ -0,0 +1,6 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **isHovering** | `Bool` | Changes the style of the Toggle | `false` | `true` `false` |
5
+ | **label** | `String` | Adds a label to the Toggle | `nil` | |
6
+ | **checked** | `Bool` | Changes the style of the Toggle | | `true` `false` |
data/app/pb_kits/playbook/pb_toggle/docs/example.yml CHANGED
@@ -13,3 +13,7 @@ examples:
13
13
  - toggle_custom: Custom checkbox input
14
14
  - toggle_custom_radio: Custom radio inputs
15
15
 
16
+ swift:
17
+ - toggle_default_swift: Default State
18
+ - toggle_name_swift: Name and Value
19
+ - toggle_props_swift: ""
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.12.0"
5
- VERSION = "13.12.0.pre.alpha.play900startratingasinput1543"
5
+ VERSION = "13.12.0.pre.alpha.play900startratingasinput1612"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.12.0.pre.alpha.play900startratingasinput1543
4
+ version: 13.12.0.pre.alpha.play900startratingasinput1612
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-11-28 00:00:00.000000000 Z
12
+ date: 2023-12-05 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1564,11 +1564,15 @@ files:
1564
1564
  - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
1565
1565
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.html.erb
1566
1566
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx
1567
+ - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md
1568
+ - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md
1567
1569
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.html.erb
1568
1570
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx
1571
+ - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md
1569
1572
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb
1570
1573
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
1571
1574
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
1575
+ - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
1572
1576
  - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
1573
1577
  - app/pb_kits/playbook/pb_multiple_users/docs/index.js
1574
1578
  - app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb
@@ -1580,6 +1584,10 @@ files:
1580
1584
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
1581
1585
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb
1582
1586
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
1587
+ - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
1588
+ - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
1589
+ - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
1590
+ - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
1583
1591
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
1584
1592
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
1585
1593
  - app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb
@@ -2075,7 +2083,6 @@ files:
2075
2083
  - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx
2076
2084
  - app/pb_kits/playbook/pb_star_rating/docs/example.yml
2077
2085
  - app/pb_kits/playbook/pb_star_rating/docs/index.js
2078
- - app/pb_kits/playbook/pb_star_rating/star.svg
2079
2086
  - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
2080
2087
  - app/pb_kits/playbook/pb_star_rating/star_rating.rb
2081
2088
  - app/pb_kits/playbook/pb_star_rating/star_rating.test.js
@@ -2211,20 +2218,25 @@ files:
2211
2218
  - app/pb_kits/playbook/pb_text_input/docs/_footer.md
2212
2219
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
2213
2220
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
2221
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md
2214
2222
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
2215
2223
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
2216
2224
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
2217
2225
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
2226
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md
2218
2227
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb
2219
2228
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx
2229
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md
2220
2230
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb
2221
2231
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx
2222
2232
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
2233
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md
2223
2234
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
2224
2235
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
2225
2236
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb
2226
2237
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
2227
2238
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
2239
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
2228
2240
  - app/pb_kits/playbook/pb_text_input/docs/example.yml
2229
2241
  - app/pb_kits/playbook/pb_text_input/docs/index.js
2230
2242
  - app/pb_kits/playbook/pb_text_input/text_input.html.erb
@@ -2406,9 +2418,12 @@ files:
2406
2418
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
2407
2419
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb
2408
2420
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
2421
+ - app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md
2409
2422
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb
2410
2423
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
2424
+ - app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md
2411
2425
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb
2426
+ - app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md
2412
2427
  - app/pb_kits/playbook/pb_toggle/docs/example.yml
2413
2428
  - app/pb_kits/playbook/pb_toggle/docs/index.js
2414
2429
  - app/pb_kits/playbook/pb_toggle/toggle.html.erb
data/app/pb_kits/playbook/pb_star_rating/star.svg DELETED
@@ -1,3 +0,0 @@
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>