playbook_ui 10.0.1.alpha.railscusticon → 10.0.3.pre.alpha.walkthrough2
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 +2 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon/_icon.jsx +3 -2
- data/app/pb_kits/playbook/pb_icon/_icon.scss +0 -9
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +11 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +7 -13
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -33
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +3 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +4 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +4 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +194 -0
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss +0 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +68 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +70 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +109 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +75 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +75 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +75 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +10 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx +34 -0
- data/app/pb_kits/playbook/playbook-doc.js +4 -6
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
- data/app/pb_kits/playbook/utilities/_number_spacing.scss +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
- data/dist/reset.css +60 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/number_spacing.rb +31 -0
- data/lib/playbook/version.rb +2 -2
- metadata +18 -4
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +0 -22
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a0d7b0a5f03e8c5d72349aa1f47d8676503726e773004908182f3f8bd5b561fb
|
4
|
+
data.tar.gz: 7b7d054667d75d26ac8ab67f5d6a28892da6904c9b599a7ec26866b2d86aad2b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fb4e5c64ae4259353b33fc55bceda5714af43cfdd481d9efc3d559ece69593f0c91d5cff29258ba1e132f83491a68f51bfc21228448497615385b73476b47a03
|
7
|
+
data.tar.gz: 350362aa3f56caa426c3e1cdb765f8cf2821ce585a7d638b635c655f98ed3dabe614f6d71703e650b6a2ef11b12e2db7bdfacf858d09a7e80a7b8802c76665b2
|
@@ -90,7 +90,9 @@
|
|
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';
|
93
94
|
@import 'pb_weekday_stacked/weekday_stacked';
|
94
95
|
@import './utilities/spacing';
|
95
96
|
@import './utilities/max_width';
|
96
97
|
@import './utilities/positioning';
|
98
|
+
@import './utilities/number_spacing';
|
@@ -4,6 +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
8
|
export { default as Avatar } from './pb_avatar/_avatar'
|
8
9
|
export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
|
9
10
|
export { default as Background } from './pb_background/_background'
|
@@ -77,12 +77,13 @@ const Icon = (props: IconProps) => {
|
|
77
77
|
// Lets check and see if the icon prop is referring to a custom Power icon...
|
78
78
|
// If so, then set fa-icon to "custom"
|
79
79
|
// this ensures the JS will not do any further operations
|
80
|
-
faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
|
80
|
+
// faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
|
81
|
+
if (!customIcon) faClasses[`fa-${icon}`] = icon
|
81
82
|
|
82
83
|
const classes = classnames(
|
83
84
|
flipMap[flip],
|
84
85
|
'pb_icon_kit',
|
85
|
-
'far',
|
86
|
+
customIcon ? '' : 'far',
|
86
87
|
faClasses,
|
87
88
|
globalProps(props),
|
88
89
|
className
|
@@ -0,0 +1,11 @@
|
|
1
|
+
### Experimental: Not currently available in the Rails version!
|
2
|
+
|
3
|
+
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
4
|
+
|
5
|
+
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
6
|
+
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
8
|
+
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
10
|
+
|
11
|
+
You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
@@ -1,13 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
) %>
|
9
|
-
<%= content_tag(:span, nil,
|
10
|
-
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
11
|
-
hidden: true
|
12
|
-
) %>
|
13
|
-
<% end %>
|
1
|
+
<%= content_tag(:i, nil,
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname ) %>
|
5
|
+
<%= content_tag(:span, nil,
|
6
|
+
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
7
|
+
hidden: true ) %>
|
@@ -1,7 +1,5 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
require "open-uri"
|
4
|
-
|
5
3
|
module Playbook
|
6
4
|
module PbIcon
|
7
5
|
class Icon < Playbook::KitBase
|
@@ -12,9 +10,7 @@ module Playbook
|
|
12
10
|
prop :flip, type: Playbook::Props::Enum,
|
13
11
|
values: ["horizontal", "vertical", "both", nil],
|
14
12
|
default: nil
|
15
|
-
prop :icon
|
16
|
-
prop :custom_icon, type: Playbook::Props::String,
|
17
|
-
default: nil
|
13
|
+
prop :icon, required: true
|
18
14
|
prop :inverse, type: Playbook::Props::Boolean,
|
19
15
|
default: false
|
20
16
|
prop :list_item, type: Playbook::Props::Boolean,
|
@@ -52,34 +48,6 @@ module Playbook
|
|
52
48
|
)
|
53
49
|
end
|
54
50
|
|
55
|
-
def custom_icon_classname
|
56
|
-
generate_classname(
|
57
|
-
"pb_icon_kit",
|
58
|
-
border_class,
|
59
|
-
fixed_width_class,
|
60
|
-
flip_class,
|
61
|
-
inverse_class,
|
62
|
-
list_item_class,
|
63
|
-
pull_class,
|
64
|
-
pulse_class,
|
65
|
-
rotation_class,
|
66
|
-
size_class,
|
67
|
-
spin_class,
|
68
|
-
separator: " "
|
69
|
-
)
|
70
|
-
end
|
71
|
-
|
72
|
-
def render_svg(path)
|
73
|
-
if File.extname(path) == ".svg"
|
74
|
-
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
75
|
-
svg = doc.at_css "svg"
|
76
|
-
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
77
|
-
raw doc
|
78
|
-
else
|
79
|
-
raise("Custom icon must be an svg. Please check your path and file type.")
|
80
|
-
end
|
81
|
-
end
|
82
|
-
|
83
51
|
private
|
84
52
|
|
85
53
|
def border_class
|
@@ -23,6 +23,7 @@ type SelectableCardProps = {
|
|
23
23
|
checked: boolean,
|
24
24
|
children?: array<React.ReactChild>,
|
25
25
|
className?: string,
|
26
|
+
customIcon?: SVGElement,
|
26
27
|
dark?: boolean,
|
27
28
|
data: object,
|
28
29
|
disabled?: boolean,
|
@@ -43,6 +44,7 @@ const SelectableCard = ({
|
|
43
44
|
checked = false,
|
44
45
|
children,
|
45
46
|
className,
|
47
|
+
customIcon,
|
46
48
|
dark = false,
|
47
49
|
data = {},
|
48
50
|
disabled = false,
|
@@ -76,6 +78,7 @@ const SelectableCard = ({
|
|
76
78
|
return (
|
77
79
|
<div className="pb_selectable_card_circle">
|
78
80
|
<Icon
|
81
|
+
customIcon={customIcon}
|
79
82
|
fixedWidth
|
80
83
|
icon="check"
|
81
84
|
/>
|
@@ -19,6 +19,7 @@ type SelectableCardIconProps = {
|
|
19
19
|
checked?: boolean,
|
20
20
|
checkmark: boolean,
|
21
21
|
className?: string,
|
22
|
+
customIcon?: SVGElement,
|
22
23
|
dark?: boolean,
|
23
24
|
data?: Object,
|
24
25
|
disabled?: boolean,
|
@@ -38,6 +39,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
|
|
38
39
|
checkmark = false,
|
39
40
|
checked = false,
|
40
41
|
className,
|
42
|
+
customIcon,
|
41
43
|
dark = false,
|
42
44
|
data = {},
|
43
45
|
disabled = false,
|
@@ -72,6 +74,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
|
|
72
74
|
>
|
73
75
|
<SelectableCard
|
74
76
|
checked={checked}
|
77
|
+
customIcon={customIcon}
|
75
78
|
dark={dark}
|
76
79
|
disabled={disabled}
|
77
80
|
icon={checkmark}
|
@@ -84,6 +87,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
|
|
84
87
|
{
|
85
88
|
<>
|
86
89
|
<SelectableIcon
|
90
|
+
customIcon={customIcon}
|
87
91
|
icon={icon}
|
88
92
|
inputs="disabled"
|
89
93
|
size="2x"
|
@@ -17,6 +17,7 @@ type SelectableIconProps = {
|
|
17
17
|
aria?: Object,
|
18
18
|
checked?: boolean,
|
19
19
|
className?: string,
|
20
|
+
customIcon?: SVGElement,
|
20
21
|
disabled?: boolean,
|
21
22
|
data?: Object,
|
22
23
|
icon: string,
|
@@ -32,6 +33,7 @@ const SelectableIcon = ({
|
|
32
33
|
aria = {},
|
33
34
|
className,
|
34
35
|
checked = false,
|
36
|
+
customIcon,
|
35
37
|
data = {},
|
36
38
|
disabled = false,
|
37
39
|
icon,
|
@@ -69,6 +71,7 @@ const SelectableIcon = ({
|
|
69
71
|
<If condition={inputs === 'disabled'}>
|
70
72
|
<>
|
71
73
|
<Icon
|
74
|
+
customIcon={customIcon}
|
72
75
|
icon={icon}
|
73
76
|
size="2x"
|
74
77
|
/>
|
@@ -92,6 +95,7 @@ const SelectableIcon = ({
|
|
92
95
|
/>
|
93
96
|
<label htmlFor={inputIdPresent}>
|
94
97
|
<Icon
|
98
|
+
customIcon={customIcon}
|
95
99
|
icon={icon}
|
96
100
|
size="2x"
|
97
101
|
/>
|
@@ -0,0 +1,194 @@
|
|
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
|
@@ -0,0 +1,68 @@
|
|
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
|
@@ -0,0 +1,70 @@
|
|
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
|
@@ -0,0 +1,109 @@
|
|
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
|
@@ -0,0 +1,75 @@
|
|
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
|
@@ -0,0 +1,75 @@
|
|
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
|
@@ -0,0 +1,75 @@
|
|
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
|
@@ -0,0 +1,6 @@
|
|
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'
|
@@ -0,0 +1,34 @@
|
|
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
|
+
})
|
@@ -1,6 +1,6 @@
|
|
1
|
+
/* eslint-disable no-unused-vars */
|
1
2
|
// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
|
2
3
|
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,9 +94,10 @@ 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'
|
97
98
|
import * as WeekdayStacked from 'pb_weekday_stacked/docs'
|
98
99
|
|
99
|
-
WebpackerReact.
|
100
|
+
WebpackerReact.setup({
|
100
101
|
...Avatar,
|
101
102
|
...AvatarActionButton,
|
102
103
|
...Background,
|
@@ -187,9 +188,6 @@ WebpackerReact.registerComponents({
|
|
187
188
|
...Typeahead,
|
188
189
|
...User,
|
189
190
|
...UserBadge,
|
191
|
+
...Walkthrough,
|
190
192
|
...WeekdayStacked,
|
191
193
|
})
|
192
|
-
ujs.setup(
|
193
|
-
() => WebpackerReact.mountComponents(),
|
194
|
-
() => WebpackerReact.unmountComponents()
|
195
|
-
)
|
@@ -14,6 +14,7 @@ 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'
|
17
18
|
|
18
19
|
WebpackerReact.registerComponents({
|
19
20
|
BarGraph,
|
@@ -27,6 +28,7 @@ WebpackerReact.registerComponents({
|
|
27
28
|
Passphrase,
|
28
29
|
RichTextEditor,
|
29
30
|
Typeahead,
|
31
|
+
Walkthrough,
|
30
32
|
})
|
31
33
|
|
32
34
|
ujs.setup(
|
@@ -39,6 +39,12 @@ const darkProps = ({ dark }) => {
|
|
39
39
|
return css
|
40
40
|
}
|
41
41
|
|
42
|
+
const numberSpacingProps = ({ numberSpacing }) => {
|
43
|
+
let css = ''
|
44
|
+
css += numberSpacing ? `ns_${numberSpacing} ` : ''
|
45
|
+
return css
|
46
|
+
}
|
47
|
+
|
42
48
|
const maxWidthProps = ({ maxWidth }) => {
|
43
49
|
let css = ''
|
44
50
|
css += maxWidth ? `max_width_${maxWidth } ` : ''
|
@@ -54,7 +60,7 @@ const zIndexProps = ({ zIndex }) => {
|
|
54
60
|
// All Exported as a single function
|
55
61
|
export const globalProps = (props, defaultProps = {}) => {
|
56
62
|
const allProps = { ...props, ...defaultProps }
|
57
|
-
return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps)
|
63
|
+
return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps)
|
58
64
|
}
|
59
65
|
|
60
66
|
export const deprecatedProps = (kit, props = []) => {
|
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/classnames.rb
CHANGED
data/lib/playbook/kit_base.rb
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
require "playbook/classnames"
|
4
4
|
require "playbook/spacing"
|
5
5
|
require "playbook/z_index"
|
6
|
+
require "playbook/number_spacing"
|
6
7
|
|
7
8
|
module Playbook
|
8
9
|
class KitBase < ViewComponent::Base
|
@@ -11,6 +12,7 @@ module Playbook
|
|
11
12
|
include Playbook::Classnames
|
12
13
|
include Playbook::Spacing
|
13
14
|
include Playbook::ZIndex
|
15
|
+
include Playbook::NumberSpacing
|
14
16
|
|
15
17
|
prop :id
|
16
18
|
prop :data, type: Playbook::Props::Hash, default: {}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module NumberSpacing
|
5
|
+
def self.included(base)
|
6
|
+
base.prop :number_spacing
|
7
|
+
end
|
8
|
+
|
9
|
+
private
|
10
|
+
|
11
|
+
def number_spacing_props
|
12
|
+
selected_index_props = number_spacing_options.keys.select { |sk| try(sk) }
|
13
|
+
return nil unless selected_index_props.present?
|
14
|
+
|
15
|
+
selected_index_props.map do |k|
|
16
|
+
index_value = send(k)
|
17
|
+
"ns_#{index_value}" if number_spacing_values.include? index_value
|
18
|
+
end.compact.join(" ")
|
19
|
+
end
|
20
|
+
|
21
|
+
def number_spacing_options
|
22
|
+
{
|
23
|
+
number_spacing: "ns",
|
24
|
+
}
|
25
|
+
end
|
26
|
+
|
27
|
+
def number_spacing_values
|
28
|
+
%w[tabular]
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
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.0.3.pre.alpha.walkthrough2
|
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-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1004,8 +1004,8 @@ files:
|
|
1004
1004
|
- app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
|
1005
1005
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
|
1006
1006
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
|
1007
|
-
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
|
1008
1007
|
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
|
1008
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
|
1009
1009
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
1010
1010
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
|
1011
1011
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
|
@@ -1958,6 +1958,17 @@ 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
|
1961
1972
|
- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx
|
1962
1973
|
- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
|
1963
1974
|
- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
|
@@ -2000,6 +2011,7 @@ files:
|
|
2000
2011
|
- app/pb_kits/playbook/utilities/_background_colors.scss
|
2001
2012
|
- app/pb_kits/playbook/utilities/_colors.scss
|
2002
2013
|
- app/pb_kits/playbook/utilities/_max_width.scss
|
2014
|
+
- app/pb_kits/playbook/utilities/_number_spacing.scss
|
2003
2015
|
- app/pb_kits/playbook/utilities/_positioning.scss
|
2004
2016
|
- app/pb_kits/playbook/utilities/_spacing.scss
|
2005
2017
|
- app/pb_kits/playbook/utilities/globalProps.js
|
@@ -2026,6 +2038,7 @@ files:
|
|
2026
2038
|
- lib/playbook/markdown.rb
|
2027
2039
|
- lib/playbook/markdown/helper.rb
|
2028
2040
|
- lib/playbook/markdown/template_handler.rb
|
2041
|
+
- lib/playbook/number_spacing.rb
|
2029
2042
|
- lib/playbook/pb_doc_helper.rb
|
2030
2043
|
- lib/playbook/pb_forms_helper.rb
|
2031
2044
|
- lib/playbook/pb_kit_helper.rb
|
@@ -2067,7 +2080,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2067
2080
|
- !ruby/object:Gem::Version
|
2068
2081
|
version: 1.3.1
|
2069
2082
|
requirements: []
|
2070
|
-
|
2083
|
+
rubyforge_project:
|
2084
|
+
rubygems_version: 2.7.3
|
2071
2085
|
signing_key:
|
2072
2086
|
specification_version: 4
|
2073
2087
|
summary: Playbook Design System
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<%# SVG fill color inherited from css color property %>
|
2
|
-
<div class="icon-wrapper" style="color:blue;">
|
3
|
-
|
4
|
-
<p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
|
5
|
-
<p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
|
6
|
-
|
7
|
-
<%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
8
|
-
<%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
9
|
-
<%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
10
|
-
<%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
|
11
|
-
|
12
|
-
|
13
|
-
<%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
|
14
|
-
|
15
|
-
|
16
|
-
<%= pb_rails("body", props: {
|
17
|
-
text: "Custom icons must be SVGs. They can be locally or remotely
|
18
|
-
sourced and are compatible with other icon props (size, rotation,
|
19
|
-
spin, flip, etc). Their SVG fill colors will be inherited from
|
20
|
-
parent element's css color properties."
|
21
|
-
} ) %>
|
22
|
-
</div>
|