playbook_ui 10.0.3.pre.alpha.walkthrough2 → 10.1.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 +0 -1
- data/app/pb_kits/playbook/data/menu.yml +0 -1
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/pb_popover/_popover.scss +0 -8
- data/app/pb_kits/playbook/playbook-doc.js +6 -4
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +0 -2
- data/dist/reset.css +1 -60
- data/lib/playbook/version.rb +2 -2
- metadata +3 -14
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +0 -194
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss +0 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +0 -68
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +0 -70
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +0 -109
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +0 -75
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +0 -75
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +0 -75
- data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +0 -10
- data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx +0 -34
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4eac1f539de9ef040a2d8a04d06f67006e1f7fe858a2161cbc526a8303c66ff7
|
4
|
+
data.tar.gz: 91710c901df8071c7d3752a8d10c57a2595ae014137cc021cb65c7b43ef71e4f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c922a03b5f6f030294fe9765db29f0e30ad2efda6667269a68a77c438d809fc9c57fc40f3096d4bcf54710e3814e34feb6c8b71d347691577c7d68c717860bea
|
7
|
+
data.tar.gz: e074aa18cee2a0a17211040f8891f6e29625fdc9dc256399961702aa20680be8ec6ea5185af4dfd23573e982790c7709c03917e65ecb766f730bdbafc80508f8
|
@@ -90,7 +90,6 @@
|
|
90
90
|
@import 'pb_user/user';
|
91
91
|
@import 'pb_user_badge/user_badge';
|
92
92
|
@import 'pb_time_stacked/time_stacked';
|
93
|
-
@import 'pb_walkthrough/walkthrough';
|
94
93
|
@import 'pb_weekday_stacked/weekday_stacked';
|
95
94
|
@import './utilities/spacing';
|
96
95
|
@import './utilities/max_width';
|
@@ -4,7 +4,6 @@ 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'
|
8
7
|
export { default as Avatar } from './pb_avatar/_avatar'
|
9
8
|
export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
|
10
9
|
export { default as Background } from './pb_background/_background'
|
@@ -1,6 +1,6 @@
|
|
1
|
-
/* eslint-disable no-unused-vars */
|
2
1
|
// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
|
3
2
|
import WebpackerReact from 'webpacker-react'
|
3
|
+
import ujs from 'webpacker-react/ujs'
|
4
4
|
|
5
5
|
// KIT EXAMPLES
|
6
6
|
import 'pb_form/pb_form_validation'
|
@@ -94,10 +94,9 @@ import * as Toggle from 'pb_toggle/docs'
|
|
94
94
|
import * as Typeahead from 'pb_typeahead/docs'
|
95
95
|
import * as User from 'pb_user/docs'
|
96
96
|
import * as UserBadge from 'pb_user_badge/docs'
|
97
|
-
import * as Walkthrough from 'pb_walkthrough/docs'
|
98
97
|
import * as WeekdayStacked from 'pb_weekday_stacked/docs'
|
99
98
|
|
100
|
-
WebpackerReact.
|
99
|
+
WebpackerReact.registerComponents({
|
101
100
|
...Avatar,
|
102
101
|
...AvatarActionButton,
|
103
102
|
...Background,
|
@@ -188,6 +187,9 @@ WebpackerReact.setup({
|
|
188
187
|
...Typeahead,
|
189
188
|
...User,
|
190
189
|
...UserBadge,
|
191
|
-
...Walkthrough,
|
192
190
|
...WeekdayStacked,
|
193
191
|
})
|
192
|
+
ujs.setup(
|
193
|
+
() => WebpackerReact.mountComponents(),
|
194
|
+
() => WebpackerReact.unmountComponents()
|
195
|
+
)
|
@@ -14,7 +14,6 @@ import LineGraph from './pb_line_graph/_line_graph'
|
|
14
14
|
import Passphrase from './pb_passphrase/_passphrase'
|
15
15
|
import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
|
16
16
|
import Typeahead from './pb_typeahead/_typeahead'
|
17
|
-
import Walkthrough from './pb_walkthrough/_walkthrough'
|
18
17
|
|
19
18
|
WebpackerReact.registerComponents({
|
20
19
|
BarGraph,
|
@@ -28,7 +27,6 @@ WebpackerReact.registerComponents({
|
|
28
27
|
Passphrase,
|
29
28
|
RichTextEditor,
|
30
29
|
Typeahead,
|
31
|
-
Walkthrough,
|
32
30
|
})
|
33
31
|
|
34
32
|
ujs.setup(
|
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.0
|
4
|
+
version: 10.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -1958,17 +1958,6 @@ files:
|
|
1958
1958
|
- app/pb_kits/playbook/pb_user_badge/docs/index.js
|
1959
1959
|
- app/pb_kits/playbook/pb_user_badge/user_badge.html.erb
|
1960
1960
|
- app/pb_kits/playbook/pb_user_badge/user_badge.rb
|
1961
|
-
- app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx
|
1962
|
-
- app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss
|
1963
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
|
1964
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
|
1965
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
|
1966
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx
|
1967
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx
|
1968
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx
|
1969
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/example.yml
|
1970
|
-
- app/pb_kits/playbook/pb_walkthrough/docs/index.js
|
1971
|
-
- app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx
|
1972
1961
|
- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx
|
1973
1962
|
- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
|
1974
1963
|
- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
|
@@ -2076,9 +2065,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2076
2065
|
version: '0'
|
2077
2066
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2078
2067
|
requirements:
|
2079
|
-
- - "
|
2068
|
+
- - ">="
|
2080
2069
|
- !ruby/object:Gem::Version
|
2081
|
-
version:
|
2070
|
+
version: '0'
|
2082
2071
|
requirements: []
|
2083
2072
|
rubyforge_project:
|
2084
2073
|
rubygems_version: 2.7.3
|
@@ -1,194 +0,0 @@
|
|
1
|
-
/* eslint-disable react/display-name */
|
2
|
-
/* eslint-disable no-unused-vars */
|
3
|
-
|
4
|
-
/* @flow */
|
5
|
-
|
6
|
-
import React, { useState } from 'react'
|
7
|
-
import classnames from 'classnames'
|
8
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
9
|
-
import { globalProps } from '../utilities/globalProps.js'
|
10
|
-
import Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride'
|
11
|
-
import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
|
12
|
-
import Button from '../pb_button/_button'
|
13
|
-
import Card from '../pb_card/_card'
|
14
|
-
import Flex from '../pb_flex/_flex'
|
15
|
-
import SectionSeparator from '../pb_section_separator/_section_separator'
|
16
|
-
import Title from '../pb_title/_title'
|
17
|
-
|
18
|
-
type WalkthroughProps = {
|
19
|
-
aria?: object,
|
20
|
-
callback?: () => void,
|
21
|
-
className?: string,
|
22
|
-
continuous?: boolean,
|
23
|
-
data?: object,
|
24
|
-
id?: string,
|
25
|
-
run?: boolean,
|
26
|
-
steps?: array,
|
27
|
-
stepIndex?: number,
|
28
|
-
debug?: Boolean,
|
29
|
-
disableCloseOnEsc?: Boolean,
|
30
|
-
disableOverlay?: Boolean,
|
31
|
-
disableOverlayClose?: Boolean,
|
32
|
-
disableScrolling?: Boolean,
|
33
|
-
floaterProps?: object,
|
34
|
-
hideBackButton?: Boolean,
|
35
|
-
hideCloseButton?: Boolean,
|
36
|
-
showProgress?: Boolean,
|
37
|
-
showSkipButton?: Boolean,
|
38
|
-
spotlightClicks?: Boolean,
|
39
|
-
spotlightPadding?: number,
|
40
|
-
styles?: {
|
41
|
-
options: {
|
42
|
-
beaconSize?: Number,
|
43
|
-
arrowColor?: String,
|
44
|
-
backgroundColor?: String,
|
45
|
-
primaryColor?: String,
|
46
|
-
overlayColor?: String,
|
47
|
-
spotlightShadow?: String,
|
48
|
-
width?: Number,
|
49
|
-
zIndex?: Number,
|
50
|
-
},
|
51
|
-
},
|
52
|
-
}
|
53
|
-
|
54
|
-
type TooltipProps = {
|
55
|
-
continuous?: Boolean,
|
56
|
-
className?: String,
|
57
|
-
index?: number,
|
58
|
-
isLastStep?: Boolean,
|
59
|
-
size?: number,
|
60
|
-
step: {
|
61
|
-
title?: String,
|
62
|
-
content?: array<React.ReactNode> | React.ReactNode | String,
|
63
|
-
target: String,
|
64
|
-
disableBeacon?: Boolean,
|
65
|
-
},
|
66
|
-
skip?: Boolean,
|
67
|
-
backProps?: object,
|
68
|
-
closeProps?: object,
|
69
|
-
primaryProps?: object,
|
70
|
-
skipProps?: object,
|
71
|
-
tooltipProps?: object,
|
72
|
-
}
|
73
|
-
|
74
|
-
const Tooltip = React.forwardRef((props: TooltipProps, ref) => (
|
75
|
-
<div
|
76
|
-
{...props.tooltipProps}
|
77
|
-
>
|
78
|
-
<Card
|
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 />
|
112
|
-
<Flex
|
113
|
-
justify={props.index == 0 ? 'end' : 'between'}
|
114
|
-
padding="xs"
|
115
|
-
>
|
116
|
-
|
117
|
-
{props.index > 0 && (
|
118
|
-
<Button
|
119
|
-
{...props.backProps}
|
120
|
-
id="back"
|
121
|
-
text="Back"
|
122
|
-
/>
|
123
|
-
)}
|
124
|
-
<Choose>
|
125
|
-
<When condition={props.continuous && !props.isLastStep}>
|
126
|
-
<Button
|
127
|
-
{...props.primaryProps}
|
128
|
-
id="next"
|
129
|
-
text="Next"
|
130
|
-
/>
|
131
|
-
</When>
|
132
|
-
<When condition={!props.continuous}>
|
133
|
-
<Button
|
134
|
-
{...props.closeProps}
|
135
|
-
id="close"
|
136
|
-
text="Close"
|
137
|
-
/>
|
138
|
-
</When>
|
139
|
-
<Otherwise>
|
140
|
-
<Button
|
141
|
-
{...props.closeProps}
|
142
|
-
id="close"
|
143
|
-
text="Close"
|
144
|
-
/>
|
145
|
-
</Otherwise>
|
146
|
-
</Choose>
|
147
|
-
</Flex>
|
148
|
-
</Card>
|
149
|
-
</div>
|
150
|
-
))
|
151
|
-
|
152
|
-
const Walkthrough = (props: WalkthroughProps) => {
|
153
|
-
const {
|
154
|
-
aria = {},
|
155
|
-
callback,
|
156
|
-
className,
|
157
|
-
continuous = false,
|
158
|
-
data = {},
|
159
|
-
disableOverlay,
|
160
|
-
id,
|
161
|
-
run = false,
|
162
|
-
steps,
|
163
|
-
styles,
|
164
|
-
showSkipButton,
|
165
|
-
} = props
|
166
|
-
|
167
|
-
const ariaProps = buildAriaProps(aria)
|
168
|
-
const dataProps = buildDataProps(data)
|
169
|
-
const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
|
170
|
-
|
171
|
-
return (
|
172
|
-
<div
|
173
|
-
{...ariaProps}
|
174
|
-
{...dataProps}
|
175
|
-
className={classes}
|
176
|
-
id={id}
|
177
|
-
>
|
178
|
-
<Joyride
|
179
|
-
callback={callback}
|
180
|
-
continuous={continuous}
|
181
|
-
disableOverlay={disableOverlay}
|
182
|
-
disableScrolling
|
183
|
-
run={run}
|
184
|
-
showSkipButton={showSkipButton}
|
185
|
-
steps={steps}
|
186
|
-
styles={styles}
|
187
|
-
tooltipComponent={Tooltip}
|
188
|
-
{...props}
|
189
|
-
/>
|
190
|
-
</div>
|
191
|
-
)
|
192
|
-
}
|
193
|
-
|
194
|
-
export default Walkthrough
|
File without changes
|
@@ -1,68 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Walkthrough } from '../../'
|
3
|
-
|
4
|
-
const WalkthroughContinuous = (props) => {
|
5
|
-
const [state, setState] = useState({
|
6
|
-
run: false,
|
7
|
-
steps: [
|
8
|
-
{
|
9
|
-
title: 'Example Title',
|
10
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
11
|
-
target: '.examplePaused',
|
12
|
-
},
|
13
|
-
{
|
14
|
-
title: 'Toggle',
|
15
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
16
|
-
target: '.pb_toggle_control',
|
17
|
-
},
|
18
|
-
{
|
19
|
-
title: 'Top Nav',
|
20
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
21
|
-
target: '.pb--page--topNav',
|
22
|
-
},
|
23
|
-
],
|
24
|
-
})
|
25
|
-
|
26
|
-
return (
|
27
|
-
<div>
|
28
|
-
<div
|
29
|
-
className="examplePaused"
|
30
|
-
style={{ 'display': 'inline' }}
|
31
|
-
>
|
32
|
-
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
|
33
|
-
</div>
|
34
|
-
<br />
|
35
|
-
<br />
|
36
|
-
<Button
|
37
|
-
onClick={() => {
|
38
|
-
setState({ ...state,
|
39
|
-
run: true,
|
40
|
-
})
|
41
|
-
}}
|
42
|
-
>
|
43
|
-
{'Start Tour'}
|
44
|
-
</Button>
|
45
|
-
<br />
|
46
|
-
<br />
|
47
|
-
<Button
|
48
|
-
onClick={() => {
|
49
|
-
setState({
|
50
|
-
...state,
|
51
|
-
run: false,
|
52
|
-
})
|
53
|
-
}}
|
54
|
-
>
|
55
|
-
{'Reset/Stop Tour'}
|
56
|
-
</Button>
|
57
|
-
|
58
|
-
<Walkthrough
|
59
|
-
run={state.run}
|
60
|
-
steps={state.steps}
|
61
|
-
{...props}
|
62
|
-
continuous
|
63
|
-
/>
|
64
|
-
</div>
|
65
|
-
)
|
66
|
-
}
|
67
|
-
|
68
|
-
export default WalkthroughContinuous
|
@@ -1,70 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Walkthrough } from '../../'
|
3
|
-
|
4
|
-
const WalkthroughDefault = (props) => {
|
5
|
-
const [state, setState] = useState({
|
6
|
-
run: false,
|
7
|
-
steps: [
|
8
|
-
{
|
9
|
-
title: 'Example title',
|
10
|
-
content:
|
11
|
-
'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
|
12
|
-
target: '.example',
|
13
|
-
},
|
14
|
-
{
|
15
|
-
title: 'Toggle',
|
16
|
-
content:
|
17
|
-
'By default the walkthrough kit will cycle through each step provided.',
|
18
|
-
target: '.pb_toggle_control',
|
19
|
-
},
|
20
|
-
{
|
21
|
-
title: 'Top Nav',
|
22
|
-
content:
|
23
|
-
'By default the walkthrough kit will cycle through each step provided.',
|
24
|
-
target: '.pb--page--topNav',
|
25
|
-
},
|
26
|
-
],
|
27
|
-
})
|
28
|
-
|
29
|
-
return (
|
30
|
-
<div>
|
31
|
-
<div
|
32
|
-
className="example"
|
33
|
-
style={{ 'display': 'inline' }}
|
34
|
-
>
|
35
|
-
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
|
36
|
-
</div>
|
37
|
-
<br />
|
38
|
-
<br />
|
39
|
-
<Button
|
40
|
-
onClick={() => {
|
41
|
-
setState({ ...state,
|
42
|
-
run: true,
|
43
|
-
})
|
44
|
-
}}
|
45
|
-
>
|
46
|
-
{'Start Tour'}
|
47
|
-
</Button>
|
48
|
-
<br />
|
49
|
-
<br />
|
50
|
-
<Button
|
51
|
-
onClick={() => {
|
52
|
-
setState({
|
53
|
-
...state,
|
54
|
-
run: false,
|
55
|
-
})
|
56
|
-
}}
|
57
|
-
>
|
58
|
-
{'Reset/Stop Tour'}
|
59
|
-
</Button>
|
60
|
-
|
61
|
-
<Walkthrough
|
62
|
-
run={state.run}
|
63
|
-
steps={state.steps}
|
64
|
-
{...props}
|
65
|
-
/>
|
66
|
-
</div>
|
67
|
-
)
|
68
|
-
}
|
69
|
-
|
70
|
-
export default WalkthroughDefault
|
@@ -1,109 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Walkthrough } from '../../'
|
3
|
-
|
4
|
-
const WalkthroughMultiBeacon = (props) => {
|
5
|
-
const [stateA, setStateA] = useState({
|
6
|
-
run: false,
|
7
|
-
steps: [
|
8
|
-
{
|
9
|
-
title: 'Example title',
|
10
|
-
content:
|
11
|
-
'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
|
12
|
-
target: '.exampleMulti',
|
13
|
-
},
|
14
|
-
],
|
15
|
-
})
|
16
|
-
|
17
|
-
const [stateB, setStateB] = useState({
|
18
|
-
run: false,
|
19
|
-
steps: [
|
20
|
-
{
|
21
|
-
title: 'Toggle',
|
22
|
-
content:
|
23
|
-
'By default the walkthrough kit will cycle through each step provided.',
|
24
|
-
target: '.pb_toggle_control',
|
25
|
-
},
|
26
|
-
],
|
27
|
-
})
|
28
|
-
|
29
|
-
const [stateC, setStateC] = useState({
|
30
|
-
run: false,
|
31
|
-
steps: [
|
32
|
-
{
|
33
|
-
title: 'Top Nav',
|
34
|
-
content:
|
35
|
-
'By default the walkthrough kit will cycle through each step provided.',
|
36
|
-
target: '.pb--page--topNav',
|
37
|
-
},
|
38
|
-
],
|
39
|
-
})
|
40
|
-
|
41
|
-
return (
|
42
|
-
<div>
|
43
|
-
<div
|
44
|
-
className="exampleMulti"
|
45
|
-
style={{ 'display': 'inline' }}
|
46
|
-
>
|
47
|
-
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
|
48
|
-
</div>
|
49
|
-
<br />
|
50
|
-
<br />
|
51
|
-
<Button
|
52
|
-
onClick={() => {
|
53
|
-
setStateA({
|
54
|
-
...stateA,
|
55
|
-
run: true,
|
56
|
-
})
|
57
|
-
setStateB({
|
58
|
-
...stateB,
|
59
|
-
run: true,
|
60
|
-
})
|
61
|
-
setStateC({
|
62
|
-
...stateC,
|
63
|
-
run: true,
|
64
|
-
})
|
65
|
-
}}
|
66
|
-
>
|
67
|
-
{'Start Tour'}
|
68
|
-
</Button>
|
69
|
-
<br />
|
70
|
-
<br />
|
71
|
-
<Button
|
72
|
-
onClick={() => {
|
73
|
-
setStateA({
|
74
|
-
...stateA,
|
75
|
-
run: false,
|
76
|
-
})
|
77
|
-
setStateB({
|
78
|
-
...stateB,
|
79
|
-
run: false,
|
80
|
-
})
|
81
|
-
setStateC({
|
82
|
-
...stateC,
|
83
|
-
run: false,
|
84
|
-
})
|
85
|
-
}}
|
86
|
-
>
|
87
|
-
{'Reset/Stop Tour'}
|
88
|
-
</Button>
|
89
|
-
|
90
|
-
<Walkthrough
|
91
|
-
run={stateA.run}
|
92
|
-
steps={stateA.steps}
|
93
|
-
{...props}
|
94
|
-
/>
|
95
|
-
<Walkthrough
|
96
|
-
run={stateB.run}
|
97
|
-
steps={stateB.steps}
|
98
|
-
{...props}
|
99
|
-
/>
|
100
|
-
<Walkthrough
|
101
|
-
run={stateC.run}
|
102
|
-
steps={stateC.steps}
|
103
|
-
{...props}
|
104
|
-
/>
|
105
|
-
</div>
|
106
|
-
)
|
107
|
-
}
|
108
|
-
|
109
|
-
export default WalkthroughMultiBeacon
|
@@ -1,75 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Walkthrough } from '../../'
|
3
|
-
|
4
|
-
const WalkthroughNoBeacon = (props) => {
|
5
|
-
const [state, setState] = useState({
|
6
|
-
callback: (data) => {
|
7
|
-
if (data.action === 'close' && data.type === 'step:after') {
|
8
|
-
// This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
|
9
|
-
setState({ ...state, run: false })
|
10
|
-
}
|
11
|
-
},
|
12
|
-
run: false,
|
13
|
-
steps: [
|
14
|
-
{
|
15
|
-
title: 'Example Title',
|
16
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
17
|
-
target: '.exampleNoBeacon',
|
18
|
-
disableBeacon: true,
|
19
|
-
},
|
20
|
-
{
|
21
|
-
title: 'Toggle',
|
22
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
23
|
-
target: '.pb_toggle_control',
|
24
|
-
},
|
25
|
-
{
|
26
|
-
title: 'Top Nav',
|
27
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
28
|
-
target: '.pb--page--topNav',
|
29
|
-
},
|
30
|
-
],
|
31
|
-
})
|
32
|
-
|
33
|
-
return (
|
34
|
-
<div>
|
35
|
-
<div
|
36
|
-
className="exampleNoBeacon"
|
37
|
-
style={{ 'display': 'inline' }}
|
38
|
-
>
|
39
|
-
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
|
40
|
-
</div>
|
41
|
-
<br />
|
42
|
-
<br />
|
43
|
-
<Button
|
44
|
-
onClick={() => {
|
45
|
-
setState({ ...state,
|
46
|
-
run: true,
|
47
|
-
})
|
48
|
-
}}
|
49
|
-
>
|
50
|
-
{'Start Tour'}
|
51
|
-
</Button>
|
52
|
-
<br />
|
53
|
-
<br />
|
54
|
-
<Button
|
55
|
-
onClick={() => {
|
56
|
-
setState({
|
57
|
-
...state,
|
58
|
-
run: false,
|
59
|
-
})
|
60
|
-
}}
|
61
|
-
>
|
62
|
-
{'Reset/Stop Tour'}
|
63
|
-
</Button>
|
64
|
-
|
65
|
-
<Walkthrough
|
66
|
-
run={state.run}
|
67
|
-
steps={state.steps}
|
68
|
-
{...props}
|
69
|
-
continuous
|
70
|
-
/>
|
71
|
-
</div>
|
72
|
-
)
|
73
|
-
}
|
74
|
-
|
75
|
-
export default WalkthroughNoBeacon
|
@@ -1,75 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Walkthrough } from '../../'
|
3
|
-
|
4
|
-
const WalkthroughNoOverlay = (props) => {
|
5
|
-
const [noOverlay, setNoOverlayState] = useState({
|
6
|
-
callback: (data) => {
|
7
|
-
if (data.action === 'close' && data.type === 'step:after') {
|
8
|
-
// This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
|
9
|
-
setNoOverlayState({ ...noOverlay, run: false })
|
10
|
-
}
|
11
|
-
},
|
12
|
-
disableOverlay: true,
|
13
|
-
run: false,
|
14
|
-
steps: [
|
15
|
-
{
|
16
|
-
title: 'Example Title',
|
17
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
18
|
-
target: '.exampleNoOverlay',
|
19
|
-
},
|
20
|
-
{
|
21
|
-
title: 'Toggle',
|
22
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
23
|
-
target: '.pb_toggle_control',
|
24
|
-
},
|
25
|
-
{
|
26
|
-
title: 'Top Nav',
|
27
|
-
content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
|
28
|
-
target: '.pb--page--topNav',
|
29
|
-
},
|
30
|
-
],
|
31
|
-
})
|
32
|
-
|
33
|
-
return (
|
34
|
-
<div>
|
35
|
-
<div
|
36
|
-
className="exampleNoOverlay"
|
37
|
-
style={{ 'display': 'inline' }}
|
38
|
-
>
|
39
|
-
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
|
40
|
-
</div>
|
41
|
-
<br />
|
42
|
-
<br />
|
43
|
-
<Button
|
44
|
-
onClick={() => {
|
45
|
-
setNoOverlayState({ ...noOverlay,
|
46
|
-
run: true,
|
47
|
-
})
|
48
|
-
}}
|
49
|
-
>
|
50
|
-
{'Start Tour'}
|
51
|
-
</Button>
|
52
|
-
<br />
|
53
|
-
<br />
|
54
|
-
<Button
|
55
|
-
onClick={() => {
|
56
|
-
setNoOverlayState({
|
57
|
-
...noOverlay,
|
58
|
-
run: false,
|
59
|
-
})
|
60
|
-
}}
|
61
|
-
>
|
62
|
-
{'Reset/Stop Tour'}
|
63
|
-
</Button>
|
64
|
-
|
65
|
-
<Walkthrough
|
66
|
-
disableOverlay
|
67
|
-
run={noOverlay.run}
|
68
|
-
steps={noOverlay.steps}
|
69
|
-
{...props}
|
70
|
-
/>
|
71
|
-
</div>
|
72
|
-
)
|
73
|
-
}
|
74
|
-
|
75
|
-
export default WalkthroughNoOverlay
|
@@ -1,75 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Walkthrough } from '../../'
|
3
|
-
|
4
|
-
const WalkthroughStyled = (props) => {
|
5
|
-
const [state, setState] = useState({
|
6
|
-
run: false,
|
7
|
-
steps: [
|
8
|
-
{
|
9
|
-
title: 'Example title',
|
10
|
-
content:
|
11
|
-
'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
|
12
|
-
target: '.styled',
|
13
|
-
},
|
14
|
-
{
|
15
|
-
title: 'Toggle',
|
16
|
-
content:
|
17
|
-
'By default the walkthrough kit will cycle through each step provided.',
|
18
|
-
target: '.pb_toggle_control',
|
19
|
-
},
|
20
|
-
{
|
21
|
-
title: 'Top Nav',
|
22
|
-
content:
|
23
|
-
'By default the walkthrough kit will cycle through each step provided.',
|
24
|
-
target: '.pb--page--topNav',
|
25
|
-
},
|
26
|
-
],
|
27
|
-
})
|
28
|
-
|
29
|
-
return (
|
30
|
-
<div>
|
31
|
-
<div
|
32
|
-
className="styled"
|
33
|
-
style={{ 'display': 'inline' }}
|
34
|
-
>
|
35
|
-
{'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
|
36
|
-
</div>
|
37
|
-
<br />
|
38
|
-
<br />
|
39
|
-
<Button
|
40
|
-
onClick={() => {
|
41
|
-
setState({ ...state,
|
42
|
-
run: true,
|
43
|
-
})
|
44
|
-
}}
|
45
|
-
>
|
46
|
-
{'Start Tour'}
|
47
|
-
</Button>
|
48
|
-
<br />
|
49
|
-
<br />
|
50
|
-
<Button
|
51
|
-
onClick={() => {
|
52
|
-
setState({
|
53
|
-
...state,
|
54
|
-
run: false,
|
55
|
-
})
|
56
|
-
}}
|
57
|
-
>
|
58
|
-
{'Reset/Stop Tour'}
|
59
|
-
</Button>
|
60
|
-
|
61
|
-
<Walkthrough
|
62
|
-
run={state.run}
|
63
|
-
steps={state.steps}
|
64
|
-
styles={{
|
65
|
-
options: {
|
66
|
-
beaconSize: 120,
|
67
|
-
},
|
68
|
-
}}
|
69
|
-
{...props}
|
70
|
-
/>
|
71
|
-
</div>
|
72
|
-
)
|
73
|
-
}
|
74
|
-
|
75
|
-
export default WalkthroughStyled
|
@@ -1,6 +0,0 @@
|
|
1
|
-
export { default as WalkthroughDefault } from './_walkthrough_default.jsx'
|
2
|
-
export { default as WalkthroughContinuous } from './_walkthrough_continuous.jsx'
|
3
|
-
export { default as WalkthroughNoBeacon } from './_walkthrough_no_beacon.jsx'
|
4
|
-
export { default as WalkthroughMultiBeacon } from './_walkthrough_multi_beacon.jsx'
|
5
|
-
export { default as WalkthroughNoOverlay } from './_walkthrough_no_overlay.jsx'
|
6
|
-
export { default as WalkthroughStyled } from './_walkthrough_styled.jsx'
|
@@ -1,34 +0,0 @@
|
|
1
|
-
/* eslint-disable no-unused-vars */
|
2
|
-
import { ensureAccessible, render, renderKit, screen } from '../utilities/test-utils'
|
3
|
-
import React from 'react'
|
4
|
-
import { Walkthrough } from '../'
|
5
|
-
|
6
|
-
/* See these resources for more testing info:
|
7
|
-
- https://github.com/testing-library/jest-dom#usage for useage and examples
|
8
|
-
- https://jestjs.io/docs/en/using-matchers
|
9
|
-
*/
|
10
|
-
|
11
|
-
const testId = 'walkthroughKitTest',
|
12
|
-
kitClass = 'pb_walkthrough'
|
13
|
-
|
14
|
-
test('expect kit to exist', () => {
|
15
|
-
const props = {
|
16
|
-
data: { testid: testId },
|
17
|
-
}
|
18
|
-
|
19
|
-
const kit = renderKit(Walkthrough, props)
|
20
|
-
expect(kit).toBeInTheDocument()
|
21
|
-
expect(kit).toHaveClass(kitClass)
|
22
|
-
})
|
23
|
-
|
24
|
-
test('returns namespaced class name', () => {
|
25
|
-
render(
|
26
|
-
<Walkthrough
|
27
|
-
className="additional_class"
|
28
|
-
data={{ testid: testId }}
|
29
|
-
/>
|
30
|
-
)
|
31
|
-
|
32
|
-
const kit = screen.getByTestId(testId)
|
33
|
-
expect(kit).toHaveClass('additional_class')
|
34
|
-
})
|