playbook_ui 10.0.3.pre.alpha.walkthrough → 10.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.scss +0 -8
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +0 -2
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +73 -70
- data/dist/reset.css +1 -60
- data/lib/playbook/version.rb +2 -2
- metadata +5 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8b178f062785d89be15c032908f55e96f3d1fe70f18af9818fd074b2a3e18008
|
4
|
+
data.tar.gz: 7ebd1388f01b4235d8cee6932bd5ad66c5f99b2a23cb7587e5f0f7603e96a7cb
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 246f7e177b640539519d0e4a48c375afd08a5a0c836345d8ab6054cd3efbbdf937d404d8ba5f68811708c267da34156df9662d3a89b06498dd6ce5a5d25da28b
|
7
|
+
data.tar.gz: a75a04eda5a1a142cb7517909bf0db0ad2ffd60bad691776741b55bff90e34e8d03cb24bf420de385e5a9243d109eb5b44fcb3b65021bc589f87c48038d8e977
|
@@ -4,7 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
|
|
4
4
|
import 'lazysizes'
|
5
5
|
|
6
6
|
// vvv React Component JSX Imports from the React Kits vvv
|
7
|
-
export { default as Walkthrough } from './pb_walkthrough/_walkthrough
|
7
|
+
export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
|
8
8
|
export { default as Avatar } from './pb_avatar/_avatar'
|
9
9
|
export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
|
10
10
|
export { default as Background } from './pb_background/_background'
|
@@ -3,14 +3,12 @@
|
|
3
3
|
|
4
4
|
/* @flow */
|
5
5
|
|
6
|
-
import React
|
6
|
+
import React from 'react'
|
7
7
|
import classnames from 'classnames'
|
8
8
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
9
9
|
import { globalProps } from '../utilities/globalProps.js'
|
10
|
-
import Joyride
|
11
|
-
import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
|
10
|
+
import Joyride from 'react-joyride'
|
12
11
|
import Button from '../pb_button/_button'
|
13
|
-
import Card from '../pb_card/_card'
|
14
12
|
import Flex from '../pb_flex/_flex'
|
15
13
|
import SectionSeparator from '../pb_section_separator/_section_separator'
|
16
14
|
import Title from '../pb_title/_title'
|
@@ -73,79 +71,75 @@ type TooltipProps = {
|
|
73
71
|
|
74
72
|
const Tooltip = React.forwardRef((props: TooltipProps, ref) => (
|
75
73
|
<div
|
74
|
+
className="pb_card_kit_border_none p_none"
|
76
75
|
{...props.tooltipProps}
|
77
76
|
>
|
78
|
-
<
|
79
|
-
borderNone
|
80
|
-
padding="none"
|
81
|
-
>
|
82
|
-
{props.step.title && <div>
|
83
|
-
<Flex
|
84
|
-
align="center"
|
85
|
-
justify="between"
|
86
|
-
padding="xs"
|
87
|
-
>
|
88
|
-
<Title
|
89
|
-
paddingLeft="xs"
|
90
|
-
size={4}
|
91
|
-
>
|
92
|
-
{props.step.title}
|
93
|
-
</Title>
|
94
|
-
{props.skip && (<Button
|
95
|
-
{...props.skipProps}
|
96
|
-
id="skip"
|
97
|
-
text="Skip Tour"
|
98
|
-
variant="link"
|
99
|
-
/>)}
|
100
|
-
<Button
|
101
|
-
{...props.skipProps}
|
102
|
-
id="skip"
|
103
|
-
text="Skip Tour"
|
104
|
-
variant="link"
|
105
|
-
/>
|
106
|
-
</Flex>
|
107
|
-
<SectionSeparator />
|
108
|
-
</div>}
|
109
|
-
|
110
|
-
<Flex padding="sm">{props.step.content}</Flex>
|
111
|
-
<SectionSeparator />
|
77
|
+
{props.step.title && <div>
|
112
78
|
<Flex
|
113
|
-
|
79
|
+
align="center"
|
80
|
+
justify="between"
|
114
81
|
padding="xs"
|
115
82
|
>
|
83
|
+
<Title
|
84
|
+
paddingLeft="xs"
|
85
|
+
size={4}
|
86
|
+
>
|
87
|
+
{props.step.title}
|
88
|
+
</Title>
|
89
|
+
{props.skip && (<Button
|
90
|
+
{...props.skipProps}
|
91
|
+
id="skip"
|
92
|
+
text="Skip Tour"
|
93
|
+
variant="link"
|
94
|
+
/>)}
|
95
|
+
<Button
|
96
|
+
{...props.skipProps}
|
97
|
+
id="skip"
|
98
|
+
text="Skip Tour"
|
99
|
+
variant="link"
|
100
|
+
/>
|
101
|
+
</Flex>
|
102
|
+
<SectionSeparator />
|
103
|
+
</div>}
|
104
|
+
|
105
|
+
<Flex padding="sm">{props.step.content}</Flex>
|
106
|
+
<SectionSeparator />
|
107
|
+
<Flex
|
108
|
+
justify={props.index == 0 ? 'end' : 'between'}
|
109
|
+
padding="xs"
|
110
|
+
>
|
116
111
|
|
117
|
-
|
112
|
+
{props.index > 0 && (
|
113
|
+
<Button
|
114
|
+
{...props.backProps}
|
115
|
+
id="back"
|
116
|
+
text="Back"
|
117
|
+
/>
|
118
|
+
)}
|
119
|
+
<Choose>
|
120
|
+
<When condition={props.continuous && !props.isLastStep}>
|
118
121
|
<Button
|
119
|
-
{...props.
|
120
|
-
id="
|
121
|
-
text="
|
122
|
+
{...props.primaryProps}
|
123
|
+
id="next"
|
124
|
+
text="Next"
|
122
125
|
/>
|
123
|
-
|
124
|
-
<
|
125
|
-
<
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
<
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
<Button
|
141
|
-
{...props.closeProps}
|
142
|
-
id="close"
|
143
|
-
text="Close"
|
144
|
-
/>
|
145
|
-
</Otherwise>
|
146
|
-
</Choose>
|
147
|
-
</Flex>
|
148
|
-
</Card>
|
126
|
+
</When>
|
127
|
+
<When condition={!props.continuous}>
|
128
|
+
<Button
|
129
|
+
{...props.closeProps}
|
130
|
+
id="close"
|
131
|
+
text="Close"
|
132
|
+
/>
|
133
|
+
</When>
|
134
|
+
<Otherwise>
|
135
|
+
<Button
|
136
|
+
{...props.closeProps}
|
137
|
+
id="close"
|
138
|
+
text="Close"
|
139
|
+
/>
|
140
|
+
</Otherwise>
|
141
|
+
</Choose>
|
142
|
+
</Flex>
|
149
143
|
</div>
|
150
144
|
))
|
151
145
|
|
@@ -157,10 +151,17 @@ const Walkthrough = (props: WalkthroughProps) => {
|
|
157
151
|
continuous = false,
|
158
152
|
data = {},
|
159
153
|
disableOverlay,
|
154
|
+
floaterProps = {
|
155
|
+
offset: 50,
|
156
|
+
},
|
160
157
|
id,
|
161
158
|
run = false,
|
162
159
|
steps,
|
163
|
-
styles
|
160
|
+
styles = {
|
161
|
+
options: {
|
162
|
+
zIndex: 20000,
|
163
|
+
},
|
164
|
+
},
|
164
165
|
showSkipButton,
|
165
166
|
} = props
|
166
167
|
|
@@ -180,6 +181,7 @@ const Walkthrough = (props: WalkthroughProps) => {
|
|
180
181
|
continuous={continuous}
|
181
182
|
disableOverlay={disableOverlay}
|
182
183
|
disableScrolling
|
184
|
+
floaterProps={floaterProps}
|
183
185
|
run={run}
|
184
186
|
showSkipButton={showSkipButton}
|
185
187
|
steps={steps}
|
@@ -188,6 +190,7 @@ const Walkthrough = (props: WalkthroughProps) => {
|
|
188
190
|
{...props}
|
189
191
|
/>
|
190
192
|
</div>
|
193
|
+
|
191
194
|
)
|
192
195
|
}
|
193
196
|
|
data/dist/reset.css
CHANGED
@@ -1,61 +1,2 @@
|
|
1
|
-
|
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; }
|
1
|
+
*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
|
61
2
|
|
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: 10.
|
4
|
+
version: 10.2.1
|
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: 2021-07-
|
12
|
+
date: 2021-07-22 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -2076,12 +2076,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2076
2076
|
version: '0'
|
2077
2077
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2078
2078
|
requirements:
|
2079
|
-
- - "
|
2079
|
+
- - ">="
|
2080
2080
|
- !ruby/object:Gem::Version
|
2081
|
-
version:
|
2081
|
+
version: '0'
|
2082
2082
|
requirements: []
|
2083
|
-
|
2084
|
-
rubygems_version: 2.7.3
|
2083
|
+
rubygems_version: 3.1.4
|
2085
2084
|
signing_key:
|
2086
2085
|
specification_version: 4
|
2087
2086
|
summary: Playbook Design System
|