playbook_ui_docs 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732 → 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956
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_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'
|