playbook_ui 12.14.0.pre.alpha.lightboxcurrentphotoprop460 → 12.15.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  5. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +14 -0
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +0 -1
  7. data/app/pb_kits/playbook/pb_card/_card.scss +13 -0
  8. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -2
  9. data/app/pb_kits/playbook/pb_card/card_header.rb +9 -1
  10. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +11 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +169 -139
  12. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +1 -6
  13. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +0 -1
  14. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +0 -1
  15. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx} +18 -22
  17. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +71 -0
  18. data/app/pb_kits/playbook/utilities/_cursor.scss +141 -1
  19. data/app/pb_kits/playbook/utilities/globalProps.ts +5 -2
  20. data/lib/playbook/cursor.rb +2 -2
  21. data/lib/playbook/version.rb +1 -1
  22. metadata +9 -10
  23. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +0 -115
  24. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ea7957ed8d699800c355f334304b484be3773ec1a0c5c21699f9bccf9b3c0a50
4
- data.tar.gz: 694efd1b41b1917430963c58e8cffb427bde2351a49a3293bd81c121be47344a
3
+ metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
4
+ data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
5
5
  SHA512:
6
- metadata.gz: e562d349fbb3dda65376d35efc1cef28bf8f1fdcc7e1028c48ee9ec4ff3943963f8286f81d347cdaf545a5d28fb9d7be03bd78324f0e44a1920dd89ff2731597
7
- data.tar.gz: b8ad8ac157fdbc56d039f4033742cc9707876f15275ab88c5a1a50f7c5b50539916312590a2f1e016b3b84871b16f4a29e577a448cb8733ccab5833eb2661ded
6
+ metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
7
+ data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c
data/app/pb_kits/playbook/pb_avatar/_avatar.tsx CHANGED
@@ -67,7 +67,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
67
67
  >
