playbook_ui 12.23.0 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752
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_avatar/docs/_avatar_swift.md +1 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_card/_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +99 -95
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +3 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +44 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +34 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +8 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +18 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +168 -0
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +3 -2
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +75 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +6 -1
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +13 -4
- data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_title/_title.scss +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +11 -6
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +2 -2
- data/app/pb_kits/playbook/tokens/_screen_sizes.scss +19 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +27 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +61 -16
- data/dist/playbook-rails.js +323 -0
- data/lib/playbook/pb_doc_helper.rb +4 -1
- data/lib/playbook/spacing.rb +20 -5
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -2
- metadata +17 -41
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
- data/lib/playbook/markdown/helper.rb +0 -132
- data/lib/playbook/markdown.rb +0 -3
@@ -84,8 +84,11 @@ module Playbook
|
|
84
84
|
def pb_doc_render_clickable_title(kit, type)
|
85
85
|
url = "#"
|
86
86
|
begin
|
87
|
-
url =
|
87
|
+
url = case type
|
88
|
+
when "react"
|
88
89
|
kit_show_reacts_path(kit)
|
90
|
+
when "swift"
|
91
|
+
kit_show_swift_path(kit)
|
89
92
|
else
|
90
93
|
kit_show_path(kit)
|
91
94
|
end
|
data/lib/playbook/spacing.rb
CHANGED
@@ -50,17 +50,32 @@ module Playbook
|
|
50
50
|
end
|
51
51
|
|
52
52
|
def spacing_values
|
53
|
-
%w[none xxs xs sm md lg xl]
|
53
|
+
%w[none xxs xs sm md lg xl auto initial inherit]
|
54
|
+
end
|
55
|
+
|
56
|
+
def screen_size_values
|
57
|
+
%w[xs sm md lg xl]
|
54
58
|
end
|
55
59
|
|
56
60
|
def spacing_props
|
57
61
|
selected_props = spacing_options.keys.select { |sk| try(sk) }
|
58
62
|
return nil unless selected_props.present?
|
59
63
|
|
60
|
-
selected_props.
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
+
responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
|
65
|
+
css = ""
|
66
|
+
selected_props.each do |prop|
|
67
|
+
spacing_value = send(prop)
|
68
|
+
prefix = spacing_options[prop]
|
69
|
+
if responsive
|
70
|
+
spacing_value.each do |key, value|
|
71
|
+
css += "#{prefix}_#{key}_#{value} " if screen_size_values.include?(key.to_s) && spacing_values.include?(value.to_s)
|
72
|
+
end
|
73
|
+
elsif spacing_values.include?(spacing_value)
|
74
|
+
css += "#{prefix}_#{spacing_value} "
|
75
|
+
end
|
76
|
+
end
|
77
|
+
|
78
|
+
css.strip unless css.blank?
|
64
79
|
end
|
65
80
|
|
66
81
|
def max_width_props
|
data/lib/playbook/version.rb
CHANGED
data/lib/playbook.rb
CHANGED
@@ -8,10 +8,9 @@ require "playbook/props"
|
|
8
8
|
require "playbook/forms"
|
9
9
|
require "playbook/pb_forms_helper"
|
10
10
|
require "playbook/pb_kit_helper"
|
11
|
-
require "playbook/pb_doc_helper"
|
11
|
+
require "playbook/pb_doc_helper" # Duplicated from website (Temp)
|
12
12
|
require "playbook/kit_base"
|
13
13
|
require "playbook/kit_resolver"
|
14
|
-
require "playbook/markdown"
|
15
14
|
|
16
15
|
module Playbook
|
17
16
|
ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
|
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.
|
4
|
+
version: 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-
|
12
|
+
date: 2023-06-09 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -67,34 +67,6 @@ dependencies:
|
|
67
67
|
- - '='
|
68
68
|
- !ruby/object:Gem::Version
|
69
69
|
version: 2.6.1
|
70
|
-
- !ruby/object:Gem::Dependency
|
71
|
-
name: redcarpet
|
72
|
-
requirement: !ruby/object:Gem::Requirement
|
73
|
-
requirements:
|
74
|
-
- - "~>"
|
75
|
-
- !ruby/object:Gem::Version
|
76
|
-
version: '3.6'
|
77
|
-
type: :runtime
|
78
|
-
prerelease: false
|
79
|
-
version_requirements: !ruby/object:Gem::Requirement
|
80
|
-
requirements:
|
81
|
-
- - "~>"
|
82
|
-
- !ruby/object:Gem::Version
|
83
|
-
version: '3.6'
|
84
|
-
- !ruby/object:Gem::Dependency
|
85
|
-
name: rouge
|
86
|
-
requirement: !ruby/object:Gem::Requirement
|
87
|
-
requirements:
|
88
|
-
- - "~>"
|
89
|
-
- !ruby/object:Gem::Version
|
90
|
-
version: '3.15'
|
91
|
-
type: :runtime
|
92
|
-
prerelease: false
|
93
|
-
version_requirements: !ruby/object:Gem::Requirement
|
94
|
-
requirements:
|
95
|
-
- - "~>"
|
96
|
-
- !ruby/object:Gem::Version
|
97
|
-
version: '3.15'
|
98
70
|
- !ruby/object:Gem::Dependency
|
99
71
|
name: view_component
|
100
72
|
requirement: !ruby/object:Gem::Requirement
|
@@ -283,7 +255,9 @@ dependencies:
|
|
283
255
|
- - '='
|
284
256
|
- !ruby/object:Gem::Version
|
285
257
|
version: 3.3.1
|
286
|
-
description: Playbook
|
258
|
+
description: Playbook UI is built out in Ruby View Components and React Components.
|
259
|
+
Playbook takes a modern design approach and applies it in a way that makes it easy
|
260
|
+
to support bleeding edge or legacy systems.
|
287
261
|
email:
|
288
262
|
- nitroux@powerhrg.com
|
289
263
|
- dev@powerhrg.com
|
@@ -311,6 +285,7 @@ files:
|
|
311
285
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb
|
312
286
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx
|
313
287
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md
|
288
|
+
- app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md
|
314
289
|
- app/pb_kits/playbook/pb_avatar/docs/_description.md
|
315
290
|
- app/pb_kits/playbook/pb_avatar/docs/_footer.md
|
316
291
|
- app/pb_kits/playbook/pb_avatar/docs/example.yml
|
@@ -745,6 +720,8 @@ files:
|
|
745
720
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
|
746
721
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
|
747
722
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
|
723
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
|
724
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
|
748
725
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
|
749
726
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
|
750
727
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
|
@@ -759,6 +736,7 @@ files:
|
|
759
736
|
- app/pb_kits/playbook/pb_date_picker/docs/_description.md
|
760
737
|
- app/pb_kits/playbook/pb_date_picker/docs/example.yml
|
761
738
|
- app/pb_kits/playbook/pb_date_picker/docs/index.js
|
739
|
+
- app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
|
762
740
|
- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
|
763
741
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
|
764
742
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
|
@@ -768,6 +746,7 @@ files:
|
|
768
746
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
|
769
747
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
|
770
748
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
|
749
|
+
- app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
|
771
750
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
|
772
751
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
|
773
752
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
|
@@ -904,8 +883,6 @@ files:
|
|
904
883
|
- app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
|
905
884
|
- app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
|
906
885
|
- app/pb_kits/playbook/pb_distribution_bar/docs/index.js
|
907
|
-
- app/pb_kits/playbook/pb_docs/kit_api.html.erb
|
908
|
-
- app/pb_kits/playbook/pb_docs/kit_api.rb
|
909
886
|
- app/pb_kits/playbook/pb_docs/kit_example.html.erb
|
910
887
|
- app/pb_kits/playbook/pb_docs/kit_example.rb
|
911
888
|
- app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
|
@@ -2430,6 +2407,7 @@ files:
|
|
2430
2407
|
- app/pb_kits/playbook/utilities/test/globalProps/order.test.js
|
2431
2408
|
- app/pb_kits/playbook/utilities/text.ts
|
2432
2409
|
- dist/menu.yml
|
2410
|
+
- dist/playbook-rails.js
|
2433
2411
|
- dist/reset.css
|
2434
2412
|
- lib/playbook.rb
|
2435
2413
|
- lib/playbook/align_content.rb
|
@@ -2458,8 +2436,6 @@ files:
|
|
2458
2436
|
- lib/playbook/kit_base.rb
|
2459
2437
|
- lib/playbook/kit_resolver.rb
|
2460
2438
|
- lib/playbook/line_height.rb
|
2461
|
-
- lib/playbook/markdown.rb
|
2462
|
-
- lib/playbook/markdown/helper.rb
|
2463
2439
|
- lib/playbook/number_spacing.rb
|
2464
2440
|
- lib/playbook/order.rb
|
2465
2441
|
- lib/playbook/pagination_renderer.rb
|
@@ -2487,11 +2463,11 @@ files:
|
|
2487
2463
|
- lib/playbook/version.rb
|
2488
2464
|
- lib/playbook/z_index.rb
|
2489
2465
|
- lib/playbook_ui.rb
|
2490
|
-
homepage:
|
2466
|
+
homepage: https://playbook.powerapp.cloud/
|
2491
2467
|
licenses:
|
2492
2468
|
- ISC
|
2493
2469
|
metadata: {}
|
2494
|
-
post_install_message:
|
2470
|
+
post_install_message:
|
2495
2471
|
rdoc_options: []
|
2496
2472
|
require_paths:
|
2497
2473
|
- lib
|
@@ -2502,12 +2478,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2502
2478
|
version: '0'
|
2503
2479
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2504
2480
|
requirements:
|
2505
|
-
- - "
|
2481
|
+
- - ">"
|
2506
2482
|
- !ruby/object:Gem::Version
|
2507
|
-
version:
|
2483
|
+
version: 1.3.1
|
2508
2484
|
requirements: []
|
2509
2485
|
rubygems_version: 3.3.7
|
2510
|
-
signing_key:
|
2486
|
+
signing_key:
|
2511
2487
|
specification_version: 4
|
2512
2488
|
summary: Playbook Design System
|
2513
2489
|
test_files: []
|
@@ -1,311 +0,0 @@
|
|
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>
|
@@ -1,149 +0,0 @@
|
|
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
|