playbook_ui_docs 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR834advtablemaxHeightstickyheader5932
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_advanced_table/docs/_advanced_table_table_props.jsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +8 -8
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +0 -193
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +0 -11
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +0 -22
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +0 -1
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.12.0.pre.alpha.
|
4
|
+
version: 14.12.0.pre.alpha.PBNTR834advtablemaxHeightstickyheader5932
|
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: 2025-02-
|
12
|
+
date: 2025-02-05 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -91,6 +91,8 @@ files:
|
|
91
91
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
|
92
92
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
|
93
93
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
|
94
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
|
95
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
|
94
96
|
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
|
95
97
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
|
96
98
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json
|
@@ -436,7 +438,9 @@ files:
|
|
436
438
|
- app/pb_kits/playbook/pb_contact/docs/_description.md
|
437
439
|
- app/pb_kits/playbook/pb_contact/docs/example.yml
|
438
440
|
- app/pb_kits/playbook/pb_contact/docs/index.js
|
441
|
+
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
|
439
442
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
|
443
|
+
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
|
440
444
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
|
441
445
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
|
442
446
|
- app/pb_kits/playbook/pb_copy_button/docs/example.yml
|
@@ -696,8 +700,6 @@ files:
|
|
696
700
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
|
697
701
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
698
702
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
|
699
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
|
700
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
|
701
703
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
|
702
704
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
|
703
705
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
|
@@ -976,10 +978,6 @@ files:
|
|
976
978
|
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
|
977
979
|
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
|
978
980
|
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md
|
979
|
-
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
|
980
|
-
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx
|
981
|
-
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
|
982
|
-
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
|
983
981
|
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb
|
984
982
|
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx
|
985
983
|
- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md
|
@@ -1176,6 +1174,8 @@ files:
|
|
1176
1174
|
- app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
|
1177
1175
|
- app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
|
1178
1176
|
- app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
|
1177
|
+
- app/pb_kits/playbook/pb_link/docs/_link_target.html.erb
|
1178
|
+
- app/pb_kits/playbook/pb_link/docs/_link_target.jsx
|
1179
1179
|
- app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
|
1180
1180
|
- app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
|
1181
1181
|
- app/pb_kits/playbook/pb_link/docs/example.yml
|
@@ -1,193 +0,0 @@
|
|
1
|
-
<% content_for :helper_methods do %>
|
2
|
-
<% def badge_properties(container)
|
3
|
-
case container
|
4
|
-
when "To Do"
|
5
|
-
{ text: "queue", variant: "warning" }
|
6
|
-
when "In Progress"
|
7
|
-
{ text: "progress", variant: "primary" }
|
8
|
-
else
|
9
|
-
{ text: "done", variant: "success" }
|
10
|
-
end
|
11
|
-
end %>
|
12
|
-
<% end %>
|
13
|
-
|
14
|
-
<% containers = [
|
15
|
-
"To Do",
|
16
|
-
"In Progress",
|
17
|
-
"Done"
|
18
|
-
] %>
|
19
|
-
|
20
|
-
<% items_data = [
|
21
|
-
{
|
22
|
-
id: "11",
|
23
|
-
container: "To Do",
|
24
|
-
title: "Task 1",
|
25
|
-
description: "Bug fixes",
|
26
|
-
assignee_name: "Terry Miles",
|
27
|
-
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
28
|
-
},
|
29
|
-
{
|
30
|
-
id: "12",
|
31
|
-
container: "To Do",
|
32
|
-
title: "Task 2",
|
33
|
-
description: "Documentation",
|
34
|
-
assignee_name: "Sophia Miles",
|
35
|
-
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
36
|
-
},
|
37
|
-
{
|
38
|
-
id: "13",
|
39
|
-
container: "In Progress",
|
40
|
-
title: "Task 3",
|
41
|
-
description: "Add a variant",
|
42
|
-
assignee_name: "Alice Jones",
|
43
|
-
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
44
|
-
},
|
45
|
-
{
|
46
|
-
id: "14",
|
47
|
-
container: "To Do",
|
48
|
-
title: "Task 4",
|
49
|
-
description: "Add jest tests",
|
50
|
-
assignee_name: "Mike James",
|
51
|
-
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
52
|
-
},
|
53
|
-
{
|
54
|
-
id: "15",
|
55
|
-
container: "Done",
|
56
|
-
title: "Task 5",
|
57
|
-
description: "Alpha testing",
|
58
|
-
assignee_name: "James Guy",
|
59
|
-
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
60
|
-
},
|
61
|
-
{
|
62
|
-
id: "16",
|
63
|
-
container: "In Progress",
|
64
|
-
title: "Task 6",
|
65
|
-
description: "Release",
|
66
|
-
assignee_name: "Sally Jones",
|
67
|
-
assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
|
68
|
-
},
|
69
|
-
] %>
|
70
|
-
|
71
|
-
<%= pb_rails("draggable", props: { initial_items: items_data }) do %>
|
72
|
-
<%= pb_rails("flex", props: { justify_content: "center" }) do %>
|
73
|
-
<% containers.each do |container| %>
|
74
|
-
<%= pb_rails("draggable/draggable_container", props: {
|
75
|
-
container: container,
|
76
|
-
width: "xs",
|
77
|
-
height: "xs",
|
78
|
-
padding: "sm",
|
79
|
-
data: { container: container }
|
80
|
-
}) do %>
|
81
|
-
<%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
|
82
|
-
<%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
|
83
|
-
<% items_data.select { |item| item[:container] == container }.each do |item| %>
|
84
|
-
<%= pb_rails("draggable/draggable_item", props: {
|
85
|
-
container: container,
|
86
|
-
drag_id: item[:id]
|
87
|
-
}) do %>
|
88
|
-
<%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
|
89
|
-
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
90
|
-
<%= pb_rails("flex/flex_item") do %>
|
91
|
-
<%= pb_rails("flex") do %>
|
92
|
-
<%= pb_rails("avatar", props: {
|
93
|
-
image_url: item[:assignee_img],
|
94
|
-
name: item[:assignee_name],
|
95
|
-
size: "xxs"
|
96
|
-
}) %>
|
97
|
-
<%= pb_rails("title", props: {
|
98
|
-
padding_left: "xs",
|
99
|
-
size: 4,
|
100
|
-
text: item[:title]
|
101
|
-
}) %>
|
102
|
-
<% end %>
|
103
|
-
<% end %>
|
104
|
-
<%= pb_rails("badge", props: {
|
105
|
-
margin_left: "sm",
|
106
|
-
rounded: true,
|
107
|
-
text: badge_properties(container)[:text],
|
108
|
-
variant: badge_properties(container)[:variant],
|
109
|
-
data: {
|
110
|
-
pb_status_badge: true,
|
111
|
-
pb_tag_type: "badge"
|
112
|
-
}
|
113
|
-
}) %>
|
114
|
-
<% end %>
|
115
|
-
<%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
|
116
|
-
<% end %>
|
117
|
-
<% end %>
|
118
|
-
<% end %>
|
119
|
-
<% end %>
|
120
|
-
<% end %>
|
121
|
-
<% end %>
|
122
|
-
<% end %>
|
123
|
-
<% end %>
|
124
|
-
|
125
|
-
<script>
|
126
|
-
const initBadgeUpdates = function() {
|
127
|
-
const updateBadge = function(container) {
|
128
|
-
switch (container) {
|
129
|
-
case 'To Do':
|
130
|
-
return { text: 'queue', variant: 'warning' };
|
131
|
-
case 'In Progress':
|
132
|
-
return { text: 'progress', variant: 'primary' };
|
133
|
-
case 'Done':
|
134
|
-
return { text: 'done', variant: 'success' };
|
135
|
-
default:
|
136
|
-
return { text: 'queue', variant: 'warning' };
|
137
|
-
}
|
138
|
-
};
|
139
|
-
|
140
|
-
let draggedElement = null;
|
141
|
-
let startContainer = null;
|
142
|
-
|
143
|
-
document.querySelectorAll('.pb_draggable_item').forEach(function(item) {
|
144
|
-
item.addEventListener('dragstart', function(event) {
|
145
|
-
draggedElement = event.target;
|
146
|
-
startContainer = draggedElement.closest('.pb_draggable_container');
|
147
|
-
});
|
148
|
-
});
|
149
|
-
|
150
|
-
document.querySelectorAll('.pb_draggable_container').forEach(function(container) {
|
151
|
-
container.addEventListener('drop', function(event) {
|
152
|
-
event.preventDefault();
|
153
|
-
|
154
|
-
if (draggedElement) {
|
155
|
-
setTimeout(function() {
|
156
|
-
const currentContainer = container;
|
157
|
-
|
158
|
-
if (currentContainer && startContainer && currentContainer !== startContainer) {
|
159
|
-
const containerData = currentContainer.getAttribute('data-container');
|
160
|
-
const badge = draggedElement.querySelector('[data-pb-status-badge]');
|
161
|
-
|
162
|
-
if (badge && containerData) {
|
163
|
-
const newProperties = updateBadge(containerData);
|
164
|
-
const span = badge.querySelector('span');
|
165
|
-
|
166
|
-
if (span) {
|
167
|
-
span.textContent = newProperties.text;
|
168
|
-
}
|
169
|
-
|
170
|
-
badge.classList.forEach(function(className) {
|
171
|
-
if (className.includes('pb_badge_kit_') || className === 'ml_sm') {
|
172
|
-
badge.classList.remove(className);
|
173
|
-
}
|
174
|
-
});
|
175
|
-
|
176
|
-
badge.className = `pb_badge_kit_${newProperties.variant}_rounded ml_sm`;
|
177
|
-
}
|
178
|
-
}
|
179
|
-
|
180
|
-
draggedElement = null;
|
181
|
-
startContainer = null;
|
182
|
-
}, 50);
|
183
|
-
}
|
184
|
-
});
|
185
|
-
});
|
186
|
-
};
|
187
|
-
|
188
|
-
if (document.readyState === 'loading') {
|
189
|
-
document.addEventListener('DOMContentLoaded', initBadgeUpdates);
|
190
|
-
} else {
|
191
|
-
initBadgeUpdates();
|
192
|
-
}
|
193
|
-
</script>
|
@@ -1 +0,0 @@
|
|
1
|
-
The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
DELETED
@@ -1,11 +0,0 @@
|
|
1
|
-
<%= pb_rails("home_address_street", props: {
|
2
|
-
address: "70 pRoSpEcT ave",
|
3
|
-
address_cont: "Apt M18",
|
4
|
-
city: "West Chester",
|
5
|
-
home_id: 8250263,
|
6
|
-
home_url: "https://powerhrg.com/",
|
7
|
-
preserve_case: true,
|
8
|
-
state: "pa",
|
9
|
-
zipcode: "19382",
|
10
|
-
territory: "PHL",
|
11
|
-
}) %>
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import HomeAddressStreet from '../_home_address_street'
|
4
|
-
|
5
|
-
const HomeAddressStreetFormatting = (props) => {
|
6
|
-
return (
|
7
|
-
<HomeAddressStreet
|
8
|
-
address="70 pRoSpEcT ave"
|
9
|
-
addressCont="Apt M18"
|
10
|
-
city="West Chester"
|
11
|
-
homeId="8250263"
|
12
|
-
homeUrl="https://powerhrg.com/"
|
13
|
-
preserveCase
|
14
|
-
state="pa"
|
15
|
-
territory="PHL"
|
16
|
-
zipcode="19382"
|
17
|
-
{...props}
|
18
|
-
/>
|
19
|
-
)
|
20
|
-
}
|
21
|
-
|
22
|
-
export default HomeAddressStreetFormatting
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
|