playbook_ui 11.1.2 → 11.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/data/menu.yml +14 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_button_toolbar/{_button_toolbar.jsx → _button_toolbar.tsx} +3 -3
- data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
- data/app/pb_kits/playbook/pb_contact/_contact.jsx +7 -6
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +87 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +61 -12
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +153 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +130 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +50 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +15 -13
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +53 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +35 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +39 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +75 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +57 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +115 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx +109 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx +27 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +66 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +65 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +91 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts +34 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts +30 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +222 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +124 -0
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/dist/reset.css +60 -1
- data/lib/playbook/version.rb +2 -2
- metadata +30 -3
@@ -0,0 +1,124 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { fireEvent, render, screen, waitForElementToBeRemoved } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import { Lightbox } from '../'
|
5
|
+
|
6
|
+
const testId = 'customId',
|
7
|
+
kitClass = 'pb_lightbox_kit',
|
8
|
+
TEST_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
|
+
]
|
13
|
+
|
14
|
+
test('Kit renders', () => {
|
15
|
+
render(
|
16
|
+
<Lightbox
|
17
|
+
className="customClass"
|
18
|
+
data={{ testid: testId }}
|
19
|
+
icon="close"
|
20
|
+
iconSize="3x"
|
21
|
+
id="test1"
|
22
|
+
initialPhoto={1}
|
23
|
+
onClose={() => {}}
|
24
|
+
photos={TEST_PHOTOS}
|
25
|
+
/>
|
26
|
+
)
|
27
|
+
const kit = screen.getByTestId(testId)
|
28
|
+
expect(kit).toHaveClass(`${kitClass} customClass`)
|
29
|
+
expect(kit).toBeInTheDocument()
|
30
|
+
})
|
31
|
+
|
32
|
+
test('Shows selected images', () => {
|
33
|
+
render(
|
34
|
+
<Lightbox
|
35
|
+
data={{ testid: testId }}
|
36
|
+
icon="close"
|
37
|
+
iconSize="3x"
|
38
|
+
id="test1"
|
39
|
+
initialPhoto={1}
|
40
|
+
onClose={() => {}}
|
41
|
+
photos={TEST_PHOTOS}
|
42
|
+
/>
|
43
|
+
)
|
44
|
+
const kit = screen.getByTestId(testId)
|
45
|
+
const slide = kit.getElementsByClassName('Slide')[0]
|
46
|
+
const image = slide.getElementsByTagName('img')[0]
|
47
|
+
expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
|
48
|
+
|
49
|
+
const thumbnails = kit.getElementsByClassName('Thumbnail')
|
50
|
+
|
51
|
+
fireEvent(
|
52
|
+
thumbnails[2],
|
53
|
+
new MouseEvent('click', {
|
54
|
+
bubbles: true,
|
55
|
+
cancelable: true,
|
56
|
+
}),
|
57
|
+
)
|
58
|
+
|
59
|
+
expect(image).toHaveAttribute('src', TEST_PHOTOS[2])
|
60
|
+
|
61
|
+
fireEvent(
|
62
|
+
thumbnails[0],
|
63
|
+
new MouseEvent('click', {
|
64
|
+
bubbles: true,
|
65
|
+
cancelable: true,
|
66
|
+
}),
|
67
|
+
)
|
68
|
+
|
69
|
+
expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
|
70
|
+
})
|
71
|
+
|
72
|
+
test('Closes on escape key', async () => {
|
73
|
+
render(
|
74
|
+
<Lightbox
|
75
|
+
data={{ testid: testId }}
|
76
|
+
icon="close"
|
77
|
+
iconSize="3x"
|
78
|
+
id="test1"
|
79
|
+
initialPhoto={0}
|
80
|
+
onClose={() => {}}
|
81
|
+
photos={TEST_PHOTOS}
|
82
|
+
/>
|
83
|
+
)
|
84
|
+
|
85
|
+
const kit = screen.getByTestId(testId)
|
86
|
+
|
87
|
+
fireEvent(
|
88
|
+
document.body,
|
89
|
+
new KeyboardEvent('keydown', {
|
90
|
+
keyCode: 27, //escape
|
91
|
+
})
|
92
|
+
)
|
93
|
+
|
94
|
+
waitForElementToBeRemoved(kit)
|
95
|
+
.then(() => expect(kit).not.toBeInTheDocument())
|
96
|
+
})
|
97
|
+
|
98
|
+
test('Closes on close button', () => {
|
99
|
+
render(
|
100
|
+
<Lightbox
|
101
|
+
data={{ testid: testId }}
|
102
|
+
icon="close"
|
103
|
+
iconSize="3x"
|
104
|
+
id="test1"
|
105
|
+
initialPhoto={0}
|
106
|
+
onClose={() => {}}
|
107
|
+
photos={TEST_PHOTOS}
|
108
|
+
/>
|
109
|
+
)
|
110
|
+
|
111
|
+
const kit = screen.getByTestId(testId)
|
112
|
+
const closeIcon = kit.getElementsByClassName('close-icon')[0]
|
113
|
+
|
114
|
+
fireEvent(
|
115
|
+
closeIcon,
|
116
|
+
new MouseEvent('click', {
|
117
|
+
bubbles: true,
|
118
|
+
cancelable: true,
|
119
|
+
}),
|
120
|
+
)
|
121
|
+
|
122
|
+
waitForElementToBeRemoved(kit)
|
123
|
+
.then(() => expect(kit).not.toBeInTheDocument())
|
124
|
+
})
|
@@ -51,6 +51,7 @@ import * as LabelPill from 'pb_label_pill/docs'
|
|
51
51
|
import * as LabelValue from 'pb_label_value/docs'
|
52
52
|
import * as Layout from 'pb_layout/docs'
|
53
53
|
import * as LegendDocs from 'pb_legend/docs'
|
54
|
+
import * as Lightbox from 'pb_lightbox/docs'
|
54
55
|
import * as LineGraphDocs from 'pb_line_graph/docs'
|
55
56
|
import * as List from 'pb_list/docs'
|
56
57
|
import * as LoadingInline from 'pb_loading_inline/docs'
|
@@ -146,6 +147,7 @@ WebpackerReact.setup({
|
|
146
147
|
...LabelValue,
|
147
148
|
...Layout,
|
148
149
|
...LegendDocs,
|
150
|
+
...Lightbox,
|
149
151
|
...LineGraphDocs,
|
150
152
|
...List,
|
151
153
|
...LoadingInline,
|
@@ -22,7 +22,7 @@ type AlignItems = {
|
|
22
22
|
type AlignSelf = {
|
23
23
|
alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
|
24
24
|
}
|
25
|
-
type AllSizes = None
|
25
|
+
type AllSizes = None | Sizes
|
26
26
|
|
27
27
|
type BorderRadius = {
|
28
28
|
borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
|
data/dist/reset.css
CHANGED
@@ -1,2 +1,61 @@
|
|
1
|
-
|
1
|
+
/* CLEAN UP AND REMOVE */
|
2
|
+
/* Headings */
|
3
|
+
/* Standard Font Weights */
|
4
|
+
/* Non_Standard Font Weights */
|
5
|
+
/*=====================================
|
6
|
+
Base colors should not be documented.
|
7
|
+
Only document color use.
|
8
|
+
|
9
|
+
Colors -----------------------------*/
|
10
|
+
/* Specialty Gradient -----------------*/
|
11
|
+
/* Interface colors -------------------*/
|
12
|
+
/* Main colors ------------------------*/
|
13
|
+
/*=====================================
|
14
|
+
|
15
|
+
Background colors ------------------*/
|
16
|
+
/* Card colors ------------------*/
|
17
|
+
/* Active colors ----------------------*/
|
18
|
+
/* Hover colors -----------------------*/
|
19
|
+
/* Focus colors -----------------------*/
|
20
|
+
/* Border colors ----------------------*/
|
21
|
+
/* Shadow colors ----------------------*/
|
22
|
+
/* Text colors ------------------------*/
|
23
|
+
/* Data colors ------------------------*/
|
24
|
+
/* Status colors ----------------------*/
|
25
|
+
/* Link colors ------------------------*/
|
26
|
+
/* Product colors ---------------------*/
|
27
|
+
/* Category colors ---------------------*/
|
28
|
+
* {
|
29
|
+
box-sizing: border-box;
|
30
|
+
margin: 0;
|
31
|
+
padding: 0; }
|
32
|
+
*:before, *:after {
|
33
|
+
box-sizing: border-box; }
|
34
|
+
|
35
|
+
html {
|
36
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
37
|
+
height: 100vh;
|
38
|
+
overflow-x: hidden; }
|
39
|
+
|
40
|
+
body {
|
41
|
+
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
|
42
|
+
font-size: 16px;
|
43
|
+
line-height: 1.5;
|
44
|
+
background-color: #F3F7FB;
|
45
|
+
height: 100%;
|
46
|
+
letter-spacing: 0;
|
47
|
+
font-weight: 400;
|
48
|
+
font-style: normal;
|
49
|
+
text-rendering: optimizeLegibility;
|
50
|
+
-moz-font-feature-settings: "liga" on;
|
51
|
+
color: #242B42;
|
52
|
+
margin: 0 !important;
|
53
|
+
padding: 0 !important;
|
54
|
+
box-sizing: border-box;
|
55
|
+
min-height: 100vh;
|
56
|
+
padding: 50px; }
|
57
|
+
|
58
|
+
a {
|
59
|
+
text-decoration: none;
|
60
|
+
color: #0056CF; }
|
2
61
|
|
data/lib/playbook/version.rb
CHANGED
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: 11.
|
4
|
+
version: 11.2.0
|
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: 2022-07-
|
12
|
+
date: 2022-07-28 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -438,8 +438,8 @@ files:
|
|
438
438
|
- app/pb_kits/playbook/pb_button/docs/_footer.md
|
439
439
|
- app/pb_kits/playbook/pb_button/docs/example.yml
|
440
440
|
- app/pb_kits/playbook/pb_button/docs/index.js
|
441
|
-
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
|
442
441
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
|
442
|
+
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx
|
443
443
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss
|
444
444
|
- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
|
445
445
|
- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb
|
@@ -588,6 +588,7 @@ files:
|
|
588
588
|
- app/pb_kits/playbook/pb_contact/_contact.scss
|
589
589
|
- app/pb_kits/playbook/pb_contact/contact.html.erb
|
590
590
|
- app/pb_kits/playbook/pb_contact/contact.rb
|
591
|
+
- app/pb_kits/playbook/pb_contact/contact.test.js
|
591
592
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
|
592
593
|
- app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
|
593
594
|
- app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
|
@@ -802,6 +803,10 @@ files:
|
|
802
803
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
|
803
804
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
|
804
805
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
|
806
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
|
807
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
|
808
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
|
809
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
|
805
810
|
- app/pb_kits/playbook/pb_dialog/docs/example.yml
|
806
811
|
- app/pb_kits/playbook/pb_dialog/docs/index.js
|
807
812
|
- app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
|
@@ -886,6 +891,7 @@ files:
|
|
886
891
|
- app/pb_kits/playbook/pb_flex/_flex.tsx
|
887
892
|
- app/pb_kits/playbook/pb_flex/_flex_item.jsx
|
888
893
|
- app/pb_kits/playbook/pb_flex/_flex_item.scss
|
894
|
+
- app/pb_kits/playbook/pb_flex/_flex_item.tsx
|
889
895
|
- app/pb_kits/playbook/pb_flex/docs/_description.md
|
890
896
|
- app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb
|
891
897
|
- app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx
|
@@ -1206,6 +1212,27 @@ files:
|
|
1206
1212
|
- app/pb_kits/playbook/pb_legend/legend.html.erb
|
1207
1213
|
- app/pb_kits/playbook/pb_legend/legend.rb
|
1208
1214
|
- app/pb_kits/playbook/pb_legend/legend.test.js
|
1215
|
+
- app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx
|
1216
|
+
- app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx
|
1217
|
+
- app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
|
1218
|
+
- app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx
|
1219
|
+
- app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx
|
1220
|
+
- app/pb_kits/playbook/pb_lightbox/_lightbox.tsx
|
1221
|
+
- app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx
|
1222
|
+
- app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx
|
1223
|
+
- app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx
|
1224
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
|
1225
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
|
1226
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
|
1227
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md
|
1228
|
+
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx
|
1229
|
+
- app/pb_kits/playbook/pb_lightbox/docs/example.yml
|
1230
|
+
- app/pb_kits/playbook/pb_lightbox/docs/index.js
|
1231
|
+
- app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts
|
1232
|
+
- app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js
|
1233
|
+
- app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
|
1234
|
+
- app/pb_kits/playbook/pb_lightbox/lightbox.scss
|
1235
|
+
- app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
|
1209
1236
|
- app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
|
1210
1237
|
- app/pb_kits/playbook/pb_line_graph/_line_graph.scss
|
1211
1238
|
- app/pb_kits/playbook/pb_line_graph/docs/_description.md
|