playbook_ui 10.15.1.pre.alpha.rubocop.deps → 10.18.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 +3 -0
- data/app/pb_kits/playbook/pb_background/background.test.js +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
- data/app/pb_kits/playbook/pb_button/_button.scss +17 -0
- data/app/pb_kits/playbook/pb_button/button.rb +6 -3
- data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +17 -4
- data/app/pb_kits/playbook/pb_caption/_caption.scss +25 -8
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_caption/caption.rb +5 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.md +1 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.jsx +1 -3
- data/app/pb_kits/playbook/pb_card/_card.scss +0 -6
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -8
- data/app/pb_kits/playbook/pb_card/card.html.erb +2 -0
- data/app/pb_kits/playbook/pb_card/card.rb +0 -8
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb +3 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +9 -2
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +6 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +13 -4
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +4 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.scss +17 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +6 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +22 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +12 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb +89 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +210 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md +5 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +14 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +16 -1
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb +12 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +19 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +2 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +4 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
- data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +24 -8
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb +54 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx +77 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.md +1 -0
- data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_image/image.html.erb +1 -1
- data/app/pb_kits/playbook/pb_image/image.rb +8 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +9 -4
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_list/list.rb +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +3 -0
- data/app/pb_kits/playbook/pb_source/source.rb +3 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +4 -1
- data/app/pb_kits/playbook/pb_title/title.html.erb +4 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +17 -25
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
- data/app/pb_kits/playbook/utilities/_cursor.scss +3 -0
- data/app/pb_kits/playbook/utilities/_display.scss +23 -0
- data/app/pb_kits/playbook/utilities/_shadow.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +19 -1
- data/dist/reset.css +1 -60
- data/lib/playbook/classnames.rb +3 -0
- data/lib/playbook/cursor.rb +29 -0
- data/lib/playbook/display.rb +29 -0
- data/lib/playbook/engine.rb +0 -1
- data/lib/playbook/kit_base.rb +6 -0
- data/lib/playbook/markdown/helper.rb +2 -2
- data/lib/playbook/pb_doc_helper.rb +4 -0
- data/lib/playbook/props/base.rb +2 -2
- data/lib/playbook/shadow.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +3 -0
- metadata +47 -17
@@ -43,6 +43,7 @@ module Playbook
|
|
43
43
|
dark ? "dark" : nil
|
44
44
|
end
|
45
45
|
|
46
|
+
# rubocop:disable Style/CaseLikeIf
|
46
47
|
def layout_class
|
47
48
|
if layout == "right"
|
48
49
|
"layout_right"
|
@@ -52,6 +53,7 @@ module Playbook
|
|
52
53
|
""
|
53
54
|
end
|
54
55
|
end
|
56
|
+
# rubocop:enable Style/CaseLikeIf
|
55
57
|
|
56
58
|
def size_class
|
57
59
|
size ? "large" : nil
|
@@ -1,5 +1,6 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/SingleArgumentDig, Style/HashLikeCase
|
3
4
|
module Playbook
|
4
5
|
module PbSource
|
5
6
|
class Source < Playbook::KitBase
|
@@ -59,3 +60,5 @@ module Playbook
|
|
59
60
|
end
|
60
61
|
end
|
61
62
|
end
|
63
|
+
|
64
|
+
# rubocop:enable Style/SingleArgumentDig, Style/HashLikeCase
|
@@ -10,25 +10,14 @@ import solidGauge from 'highcharts/modules/solid-gauge'
|
|
10
10
|
pie(Highcharts)
|
11
11
|
|
12
12
|
// Map Data Color String Props to our SCSS Variables
|
13
|
+
|
13
14
|
const mapColors = (array) => {
|
15
|
+
const regex = /(data)\-[1-8]/ //eslint-disable-line
|
16
|
+
|
14
17
|
const newArray = array.map((item) => {
|
15
|
-
return item
|
16
|
-
? `${colors.
|
17
|
-
: item
|
18
|
-
? `${colors.data_2}`
|
19
|
-
: item == 'data-3'
|
20
|
-
? `${colors.data_3}`
|
21
|
-
: item == 'data-4'
|
22
|
-
? `${colors.data_4}`
|
23
|
-
: item == 'data-5'
|
24
|
-
? `${colors.data_5}`
|
25
|
-
: item == 'data-6'
|
26
|
-
? `${colors.data_6}`
|
27
|
-
: item == 'data-7'
|
28
|
-
? `${colors.data_7}`
|
29
|
-
: item == 'data-8'
|
30
|
-
? `${colors.data_8}`
|
31
|
-
: ''
|
18
|
+
return regex.test(item)
|
19
|
+
? `${colors[`data_${item[item.length - 1]}`]}`
|
20
|
+
: item
|
32
21
|
})
|
33
22
|
return newArray
|
34
23
|
}
|
@@ -72,13 +61,13 @@ class pbChart {
|
|
72
61
|
if (this.options.type == 'variablepie' || this.options.type == 'pie'){
|
73
62
|
this.setupPieChart(options)
|
74
63
|
} else if (this.options.type == 'gauge') {
|
75
|
-
this.setupGauge()
|
64
|
+
this.setupGauge(options)
|
76
65
|
} else {
|
77
|
-
this.setupChart()
|
66
|
+
this.setupChart(options)
|
78
67
|
}
|
79
68
|
}
|
80
69
|
|
81
|
-
setupGauge() {
|
70
|
+
setupGauge(options) {
|
82
71
|
highchartsMore(Highcharts)
|
83
72
|
solidGauge(Highcharts)
|
84
73
|
Highcharts.setOptions(highchartsTheme)
|
@@ -128,19 +117,21 @@ class pbChart {
|
|
128
117
|
pointFormat: this.defaults.tooltipHtml,
|
129
118
|
followPointer: true,
|
130
119
|
},
|
120
|
+
colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
|
131
121
|
plotOptions: {
|
132
122
|
series: {
|
133
123
|
animation: !this.defaults.disableAnimation,
|
134
124
|
},
|
135
125
|
solidgauge: {
|
126
|
+
borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
|
136
127
|
dataLabels: {
|
137
128
|
format: `<span class="prefix">${this.defaults.prefix}</span>` +
|
138
129
|
'<span class="fix">{y:,f}</span>' +
|
139
130
|
`<span class="suffix">${this.defaults.suffix}</span>`,
|
140
|
-
},
|
141
|
-
},
|
131
|
+
} },
|
142
132
|
},
|
143
|
-
}
|
133
|
+
},
|
134
|
+
)
|
144
135
|
document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
|
145
136
|
if (document.querySelector('.prefix')) {
|
146
137
|
document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
|
@@ -155,6 +146,7 @@ class pbChart {
|
|
155
146
|
text: this.defaults.title,
|
156
147
|
},
|
157
148
|
chart: {
|
149
|
+
height: this.defaults.height,
|
158
150
|
type: this.defaults.type,
|
159
151
|
events: {
|
160
152
|
render: (event) => alignBlockElement(event),
|
@@ -172,7 +164,6 @@ class pbChart {
|
|
172
164
|
format: this.defaults.dataLabelHtml,
|
173
165
|
},
|
174
166
|
showInLegend: this.defaults.showInLegend,
|
175
|
-
|
176
167
|
},
|
177
168
|
},
|
178
169
|
|
@@ -195,7 +186,7 @@ class pbChart {
|
|
195
186
|
})
|
196
187
|
}
|
197
188
|
|
198
|
-
setupChart() {
|
189
|
+
setupChart(options) {
|
199
190
|
Highcharts.setOptions(highchartsTheme)
|
200
191
|
|
201
192
|
const configOptions = {
|
@@ -222,6 +213,7 @@ class pbChart {
|
|
222
213
|
legend: {
|
223
214
|
enabled: this.defaults.legend,
|
224
215
|
},
|
216
|
+
colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
|
225
217
|
plotOptions: {
|
226
218
|
series: {
|
227
219
|
pointStart: this.defaults.pointStart,
|
@@ -12,6 +12,7 @@ $red: #FF2229;
|
|
12
12
|
$yellow: #F9BB00;
|
13
13
|
$green: #00CA74;
|
14
14
|
$orange: #FD804C;
|
15
|
+
$default: #93a8b8;
|
15
16
|
$colors: (
|
16
17
|
royal: $royal,
|
17
18
|
purple: $purple,
|
@@ -19,7 +20,8 @@ $colors: (
|
|
19
20
|
red: $red,
|
20
21
|
yellow: $yellow,
|
21
22
|
green: $green,
|
22
|
-
orange: $orange
|
23
|
+
orange: $orange,
|
24
|
+
default: $default,
|
23
25
|
);
|
24
26
|
|
25
27
|
/* Specialty Gradient -----------------*/
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.display_block {
|
2
|
+
display: block;
|
3
|
+
}
|
4
|
+
|
5
|
+
.display_inline_block {
|
6
|
+
display: inline-block;
|
7
|
+
}
|
8
|
+
|
9
|
+
.display_inline {
|
10
|
+
display: inline;
|
11
|
+
}
|
12
|
+
|
13
|
+
.display_flex {
|
14
|
+
display: flex;
|
15
|
+
}
|
16
|
+
|
17
|
+
.display_inline_flex {
|
18
|
+
display: inline-flex;
|
19
|
+
}
|
20
|
+
|
21
|
+
.display_hidden {
|
22
|
+
display: none;
|
23
|
+
}
|
@@ -57,10 +57,28 @@ const zIndexProps = ({ zIndex }) => {
|
|
57
57
|
return css
|
58
58
|
}
|
59
59
|
|
60
|
+
const shadowProps = ({ shadow }) => {
|
61
|
+
let css = ''
|
62
|
+
css += shadow ? `shadow_${shadow} ` : ''
|
63
|
+
return css
|
64
|
+
}
|
65
|
+
|
66
|
+
const displayProps = ({ display }) => {
|
67
|
+
let css = ''
|
68
|
+
css += display ? `display_${display} ` : ''
|
69
|
+
return css
|
70
|
+
}
|
71
|
+
|
72
|
+
const cursorProps = ({ cursor }) => {
|
73
|
+
let css = ''
|
74
|
+
css += cursor ? `cursor_${cursor} ` : ''
|
75
|
+
return css
|
76
|
+
}
|
77
|
+
|
60
78
|
// All Exported as a single function
|
61
79
|
export const globalProps = (props, defaultProps = {}) => {
|
62
80
|
const allProps = { ...props, ...defaultProps }
|
63
|
-
return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps)
|
81
|
+
return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + displayProps(allProps) + cursorProps(allProps)
|
64
82
|
}
|
65
83
|
|
66
84
|
export const deprecatedProps = (kit, props = []) => {
|
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/classnames.rb
CHANGED
@@ -0,0 +1,29 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module Cursor
|
5
|
+
def self.included(base)
|
6
|
+
base.prop :cursor
|
7
|
+
end
|
8
|
+
|
9
|
+
def cursor_props
|
10
|
+
selected_props = cursor_options.keys.select { |sk| try(sk) }
|
11
|
+
return nil unless selected_props.present?
|
12
|
+
|
13
|
+
selected_props.map do |k|
|
14
|
+
cursor_value = send(k)
|
15
|
+
"cursor_#{cursor_value}" if cursor_values.include? cursor_value
|
16
|
+
end.compact.join(" ")
|
17
|
+
end
|
18
|
+
|
19
|
+
def cursor_options
|
20
|
+
{
|
21
|
+
cursor: "cursor",
|
22
|
+
}
|
23
|
+
end
|
24
|
+
|
25
|
+
def cursor_values
|
26
|
+
%w[pointer]
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module Display
|
5
|
+
def self.included(base)
|
6
|
+
base.prop :display
|
7
|
+
end
|
8
|
+
|
9
|
+
def display_props
|
10
|
+
selected_props = display_options.keys.select { |sk| try(sk) }
|
11
|
+
return nil unless selected_props.present?
|
12
|
+
|
13
|
+
selected_props.map do |k|
|
14
|
+
display_value = send(k)
|
15
|
+
"display_#{display_value}" if display_values.include? display_value
|
16
|
+
end.compact.join(" ")
|
17
|
+
end
|
18
|
+
|
19
|
+
def display_options
|
20
|
+
{
|
21
|
+
display: "display",
|
22
|
+
}
|
23
|
+
end
|
24
|
+
|
25
|
+
def display_values
|
26
|
+
%w[block inline_block inline flex inline_flex hidden]
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
data/lib/playbook/engine.rb
CHANGED
data/lib/playbook/kit_base.rb
CHANGED
@@ -4,6 +4,9 @@ require "playbook/classnames"
|
|
4
4
|
require "playbook/spacing"
|
5
5
|
require "playbook/z_index"
|
6
6
|
require "playbook/number_spacing"
|
7
|
+
require "playbook/shadow"
|
8
|
+
require "playbook/display"
|
9
|
+
require "playbook/cursor"
|
7
10
|
|
8
11
|
module Playbook
|
9
12
|
class KitBase < ViewComponent::Base
|
@@ -13,6 +16,9 @@ module Playbook
|
|
13
16
|
include Playbook::Spacing
|
14
17
|
include Playbook::ZIndex
|
15
18
|
include Playbook::NumberSpacing
|
19
|
+
include Playbook::Shadow
|
20
|
+
include Playbook::Display
|
21
|
+
include Playbook::Cursor
|
16
22
|
|
17
23
|
prop :id
|
18
24
|
prop :data, type: Playbook::Props::Hash, default: {}
|
@@ -80,7 +80,7 @@ module Playbook
|
|
80
80
|
loop do
|
81
81
|
break unless @headers.include?(permalink)
|
82
82
|
|
83
|
-
permalink.gsub!(
|
83
|
+
permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
|
84
84
|
end
|
85
85
|
end
|
86
86
|
@headers << permalink
|
@@ -121,7 +121,7 @@ module Playbook
|
|
121
121
|
if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
|
122
122
|
@element_items = []
|
123
123
|
@list_items.each do |item, _index|
|
124
|
-
item.gsub(%r{
|
124
|
+
item.gsub(%r{<li>(.*)</li>}) do
|
125
125
|
@element_items.push(Regexp.last_match(1))
|
126
126
|
end
|
127
127
|
end
|
@@ -26,6 +26,7 @@ module Playbook
|
|
26
26
|
end
|
27
27
|
|
28
28
|
# Deal with lists of kits, used in Playbook doc and Externally
|
29
|
+
# rubocop:disable Style/StringConcatenation
|
29
30
|
def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
|
30
31
|
display_kits = []
|
31
32
|
kits = get_kits
|
@@ -40,6 +41,7 @@ module Playbook
|
|
40
41
|
end
|
41
42
|
raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
|
42
43
|
end
|
44
|
+
# rubocop:enable Style/StringConcatenation
|
43
45
|
|
44
46
|
# rubocop:disable Naming/AccessorMethodName
|
45
47
|
def get_kits
|
@@ -48,12 +50,14 @@ module Playbook
|
|
48
50
|
end
|
49
51
|
# rubocop:enable Naming/AccessorMethodName
|
50
52
|
|
53
|
+
# rubocop:disable Style/OptionalBooleanParameter
|
51
54
|
def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
|
52
55
|
title = pb_doc_render_clickable_title(kit, type)
|
53
56
|
ui = raw("<div class='pb--docItem-ui'>
|
54
57
|
#{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
|
55
58
|
title + ui
|
56
59
|
end
|
60
|
+
# rubocop:enable Style/OptionalBooleanParameter
|
57
61
|
|
58
62
|
private
|
59
63
|
|
data/lib/playbook/props/base.rb
CHANGED
@@ -7,7 +7,7 @@ module Playbook
|
|
7
7
|
class Base
|
8
8
|
attr_reader :default, :deprecated, :required, :name, :kit
|
9
9
|
|
10
|
-
def initialize(default: nil, deprecated: false, required: false
|
10
|
+
def initialize(name:, kit:, default: nil, deprecated: false, required: false)
|
11
11
|
@default = default
|
12
12
|
@deprecated = deprecated
|
13
13
|
@required = required
|
@@ -39,7 +39,7 @@ module Playbook
|
|
39
39
|
end
|
40
40
|
|
41
41
|
def log(message)
|
42
|
-
logger = ActiveSupport::Logger.new(
|
42
|
+
logger = ActiveSupport::Logger.new($stdout)
|
43
43
|
@logger ||= ActiveSupport::TaggedLogging.new(logger)
|
44
44
|
@logger.log(0, message)
|
45
45
|
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module Shadow
|
5
|
+
def self.included(base)
|
6
|
+
base.prop :shadow
|
7
|
+
end
|
8
|
+
|
9
|
+
def shadow_props
|
10
|
+
selected_props = shadow_options.keys.select { |sk| try(sk) }
|
11
|
+
return nil unless selected_props.present?
|
12
|
+
|
13
|
+
selected_props.map do |k|
|
14
|
+
shadow_value = send(k)
|
15
|
+
"shadow_#{shadow_value}" if shadow_values.include? shadow_value
|
16
|
+
end.compact.join(" ")
|
17
|
+
end
|
18
|
+
|
19
|
+
def shadow_options
|
20
|
+
{
|
21
|
+
shadow: "shadow",
|
22
|
+
}
|
23
|
+
end
|
24
|
+
|
25
|
+
def shadow_values
|
26
|
+
%w[none deep deeper deepest]
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
data/lib/playbook/version.rb
CHANGED
data/lib/playbook.rb
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
require "view_component"
|
4
|
+
|
3
5
|
require "playbook/version"
|
4
6
|
require "playbook/engine"
|
5
7
|
require "playbook/props"
|
@@ -15,6 +17,7 @@ module Playbook
|
|
15
17
|
ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
|
16
18
|
|
17
19
|
class ConflictingPropsError < StandardError; end
|
20
|
+
|
18
21
|
class MissingPropError < StandardError; end
|
19
22
|
|
20
23
|
module_function
|