playbook_ui 10.11.0 → 10.12.0
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_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +22 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +32 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +90 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx +105 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +11 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +59 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +12 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +21 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +1 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +24 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +34 -5
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +8 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +14 -3
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +20 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +28 -4
- data/lib/playbook/version.rb +2 -2
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a0e3bf2bdc63a8c3fc28f07fd67719ab9bd2d759ddbd3706215c2a77cc1790e4
|
|
4
|
+
data.tar.gz: 9c344346d97a29dcca825eecb59252fea8b5f55ddef3e2fe208ed43c5fca0186
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0c6e10aad137d1f01ed36c58f76ba654334fd78b4bd9fd648141366ea15cbe459e47a74bd9fec56a341a7d5b35169fe3fd5dcbf09beb62c5f9d2d527f91cc5ed
|
|
7
|
+
data.tar.gz: d4767de2a8a6e43c0c715d1dfb62414ff172ba9e0efebf102f650bb2ea92b492ba01df3a4353cda0cd870ed08764e618f16c848590e00f212fb7283dce83e97d
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* @flow */
|
|
2
2
|
|
|
3
|
-
import React, { useState } from 'react'
|
|
3
|
+
import React, { useEffect, useState } from 'react'
|
|
4
4
|
import classnames from 'classnames'
|
|
5
5
|
|
|
6
6
|
import { globalProps } from '../utilities/globalProps'
|
|
@@ -19,25 +19,45 @@ type FixedConfirmationToastProps = {
|
|
|
19
19
|
className?: string,
|
|
20
20
|
closeable?: boolean,
|
|
21
21
|
data?: string,
|
|
22
|
+
horizontal?: 'right' | 'left' | 'center',
|
|
22
23
|
id?: string,
|
|
23
24
|
multiLine?: boolean,
|
|
25
|
+
onClose?: () => void,
|
|
26
|
+
open?: boolean,
|
|
24
27
|
status?: 'success' | 'error' | 'neutral' | 'tip',
|
|
25
28
|
text: string,
|
|
29
|
+
vertical?: 'top' | 'bottom',
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
|
29
33
|
const [showToast, toggleToast] = useState(true)
|
|
30
|
-
const {
|
|
34
|
+
const {
|
|
35
|
+
className,
|
|
36
|
+
closeable = false,
|
|
37
|
+
horizontal,
|
|
38
|
+
multiLine = false,
|
|
39
|
+
onClose = () => {},
|
|
40
|
+
open = true,
|
|
41
|
+
status = 'neutral',
|
|
42
|
+
text,
|
|
43
|
+
vertical,
|
|
44
|
+
} = props
|
|
31
45
|
const css = classnames(
|
|
32
46
|
`pb_fixed_confirmation_toast_kit_${status}`,
|
|
33
47
|
{ '_multi_line': multiLine },
|
|
48
|
+
{ [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
|
|
34
49
|
globalProps(props),
|
|
35
50
|
className
|
|
36
51
|
)
|
|
37
52
|
const icon = iconMap[status]
|
|
38
53
|
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
toggleToast(open)
|
|
56
|
+
}, [open])
|
|
57
|
+
|
|
39
58
|
const handleClick = () => {
|
|
40
59
|
toggleToast(!closeable)
|
|
60
|
+
onClose()
|
|
41
61
|
}
|
|
42
62
|
|
|
43
63
|
return (
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import "../tokens/positioning";
|
|
1
2
|
@import "../tokens/spacing";
|
|
2
3
|
@import "../tokens/colors";
|
|
3
4
|
@import "../pb_body/body";
|
|
@@ -30,6 +31,37 @@ $confirmation_toast_colors: (
|
|
|
30
31
|
opacity: 1;
|
|
31
32
|
}
|
|
32
33
|
|
|
34
|
+
&.positioned_toast {
|
|
35
|
+
position: fixed;
|
|
36
|
+
z-index: $z_9;
|
|
37
|
+
display: flex;
|
|
38
|
+
justify-content: space-around;
|
|
39
|
+
|
|
40
|
+
&.top {
|
|
41
|
+
top: $space_md;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&.bottom {
|
|
45
|
+
bottom: $space_md;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.left {
|
|
49
|
+
left: $space_md;
|
|
50
|
+
right: auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.center {
|
|
54
|
+
left: 50%;
|
|
55
|
+
right: auto;
|
|
56
|
+
transform: translateX(-50%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&.right {
|
|
60
|
+
left: auto;
|
|
61
|
+
right: $space_md;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
33
65
|
@each $color_name, $color_value in $confirmation_toast_colors {
|
|
34
66
|
&[class*=_#{$color_name}] {
|
|
35
67
|
background: $color_value;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { text: "Top Center", variant: "secondary", data: { toast: "#toast-top-center" } }) %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Top Left", variant: "secondary", data: { toast: "#toast-top-left" } }) %>
|
|
3
|
+
<%= pb_rails("button", props: { text: "Top Right", variant: "secondary", data: { toast: "#toast-top-right" } }) %>
|
|
4
|
+
<%= pb_rails("button", props: { text: "Bottom Center", variant: "secondary", data: { toast: "#toast-bottom-center" } }) %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "Bottom Left", variant: "secondary", data: { toast: "#toast-bottom-left" } }) %>
|
|
6
|
+
<%= pb_rails("button", props: { text: "Bottom Right", variant: "secondary", data: { toast: "#toast-bottom-right" } }) %>
|
|
7
|
+
|
|
8
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
9
|
+
classname: "toast-to-hide",
|
|
10
|
+
closeable: true,
|
|
11
|
+
id: "toast-top-center",
|
|
12
|
+
text: "Top Center",
|
|
13
|
+
status: "neutral",
|
|
14
|
+
vertical: "top",
|
|
15
|
+
horizontal: "center"
|
|
16
|
+
}) %>
|
|
17
|
+
|
|
18
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
19
|
+
classname: "toast-to-hide",
|
|
20
|
+
closeable: true,
|
|
21
|
+
id: "toast-top-left",
|
|
22
|
+
text: "Top Left",
|
|
23
|
+
status: "neutral",
|
|
24
|
+
vertical: "top",
|
|
25
|
+
horizontal: "left"
|
|
26
|
+
}) %>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
29
|
+
classname: "toast-to-hide",
|
|
30
|
+
closeable: true,
|
|
31
|
+
id: "toast-top-right",
|
|
32
|
+
text: "Top Right",
|
|
33
|
+
status: "neutral",
|
|
34
|
+
vertical: "top",
|
|
35
|
+
horizontal: "right"
|
|
36
|
+
}) %>
|
|
37
|
+
|
|
38
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
39
|
+
classname: "toast-to-hide",
|
|
40
|
+
closeable: true,
|
|
41
|
+
id: "toast-bottom-center",
|
|
42
|
+
text: "Bottom Center",
|
|
43
|
+
status: "neutral",
|
|
44
|
+
vertical: "bottom",
|
|
45
|
+
horizontal: "center"
|
|
46
|
+
}) %>
|
|
47
|
+
|
|
48
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
49
|
+
classname: "toast-to-hide",
|
|
50
|
+
closeable: true,
|
|
51
|
+
id: "toast-bottom-left",
|
|
52
|
+
text: "Bottom Left",
|
|
53
|
+
status: "neutral",
|
|
54
|
+
vertical: "bottom",
|
|
55
|
+
horizontal: "left"
|
|
56
|
+
}) %>
|
|
57
|
+
|
|
58
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
59
|
+
classname: "toast-to-hide",
|
|
60
|
+
closeable: true,
|
|
61
|
+
id: "toast-bottom-right",
|
|
62
|
+
text: "Bottom Right",
|
|
63
|
+
status: "neutral",
|
|
64
|
+
vertical: "bottom",
|
|
65
|
+
horizontal: "right"
|
|
66
|
+
}) %>
|
|
67
|
+
|
|
68
|
+
<script type="text/javascript">
|
|
69
|
+
const toasts = document.querySelectorAll(".toast-to-hide")
|
|
70
|
+
const buttons = document.querySelectorAll("button[data-toast]")
|
|
71
|
+
|
|
72
|
+
const hideToasts = () => {
|
|
73
|
+
toasts.forEach((toast) => {
|
|
74
|
+
toast.style.display = "none"
|
|
75
|
+
})
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
hideToasts()
|
|
79
|
+
|
|
80
|
+
buttons.forEach((button) => {
|
|
81
|
+
button.onclick = () => {
|
|
82
|
+
hideToasts()
|
|
83
|
+
let toast = document.querySelector(button.getAttribute("data-toast"))
|
|
84
|
+
|
|
85
|
+
if (toast) {
|
|
86
|
+
toast.style.display = "flex"
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
})
|
|
90
|
+
</script>
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import Button from '../../pb_button/_button'
|
|
4
|
+
import FixedConfirmationToast from '../_fixed_confirmation_toast'
|
|
5
|
+
|
|
6
|
+
const FixedConfirmationToastPositions = (props) => {
|
|
7
|
+
const [state, setState] = useState({
|
|
8
|
+
open: false,
|
|
9
|
+
vertical: 'top',
|
|
10
|
+
horizontal: 'center',
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
const { vertical, horizontal, open } = state
|
|
14
|
+
|
|
15
|
+
const handleClick = (newState) => () => {
|
|
16
|
+
setState({ open: true, ...newState })
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const handleClose = () => {
|
|
20
|
+
setState({ ...state, open: false })
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div>
|
|
25
|
+
<Button
|
|
26
|
+
onClick={handleClick({
|
|
27
|
+
horizontal: 'center',
|
|
28
|
+
open: true,
|
|
29
|
+
vertical: 'top',
|
|
30
|
+
})}
|
|
31
|
+
text="Top Center"
|
|
32
|
+
variant="secondary"
|
|
33
|
+
{...props}
|
|
34
|
+
/>
|
|
35
|
+
{' '}
|
|
36
|
+
<Button
|
|
37
|
+
onClick={handleClick({
|
|
38
|
+
horizontal: 'left',
|
|
39
|
+
open: true,
|
|
40
|
+
vertical: 'top',
|
|
41
|
+
})}
|
|
42
|
+
text="Top Left"
|
|
43
|
+
variant="secondary"
|
|
44
|
+
{...props}
|
|
45
|
+
/>
|
|
46
|
+
{' '}
|
|
47
|
+
<Button
|
|
48
|
+
onClick={handleClick({
|
|
49
|
+
horizontal: 'right',
|
|
50
|
+
open: true,
|
|
51
|
+
vertical: 'top',
|
|
52
|
+
})}
|
|
53
|
+
text="Top Right"
|
|
54
|
+
variant="secondary"
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
{' '}
|
|
58
|
+
<Button
|
|
59
|
+
onClick={handleClick({
|
|
60
|
+
horizontal: 'center',
|
|
61
|
+
open: true,
|
|
62
|
+
vertical: 'bottom',
|
|
63
|
+
})}
|
|
64
|
+
text="Bottom Center"
|
|
65
|
+
variant="secondary"
|
|
66
|
+
{...props}
|
|
67
|
+
/>
|
|
68
|
+
{' '}
|
|
69
|
+
<Button
|
|
70
|
+
onClick={handleClick({
|
|
71
|
+
horizontal: 'left',
|
|
72
|
+
open: true,
|
|
73
|
+
vertical: 'bottom',
|
|
74
|
+
})}
|
|
75
|
+
text="Bottom Left"
|
|
76
|
+
variant="secondary"
|
|
77
|
+
{...props}
|
|
78
|
+
/>
|
|
79
|
+
{' '}
|
|
80
|
+
<Button
|
|
81
|
+
onClick={handleClick({
|
|
82
|
+
horizontal: 'right',
|
|
83
|
+
open: true,
|
|
84
|
+
vertical: 'bottom',
|
|
85
|
+
})}
|
|
86
|
+
text="Bottom Right"
|
|
87
|
+
variant="secondary"
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
|
|
91
|
+
<FixedConfirmationToast
|
|
92
|
+
closeable
|
|
93
|
+
horizontal={horizontal}
|
|
94
|
+
onClose={handleClose}
|
|
95
|
+
open={open}
|
|
96
|
+
status="neutral"
|
|
97
|
+
text={`${vertical} ${horizontal}`}
|
|
98
|
+
vertical={vertical}
|
|
99
|
+
{...props}
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export default FixedConfirmationToastPositions
|
|
@@ -4,8 +4,10 @@ examples:
|
|
|
4
4
|
- fixed_confirmation_toast_default: Default
|
|
5
5
|
- fixed_confirmation_toast_multi_line: Multi Line
|
|
6
6
|
- fixed_confirmation_toast_close: Click to Close
|
|
7
|
+
- fixed_confirmation_toast_positions: Click to Show Positions
|
|
7
8
|
|
|
8
9
|
react:
|
|
9
10
|
- fixed_confirmation_toast_default: Default
|
|
10
11
|
- fixed_confirmation_toast_multi_line: Multi Line
|
|
11
12
|
- fixed_confirmation_toast_close: Click to Close
|
|
13
|
+
- fixed_confirmation_toast_positions: Click to Show Positions
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
|
|
2
2
|
export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
|
|
3
3
|
export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
|
|
4
|
+
export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
|
|
@@ -11,6 +11,12 @@ module Playbook
|
|
|
11
11
|
default: false
|
|
12
12
|
prop :closeable, type: Playbook::Props::Boolean,
|
|
13
13
|
default: false
|
|
14
|
+
prop :horizontal, type: Playbook::Props::Enum,
|
|
15
|
+
values: [nil, "right", "left", "center"],
|
|
16
|
+
default: nil
|
|
17
|
+
prop :vertical, type: Playbook::Props::Enum,
|
|
18
|
+
values: [nil, "top", "bottom"],
|
|
19
|
+
default: nil
|
|
14
20
|
|
|
15
21
|
def show_text?
|
|
16
22
|
text.present?
|
|
@@ -20,6 +26,10 @@ module Playbook
|
|
|
20
26
|
closeable.present? ? " remove_toast" : ""
|
|
21
27
|
end
|
|
22
28
|
|
|
29
|
+
def position_class
|
|
30
|
+
horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
|
|
31
|
+
end
|
|
32
|
+
|
|
23
33
|
def multi_line_class
|
|
24
34
|
multi_line.present? ? "multi_line" : nil
|
|
25
35
|
end
|
|
@@ -38,7 +48,7 @@ module Playbook
|
|
|
38
48
|
end
|
|
39
49
|
|
|
40
50
|
def classname
|
|
41
|
-
generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
|
|
51
|
+
generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class
|
|
42
52
|
end
|
|
43
53
|
end
|
|
44
54
|
end
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
|
|
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
|
+
step 1
|
|
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 %>
|
|
6
|
+
step 2
|
|
7
|
+
<% end %>
|
|
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 %>
|
|
9
|
+
step 3
|
|
10
|
+
<% end %>
|
|
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
|
+
step 4
|
|
13
|
+
<% end %>
|
|
14
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
|
|
15
|
+
step 5
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<br /><br />
|
|
20
|
+
|
|
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 %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-8", tooltip: "Tooltip step 3", tooltip_position: "top", step_direction: "vertical" }) do %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-9", tooltip: "Tooltip step 4", tooltip_position: "bottom"}) do %>
|
|
29
|
+
<% end %>
|
|
30
|
+
<% end %>
|
|
31
|
+
|
|
32
|
+
<br /><br>
|
|
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" }) do %>
|
|
35
|
+
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
36
|
+
<% end %>
|
|
37
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
|
|
38
|
+
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
39
|
+
<% end %>
|
|
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 %>
|
|
41
|
+
<%= pb_rails("caption", props:{text: "Delivered"})%>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
|
|
45
|
+
<br /><br>
|
|
46
|
+
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
|
47
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-13", tooltip: "The order has been processed", tooltip_position: "right" }) do %>
|
|
48
|
+
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
49
|
+
<% end %>
|
|
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
|
+
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
52
|
+
<% end %>
|
|
53
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
|
|
54
|
+
<%= pb_rails("caption", props:{text: "Out for Delivery"})%>
|
|
55
|
+
<% end %>
|
|
56
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
|
|
57
|
+
<%= pb_rails("caption", props:{text: "Delivered"})%>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
@@ -2,10 +2,21 @@
|
|
|
2
2
|
id: object.id,
|
|
3
3
|
data: object.data,
|
|
4
4
|
class: object.classname) do %>
|
|
5
|
-
<div class="box">
|
|
5
|
+
<div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
|
|
6
6
|
<div class="circle">
|
|
7
7
|
<%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
|
|
8
8
|
</div>
|
|
9
|
+
<% if object.tooltip.present? %>
|
|
10
|
+
<div>
|
|
11
|
+
<%= pb_rails("tooltip", props: {
|
|
12
|
+
trigger_element_selector: "##{object.tooltip_trigger_class}",
|
|
13
|
+
tooltip_id: "example-tooltip",
|
|
14
|
+
position: object.step_tooltip_position
|
|
15
|
+
}) do %>
|
|
16
|
+
<%= object.tooltip %>
|
|
17
|
+
<% end %>
|
|
18
|
+
</div>
|
|
19
|
+
<% end %>
|
|
9
20
|
<div class="content">
|
|
10
21
|
<%= content.presence %>
|
|
11
22
|
<div>
|
|
@@ -8,6 +8,11 @@ module Playbook
|
|
|
8
8
|
default: "inactive"
|
|
9
9
|
|
|
10
10
|
prop :icon, required: false, default: "check"
|
|
11
|
+
prop :tooltip, required: false
|
|
12
|
+
prop :tooltip_position, required: false
|
|
13
|
+
prop :step_direction, type: Playbook::Props::Enum,
|
|
14
|
+
values: %w[horizontal vertical],
|
|
15
|
+
default: "horizontal"
|
|
11
16
|
|
|
12
17
|
def name_icon
|
|
13
18
|
icon || "check"
|
|
@@ -16,6 +21,22 @@ module Playbook
|
|
|
16
21
|
def classname
|
|
17
22
|
generate_classname("pb_progress_step_item", status)
|
|
18
23
|
end
|
|
24
|
+
|
|
25
|
+
def tooltip_trigger_class
|
|
26
|
+
classname.split(" ").last
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
def step_tooltip_position
|
|
30
|
+
if tooltip_position.present?
|
|
31
|
+
if step_direction == "vertical"
|
|
32
|
+
"right"
|
|
33
|
+
else
|
|
34
|
+
"top"
|
|
35
|
+
end
|
|
36
|
+
else
|
|
37
|
+
tooltip_position
|
|
38
|
+
end
|
|
39
|
+
end
|
|
19
40
|
end
|
|
20
41
|
end
|
|
21
42
|
end
|
|
@@ -70,7 +70,7 @@ const Timestamp = (props: TimestampProps) => {
|
|
|
70
70
|
|
|
71
71
|
const fullDateDisplay = () => {
|
|
72
72
|
let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
|
|
73
|
-
if (dateTimestamp.toYear()
|
|
73
|
+
if (dateTimestamp.toYear() !== currentYear) {
|
|
74
74
|
fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
|
|
75
75
|
}
|
|
76
76
|
return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
|
|
@@ -20,6 +20,14 @@
|
|
|
20
20
|
align: "left"
|
|
21
21
|
}) %>
|
|
22
22
|
|
|
23
|
+
<br>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("timestamp", props: {
|
|
26
|
+
timestamp: DateTime.now - 1.year,
|
|
27
|
+
show_date: true,
|
|
28
|
+
align: "left"
|
|
29
|
+
}) %>
|
|
30
|
+
|
|
23
31
|
<br><br>
|
|
24
32
|
|
|
25
33
|
<%= pb_rails("timestamp", props: {
|
|
@@ -44,6 +52,14 @@
|
|
|
44
52
|
align: "center"
|
|
45
53
|
}) %>
|
|
46
54
|
|
|
55
|
+
<br>
|
|
56
|
+
|
|
57
|
+
<%= pb_rails("timestamp", props: {
|
|
58
|
+
timestamp: DateTime.now - 1.year,
|
|
59
|
+
show_date: true,
|
|
60
|
+
align: "center"
|
|
61
|
+
}) %>
|
|
62
|
+
|
|
47
63
|
<br><br>
|
|
48
64
|
|
|
49
65
|
<%= pb_rails("timestamp", props: {
|
|
@@ -67,3 +83,11 @@
|
|
|
67
83
|
show_date: true,
|
|
68
84
|
align: "right"
|
|
69
85
|
}) %>
|
|
86
|
+
|
|
87
|
+
<br>
|
|
88
|
+
|
|
89
|
+
<%= pb_rails("timestamp", props: {
|
|
90
|
+
timestamp: DateTime.now - 1.year,
|
|
91
|
+
show_date: true,
|
|
92
|
+
align: "right"
|
|
93
|
+
}) %>
|
|
@@ -2,12 +2,14 @@ import React from 'react'
|
|
|
2
2
|
import Timestamp from '../_timestamp.jsx'
|
|
3
3
|
|
|
4
4
|
const todaysDate = new Date()
|
|
5
|
-
const
|
|
5
|
+
const futureYear = new Date().getFullYear() + 4
|
|
6
|
+
const pastYear = new Date().getFullYear() - 1
|
|
6
7
|
const month = new Date().getMonth()
|
|
7
8
|
const date = new Date().getDate()
|
|
8
9
|
const hours = new Date().getHours()
|
|
9
10
|
const minutes = new Date().getMinutes()
|
|
10
|
-
const
|
|
11
|
+
const futureDate = new Date(futureYear, month, date, hours, minutes)
|
|
12
|
+
const pastDate = new Date(pastYear, month, date, hours, minutes)
|
|
11
13
|
|
|
12
14
|
const TimestampAlign = (props) => {
|
|
13
15
|
return (
|
|
@@ -33,7 +35,16 @@ const TimestampAlign = (props) => {
|
|
|
33
35
|
<Timestamp
|
|
34
36
|
align="left"
|
|
35
37
|
showDate
|
|
36
|
-
timestamp={
|
|
38
|
+
timestamp={futureDate}
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
|
|
42
|
+
<br />
|
|
43
|
+
|
|
44
|
+
<Timestamp
|
|
45
|
+
align="left"
|
|
46
|
+
showDate
|
|
47
|
+
timestamp={pastDate}
|
|
37
48
|
{...props}
|
|
38
49
|
/>
|
|
39
50
|
|
|
@@ -61,7 +72,16 @@ const TimestampAlign = (props) => {
|
|
|
61
72
|
<Timestamp
|
|
62
73
|
align="center"
|
|
63
74
|
showDate
|
|
64
|
-
timestamp={
|
|
75
|
+
timestamp={futureDate}
|
|
76
|
+
{...props}
|
|
77
|
+
/>
|
|
78
|
+
|
|
79
|
+
<br />
|
|
80
|
+
|
|
81
|
+
<Timestamp
|
|
82
|
+
align="center"
|
|
83
|
+
showDate
|
|
84
|
+
timestamp={pastDate}
|
|
65
85
|
{...props}
|
|
66
86
|
/>
|
|
67
87
|
|
|
@@ -89,7 +109,16 @@ const TimestampAlign = (props) => {
|
|
|
89
109
|
<Timestamp
|
|
90
110
|
align="right"
|
|
91
111
|
showDate
|
|
92
|
-
timestamp={
|
|
112
|
+
timestamp={futureDate}
|
|
113
|
+
{...props}
|
|
114
|
+
/>
|
|
115
|
+
|
|
116
|
+
<br />
|
|
117
|
+
|
|
118
|
+
<Timestamp
|
|
119
|
+
align="right"
|
|
120
|
+
showDate
|
|
121
|
+
timestamp={pastDate}
|
|
93
122
|
{...props}
|
|
94
123
|
/>
|
|
95
124
|
</div>
|
|
@@ -2,12 +2,14 @@ import React from 'react'
|
|
|
2
2
|
import Timestamp from '../_timestamp.jsx'
|
|
3
3
|
|
|
4
4
|
const todaysDate = new Date()
|
|
5
|
-
const
|
|
5
|
+
const futureYear = new Date().getFullYear() + 4
|
|
6
|
+
const pastYear = new Date().getFullYear() - 1
|
|
6
7
|
const month = new Date().getMonth()
|
|
7
8
|
const date = new Date().getDate()
|
|
8
9
|
const hours = new Date().getHours()
|
|
9
10
|
const minutes = new Date().getMinutes()
|
|
10
|
-
const
|
|
11
|
+
const futureDate = new Date(futureYear, month, date, hours, minutes)
|
|
12
|
+
const pastDate = new Date(pastYear, month, date, hours, minutes)
|
|
11
13
|
|
|
12
14
|
const TimestampDefault = (props) => {
|
|
13
15
|
return (
|
|
@@ -33,7 +35,16 @@ const TimestampDefault = (props) => {
|
|
|
33
35
|
<Timestamp
|
|
34
36
|
align="left"
|
|
35
37
|
showDate
|
|
36
|
-
timestamp={
|
|
38
|
+
timestamp={futureDate}
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
|
|
42
|
+
<br />
|
|
43
|
+
|
|
44
|
+
<Timestamp
|
|
45
|
+
align="left"
|
|
46
|
+
showDate
|
|
47
|
+
timestamp={pastDate}
|
|
37
48
|
{...props}
|
|
38
49
|
/>
|
|
39
50
|
</div>
|
|
@@ -28,6 +28,16 @@
|
|
|
28
28
|
|
|
29
29
|
<br>
|
|
30
30
|
|
|
31
|
+
<%= pb_rails("timestamp", props: {
|
|
32
|
+
timestamp: DateTime.now - 1.year,
|
|
33
|
+
show_date: true,
|
|
34
|
+
show_timezone: true,
|
|
35
|
+
timezone: "America/New_York",
|
|
36
|
+
align: "left"
|
|
37
|
+
}) %>
|
|
38
|
+
|
|
39
|
+
<br>
|
|
40
|
+
|
|
31
41
|
<%= pb_rails("timestamp", props: {
|
|
32
42
|
timestamp: DateTime.now,
|
|
33
43
|
show_date: false,
|
|
@@ -57,3 +67,13 @@
|
|
|
57
67
|
}) %>
|
|
58
68
|
|
|
59
69
|
<br>
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("timestamp", props: {
|
|
72
|
+
timestamp: DateTime.now - 1.year,
|
|
73
|
+
show_date: true,
|
|
74
|
+
show_timezone: true,
|
|
75
|
+
timezone: "Asia/Hong_Kong",
|
|
76
|
+
align: "left"
|
|
77
|
+
}) %>
|
|
78
|
+
|
|
79
|
+
<br>
|
|
@@ -2,12 +2,14 @@ import React from 'react'
|
|
|
2
2
|
import Timestamp from '../_timestamp.jsx'
|
|
3
3
|
|
|
4
4
|
const todaysDate = new Date()
|
|
5
|
-
const
|
|
5
|
+
const futureYear = new Date().getFullYear() + 4
|
|
6
|
+
const pastYear = new Date().getFullYear() - 1
|
|
6
7
|
const month = new Date().getMonth()
|
|
7
8
|
const date = new Date().getDate()
|
|
8
9
|
const hours = new Date().getHours()
|
|
9
10
|
const minutes = new Date().getMinutes()
|
|
10
|
-
const
|
|
11
|
+
const futureDate = new Date(futureYear, month, date, hours, minutes)
|
|
12
|
+
const pastDate = new Date(pastYear, month, date, hours, minutes)
|
|
11
13
|
|
|
12
14
|
const TimestampTimezones = (props) => {
|
|
13
15
|
return (
|
|
@@ -38,7 +40,18 @@ const TimestampTimezones = (props) => {
|
|
|
38
40
|
align="left"
|
|
39
41
|
showDate
|
|
40
42
|
showTimezone
|
|
41
|
-
timestamp={
|
|
43
|
+
timestamp={futureDate}
|
|
44
|
+
timezone="America/New_York"
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
<br />
|
|
49
|
+
|
|
50
|
+
<Timestamp
|
|
51
|
+
align="left"
|
|
52
|
+
showDate
|
|
53
|
+
showTimezone
|
|
54
|
+
timestamp={pastDate}
|
|
42
55
|
timezone="America/New_York"
|
|
43
56
|
{...props}
|
|
44
57
|
/>
|
|
@@ -71,7 +84,18 @@ const TimestampTimezones = (props) => {
|
|
|
71
84
|
align="left"
|
|
72
85
|
showDate
|
|
73
86
|
showTimezone
|
|
74
|
-
timestamp={
|
|
87
|
+
timestamp={futureDate}
|
|
88
|
+
timezone="Asia/Hong_Kong"
|
|
89
|
+
{...props}
|
|
90
|
+
/>
|
|
91
|
+
|
|
92
|
+
<br />
|
|
93
|
+
|
|
94
|
+
<Timestamp
|
|
95
|
+
align="left"
|
|
96
|
+
showDate
|
|
97
|
+
showTimezone
|
|
98
|
+
timestamp={pastDate}
|
|
75
99
|
timezone="Asia/Hong_Kong"
|
|
76
100
|
{...props}
|
|
77
101
|
/>
|
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: 10.
|
|
4
|
+
version: 10.12.0
|
|
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: 2021-10-
|
|
12
|
+
date: 2021-10-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -809,6 +809,8 @@ files:
|
|
|
809
809
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb
|
|
810
810
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
|
|
811
811
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
|
|
812
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
|
|
813
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
|
|
812
814
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
|
|
813
815
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
|
|
814
816
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb
|
|
@@ -1378,6 +1380,7 @@ files:
|
|
|
1378
1380
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
|
|
1379
1381
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
|
|
1380
1382
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
|
|
1383
|
+
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb
|
|
1381
1384
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb
|
|
1382
1385
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx
|
|
1383
1386
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx
|