playbook_ui 12.23.0.pre.alpha.movemarkdown712 → 12.23.0.pre.alpha.play698responsivespacingglobalprop701
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +311 -0
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +149 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +2 -0
- data/app/pb_kits/playbook/tokens/_screen_sizes.scss +29 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +27 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +61 -16
- data/lib/playbook/markdown/helper.rb +132 -0
- data/lib/playbook/markdown.rb +3 -0
- data/lib/playbook/spacing.rb +20 -5
- data/lib/playbook/version.rb +1 -1
- data/lib/playbook.rb +2 -1
- metadata +36 -7
- data/dist/playbook-rails.js +0 -51
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b91dd130cd55fd9c676be19f84344322da9a00d41aae523639d3665771e1d83d
|
|
4
|
+
data.tar.gz: ea17401df5700535fc82dedd94af7af26e1645da49793a3a4ea4bb40964e8243
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6645923822abde8e36493c0bf266431ca51a6c1c86de9b98a1579b3d3ab149c89795398f04952e9aa0615cedbd91fc60037dc1d39811cccb70a3a9442aaf65d8
|
|
7
|
+
data.tar.gz: 8e7e9400daa0f600b2ca07fe4a19f05098dfc7c9e433c67dee9fbdb436e08485fa780496bda1c91049079575d27ae92e40d0fcf0ee87e372dcf98c73e16ffb5a
|
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
<% if !local_prop_data.present? %>
|
|
2
|
+
<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
|
|
3
|
+
<%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
|
|
4
|
+
<%= pb_rails("card", props: { padding: "none" }) do %>
|
|
5
|
+
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
|
|
6
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
|
|
7
|
+
<%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("section_separator") %>
|
|
11
|
+
<%= pb_rails("card/card_body", props: {}) do %>
|
|
12
|
+
<%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
|
|
13
|
+
<thead>
|
|
14
|
+
<tr>
|
|
15
|
+
<th>Props</th>
|
|
16
|
+
<th>Type</th>
|
|
17
|
+
<th>Values</th>
|
|
18
|
+
</tr>
|
|
19
|
+
</thead>
|
|
20
|
+
<tbody>
|
|
21
|
+
<% global_prop_data.each do |key, value|%>
|
|
22
|
+
<tr>
|
|
23
|
+
<td>
|
|
24
|
+
<%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
|
|
25
|
+
</td>
|
|
26
|
+
<td>
|
|
27
|
+
<%= pb_rails("card", props: {
|
|
28
|
+
classname: "card",
|
|
29
|
+
padding: "xxs",
|
|
30
|
+
background: "light",
|
|
31
|
+
border_none: true,
|
|
32
|
+
border_radius: "sm"
|
|
33
|
+
}) do %>
|
|
34
|
+
<%= pb_rails("body", props: {
|
|
35
|
+
classname: "kearning"
|
|
36
|
+
}) do %>
|
|
37
|
+
<% if key =~ /^padding|^margin/ %>
|
|
38
|
+
<%= "array" %>
|
|
39
|
+
<% else %>
|
|
40
|
+
<%= value[:type].to_s.downcase %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
</td>
|
|
45
|
+
<td>
|
|
46
|
+
<% if key =~ /^padding|^margin/ %>
|
|
47
|
+
<% padding_margin_values.each do |item| %>
|
|
48
|
+
<%= pb_rails("card", props: {
|
|
49
|
+
flex_direction: "row",
|
|
50
|
+
classname: "card",
|
|
51
|
+
padding: "xxs",
|
|
52
|
+
background: "light",
|
|
53
|
+
border_none: true,
|
|
54
|
+
border_radius: "sm",
|
|
55
|
+
margin: "xxs"
|
|
56
|
+
}) do %>
|
|
57
|
+
<%= pb_rails("body", props: {
|
|
58
|
+
classname: "kearning"
|
|
59
|
+
}) do %>
|
|
60
|
+
<%= item %>
|
|
61
|
+
<% end %>
|
|
62
|
+
<% end %>
|
|
63
|
+
<% end %>
|
|
64
|
+
<% else %>
|
|
65
|
+
<% if value[:values].present? %>
|
|
66
|
+
<% value[:values].each do |item| %>
|
|
67
|
+
<% if item != nil %>
|
|
68
|
+
<%= pb_rails("card", props: {
|
|
69
|
+
flex_direction: "row",
|
|
70
|
+
classname: "card",
|
|
71
|
+
padding: "xxs",
|
|
72
|
+
background: "light",
|
|
73
|
+
border_none: true,
|
|
74
|
+
border_radius: "sm",
|
|
75
|
+
margin: "xxs"
|
|
76
|
+
}) do %>
|
|
77
|
+
<%= pb_rails("body", props: {
|
|
78
|
+
classname: "kearning"
|
|
79
|
+
}) do %>
|
|
80
|
+
<%= item %>
|
|
81
|
+
<% end %>
|
|
82
|
+
<% end %>
|
|
83
|
+
<% end %>
|
|
84
|
+
<% end %>
|
|
85
|
+
<% end %>
|
|
86
|
+
<% end %>
|
|
87
|
+
</td>
|
|
88
|
+
</tr>
|
|
89
|
+
<% end %>
|
|
90
|
+
</tbody>
|
|
91
|
+
<% end %>
|
|
92
|
+
<% end %>
|
|
93
|
+
<% end %>
|
|
94
|
+
</div>
|
|
95
|
+
<% else %>
|
|
96
|
+
<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
|
|
97
|
+
<%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
|
|
98
|
+
<%= pb_rails("card", props: { padding: "none" }) do %>
|
|
99
|
+
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
|
|
100
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
|
|
101
|
+
<% if local_prop_data.present? %>
|
|
102
|
+
<%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
|
|
103
|
+
<% end %>
|
|
104
|
+
<% if local_prop_data.present? %>
|
|
105
|
+
<%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
|
|
106
|
+
<% end %>
|
|
107
|
+
<%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
|
|
108
|
+
<%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
|
|
109
|
+
<% end %>
|
|
110
|
+
<% end %>
|
|
111
|
+
<%= pb_rails("section_separator") %>
|
|
112
|
+
<%= pb_rails("card/card_body", props: {}) do %>
|
|
113
|
+
<%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
|
|
114
|
+
<thead>
|
|
115
|
+
<tr>
|
|
116
|
+
<th>Props</th>
|
|
117
|
+
<th>Type</th>
|
|
118
|
+
<th>Values</th>
|
|
119
|
+
</tr>
|
|
120
|
+
</thead>
|
|
121
|
+
<tbody>
|
|
122
|
+
<% global_prop_data.each do |key, value|%>
|
|
123
|
+
<tr>
|
|
124
|
+
<td>
|
|
125
|
+
<%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
|
|
126
|
+
</td>
|
|
127
|
+
<td>
|
|
128
|
+
<%= pb_rails("card", props: {
|
|
129
|
+
classname: "card",
|
|
130
|
+
padding: "xxs",
|
|
131
|
+
background: "light",
|
|
132
|
+
border_none: true,
|
|
133
|
+
border_radius: "sm"
|
|
134
|
+
}) do %>
|
|
135
|
+
<%= pb_rails("body", props: {
|
|
136
|
+
classname: "kearning"
|
|
137
|
+
}) do %>
|
|
138
|
+
<% if key =~ /^padding|^margin/ %>
|
|
139
|
+
<%= "array" %>
|
|
140
|
+
<% else %>
|
|
141
|
+
<%= value[:type].to_s.downcase %>
|
|
142
|
+
<% end %>
|
|
143
|
+
<% end %>
|
|
144
|
+
<% end %>
|
|
145
|
+
</td>
|
|
146
|
+
<td>
|
|
147
|
+
<% if key =~ /^padding|^margin/ %>
|
|
148
|
+
<% padding_margin_values.each do |item| %>
|
|
149
|
+
<%= pb_rails("card", props: {
|
|
150
|
+
flex_direction: "row",
|
|
151
|
+
classname: "card",
|
|
152
|
+
padding: "xxs",
|
|
153
|
+
background: "light",
|
|
154
|
+
border_none: true,
|
|
155
|
+
border_radius: "sm",
|
|
156
|
+
margin: "xxs"
|
|
157
|
+
}) do %>
|
|
158
|
+
<%= pb_rails("body", props: {
|
|
159
|
+
classname: "kearning"
|
|
160
|
+
}) do %>
|
|
161
|
+
<%= item %>
|
|
162
|
+
<% end %>
|
|
163
|
+
<% end %>
|
|
164
|
+
<% end %>
|
|
165
|
+
<% else %>
|
|
166
|
+
<% if value[:values].present? %>
|
|
167
|
+
<% value[:values].each do |item| %>
|
|
168
|
+
<% if item != nil %>
|
|
169
|
+
<%= pb_rails("card", props: {
|
|
170
|
+
flex_direction: "row",
|
|
171
|
+
classname: "card",
|
|
172
|
+
padding: "xxs",
|
|
173
|
+
background: "light",
|
|
174
|
+
border_none: true,
|
|
175
|
+
border_radius: "sm",
|
|
176
|
+
margin: "xxs"
|
|
177
|
+
}) do %>
|
|
178
|
+
<%= pb_rails("body", props: {
|
|
179
|
+
classname: "kearning"
|
|
180
|
+
}) do %>
|
|
181
|
+
<%= item %>
|
|
182
|
+
<% end %>
|
|
183
|
+
<% end %>
|
|
184
|
+
<% end %>
|
|
185
|
+
<% end %>
|
|
186
|
+
<% end %>
|
|
187
|
+
<% end %>
|
|
188
|
+
</td>
|
|
189
|
+
</tr>
|
|
190
|
+
<% end %>
|
|
191
|
+
</tbody>
|
|
192
|
+
<% end %>
|
|
193
|
+
<%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
|
|
194
|
+
<thead>
|
|
195
|
+
<tr>
|
|
196
|
+
<th>Props</th>
|
|
197
|
+
<th>Type</th>
|
|
198
|
+
<th>Values</th>
|
|
199
|
+
<th>Default</th>
|
|
200
|
+
</tr>
|
|
201
|
+
</thead>
|
|
202
|
+
<tbody>
|
|
203
|
+
<% local_prop_data.each do |key, value|%>
|
|
204
|
+
<tr>
|
|
205
|
+
<td>
|
|
206
|
+
<%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
|
|
207
|
+
</td>
|
|
208
|
+
<td>
|
|
209
|
+
<%= pb_rails("card", props: {
|
|
210
|
+
classname: "card",
|
|
211
|
+
padding: "xxs",
|
|
212
|
+
background: "light",
|
|
213
|
+
border_none: true,
|
|
214
|
+
border_radius: "sm"
|
|
215
|
+
}) do %>
|
|
216
|
+
<%= pb_rails("body", props: {
|
|
217
|
+
classname: "kearning"
|
|
218
|
+
}) do %>
|
|
219
|
+
<%= value[:type].downcase %>
|
|
220
|
+
<% end %>
|
|
221
|
+
<% end %>
|
|
222
|
+
</td>
|
|
223
|
+
<td>
|
|
224
|
+
<% if value[:values].present? %>
|
|
225
|
+
<% value[:values].each do |item| %>
|
|
226
|
+
<% if item != nil %>
|
|
227
|
+
<%= pb_rails("card", props: {
|
|
228
|
+
flex_direction: "row",
|
|
229
|
+
classname: "card",
|
|
230
|
+
padding: "xxs",
|
|
231
|
+
background: "light",
|
|
232
|
+
border_none: true,
|
|
233
|
+
border_radius: "sm",
|
|
234
|
+
margin: "xxs"
|
|
235
|
+
}) do %>
|
|
236
|
+
<%= pb_rails("body", props: {
|
|
237
|
+
classname: "kearning"
|
|
238
|
+
}) do %>
|
|
239
|
+
<%= item %>
|
|
240
|
+
<% end %>
|
|
241
|
+
<% end %>
|
|
242
|
+
<% end %>
|
|
243
|
+
<% end %>
|
|
244
|
+
<% end %>
|
|
245
|
+
</td>
|
|
246
|
+
<td>
|
|
247
|
+
<% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
|
|
248
|
+
<%= pb_rails("card", props: {
|
|
249
|
+
classname: "card",
|
|
250
|
+
padding: "xxs",
|
|
251
|
+
background: "light",
|
|
252
|
+
border_none: true,
|
|
253
|
+
border_radius: "sm"
|
|
254
|
+
}) do %>
|
|
255
|
+
<%= pb_rails("body", props: {
|
|
256
|
+
classname: "kearning"
|
|
257
|
+
}) do %>
|
|
258
|
+
<%= value[:default] %>
|
|
259
|
+
<% end %>
|
|
260
|
+
<% end %>
|
|
261
|
+
<% end %>
|
|
262
|
+
</td>
|
|
263
|
+
</tr>
|
|
264
|
+
<% end %>
|
|
265
|
+
</tbody>
|
|
266
|
+
<% end %>
|
|
267
|
+
<% end %>
|
|
268
|
+
<% end %>
|
|
269
|
+
</div>
|
|
270
|
+
<% end %>
|
|
271
|
+
|
|
272
|
+
<script>
|
|
273
|
+
|
|
274
|
+
const globalNavAndTable = document.querySelectorAll('.global-active');
|
|
275
|
+
const localNavAndTable = document.querySelectorAll('.local-active');
|
|
276
|
+
|
|
277
|
+
globalNavAndTable.forEach(element => {
|
|
278
|
+
element.style.display = 'none';
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
const globalButton = document.getElementById("global-button");
|
|
282
|
+
if (globalButton) {
|
|
283
|
+
globalButton.addEventListener("click", showGlobal);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
const localButton = document.getElementById("local-button");
|
|
287
|
+
if (localButton) {
|
|
288
|
+
localButton.addEventListener("click", showLocal);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
function showGlobal() {
|
|
292
|
+
localNavAndTable.forEach(element => {
|
|
293
|
+
element.style.display = 'none';
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
globalNavAndTable.forEach(element => {
|
|
297
|
+
element.style.display = 'table';
|
|
298
|
+
});
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
function showLocal() {
|
|
302
|
+
localNavAndTable.forEach(element => {
|
|
303
|
+
element.style.display = 'table';
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
globalNavAndTable.forEach(element => {
|
|
307
|
+
element.style.display = 'none';
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
</script>
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbDocs
|
|
5
|
+
class KitApi < Playbook::KitBase
|
|
6
|
+
prop :kit, type: Playbook::Props::String, required: true
|
|
7
|
+
|
|
8
|
+
def kit_local_props
|
|
9
|
+
local = []
|
|
10
|
+
kit_props.each do |key, value|
|
|
11
|
+
value.kit != Playbook::KitBase && local.push({ key: key, value: value })
|
|
12
|
+
end
|
|
13
|
+
local
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
def padding_margin_values
|
|
17
|
+
%w[none xxs xs sm md lg xl]
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
def local_prop_data
|
|
21
|
+
local_props = {}
|
|
22
|
+
|
|
23
|
+
kit_local_props.each do |key, _value|
|
|
24
|
+
name = key[:value].instance_variable_get(:@name)
|
|
25
|
+
type = key[:value].class.to_s.split("::").last
|
|
26
|
+
default = key[:value].instance_variable_get(:@default)
|
|
27
|
+
values = key[:value].instance_variable_get(:@values)
|
|
28
|
+
local_props[name.to_sym] = { "type": type, "default": default, "values": values }
|
|
29
|
+
end
|
|
30
|
+
local_props
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
def kit_global_props
|
|
34
|
+
global_props = {}
|
|
35
|
+
global_prop_names = []
|
|
36
|
+
global_prop_values = {}
|
|
37
|
+
global_props_with_values = {}
|
|
38
|
+
global_props_without_values = []
|
|
39
|
+
parent_child_object = {}
|
|
40
|
+
updated_global_props_with_values = {}
|
|
41
|
+
|
|
42
|
+
# extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
|
|
43
|
+
pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
|
|
44
|
+
|
|
45
|
+
# loops through the kits and extracts each prop with its values and pushes that to the global_props hash
|
|
46
|
+
kit_props.each do |key, value|
|
|
47
|
+
value.kit == Playbook::KitBase && global_props[key.to_sym] = value
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
# loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
|
|
51
|
+
global_props.each do |name, _values|
|
|
52
|
+
global_prop_names.push(name)
|
|
53
|
+
end
|
|
54
|
+
|
|
55
|
+
# Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
|
|
56
|
+
# we then save the values and type and push that to the values hash as a key value pair
|
|
57
|
+
pb_module.each do |mod|
|
|
58
|
+
mod.instance_methods.each do |method_name|
|
|
59
|
+
next unless method_name.to_s.end_with?("_values")
|
|
60
|
+
|
|
61
|
+
value = send(method_name)
|
|
62
|
+
type = value.class
|
|
63
|
+
global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
|
|
64
|
+
end
|
|
65
|
+
end
|
|
66
|
+
|
|
67
|
+
# loops through the global_prop_names array
|
|
68
|
+
# then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
|
|
69
|
+
# this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
|
|
70
|
+
# these verified global props with values are then pushed to the global_props_with_values hash
|
|
71
|
+
global_prop_names.each do |name, _prop|
|
|
72
|
+
global_prop_values.each do |key, value|
|
|
73
|
+
global_props_with_values[key] = value if key == name
|
|
74
|
+
end
|
|
75
|
+
end
|
|
76
|
+
|
|
77
|
+
# now we grab all the global_prop_names that do not have a matching key in global_prop_values.
|
|
78
|
+
# This gives us any global prop that did not have any predefined value. like classname and dark
|
|
79
|
+
global_props_without_values = global_prop_names - global_prop_values.keys
|
|
80
|
+
|
|
81
|
+
# Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
|
|
82
|
+
# save the prop names prop values and and parent module name to parent_child_object hash
|
|
83
|
+
# this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
|
|
84
|
+
pb_module.each do |mod|
|
|
85
|
+
mod.instance_methods.each do |method_name|
|
|
86
|
+
next unless method_name.to_s.end_with?("_options")
|
|
87
|
+
|
|
88
|
+
props = send(method_name)
|
|
89
|
+
parent = mod.to_s.split("::").last
|
|
90
|
+
values = send("#{parent.underscore}_values")
|
|
91
|
+
parent_child_object[parent] = { "props": props, "values": values }
|
|
92
|
+
end
|
|
93
|
+
end
|
|
94
|
+
|
|
95
|
+
# loops through each object in parent_child_object and extracts its children (props and values)
|
|
96
|
+
# loops through each child and extracts the individual props
|
|
97
|
+
# Checks if the props match any of the props in global_props_without_values
|
|
98
|
+
# if it does, then we push that prop to global_props_with_values hash
|
|
99
|
+
# This extracts the props in the spacing.rb file and any file that is not named after the props it represents
|
|
100
|
+
parent_child_object.each do |_parent, children|
|
|
101
|
+
children.each do |_child, props|
|
|
102
|
+
props.each do |prop, _value|
|
|
103
|
+
type = children[:values].class
|
|
104
|
+
values = children[:values]
|
|
105
|
+
global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
|
|
106
|
+
end
|
|
107
|
+
end
|
|
108
|
+
end
|
|
109
|
+
|
|
110
|
+
# loop through the global_props hash and the global_props_with_values hash.
|
|
111
|
+
# extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
|
|
112
|
+
# This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
|
|
113
|
+
global_props.each do |prop, value|
|
|
114
|
+
unless global_props_with_values.include?(prop)
|
|
115
|
+
type = value.class.to_s.split("::").last
|
|
116
|
+
updated_global_props_with_values[prop] = { "type": type }
|
|
117
|
+
end
|
|
118
|
+
end
|
|
119
|
+
|
|
120
|
+
# Merge updated_global_props_with_values into global_props_with_values
|
|
121
|
+
# global_props_with_values will now hold all the global props thier values and type
|
|
122
|
+
global_props_with_values.merge!(updated_global_props_with_values)
|
|
123
|
+
|
|
124
|
+
global_props_with_values
|
|
125
|
+
end
|
|
126
|
+
|
|
127
|
+
def global_prop_data
|
|
128
|
+
global_props = {}
|
|
129
|
+
|
|
130
|
+
kit_global_props.each do |key, value|
|
|
131
|
+
type = value[:type]
|
|
132
|
+
values = value[:values]
|
|
133
|
+
global_props[key] = { "type": type, "values": values }
|
|
134
|
+
end
|
|
135
|
+
global_props
|
|
136
|
+
end
|
|
137
|
+
|
|
138
|
+
def kit_props
|
|
139
|
+
kit_class.props
|
|
140
|
+
end
|
|
141
|
+
|
|
142
|
+
private
|
|
143
|
+
|
|
144
|
+
def kit_class
|
|
145
|
+
@kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
|
|
146
|
+
end
|
|
147
|
+
end
|
|
148
|
+
end
|
|
149
|
+
end
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
module Playbook
|
|
6
6
|
module PbDocs
|
|
7
7
|
class KitExample < Playbook::KitBase
|
|
8
|
+
include Playbook::Markdown::Helper
|
|
9
|
+
|
|
8
10
|
prop :kit, type: Playbook::Props::String, required: true
|
|
9
11
|
prop :example_title, type: Playbook::Props::String, required: true
|
|
10
12
|
prop :example_key, type: Playbook::Props::String, required: true
|
|
@@ -38,6 +38,35 @@ $breakpoints_grid: (
|
|
|
38
38
|
)
|
|
39
39
|
);
|
|
40
40
|
|
|
41
|
+
$breakpoints_max_only: (
|
|
42
|
+
xl: (
|
|
43
|
+
max: $screen-xl-max
|
|
44
|
+
),
|
|
45
|
+
lg: (
|
|
46
|
+
max: $screen-lg-max
|
|
47
|
+
),
|
|
48
|
+
md: (
|
|
49
|
+
max: $screen-md-max
|
|
50
|
+
),
|
|
51
|
+
sm: (
|
|
52
|
+
max: $screen-sm-max
|
|
53
|
+
),
|
|
54
|
+
xs: (
|
|
55
|
+
max: $screen-xs-max,
|
|
56
|
+
)
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
@mixin break_test($min: null, $max: null) {
|
|
60
|
+
@if not $max {
|
|
61
|
+
@media screen and (min-width: $min) {
|
|
62
|
+
@content;
|
|
63
|
+
}
|
|
64
|
+
} @else {
|
|
65
|
+
@media screen and (max-width: $max) {
|
|
66
|
+
@content;}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
41
70
|
@function breakpoint($breakpoint_name) {
|
|
42
71
|
@return map-get($breakpoints, $breakpoint_name);
|
|
43
72
|
}
|
|
@@ -7,7 +7,10 @@ $space_classes: (
|
|
|
7
7
|
md: $space_md,
|
|
8
8
|
lg: $space_lg,
|
|
9
9
|
xl: $space_xl,
|
|
10
|
-
none: 0
|
|
10
|
+
none: 0,
|
|
11
|
+
auto: auto,
|
|
12
|
+
initial: initial,
|
|
13
|
+
inherit: inherit
|
|
11
14
|
);
|
|
12
15
|
|
|
13
16
|
$positions: (
|
|
@@ -41,3 +44,26 @@ $positions: (
|
|
|
41
44
|
}
|
|
42
45
|
}
|
|
43
46
|
}
|
|
47
|
+
|
|
48
|
+
@each $size, $size_value in $breakpoints_max_only {
|
|
49
|
+
@each $position_name, $position in $positions {
|
|
50
|
+
@each $space_name, $space in $space_classes {
|
|
51
|
+
$min_size: map-get($size_value, "min");
|
|
52
|
+
$max_size: map-get($size_value, "max");
|
|
53
|
+
.#{$position_name}_#{$size}_#{$space_name} {
|
|
54
|
+
@if type-of($position)=="list" {
|
|
55
|
+
@each $coordinate in $position {
|
|
56
|
+
@include break_at( $max_size) {
|
|
57
|
+
#{$coordinate}: #{$space} !important;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@else {
|
|
62
|
+
@include break_at( $max_size) {
|
|
63
|
+
#{$position}: #{$space} !important;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -22,7 +22,7 @@ type AlignItems = {
|
|
|
22
22
|
type AlignSelf = {
|
|
23
23
|
alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
|
|
24
24
|
}
|
|
25
|
-
type AllSizes = None | Sizes
|
|
25
|
+
type AllSizes = None | Sizes | "auto" | "initial" | "inherit"
|
|
26
26
|
|
|
27
27
|
type BorderRadius = {
|
|
28
28
|
borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
|
|
@@ -153,22 +153,67 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
|
153
153
|
padding,
|
|
154
154
|
}: Margin & Padding) => {
|
|
155
155
|
let css = ''
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
156
|
+
const spacingProps = {
|
|
157
|
+
marginRight,
|
|
158
|
+
marginLeft,
|
|
159
|
+
marginTop,
|
|
160
|
+
marginBottom,
|
|
161
|
+
marginX,
|
|
162
|
+
marginY,
|
|
163
|
+
margin,
|
|
164
|
+
paddingRight,
|
|
165
|
+
paddingLeft,
|
|
166
|
+
paddingTop,
|
|
167
|
+
paddingBottom,
|
|
168
|
+
paddingX,
|
|
169
|
+
paddingY,
|
|
170
|
+
padding,
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
function handleObjectValue(properties: Margin | Padding, prefix: string) {
|
|
174
|
+
let classResult = '';
|
|
175
|
+
|
|
176
|
+
Object.entries(properties).forEach(([key, value]) => {
|
|
177
|
+
classResult += `${prefix}_${key}_${value} `;
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
return classResult;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
function getPrefix(key: string) {
|
|
184
|
+
const prefixes: Record<string, string> = {
|
|
185
|
+
marginRight: 'mr',
|
|
186
|
+
marginLeft: 'ml',
|
|
187
|
+
marginTop: 'mt',
|
|
188
|
+
marginBottom: 'mb',
|
|
189
|
+
marginX: 'mx',
|
|
190
|
+
marginY: 'my',
|
|
191
|
+
margin: 'm',
|
|
192
|
+
paddingRight: 'pr',
|
|
193
|
+
paddingLeft: 'pl',
|
|
194
|
+
paddingTop: 'pt',
|
|
195
|
+
paddingBottom: 'pb',
|
|
196
|
+
paddingX: 'px',
|
|
197
|
+
paddingY: 'py',
|
|
198
|
+
padding: 'p',
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
return prefixes[key];
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
Object.entries(spacingProps).forEach(([key, value]) => {
|
|
205
|
+
if (value) {
|
|
206
|
+
if (typeof value === 'object') {
|
|
207
|
+
css += handleObjectValue(value, getPrefix(key));
|
|
208
|
+
} else {
|
|
209
|
+
const prefix = getPrefix(key);
|
|
210
|
+
css += `${prefix}_${value} `;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
return css.trim();
|
|
171
215
|
},
|
|
216
|
+
|
|
172
217
|
darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
|
|
173
218
|
numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
|
|
174
219
|
let css = ''
|