playbook_ui 14.12.0.pre.alpha.PBNTR8335906 → 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobugzindextoken5751
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/Components/TableHeaderCell.tsx +3 -10
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +10 -9
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +21 -34
- data/app/pb_kits/playbook/pb_advanced_table/index.js +6 -9
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +5 -8
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -9
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +7 -11
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +7 -6
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +3 -9
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +2 -6
- data/app/pb_kits/playbook/pb_button/button.rb +1 -1
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +1 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_date/_date.tsx +4 -14
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +5 -13
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +6 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +5 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +5 -7
- data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +6 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +7 -6
- data/app/pb_kits/playbook/pb_link/_link.tsx +0 -18
- data/app/pb_kits/playbook/pb_link/docs/example.yml +3 -5
- data/app/pb_kits/playbook/pb_link/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
- data/app/pb_kits/playbook/pb_link/link.rb +0 -6
- data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -30
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +9 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +9 -6
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -26
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -25
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -25
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +27 -45
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -5
- data/app/pb_kits/playbook/pb_user/_user.tsx +0 -3
- data/app/pb_kits/playbook/pb_user/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_user/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user/user.rb +0 -1
- data/app/pb_kits/playbook/pb_user/user.test.js +0 -14
- data/dist/chunks/{_typeahead-CkemExmL.js → _typeahead-BIhRQo8Q.js} +3 -3
- data/dist/chunks/_weekday_stacked-VKMYuo6-.js +45 -0
- data/dist/chunks/{lib-DjpLC8uO.js → lib-kMuhBuU7.js} +1 -1
- data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-DBJ0wZuS.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -20
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts +0 -26
- data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +0 -15
- data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +0 -28
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +0 -5
- data/app/pb_kits/playbook/pb_copy_button/index.js +0 -47
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +0 -58
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +0 -3
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +0 -29
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +0 -42
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +0 -59
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +0 -2
- data/dist/chunks/_weekday_stacked-CtSzPEH0.js +0 -45
- /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close_react.md → _fixed_confirmation_toast_auto_close.md} +0 -0
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: 14.12.0.pre.alpha.
|
4
|
+
version: 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobugzindextoken5751
|
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-
|
12
|
+
date: 2025-01-30 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -265,7 +265,6 @@ files:
|
|
265
265
|
- app/pb_kits/playbook/pb_advanced_table/README.md
|
266
266
|
- app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
|
267
267
|
- app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx
|
268
|
-
- app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts
|
269
268
|
- app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
|
270
269
|
- app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
|
271
270
|
- app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
|
@@ -801,17 +800,12 @@ files:
|
|
801
800
|
- app/pb_kits/playbook/pb_contact/docs/index.js
|
802
801
|
- app/pb_kits/playbook/pb_copy_button/_copy_button.scss
|
803
802
|
- app/pb_kits/playbook/pb_copy_button/_copy_button.tsx
|
804
|
-
- app/pb_kits/playbook/pb_copy_button/copy_button.html.erb
|
805
|
-
- app/pb_kits/playbook/pb_copy_button/copy_button.rb
|
806
803
|
- app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx
|
807
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
|
808
804
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
|
809
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
|
810
805
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
|
811
806
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
|
812
807
|
- app/pb_kits/playbook/pb_copy_button/docs/example.yml
|
813
808
|
- app/pb_kits/playbook/pb_copy_button/docs/index.js
|
814
|
-
- app/pb_kits/playbook/pb_copy_button/index.js
|
815
809
|
- app/pb_kits/playbook/pb_currency/_currency.scss
|
816
810
|
- app/pb_kits/playbook/pb_currency/_currency.tsx
|
817
811
|
- app/pb_kits/playbook/pb_currency/currency.html.erb
|
@@ -1349,10 +1343,8 @@ files:
|
|
1349
1343
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
|
1350
1344
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
|
1351
1345
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
|
1352
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
|
1353
1346
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx
|
1354
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/
|
1355
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_react.md
|
1347
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md
|
1356
1348
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
|
1357
1349
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
|
1358
1350
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md
|
@@ -1844,8 +1836,6 @@ files:
|
|
1844
1836
|
- app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
|
1845
1837
|
- app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
|
1846
1838
|
- app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
|
1847
|
-
- app/pb_kits/playbook/pb_link/docs/_link_target.html.erb
|
1848
|
-
- app/pb_kits/playbook/pb_link/docs/_link_target.jsx
|
1849
1839
|
- app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
|
1850
1840
|
- app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
|
1851
1841
|
- app/pb_kits/playbook/pb_link/docs/example.yml
|
@@ -3164,9 +3154,6 @@ files:
|
|
3164
3154
|
- app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
|
3165
3155
|
- app/pb_kits/playbook/pb_user/docs/_user_default.jsx
|
3166
3156
|
- app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md
|
3167
|
-
- app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb
|
3168
|
-
- app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx
|
3169
|
-
- app/pb_kits/playbook/pb_user/docs/_user_light_weight.md
|
3170
3157
|
- app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md
|
3171
3158
|
- app/pb_kits/playbook/pb_user/docs/_user_props_table.md
|
3172
3159
|
- app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
|
@@ -3322,11 +3309,11 @@ files:
|
|
3322
3309
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3323
3310
|
- app/pb_kits/playbook/utilities/text.ts
|
3324
3311
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3325
|
-
- dist/chunks/_typeahead-
|
3326
|
-
- dist/chunks/_weekday_stacked-
|
3312
|
+
- dist/chunks/_typeahead-BIhRQo8Q.js
|
3313
|
+
- dist/chunks/_weekday_stacked-VKMYuo6-.js
|
3327
3314
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3328
|
-
- dist/chunks/lib-
|
3329
|
-
- dist/chunks/pb_form_validation-
|
3315
|
+
- dist/chunks/lib-kMuhBuU7.js
|
3316
|
+
- dist/chunks/pb_form_validation-DBJ0wZuS.js
|
3330
3317
|
- dist/chunks/vendor.js
|
3331
3318
|
- dist/menu.yml
|
3332
3319
|
- dist/playbook-doc.js
|
@@ -1,26 +0,0 @@
|
|
1
|
-
export const showActionBar = (elem: HTMLElement) => {
|
2
|
-
elem.style.display = "block";
|
3
|
-
const height = elem.scrollHeight + "px";
|
4
|
-
elem.style.height = height;
|
5
|
-
elem.classList.add("is-visible");
|
6
|
-
elem.style.overflow = "hidden";
|
7
|
-
|
8
|
-
window.setTimeout(() => {
|
9
|
-
if (elem.classList.contains("is-visible")) {
|
10
|
-
elem.style.height = "";
|
11
|
-
elem.style.overflow = "visible";
|
12
|
-
}
|
13
|
-
}, 300);
|
14
|
-
};
|
15
|
-
|
16
|
-
export const hideActionBar = (elem: HTMLElement) => {
|
17
|
-
elem.style.height = elem.scrollHeight + "px";
|
18
|
-
elem.offsetHeight;
|
19
|
-
window.setTimeout(() => {
|
20
|
-
elem.style.height = "0";
|
21
|
-
elem.style.overflow = "hidden";
|
22
|
-
}, 10);
|
23
|
-
window.setTimeout(() => {
|
24
|
-
elem.classList.remove("is-visible");
|
25
|
-
}, 300);
|
26
|
-
};
|
@@ -1,15 +0,0 @@
|
|
1
|
-
<%= pb_content_tag do %>
|
2
|
-
<%= pb_rails("button", props: { icon: "copy" }) do %>
|
3
|
-
<%= object.text %>
|
4
|
-
<% end %>
|
5
|
-
<% if object.id %>
|
6
|
-
<%= pb_rails("tooltip", props: {
|
7
|
-
trigger_element_selector: "##{object.id}",
|
8
|
-
position: object.tooltip_position,
|
9
|
-
tooltip_id: "#{object.id}_tooltip",
|
10
|
-
trigger_method: "click"
|
11
|
-
}) do %>
|
12
|
-
<%= object.tooltip_text %>
|
13
|
-
<% end %>
|
14
|
-
<% end %>
|
15
|
-
<% end %>
|
@@ -1,28 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Playbook
|
4
|
-
module PbCopyButton
|
5
|
-
class CopyButton < ::Playbook::KitBase
|
6
|
-
prop :text
|
7
|
-
prop :tooltip_position,
|
8
|
-
type: Playbook::Props::Enum,
|
9
|
-
values: %w[top right bottom left],
|
10
|
-
default: "top"
|
11
|
-
prop :tooltip_text, type: Playbook::Props::String,
|
12
|
-
default: "Copied!"
|
13
|
-
prop :value
|
14
|
-
prop :from
|
15
|
-
|
16
|
-
def classname
|
17
|
-
generate_classname("pb_copy_button_kit")
|
18
|
-
end
|
19
|
-
|
20
|
-
def data
|
21
|
-
Hash(values[:data]).merge(
|
22
|
-
"copy-value": value,
|
23
|
-
"from": from
|
24
|
-
)
|
25
|
-
end
|
26
|
-
end
|
27
|
-
end
|
28
|
-
end
|
@@ -1,2 +0,0 @@
|
|
1
|
-
<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
|
2
|
-
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
@@ -1,5 +0,0 @@
|
|
1
|
-
<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
|
2
|
-
<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
|
3
|
-
<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
4
|
-
<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
|
5
|
-
<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import PbEnhancedElement from "../pb_enhanced_element"
|
2
|
-
|
3
|
-
export default class PbCopyButton extends PbEnhancedElement {
|
4
|
-
static get selector() {
|
5
|
-
return '.pb_copy_button_kit'
|
6
|
-
}
|
7
|
-
|
8
|
-
connect() {
|
9
|
-
this.handleClick = this.handleClick.bind(this)
|
10
|
-
this.button = this.element.querySelector('button')
|
11
|
-
if (this.button) {
|
12
|
-
this.button.addEventListener('click', this.handleClick)
|
13
|
-
}
|
14
|
-
}
|
15
|
-
|
16
|
-
disconnect() {
|
17
|
-
if (this.button) {
|
18
|
-
this.button.removeEventListener('click', this.handleClick)
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
handleClick() {
|
23
|
-
const fromId = this.element.getAttribute('data-from')
|
24
|
-
if (fromId) {
|
25
|
-
const fromElement = document.querySelector(`#${fromId}`)
|
26
|
-
if (fromElement) {
|
27
|
-
let contentToCopy = ''
|
28
|
-
if (fromElement.tagName.toLowerCase() === 'input') {
|
29
|
-
contentToCopy = fromElement.value
|
30
|
-
} else {
|
31
|
-
contentToCopy = fromElement.innerText
|
32
|
-
}
|
33
|
-
navigator.clipboard.writeText(contentToCopy)
|
34
|
-
.catch(err => console.error('Failed to copy text', err))
|
35
|
-
return
|
36
|
-
}
|
37
|
-
}
|
38
|
-
|
39
|
-
const textToCopy = this.element.getAttribute('data-copy-value')
|
40
|
-
if (textToCopy) {
|
41
|
-
navigator.clipboard.writeText(textToCopy)
|
42
|
-
.catch(err => console.error('Failed to copy text', err))
|
43
|
-
} else {
|
44
|
-
console.warn('No data-copy-value attribute found or data-from element')
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
@@ -1,58 +0,0 @@
|
|
1
|
-
<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
|
2
|
-
<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
|
3
|
-
|
4
|
-
<%= pb_rails("fixed_confirmation_toast", props: {
|
5
|
-
auto_close: 3000,
|
6
|
-
classname: "toast-to-hide",
|
7
|
-
id: "toast-auto-close",
|
8
|
-
text: "I will disappear in 3 seconds.",
|
9
|
-
status: "tip",
|
10
|
-
vertical: "top",
|
11
|
-
horizontal: "center"
|
12
|
-
}) %>
|
13
|
-
|
14
|
-
<%= pb_rails("fixed_confirmation_toast", props: {
|
15
|
-
auto_close: 10000,
|
16
|
-
closeable: true,
|
17
|
-
id: "toast-auto-close-closeable",
|
18
|
-
text: "I will disappear in 10 seconds.",
|
19
|
-
status: "tip",
|
20
|
-
vertical: "top",
|
21
|
-
horizontal: "center"
|
22
|
-
}) %>
|
23
|
-
|
24
|
-
<script>
|
25
|
-
document.addEventListener('DOMContentLoaded', () => {
|
26
|
-
// Initialize toast elements and buttons
|
27
|
-
const toasts = {
|
28
|
-
'#toast-auto-close': document.querySelector("#toast-auto-close"),
|
29
|
-
'#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
|
30
|
-
}
|
31
|
-
|
32
|
-
const buttons = {
|
33
|
-
'#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
|
34
|
-
'#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
|
35
|
-
}
|
36
|
-
|
37
|
-
// Store original toasts and remove them from DOM
|
38
|
-
const originalToasts = {}
|
39
|
-
Object.entries(toasts).forEach(([id, toast]) => {
|
40
|
-
if (toast) {
|
41
|
-
originalToasts[id] = toast.cloneNode(true)
|
42
|
-
toast.remove()
|
43
|
-
}
|
44
|
-
})
|
45
|
-
|
46
|
-
// Set up button click handlers
|
47
|
-
Object.keys(buttons).forEach((toastId) => {
|
48
|
-
const button = buttons[toastId]
|
49
|
-
if (button) {
|
50
|
-
button.onclick = () => {
|
51
|
-
const newToast = originalToasts[toastId].cloneNode(true)
|
52
|
-
newToast.style.display = "flex"
|
53
|
-
document.body.appendChild(newToast)
|
54
|
-
}
|
55
|
-
}
|
56
|
-
})
|
57
|
-
})
|
58
|
-
</script>
|
@@ -1,3 +0,0 @@
|
|
1
|
-
Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
|
2
|
-
|
3
|
-
The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.
|
@@ -1,15 +0,0 @@
|
|
1
|
-
<div>
|
2
|
-
<%= pb_rails("link", props: {
|
3
|
-
href: "http://google.com",
|
4
|
-
target: "blank",
|
5
|
-
text: "Open In New Window"
|
6
|
-
}) %>
|
7
|
-
</div>
|
8
|
-
|
9
|
-
<div>
|
10
|
-
<%= pb_rails("link", props: {
|
11
|
-
href: "https://playbook.powerapp.cloud/",
|
12
|
-
target: "child",
|
13
|
-
text: "Open In Child Tab",
|
14
|
-
}) %>
|
15
|
-
</div>
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Link } from 'playbook-ui'
|
3
|
-
|
4
|
-
const LinkTarget = (props) => (
|
5
|
-
<div>
|
6
|
-
<div>
|
7
|
-
<Link
|
8
|
-
aria={{ label: 'Link to Google in new window' }}
|
9
|
-
href="https://google.com"
|
10
|
-
tabIndex={0}
|
11
|
-
target='blank'
|
12
|
-
text="Open In New Window"
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
</div>
|
16
|
-
<div>
|
17
|
-
<Link
|
18
|
-
aria={{ label: 'Link to Playbook in a child tab' }}
|
19
|
-
href="https://playbook.powerapp.cloud/"
|
20
|
-
tabIndex={0}
|
21
|
-
target='child'
|
22
|
-
text="Open In Child Tab"
|
23
|
-
{...props}
|
24
|
-
/>
|
25
|
-
</div>
|
26
|
-
</div>
|
27
|
-
)
|
28
|
-
|
29
|
-
export default LinkTarget
|
@@ -1,42 +0,0 @@
|
|
1
|
-
<div class="pb--doc-demo-row">
|
2
|
-
<div>
|
3
|
-
<%= pb_rails("user", props: {
|
4
|
-
name: "Anna Black",
|
5
|
-
title: "Remodeling Consultant",
|
6
|
-
orientation: "vertical",
|
7
|
-
align: "center",
|
8
|
-
size: "lg",
|
9
|
-
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
10
|
-
bold: false
|
11
|
-
}) %>
|
12
|
-
</div>
|
13
|
-
<div>
|
14
|
-
<%= pb_rails("user", props: {
|
15
|
-
name: "Anna Black",
|
16
|
-
title: "Remodeling Consultant",
|
17
|
-
orientation: "horizontal",
|
18
|
-
align: "left",
|
19
|
-
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
20
|
-
bold: false
|
21
|
-
}) %>
|
22
|
-
</div>
|
23
|
-
<div>
|
24
|
-
<%= pb_rails("user", props: {
|
25
|
-
name: "Anna Black",
|
26
|
-
orientation: "horizontal",
|
27
|
-
align: "left",
|
28
|
-
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
29
|
-
bold: false
|
30
|
-
}) %>
|
31
|
-
|
32
|
-
<br>
|
33
|
-
|
34
|
-
<%= pb_rails("user", props: {
|
35
|
-
name: "Anna Black",
|
36
|
-
orientation: "horizontal",
|
37
|
-
align: "left",
|
38
|
-
avatar: true,
|
39
|
-
bold: false
|
40
|
-
}) %>
|
41
|
-
</div>
|
42
|
-
</div>
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { User } from 'playbook-ui'
|
3
|
-
|
4
|
-
const UserLightWeight = (props) => {
|
5
|
-
return (
|
6
|
-
<div className="pb--doc-demo-row">
|
7
|
-
|
8
|
-
<div>
|
9
|
-
<User
|
10
|
-
align="center"
|
11
|
-
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
12
|
-
bold={false}
|
13
|
-
name="Anna Black"
|
14
|
-
orientation="vertical"
|
15
|
-
size="lg"
|
16
|
-
title="Remodeling Consultant"
|
17
|
-
{...props}
|
18
|
-
/>
|
19
|
-
</div>
|
20
|
-
|
21
|
-
<div>
|
22
|
-
<User
|
23
|
-
align="left"
|
24
|
-
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
25
|
-
bold={false}
|
26
|
-
name="Anna Black"
|
27
|
-
orientation="horizontal"
|
28
|
-
title="Remodeling Consultant"
|
29
|
-
{...props}
|
30
|
-
/>
|
31
|
-
</div>
|
32
|
-
|
33
|
-
<div>
|
34
|
-
<User
|
35
|
-
align="left"
|
36
|
-
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
37
|
-
bold={false}
|
38
|
-
name="Anna Black"
|
39
|
-
orientation="horizontal"
|
40
|
-
{...props}
|
41
|
-
/>
|
42
|
-
|
43
|
-
<br />
|
44
|
-
|
45
|
-
<User
|
46
|
-
align="left"
|
47
|
-
avatar
|
48
|
-
bold={false}
|
49
|
-
name="Anna Black"
|
50
|
-
orientation="horizontal"
|
51
|
-
{...props}
|
52
|
-
/>
|
53
|
-
</div>
|
54
|
-
|
55
|
-
</div>
|
56
|
-
)
|
57
|
-
}
|
58
|
-
|
59
|
-
export default UserLightWeight
|