playbook_ui_docs 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732 → 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956
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/pb_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
- 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_date/docs/_date_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +58 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +3 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
- 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_table/docs/_table_with_background_kit.html.erb +6 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +12 -3
- /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close.md → _fixed_confirmation_toast_auto_close_react.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d36d3f7687c2013f83aac1a3bdaf1781987435842bc7f8c26296b0be202cbb53
|
|
4
|
+
data.tar.gz: 9a4bac495531d4b6152212915e4651819d2c3741362841c7395db269dce05c21
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 96c9addc21168804bb716b77829959ac2f2a3d52d3c8e10d195288b27954318038384a16ceca12664a337b34e8dc6dc597663850708d23958c20b005c656a4f8
|
|
7
|
+
data.tar.gz: fad60fd6408c2d6229a059ff7d47769cf109e708a1fac85aa597367977dd27ea62c7a8f6c51a05aa6a08ba40edae0f9ae6e43b6614e7387c460117091e96f643
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Avatar } from 'playbook-ui'
|
|
3
3
|
|
|
4
|
-
const AvatarBadgeComponentOverlay = () => {
|
|
4
|
+
const AvatarBadgeComponentOverlay = (props) => {
|
|
5
5
|
return (
|
|
6
6
|
<div>
|
|
7
7
|
<Avatar
|
|
8
8
|
componentOverlay={{
|
|
9
9
|
component: "badge",
|
|
10
10
|
placement: "bottom-right",
|
|
11
|
-
text: "12"
|
|
11
|
+
text: "12",
|
|
12
12
|
}}
|
|
13
13
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
14
14
|
marginBottom="sm"
|
|
15
15
|
size="sm"
|
|
16
|
+
{...props}
|
|
16
17
|
/>
|
|
17
18
|
|
|
18
19
|
<Avatar
|
|
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
|
24
25
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
25
26
|
marginBottom="sm"
|
|
26
27
|
size="md"
|
|
28
|
+
{...props}
|
|
29
|
+
|
|
27
30
|
/>
|
|
28
31
|
|
|
29
32
|
<Avatar
|
|
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
|
36
39
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
37
40
|
marginBottom="sm"
|
|
38
41
|
size="lg"
|
|
42
|
+
{...props}
|
|
43
|
+
|
|
39
44
|
/>
|
|
40
45
|
|
|
41
46
|
<Avatar
|
|
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
|
48
53
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
49
54
|
marginBottom="sm"
|
|
50
55
|
size="xl"
|
|
51
|
-
|
|
56
|
+
{...props}
|
|
57
|
+
/>
|
|
52
58
|
</div>
|
|
53
59
|
)
|
|
54
60
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Avatar } from 'playbook-ui'
|
|
3
3
|
|
|
4
|
-
const AvatarCircleIconComponentOverlay = () => {
|
|
4
|
+
const AvatarCircleIconComponentOverlay = (props) => {
|
|
5
5
|
return (
|
|
6
6
|
<div>
|
|
7
7
|
<Avatar
|
|
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
|
14
14
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
15
15
|
marginBottom="sm"
|
|
16
16
|
size="sm"
|
|
17
|
+
{...props}
|
|
17
18
|
/>
|
|
18
19
|
|
|
19
20
|
<Avatar
|
|
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
|
26
27
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
27
28
|
marginBottom="sm"
|
|
28
29
|
size="md"
|
|
30
|
+
{...props}
|
|
29
31
|
/>
|
|
30
32
|
|
|
31
33
|
<Avatar
|
|
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
|
38
40
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
39
41
|
marginBottom="sm"
|
|
40
42
|
size="lg"
|
|
43
|
+
{...props}
|
|
41
44
|
/>
|
|
42
45
|
|
|
43
46
|
<Avatar
|
|
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
|
50
53
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
|
51
54
|
marginBottom="sm"
|
|
52
55
|
size="xl"
|
|
53
|
-
|
|
56
|
+
{...props}
|
|
57
|
+
/>
|
|
54
58
|
</div>
|
|
55
59
|
)
|
|
56
60
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
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" }) %>
|
|
@@ -0,0 +1,5 @@
|
|
|
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" }) %>
|
|
@@ -18,7 +18,7 @@ const DateDefault = (props) => {
|
|
|
18
18
|
value={"2012-08-03"}
|
|
19
19
|
{...props}
|
|
20
20
|
/>
|
|
21
|
-
<Caption>{"(Hyphenated Date)"}</Caption>
|
|
21
|
+
<Caption {...props}>{"(Hyphenated Date)"}</Caption>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
<br />
|
|
@@ -56,6 +56,7 @@ const DateDefault = (props) => {
|
|
|
56
56
|
<Title
|
|
57
57
|
size={4}
|
|
58
58
|
text={"(Hyphenated Date)"}
|
|
59
|
+
{...props}
|
|
59
60
|
/>
|
|
60
61
|
</div>
|
|
61
62
|
|
|
@@ -4,7 +4,8 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
|
|
|
4
4
|
const DateUnstyled = (props) => {
|
|
5
5
|
return (
|
|
6
6
|
<>
|
|
7
|
-
<Caption
|
|
7
|
+
<Caption {...props}
|
|
8
|
+
size="xs"
|
|
8
9
|
text="Basic unstyled example"
|
|
9
10
|
/>
|
|
10
11
|
<FormattedDate
|
|
@@ -15,10 +16,14 @@ const DateUnstyled = (props) => {
|
|
|
15
16
|
|
|
16
17
|
<br />
|
|
17
18
|
|
|
18
|
-
<Caption
|
|
19
|
+
<Caption {...props}
|
|
20
|
+
|
|
21
|
+
size="xs"
|
|
19
22
|
text="Example with wrapping typography kit"
|
|
20
23
|
/>
|
|
21
|
-
<Title
|
|
24
|
+
<Title {...props}
|
|
25
|
+
size={1}
|
|
26
|
+
>
|
|
22
27
|
<FormattedDate
|
|
23
28
|
unstyled
|
|
24
29
|
value={new Date('25 Dec 1995')}
|
|
@@ -28,10 +33,13 @@ const DateUnstyled = (props) => {
|
|
|
28
33
|
|
|
29
34
|
<br />
|
|
30
35
|
|
|
31
|
-
<Caption
|
|
36
|
+
<Caption {...props}
|
|
37
|
+
size="xs"
|
|
32
38
|
text="Example with icon + subcaption"
|
|
33
39
|
/>
|
|
34
|
-
<Caption
|
|
40
|
+
<Caption {...props}
|
|
41
|
+
size="xs"
|
|
42
|
+
>
|
|
35
43
|
<FormattedDate
|
|
36
44
|
showDayOfWeek
|
|
37
45
|
showIcon
|
|
@@ -0,0 +1,58 @@
|
|
|
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>
|
|
@@ -0,0 +1,3 @@
|
|
|
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.
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- fixed_confirmation_toast_multi_line: Multi Line
|
|
6
6
|
- fixed_confirmation_toast_close: Click to Close
|
|
7
7
|
- fixed_confirmation_toast_positions: Click to Show Positions
|
|
8
|
+
- fixed_confirmation_toast_auto_close: Click to Show Auto Close
|
|
8
9
|
- fixed_confirmation_toast_children: Children
|
|
9
10
|
- fixed_confirmation_toast_custom_icon: Custom Icon
|
|
10
11
|
|
|
@@ -0,0 +1,15 @@
|
|
|
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>
|
|
@@ -0,0 +1,29 @@
|
|
|
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,16 +1,18 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- link_color: Color
|
|
5
5
|
- link_underline: Underline
|
|
6
6
|
- link_icon: Icon
|
|
7
7
|
- link_disabled: Disabled
|
|
8
8
|
- link_tag: Tag
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
- link_target: Target
|
|
10
|
+
|
|
11
|
+
|
|
11
12
|
react:
|
|
12
13
|
- link_color: Color
|
|
13
14
|
- link_underline: Underline
|
|
14
15
|
- link_icon: Icon
|
|
15
16
|
- link_disabled: Disabled
|
|
16
17
|
- link_tag: Tag
|
|
18
|
+
- link_target: Target
|
|
@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
|
|
|
2
2
|
export { default as LinkUnderline } from './_link_underline.jsx'
|
|
3
3
|
export { default as LinkIcon } from './_link_icon.jsx'
|
|
4
4
|
export { default as LinkDisabled } from './_link_disabled.jsx'
|
|
5
|
-
export { default as LinkTag } from './_link_tag.jsx'
|
|
5
|
+
export { default as LinkTag } from './_link_tag.jsx'
|
|
6
|
+
export { default as LinkTarget } from './_link_target.jsx'
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
|
|
3
3
|
step 1
|
|
4
4
|
<% end %>
|
|
5
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
|
|
5
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
6
6
|
step 2
|
|
7
7
|
<% end %>
|
|
8
8
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
|
|
12
12
|
step 4
|
|
13
13
|
<% end %>
|
|
14
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
|
|
14
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
|
|
15
15
|
step 5
|
|
16
16
|
<% end %>
|
|
17
17
|
<% end %>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<br /><br />
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
|
|
22
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
|
|
22
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
|
|
23
23
|
<% end %>
|
|
24
24
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
|
|
25
25
|
<% end %>
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
|
|
32
32
|
<br /><br>
|
|
33
33
|
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
|
34
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"
|
|
34
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
|
|
35
35
|
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
36
36
|
<% end %>
|
|
37
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
|
|
37
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
|
|
38
38
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
39
39
|
<% end %>
|
|
40
40
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
|
|
51
51
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
52
52
|
<% end %>
|
|
53
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
|
|
53
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
|
|
54
54
|
<%= pb_rails("caption", props:{text: "Out for Delivery"})%>
|
|
55
55
|
<% end %>
|
|
56
56
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
|
|
@@ -39,20 +39,17 @@
|
|
|
39
39
|
</tr>
|
|
40
40
|
</tbody>
|
|
41
41
|
<% end %>
|
|
42
|
-
|
|
43
42
|
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
|
|
44
43
|
<colgroup>
|
|
45
44
|
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
|
|
46
|
-
<%= pb_rails("background", props: { background_color: "
|
|
45
|
+
<%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
|
|
47
46
|
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
|
|
48
47
|
</colgroup>
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</tr>
|
|
55
|
-
<% end %>
|
|
48
|
+
<thead>
|
|
49
|
+
<th>Column 1</th>
|
|
50
|
+
<th>Column 2</th>
|
|
51
|
+
<th>Column 3</th>
|
|
52
|
+
</thead>
|
|
56
53
|
<tbody>
|
|
57
54
|
<tr>
|
|
58
55
|
<td>Value 1</td>
|
|
@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
|
|
|
68
68
|
tag='col'
|
|
69
69
|
/>
|
|
70
70
|
<Background
|
|
71
|
-
backgroundColor="
|
|
71
|
+
backgroundColor="info_subtle"
|
|
72
72
|
tag='col'
|
|
73
73
|
/>
|
|
74
74
|
<Background
|
|
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
|
|
|
76
76
|
tag='col'
|
|
77
77
|
/>
|
|
78
78
|
</colgroup>
|
|
79
|
-
<
|
|
80
|
-
backgroundColor="card_light"
|
|
81
|
-
tag='thead'
|
|
82
|
-
>
|
|
79
|
+
<thead>
|
|
83
80
|
<tr>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
<th>{'Column 1'}</th>
|
|
82
|
+
<th>{'Column 2'}</th>
|
|
83
|
+
<th>{'Column 3'}</th>
|
|
87
84
|
</tr>
|
|
88
|
-
</
|
|
85
|
+
</thead>
|
|
89
86
|
<tbody>
|
|
90
87
|
<tr>
|
|
91
88
|
<td>{'Value 1'}</td>
|
|
@@ -0,0 +1,42 @@
|
|
|
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>
|
|
@@ -0,0 +1,59 @@
|
|
|
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
|
|
@@ -2,6 +2,7 @@ examples:
|
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
4
|
- user_default: Default
|
|
5
|
+
- user_light_weight: Light Weight
|
|
5
6
|
- user_with_territory: With Territory
|
|
6
7
|
- user_text_only: Text Only
|
|
7
8
|
- user_size: Horizontal Size
|
|
@@ -11,6 +12,7 @@ examples:
|
|
|
11
12
|
|
|
12
13
|
react:
|
|
13
14
|
- user_default: Default
|
|
15
|
+
- user_light_weight: Light Weight
|
|
14
16
|
- user_with_territory: With Territory
|
|
15
17
|
- user_text_only: Text Only
|
|
16
18
|
- user_size: Horizontal Size
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as UserDefault } from './_user_default.jsx'
|
|
2
|
+
export { default as UserLightWeight } from './_user_light_weight.jsx'
|
|
2
3
|
export { default as UserWithTerritory } from './_user_with_territory.jsx'
|
|
3
4
|
export { default as UserTextOnly } from './_user_text_only.jsx'
|
|
4
5
|
export { default as UserSize } from './_user_size.jsx'
|