68
68
  { canShowImage && (
69
69
  <Image
70
- alt={imageAlt}
70
+ alt={imageAlt ? imageAlt : name}
71
71
  onError={handleError}
72
72
  url={imageUrl}
73
73
  />
data/app/pb_kits/playbook/pb_avatar/avatar.html.erb CHANGED
@@ -4,7 +4,7 @@
4
4
  class: object.classname,
5
5
  aria: object.aria) do %>
6
6
  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
7
- <%= pb_rails("image", props: { alt: object.image_alt, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
7
+ <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
8
8
  <% end %>
9
9
  <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
10
10
  <% end %>
data/app/pb_kits/playbook/pb_avatar/avatar.rb CHANGED
@@ -25,6 +25,10 @@ module Playbook
25
25
  { status: status, classname: "size_#{size}" }
26
26
  end
27
27
 
28
+ def alt_text
29
+ image_alt.present? ? image_alt : name
30
+ end
31
+
28
32
  def handle_img_error
29
33
  "this.style.display = 'none'"
30
34
  end
data/app/pb_kits/playbook/pb_avatar/avatar.test.js CHANGED
@@ -28,3 +28,17 @@ test('loads the given image url and name', () => {
28
28
  expect(image).toHaveAttribute('src', imageUrl)
29
29
  expect(image).toHaveAttribute('alt', imageAlt)
30
30
  })
31
+
32
+ test('uses the name prop as the alt property if no imageAlt prop is passed in', () => {
33
+ render(
34
+ <Avatar
35
+ data={{ testid: testId }}
36
+ imageUrl={imageUrl}
37
+ name={name}
38
+ />
39
+ )
40
+
41
+ const image = screen.getByAltText(name)
42
+
43
+ expect(image).toHaveAttribute('alt', name)
44
+ })
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb CHANGED
@@ -1,7 +1,6 @@
1
1
  <%= pb_rails("avatar", props: {
2
2
  name: "Terry Johnson",
3
3
  size: "xxs",
4
- image_alt: "Terry Johnson Standing",
5
4
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
6
5
  status: "away"
7
6
  }) %>
data/app/pb_kits/playbook/pb_card/_card.scss CHANGED
@@ -33,6 +33,19 @@
33
33
  color: lightenText($color_value);
34
34
  }
35
35
  }
36
+ @each $color_name, $color_value in $pb_card_header_colors {
37
+ &[class*=_#{$color_name}_striped] {
38
+ @if ((type-of($color_value) == color)) {
39
+ background: repeating-linear-gradient(
40
+ 45deg,
41
+ $color_value,
42
+ $color_value 10px,
43
+ lighten( $color_value, 5% ) 10px,
44
+ lighten( $color_value, 5% ) 20px
45
+ );
46
+ }
47
+ }
48
+ }
36
49
  &[class*=_white] {
37
50
  border-bottom: 1px solid $border_light;
38
51
  }
data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED
@@ -28,6 +28,7 @@ type CardPropTypes = {
28
28
 
29
29
  type CardHeaderProps = {
30
30
  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
31
+ headerColorStriped?: boolean,
31
32
  children: React.ReactChild[] | React.ReactChild,
32
33
  className?: string,
33
34
  padding?: string,
@@ -41,8 +42,8 @@ type CardBodyProps = {
41
42
 
42
43
  // Header component
43
44
  const Header = (props: CardHeaderProps) => {
44
- const { children, className, headerColor = 'category_1', padding = 'sm' } = props
45
- const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`)
45
+ const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
46
+ const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
46
47
 
47
48
  const headerSpacing = globalProps(props, { padding })
48
49
 
data/app/pb_kits/playbook/pb_card/card_header.rb CHANGED
@@ -5,9 +5,17 @@ module Playbook
5
5
  class CardHeader < Playbook::KitBase
6
6
  prop :header_color, type: Playbook::Props::String,
7
7
  default: "category_1"
8
+ prop :header_color_striped, type: Playbook::Props::Boolean,
9
+ default: false
8
10
 
9
11
  def classname
10
- generate_classname("pb_card_header_kit", header_color)
12
+ generate_classname("pb_card_header_kit", header_color, color_striped_classname)
13
+ end
14
+
15
+ private
16
+
17
+ def color_striped_classname
18
+ header_color_striped ? "striped" : nil
11
19
  end
12
20
  end
13
21
  end
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -57,3 +57,14 @@
57
57
  Body
58
58
  <% end %>
59
59
  <% end %>
60
+
61
+ <%= pb_rails("title", props: { text: "Striped Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
62
+
63
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
64
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_1", header_color_striped: true }) do %>
65
+ <%= pb_rails("body", props: { text: "Striped Category 1", dark: true }) %>
66
+ <% end %>
67
+ <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
68
+ Body
69
+ <% end %>
70
+ <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED
@@ -1,158 +1,188 @@
1
1
  import React from 'react'
2
-
3
2
  import Card from '../_card'
4
3
  import Title from '../../pb_title/_title'
5
4
  import Body from '../../pb_body/_body'
6
5
 
7
6
  const CardHeader = (props) => {
8
- return (
9
- <div>
10
- <Title
11
- {...props}
12
- marginBottom='sm'
13
- size={4}
14
- tag="h4"
15
- text="Category Colors"
16
- />
7
+ return (
8
+ <>
9
+ <Title
10
+ {...props}
11
+ marginBottom='sm'
12
+ size={4}
13
+ tag="h4"
14
+ text="Category Colors"
15
+ />
16
+
17
+ <Card
18
+ {...props}
19
+ marginBottom='sm'
20
+ padding="none"
21
+ >
22
+ <Card.Header headerColor="category_1" >
23
+ <Body
24
+ dark
25
+ text="Category 1"
26
+ />
27
+ </Card.Header>
28
+ <Card.Body>
29
+ <Body
30
+ {...props}
31
+ text="Body"
32
+ />
33
+ </Card.Body>
34
+ </Card>
35
+
36
+ <Card
37
+ {...props}
38
+ marginBottom='sm'
39
+ padding="none"
40
+ >
41
+ <Card.Header
42
+ headerColor="category_3"
43
+ >
44
+ <Body text="Category 3" />
45
+ </Card.Header>
46
+ <Card.Body
47
+ padding="md"
48
+ >
49
+ <Body
50
+ {...props}
51
+ text="Body"
52
+ />
53
+ </Card.Body>
54
+ </Card>
17
55
 
18
- <Card
19
- {...props}
20
- marginBottom='sm'
21
- padding="none"
22
- >
23
- <Card.Header headerColor="category_1" >
24
- <Body
25
- dark
26
- text="Category 1"
27
- />
28
- </Card.Header>
29
- <Card.Body>
30
- <Body
31
- {...props}
32
- text="Body"
33
- />
34
- </Card.Body>
35
- </Card>
36
56
 
37
- <Card
38
- {...props}
39
- marginBottom='sm'
40
- padding="none"
41
- >
42
- <Card.Header
43
- headerColor="category_3"
44
- >
45
- <Body text="Category 3" />
46
- </Card.Header>
47
- <Card.Body
48
- padding="md"
49
- >
50
- <Body
51
- {...props}
52
- text="Body"
53
- />
54
- </Card.Body>
55
- </Card>
57
+ <Title
58
+ {...props}
59
+ marginBottom='sm'
60
+ size={4}
61
+ tag="h4"
62
+ text="Product Colors"
63
+ />
56
64
 
65
+ <Card
66
+ {...props}
67
+ marginBottom='sm'
68
+ padding="none"
69
+ >
70
+ <Card.Header
71
+ headerColor="product_2_background"
72
+ >
73
+ <Body
74
+ {...props}
75
+ dark
76
+ text="Product 2 Background"
77
+ />
78
+ </Card.Header>
79
+ <Card.Body>
80
+ <Body
81
+ {...props}
82
+ text="Body"
83
+ />
84
+ </Card.Body>
85
+ </Card>
57
86
 
58
- <Title
59
- {...props}
60
- marginBottom='sm'
61
- size={4}
62
- tag="h4"
63
- text="Product Colors"
64
- />
87
+ <Card
88
+ {...props}
89
+ marginBottom='sm'
90
+ padding="none"
91
+ >
92
+ <Card.Header headerColor="product_6_background" >
93
+ <Body
94
+ {...props}
95
+ dark
96
+ text="Product 6 Background"
97
+ />
98
+ </Card.Header>
99
+ <Card.Body>
100
+ <Body
101
+ {...props}
102
+ text="Body"
103
+ />
104
+ </Card.Body>
105
+ </Card>
65
106
 
66
- <Card
67
- {...props}
68
- marginBottom='sm'
69
- padding="none"
70
- >
71
- <Card.Header
72
- headerColor="product_2_background"
73
- >
74
- <Body
75
- {...props}
76
- dark
77
- text="Product 2 Background"
78
- />
79
- </Card.Header>
80
- <Card.Body>
81
- <Body
82
- {...props}
83
- text="Body"
84
- />
85
- </Card.Body>
86
- </Card>
87
107
 
88
- <Card
89
- {...props}
90
- marginBottom='sm'
91
- padding="none"
92
- >
93
- <Card.Header headerColor="product_6_background" >
94
- <Body
95
- {...props}
96
- dark
97
- text="Product 6 Background"
98
- />
99
- </Card.Header>
100
- <Card.Body>
101
- <Body
102
- {...props}
103
- text="Body"
104
- />
105
- </Card.Body>
106
- </Card>
108
+ <Title
109
+ {...props}
110
+ marginBottom='sm'
111
+ size={4}
112
+ tag="h4"
113
+ text="Background Colors"
114
+ />
107
115
 
116
+ <Card
117
+ {...props}
118
+ marginBottom='sm'
119
+ padding="none"
120
+ >
121
+ <Card.Header
122
+ headerColor="white"
123
+ >
124
+ <Body text="White" />
125
+ </Card.Header>
126
+ <Card.Body>
127
+ <Body
128
+ {...props}
129
+ text="Body"
130
+ />
131
+ </Card.Body>
132
+ </Card>
108
133
 
109
- <Title
110
- {...props}
111
- marginBottom='sm'
112
- size={4}
113
- tag="h4"
114
- text="Background Colors"
115
- />
134
+ <Card
135
+ {...props}
136
+ marginBottom='sm'
137
+ padding="none"
138
+ >
139
+ <Card.Header
140
+ headerColor="dark"
141
+ >
142
+ <Body
143
+ dark
144
+ text="Dark"
145
+ />
146
+ </Card.Header>
147
+ <Card.Body>
148
+ <Body
149
+ {...props}
150
+ text="Body"
151
+ />
152
+ </Card.Body>
153
+ </Card>
116
154
 
117
- <Card
118
- {...props}
119
- marginBottom='sm'
120
- padding="none"
121
- >
122
- <Card.Header
123
- headerColor="white"
124
- >
125
- <Body text="White" />
126
- </Card.Header>
127
- <Card.Body>
128
- <Body
129
- {...props}
130
- text="Body"
131
- />
132
- </Card.Body>
133
- </Card>
155
+ <Title
156
+ {...props}
157
+ marginBottom='sm'
158
+ size={4}
159
+ tag="h4"
160
+ text="Striped Colors"
161
+ />
134
162
 
135
- <Card
136
- {...props}
137
- padding="none"
138
- >
139
- <Card.Header
140
- headerColor="dark"
141
- >
142
- <Body
143
- dark
144
- text="Dark"
145
- />
146
- </Card.Header>
147
- <Card.Body>
148
- <Body
149
- {...props}
150
- text="Body"
151
- />
152
- </Card.Body>
153
- </Card>
154
- </div>
155
- )
163
+ <Card
164
+ {...props}
165
+ marginBottom='sm'
166
+ padding="none"
167
+ >
168
+ <Card.Header
169
+ headerColor="category_1"
170
+ headerColorStriped
171
+ >
172
+ <Body
173
+ dark
174
+ text="Striped Category 1"
175
+ />
176
+ </Card.Header>
177
+ <Card.Body>
178
+ <Body
179
+ {...props}
180
+ text="Body"
181
+ />
182
+ </Card.Body>
183
+ </Card>
184
+ </>
185
+ )
156
186
  }
157
187
 
158
188
  export default CardHeader
data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx CHANGED
@@ -12,7 +12,6 @@ type LightboxType = {
12
12
  aria?: {[key: string]: string},
13
13
  children: React.ReactNode[] | React.ReactNode | string,
14
14
  className?: string,
15
- currentPhoto?: number,
16
15
  data?: {[key: string]: string | number},
17
16
  description?: string | any,
18
17
  id?: string,
@@ -32,7 +31,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
32
31
  aria = {},
33
32
  children,
34
33
  className,
35
- currentPhoto,
36
34
  data = {},
37
35
  description,
38
36
  id = '',
@@ -47,14 +45,11 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
47
45
  } = props
48
46
 
49
47
  const [activePhoto, setActivePhoto] = useState(initialPhoto)
48
+
50
49
  useEffect(() => {
51
50
  onChange(activePhoto)
52
51
  },[activePhoto])
53
52
 
54
- useEffect(() => {
55
- setActivePhoto(currentPhoto)
56
- },[currentPhoto])
57
-
58
53
  const ariaProps = buildAriaProps(aria)
59
54
  const dataProps = buildDataProps(data)
60
55
  const classes = classnames(
data/app/pb_kits/playbook/pb_lightbox/docs/example.yml CHANGED
@@ -5,4 +5,3 @@ examples:
5
5
  - lightbox_multiple: Multiple
6
6
  - lightbox_compound_component: Compound Component
7
7
  - lightbox_custom_header: Custom Header
8
- - lightbox_current_photo: Current Photo
data/app/pb_kits/playbook/pb_lightbox/docs/index.js CHANGED
@@ -2,4 +2,3 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
2
2
  export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
3
3
  export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
4
4
  export { default as LightboxCustomHeader } from './_lightbox_custom_header'
5
- export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'
data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx CHANGED
@@ -35,7 +35,7 @@ test('Shows selected images', () => {
35
35
  data={{ testid: testId }}
36
36
  icon="close"
37
37
  id="test1"
38
- initialPhoto={0}
38
+ initialPhoto={1}
39
39
  onClose={() => {}}
40
40
  photos={TEST_PHOTOS}
41
41
  />
@@ -43,7 +43,7 @@ test('Shows selected images', () => {
43
43
  const kit = screen.getByTestId(testId)
44
44
  const slide = kit.getElementsByClassName('Slide')[0]
45
45
  const image = slide.getElementsByTagName('img')[0]
46
- expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
46
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
47
47
 
48
48
  const thumbnails = kit.getElementsByClassName('Thumbnail')
49
49
 
data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx} RENAMED
@@ -1,14 +1,12 @@
1
- /* @flow */
1
+ import React from "react"
2
+ import classnames from "classnames"
2
3
 
3
- import React from 'react'
4
- import classnames from 'classnames'
4
+ import { buildAriaProps, buildDataProps } from "../utilities/props"
5
5
 
6
- import { buildAriaProps, buildDataProps } from '../utilities/props'
7
-
8
- import Icon from '../pb_icon/_icon'
6
+ import Icon from "../pb_icon/_icon"
9
7
 
10
8
  type StarRatingProps = {
11
- aria?: object,
9
+ aria?: {[key: string]: string},
12
10
  className?: string,
13
11
  data?: object,
14
12
  fixedWidth?: boolean,
@@ -16,7 +14,7 @@ type StarRatingProps = {
16
14
  icon?: string,
17
15
  id?: string,
18
16
  rating: number,
19
- }
17
+ };
20
18
 
21
19
  const StarRating = ({
22
20
  aria = {},
@@ -29,15 +27,15 @@ const StarRating = ({
29
27
  const ariaProps = buildAriaProps(aria)
30
28
  const dataProps = buildDataProps(data)
31
29
  const css = classnames([
32
- 'pb_star_rating_kit', className,
30
+ "pb_star_rating_kit", className,
33
31
  ])
34
32
 
35
33
  const starCount = () => (
36
- [...Array(parseInt(rating))]
34
+ [...Array(Math.floor(rating))]
37
35
  )
38
36
 
39
37
  const hasHalfStar = () => (
40
- parseFloat(rating) % 1 !== 0
38
+ rating % 1 !== 0
41
39
  )
42
40
 
43
41
  return (
@@ -47,12 +45,11 @@ const StarRating = ({
47
45
  className={css}
48
46
  id={id}
49
47
  >
50
- <If condition={!hideRating}>
51
- <div className="pb_star_rating_number">
52
- {rating}
53
- </div>
54
- </If>
55
-
48
+ {!hideRating && (
49
+ <div className="pb_star_rating_number">
50
+ {rating}
51
+ </div>
52
+ )}
56
53
  <div className="pb_star_rating_wrapper">
57
54
  <div className="pb_star_rating_highlight">
58
55
  {starCount().map((_, index) => (
@@ -62,13 +59,12 @@ const StarRating = ({
62
59
  key={index}
63
60
  />
64
61
  ))}
65
-
66
- <If condition={hasHalfStar()}>
62
+ {hasHalfStar() && (
67
63
  <Icon
68
- fixedWidth={false}
69
- icon="star-half"
64
+ fixedWidth={false}
65
+ icon="star-half"
70
66
  />
71
- </If>
67
+ )}
72
68
  </div>
73
69
 
74
70
  <div className="pb_star_rating_base">
data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js ADDED
@@ -0,0 +1,71 @@
1
+ import React from "react";
2
+ import { render, screen } from "../utilities/test-utils";
3
+
4
+ import StarRating from "./_star_rating";
5
+
6
+ const testId = "star-rating-kit";
7
+
8
+ describe("Star Rating Kit", () => {
9
+ test("Expects to have correct classname", () => {
10
+ render(
11
+ <StarRating
12
+ data={{ testid: testId }}
13
+ rating={2}
14
+ />
15
+ );
16
+
17
+
18
+ const kit = screen.getByTestId(testId);
19
+ expect(kit).toHaveClass("pb_star_rating_kit");
20
+
21
+ });
22
+
23
+ test('should render aria-label', () => {
24
+ render(
25
+ <StarRating
26
+ aria={{ label: testId }}
27
+ data={{ testid: testId }}
28
+ rating={2}
29
+ />
30
+ );
31
+
32
+ const kit = screen.getByTestId(testId)
33
+ expect(kit).toHaveAttribute('aria-label', testId)
34
+ });
35
+
36
+ test("Displays two highlighted stars", () => {
37
+ render(
38
+ <StarRating
39
+ data={{ testid: testId }}
40
+ rating={2}
41
+ />
42
+ );
43
+
44
+
45
+ const kit = screen.getByTestId(testId);
46
+ const highlight = kit.querySelector(".pb_star_rating_highlight");
47
+ const stars = highlight.querySelectorAll(".far.fa-star");
48
+ const count = stars.length;
49
+
50
+ expect(count).toBe(2);
51
+ });
52
+
53
+ test("Displays three highlighted stars and a half star", () => {
54
+ render(
55
+ <StarRating
56
+ data={{ testid: testId }}
57
+ rating={3.5}
58
+ />
59
+ );
60
+
61
+ const kit = screen.getByTestId(testId);
62
+ const highlight = kit.querySelector(".pb_star_rating_highlight");
63
+ const stars = highlight.querySelectorAll(".far.fa-star");
64
+ const halfStars = highlight.querySelectorAll(".far.fa-star-half");
65
+ const starCount = stars.length;
66
+ const halfStarCount = halfStars.length;
67
+
68
+ expect(starCount).toBe(3);
69
+ expect(halfStarCount).toBe(1);
70
+ });
71
+ });
data/app/pb_kits/playbook/utilities/_cursor.scss CHANGED
@@ -1,3 +1,143 @@
1
+ .cursor_default {
2
+ cursor: default;
3
+ }
4
+
5
+ .cursor_context_menu {
6
+ cursor: context-menu;
7
+ }
8
+
9
+ .cursor_help {
10
+ cursor: help;
11
+ }
12
+
1
13
  .cursor_pointer {
2
14
  cursor: pointer;
3
- }
15
+ }
16
+
17
+ .cursor_progress {
18
+ cursor: progress;
19
+ }
20
+
21
+ .cursor_wait {
22
+ cursor: wait;
23
+ }
24
+
25
+ .cursor_cell {
26
+ cursor: cell;
27
+ }
28
+
29
+ .cursor_crosshair {
30
+ cursor: crosshair;
31
+ }
32
+
33
+ .cursor_text {
34
+ cursor: text;
35
+ }
36
+
37
+ .cursor_vertical_text {
38
+ cursor: vertical-text;
39
+ }
40
+
41
+ .cursor_alias {
42
+ cursor: alias;
43
+ }
44
+
45
+ .cursor_copy {
46
+ cursor: copy;
47
+ }
48
+
49
+ .cursor_move {
50
+ cursor: move;
51
+ }
52
+
53
+ .cursor_no_drop {
54
+ cursor: no-drop;
55
+ }
56
+
57
+ .cursor_not_allowed {
58
+ cursor: not-allowed;
59
+ }
60
+
61
+ .cursor_all_scroll {
62
+ cursor: all-scroll;
63
+ }
64
+
65
+ .cursor_col_resize {
66
+ cursor: col-resize;
67
+ }
68
+
69
+ .cursor_row_resize {
70
+ cursor: row-resize;
71
+ }
72
+
73
+ .cursor_n_resize {
74
+ cursor: n-resize;
75
+ }
76
+
77
+ .cursor_e_resize {
78
+ cursor: e-resize;
79
+ }
80
+
81
+ .cursor_s_resize {
82
+ cursor: s-resize;
83
+ }
84
+
85
+ .cursor_w_resize {
86
+ cursor: w-resize;
87
+ }
88
+
89
+ .cursor_ne_resize {
90
+ cursor: ne-resize;
91
+ }
92
+
93
+ .cursor_nw_resize {
94
+ cursor: nw-resize;
95
+ }
96
+
97
+ .cursor_se_resize {
98
+ cursor: se-resize;
99
+ }
100
+
101
+ .cursor_sw_resize {
102
+ cursor: sw-resize;
103
+ }
104
+
105
+ .cursor_ew_resize {
106
+ cursor: ew-resize;
107
+ }
108
+
109
+ .cursor_ns_resize {
110
+ cursor: ns-resize;
111
+ }
112
+
113
+ .cursor_nsew_resize {
114
+ cursor: nsew-resize;
115
+ }
116
+
117
+ .cursor_nwes_resize {
118
+ cursor: nwes-resize;
119
+ }
120
+
121
+ .cursor_zoom_in {
122
+ cursor: zoom-in;
123
+ }
124
+
125
+ .cursor_zoom_out {
126
+ cursor: zoom-out;
127
+ }
128
+
129
+ .cursor_grab {
130
+ cursor: grab;
131
+ }
132
+
133
+ .cursor_grabbing {
134
+ cursor: grabbing;
135
+ }
136
+
137
+ .cursor_none {
138
+ cursor: none;
139
+ }
140
+
141
+ .cursor_auto {
142
+ cursor: auto;
143
+ }
data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED
@@ -29,7 +29,10 @@ type BorderRadius = {
29
29
  }
30
30
 
31
31
  type Cursor = {
32
- cursor?: "pointer",
32
+ cursor?: "auto" | "default" | "none" | "contextMenu" | "help" | "pointer" | "progress" | "wait" | "cell" |
33
+ "crosshair" | "text" | "verticalText" | "alias" | "copy" | "move" | "noDrop" | "notAllowed" | "grab" |
34
+ "grabbing" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" |
35
+ "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut",
33
36
  }
34
37
 
35
38
  type Dark = {
@@ -209,7 +212,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
209
212
  },
210
213
  cursorProps: ({ cursor }: Cursor) => {
211
214
  let css = ''
212
- css += cursor ? `cursor_${cursor} ` : ''
215
+ css += cursor ? `cursor_${camelToSnakeCase(cursor)}` : ''
213
216
  return css
214
217
  },
215
218
  alignContentProps: ({ alignContent }: AlignContent) => {
data/lib/playbook/cursor.rb CHANGED
@@ -12,7 +12,7 @@ module Playbook
12
12
 
13
13
  selected_props.map do |k|
14
14
  cursor_value = send(k)
15
- "cursor_#{cursor_value}" if cursor_values.include? cursor_value
15
+ "cursor_#{cursor_value.underscore}" if cursor_values.include? cursor_value
16
16
  end.compact.join(" ")
17
17
  end
18
18
 
@@ -23,7 +23,7 @@ module Playbook
23
23
  end
24
24
 
25
25
  def cursor_values
26
- %w[pointer]
26
+ %w[auto default none contextMenu help pointer progress wait cell crosshair text verticalText alias copy move noDrop notAllowed grab grabbing eResize nResize neResize nwResize sResize seResize swResize wResize ewResize nsResize neswResize nwseResize colResize rowResize allScroll zoomIn zoomOut]
27
27
  end
28
28
  end
29
29
  end
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.14.0"
5
- VERSION = "12.14.0.pre.alpha.lightboxcurrentphotoprop460"
5
+ VERSION = "12.15.0"
6
6
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.14.0.pre.alpha.lightboxcurrentphotoprop460
4
+ version: 12.15.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-04-11 00:00:00.000000000 Z
12
+ date: 2023-04-12 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1333,8 +1333,6 @@ files:
1333
1333
  - app/pb_kits/playbook/pb_lightbox/docs/_description.md
1334
1334
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
1335
1335
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
1336
- - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
1337
- - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
1338
1336
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
1339
1337
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
1340
1338
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -1875,8 +1873,8 @@ files:
1875
1873
  - app/pb_kits/playbook/pb_source/source.html.erb
1876
1874
  - app/pb_kits/playbook/pb_source/source.rb
1877
1875
  - app/pb_kits/playbook/pb_source/source.test.js
1878
- - app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
1879
1876
  - app/pb_kits/playbook/pb_star_rating/_star_rating.scss
1877
+ - app/pb_kits/playbook/pb_star_rating/_star_rating.tsx
1880
1878
  - app/pb_kits/playbook/pb_star_rating/docs/_description.md
1881
1879
  - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb
1882
1880
  - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx
@@ -1886,6 +1884,7 @@ files:
1886
1884
  - app/pb_kits/playbook/pb_star_rating/docs/index.js
1887
1885
  - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
1888
1886
  - app/pb_kits/playbook/pb_star_rating/star_rating.rb
1887
+ - app/pb_kits/playbook/pb_star_rating/star_rating.test.js
1889
1888
  - app/pb_kits/playbook/pb_stat_change/_stat_change.scss
1890
1889
  - app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
1891
1890
  - app/pb_kits/playbook/pb_stat_change/docs/_description.md
@@ -2467,7 +2466,7 @@ homepage: http://playbook.powerapp.cloud
2467
2466
  licenses:
2468
2467
  - ISC
2469
2468
  metadata: {}
2470
- post_install_message:
2469
+ post_install_message:
2471
2470
  rdoc_options: []
2472
2471
  require_paths:
2473
2472
  - lib
@@ -2478,12 +2477,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2478
2477
  version: '0'
2479
2478
  required_rubygems_version: !ruby/object:Gem::Requirement
2480
2479
  requirements:
2481
- - - ">"
2480
+ - - ">="
2482
2481
  - !ruby/object:Gem::Version
2483
- version: 1.3.1
2482
+ version: '0'
2484
2483
  requirements: []
2485
2484
  rubygems_version: 3.3.7
2486
- signing_key:
2485
+ signing_key:
2487
2486
  specification_version: 4
2488
2487
  summary: Playbook Design System
2489
2488
  test_files: []
data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx DELETED
@@ -1,115 +0,0 @@
1
- /* @flow */
2
- /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
- import React, { useState } from 'react'
4
- import { Flex, Image, Button } from '../../'
5
- import Lightbox from '../_lightbox.tsx'
6
-
7
- const LightboxCurrentPhoto = (props) => {
8
- const photos = [
9
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
10
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
11
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
12
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
13
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
14
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
15
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
16
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
17
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
18
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
19
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
20
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
21
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
22
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
23
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
24
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
25
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
26
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
27
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
28
- 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
29
- 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
30
- 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
31
- ]
32
- const [selectedPhoto, setSelectedPhoto] = useState(0)
33
- const [light, toggleLight] = useState(false)
34
- //Setting state with the index of the current slide exposed by the onChange prop
35
- const [active, setActive] = useState(selectedPhoto)
36
- //Setting state for the current photo to pass to the kit
37
- const [currentPhoto, setCurrentPhoto] = useState(active)
38
-
39
- const handleCloseLightbox = () => {
40
- toggleLight(!light)
41
- setSelectedPhoto(null)
42
- }
43
-
44
- const onPhotoClick = (photo) => {
45
- toggleLight(!light)
46
- setSelectedPhoto(photo)
47
- }
48
-
49
- const exampleStyles = {
50
- width: "100%",
51
- overflow: "auto"
52
- }
53
-
54
- return (
55
- <div>
56
- {light ? (
57
- <>
58
- <div style={{width: '200px', height: '50px', position: 'fixed', top: 0, right: 0, zIndex: 1000000000000000}}>
59
- <div style={{position: 'absolute',right: '100px'}}>
60
- <Button
61
- onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
62
- >
63
- Back
64
- </Button>
65
- </div>
66
- <div style={{position: 'absolute', right: 0}}>
67
- <Button
68
- onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
69
- >
70
- Next
71
- </Button>
72
- </div>
73
- </div>
74
- <Lightbox
75
- currentPhoto={currentPhoto}
76
- icon="times"
77
- initialPhoto={selectedPhoto}
78
- onChange={(index) => setActive(index)}
79
- onClose={handleCloseLightbox}
80
- photos={photos}
81
- {...props}
82
- />
83
- </>
84
- ) : (
85
- <div
86
- className="PhotoViewer"
87
- style={exampleStyles}
88
- >
89
- <Flex>
90
- {photos.map((photo, index) => {
91
- return (
92
- <div
93
- key={index}
94
- onClick={() => onPhotoClick(index)}
95
- >
96
- <Image
97
- cursor="pointer"
98
- marginRight="xl"
99
- rounded
100
- size="lg"
101
- url={photo}
102
- />
103
-
104
- <div className="overlay" />
105
- </div>
106
- )
107
- })}
108
- </Flex>
109
- </div>
110
- )}
111
- </div>
112
- )
113
- }
114
-
115
- export default LightboxCurrentPhoto
data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md DELETED
@@ -1 +0,0 @@
1
- The `currentPhoto` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop.