playbook_ui_docs 14.8.0.pre.rc.4 → 14.8.0.pre.rc.6
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_date_picker/docs/_date_picker_quick_pick_default_date.html.erb +42 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +94 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +180 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -0
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +2 -0
- data/dist/playbook-doc.js +1 -1
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c61dd0e61cbd8b7fc491b95850c27716c09f9ad6a929346b0d6d4c9326961047
|
|
4
|
+
data.tar.gz: a11d17f81f9cfe33811a3fea3ae8e05a4d0a1bd2e09fec3f9337144858ab84ca
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4027884d4f0beb912a27d4d69ea463cba77d628749c6d7d316b6e789a3478cbd26292ccb0b27fd271877a0f03389616478f4f571dd3d6469304d06e383bf8017
|
|
7
|
+
data.tar.gz: 2f8cdd8b93101b8e4f242af37dec0107b096bb0f5671502cecf3e495333a147792dd28105e8de401142cba7c68785d96c816cacc8f784fc61728ba76be202a12
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
|
2
|
+
allow_input: true,
|
|
3
|
+
default_date: "This month",
|
|
4
|
+
end_date_id: "quick-pick-end-date",
|
|
5
|
+
end_date_name: "quick-pick-end-date",
|
|
6
|
+
mode: "range",
|
|
7
|
+
picker_id: "quick-pick-default-date",
|
|
8
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
|
9
|
+
selection_type: "quickpick",
|
|
10
|
+
start_date_id: "quick-pick-start-date",
|
|
11
|
+
start_date_name: "quick-pick-start-date"
|
|
12
|
+
}) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("date_picker", props: {
|
|
15
|
+
allow_input: true,
|
|
16
|
+
custom_quick_pick_dates: {
|
|
17
|
+
dates: [
|
|
18
|
+
{
|
|
19
|
+
label: "Last 15 months",
|
|
20
|
+
value: {
|
|
21
|
+
timePeriod: "months",
|
|
22
|
+
amount: 15,
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
label: "First Week of June 2022",
|
|
27
|
+
value: ["06/01/2022", "06/07/2022"],
|
|
28
|
+
},
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
default_date: "First Week of June 2022",
|
|
32
|
+
end_date_id: "quick-pick-end-date",
|
|
33
|
+
end_date_name: "quick-pick-end-date",
|
|
34
|
+
label: "Custom Date Picker",
|
|
35
|
+
mode: "range",
|
|
36
|
+
picker_id: "custom-quick-pick-default-date",
|
|
37
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
|
38
|
+
selection_type: "quickpick",
|
|
39
|
+
start_date_id: "quick-pick-start-date",
|
|
40
|
+
start_date_name: "quick-pick-start-date"
|
|
41
|
+
}) %>
|
|
42
|
+
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import DatePicker from "../_date_picker"
|
|
3
|
+
|
|
4
|
+
const DatePickerQuickPickDefaultDate = (props) => (
|
|
5
|
+
<>
|
|
6
|
+
<DatePicker
|
|
7
|
+
allowInput
|
|
8
|
+
defaultDate="This month"
|
|
9
|
+
mode="range"
|
|
10
|
+
pickerId="quick-pick-default-date"
|
|
11
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
|
12
|
+
selectionType="quickpick"
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
|
|
16
|
+
<DatePicker
|
|
17
|
+
allowInput
|
|
18
|
+
customQuickPickDates={{
|
|
19
|
+
dates: [
|
|
20
|
+
{
|
|
21
|
+
label: "Last 15 months",
|
|
22
|
+
value: {
|
|
23
|
+
timePeriod: "months",
|
|
24
|
+
amount: 15,
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "First Week of June 2022",
|
|
29
|
+
value: ["06/01/2022", "06/07/2022"],
|
|
30
|
+
},
|
|
31
|
+
],
|
|
32
|
+
}}
|
|
33
|
+
defaultDate="First Week of June 2022"
|
|
34
|
+
label="Custom Date Picker"
|
|
35
|
+
mode="range"
|
|
36
|
+
pickerId="custom-quick-pick-default-date"
|
|
37
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
|
38
|
+
selectionType="quickpick"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</>
|
|
42
|
+
)
|
|
43
|
+
|
|
44
|
+
export default DatePickerQuickPickDefaultDate
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.
|
|
@@ -12,6 +12,7 @@ examples:
|
|
|
12
12
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
|
13
13
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
|
14
14
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
|
15
|
+
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
|
15
16
|
- date_picker_format: Format
|
|
16
17
|
- date_picker_disabled: Disabled Dates
|
|
17
18
|
- date_picker_min_max: Min Max
|
|
@@ -42,6 +43,7 @@ examples:
|
|
|
42
43
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
|
43
44
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
|
44
45
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
|
46
|
+
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
|
45
47
|
- date_picker_format: Format
|
|
46
48
|
- date_picker_disabled: Disabled Dates
|
|
47
49
|
- date_picker_min_max: Min Max
|
|
@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
|
|
|
25
25
|
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
|
26
26
|
export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
|
|
27
27
|
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
|
28
|
+
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "evenly" }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
|
|
4
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
5
|
+
<%= pb_rails("body", props: {
|
|
6
|
+
text: "Conversation started",
|
|
7
|
+
color: "light"
|
|
8
|
+
}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
11
|
+
<%= pb_rails("body", props: {
|
|
12
|
+
text: "Trip #12422",
|
|
13
|
+
color: "light"
|
|
14
|
+
}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
17
|
+
<%= pb_rails("body", props: {
|
|
18
|
+
text: "Refund issue #12422",
|
|
19
|
+
color: "light"
|
|
20
|
+
}) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
26
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
|
|
27
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
28
|
+
<%= pb_rails("body", props: {
|
|
29
|
+
text: "Conversation started",
|
|
30
|
+
color: "light"
|
|
31
|
+
}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
34
|
+
<%= pb_rails("body", props: {
|
|
35
|
+
text: "Trip #12422",
|
|
36
|
+
color: "light"
|
|
37
|
+
}) %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
40
|
+
<%= pb_rails("body", props: {
|
|
41
|
+
text: "Refund issue #12422",
|
|
42
|
+
color: "light"
|
|
43
|
+
}) %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
|
|
48
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
49
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
|
|
50
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
51
|
+
<%= pb_rails("body", props: {
|
|
52
|
+
text: "Conversation started",
|
|
53
|
+
color: "light"
|
|
54
|
+
}) %>
|
|
55
|
+
<% end %>
|
|
56
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
57
|
+
<%= pb_rails("body", props: {
|
|
58
|
+
text: "Trip #12422",
|
|
59
|
+
color: "light"
|
|
60
|
+
}) %>
|
|
61
|
+
<% end %>
|
|
62
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
63
|
+
<%= pb_rails("body", props: {
|
|
64
|
+
text: "Refund issue #12422",
|
|
65
|
+
color: "light"
|
|
66
|
+
}) %>
|
|
67
|
+
<% end %>
|
|
68
|
+
<% end %>
|
|
69
|
+
<% end %>
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
72
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
|
|
73
|
+
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
74
|
+
<%= pb_rails("body", props: {
|
|
75
|
+
text: "Conversation started",
|
|
76
|
+
color: "light"
|
|
77
|
+
}) %>
|
|
78
|
+
<% end %>
|
|
79
|
+
<%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
|
|
80
|
+
<%= pb_rails("body", props: {
|
|
81
|
+
text: "Trip #12422",
|
|
82
|
+
color: "light"
|
|
83
|
+
}) %>
|
|
84
|
+
<% end %>
|
|
85
|
+
<%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
|
|
86
|
+
<%= pb_rails("body", props: {
|
|
87
|
+
text: "Refund issue #12422",
|
|
88
|
+
color: "light"
|
|
89
|
+
}) %>
|
|
90
|
+
<% end %>
|
|
91
|
+
<% end %>
|
|
92
|
+
<% end %>
|
|
93
|
+
<% end %>
|
|
94
|
+
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Timeline from '../_timeline'
|
|
4
|
+
import Flex from "../../pb_flex/_flex"
|
|
5
|
+
import FlexItem from "../../pb_flex/_flex_item"
|
|
6
|
+
import Body from '../../pb_body/_body'
|
|
7
|
+
|
|
8
|
+
const TimelineWithGap = (props) => (
|
|
9
|
+
<div>
|
|
10
|
+
<Flex justify="evenly">
|
|
11
|
+
<FlexItem>
|
|
12
|
+
<Timeline
|
|
13
|
+
gap="xs"
|
|
14
|
+
orientation="vertical"
|
|
15
|
+
>
|
|
16
|
+
<Timeline.Item
|
|
17
|
+
icon="user"
|
|
18
|
+
iconColor="royal"
|
|
19
|
+
{...props}
|
|
20
|
+
>
|
|
21
|
+
<Body
|
|
22
|
+
color="light"
|
|
23
|
+
text="Conversation started"
|
|
24
|
+
{...props}
|
|
25
|
+
/>
|
|
26
|
+
</Timeline.Item>
|
|
27
|
+
<Timeline.Item
|
|
28
|
+
icon="check"
|
|
29
|
+
iconColor="teal"
|
|
30
|
+
lineStyle="dotted"
|
|
31
|
+
{...props}
|
|
32
|
+
>
|
|
33
|
+
<Body
|
|
34
|
+
color="light"
|
|
35
|
+
text="Trip #12422"
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
</Timeline.Item>
|
|
39
|
+
<Timeline.Item
|
|
40
|
+
icon="credit-card"
|
|
41
|
+
iconColor="red"
|
|
42
|
+
{...props}
|
|
43
|
+
>
|
|
44
|
+
<Body
|
|
45
|
+
color="light"
|
|
46
|
+
text="Refund issue #12422"
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
</Timeline.Item>
|
|
50
|
+
</Timeline>
|
|
51
|
+
</FlexItem>
|
|
52
|
+
<FlexItem>
|
|
53
|
+
<Timeline
|
|
54
|
+
gap="sm"
|
|
55
|
+
orientation="vertical"
|
|
56
|
+
>
|
|
57
|
+
<Timeline.Item
|
|
58
|
+
icon="user"
|
|
59
|
+
iconColor="royal"
|
|
60
|
+
{...props}
|
|
61
|
+
>
|
|
62
|
+
<Body
|
|
63
|
+
color="light"
|
|
64
|
+
text="Conversation started"
|
|
65
|
+
{...props}
|
|
66
|
+
/>
|
|
67
|
+
</Timeline.Item>
|
|
68
|
+
<Timeline.Item
|
|
69
|
+
icon="check"
|
|
70
|
+
iconColor="teal"
|
|
71
|
+
lineStyle="dotted"
|
|
72
|
+
{...props}
|
|
73
|
+
>
|
|
74
|
+
<Body
|
|
75
|
+
color="light"
|
|
76
|
+
text="Trip #12422"
|
|
77
|
+
{...props}
|
|
78
|
+
/>
|
|
79
|
+
</Timeline.Item>
|
|
80
|
+
<Timeline.Item
|
|
81
|
+
icon="credit-card"
|
|
82
|
+
iconColor="red"
|
|
83
|
+
{...props}
|
|
84
|
+
>
|
|
85
|
+
<Body
|
|
86
|
+
color="light"
|
|
87
|
+
text="Refund issue #12422"
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
</Timeline.Item>
|
|
91
|
+
</Timeline>
|
|
92
|
+
</FlexItem>
|
|
93
|
+
<FlexItem>
|
|
94
|
+
<Timeline
|
|
95
|
+
gap="md"
|
|
96
|
+
orientation="vertical"
|
|
97
|
+
>
|
|
98
|
+
<Timeline.Item
|
|
99
|
+
icon="user"
|
|
100
|
+
iconColor="royal"
|
|
101
|
+
{...props}
|
|
102
|
+
>
|
|
103
|
+
<Body
|
|
104
|
+
color="light"
|
|
105
|
+
text="Conversation started"
|
|
106
|
+
{...props}
|
|
107
|
+
/>
|
|
108
|
+
</Timeline.Item>
|
|
109
|
+
<Timeline.Item
|
|
110
|
+
icon="check"
|
|
111
|
+
iconColor="teal"
|
|
112
|
+
lineStyle="dotted"
|
|
113
|
+
{...props}
|
|
114
|
+
>
|
|
115
|
+
<Body
|
|
116
|
+
color="light"
|
|
117
|
+
text="Trip #12422"
|
|
118
|
+
{...props}
|
|
119
|
+
/>
|
|
120
|
+
</Timeline.Item>
|
|
121
|
+
<Timeline.Item
|
|
122
|
+
icon="credit-card"
|
|
123
|
+
iconColor="red"
|
|
124
|
+
lineStyle="dotted"
|
|
125
|
+
{...props}
|
|
126
|
+
>
|
|
127
|
+
<Body
|
|
128
|
+
color="light"
|
|
129
|
+
text="Refund issue #12422"
|
|
130
|
+
{...props}
|
|
131
|
+
/>
|
|
132
|
+
</Timeline.Item>
|
|
133
|
+
</Timeline>
|
|
134
|
+
</FlexItem>
|
|
135
|
+
<FlexItem>
|
|
136
|
+
<Timeline
|
|
137
|
+
gap="lg"
|
|
138
|
+
orientation="vertical"
|
|
139
|
+
>
|
|
140
|
+
<Timeline.Item
|
|
141
|
+
icon="user"
|
|
142
|
+
iconColor="royal"
|
|
143
|
+
{...props}
|
|
144
|
+
>
|
|
145
|
+
<Body
|
|
146
|
+
color="light"
|
|
147
|
+
text="Conversation started"
|
|
148
|
+
{...props}
|
|
149
|
+
/>
|
|
150
|
+
</Timeline.Item>
|
|
151
|
+
<Timeline.Item
|
|
152
|
+
icon="check"
|
|
153
|
+
iconColor="teal"
|
|
154
|
+
lineStyle="dotted"
|
|
155
|
+
{...props}
|
|
156
|
+
>
|
|
157
|
+
<Body
|
|
158
|
+
color="light"
|
|
159
|
+
text="Trip #12422"
|
|
160
|
+
{...props}
|
|
161
|
+
/>
|
|
162
|
+
</Timeline.Item>
|
|
163
|
+
<Timeline.Item
|
|
164
|
+
icon="credit-card"
|
|
165
|
+
iconColor="red"
|
|
166
|
+
{...props}
|
|
167
|
+
>
|
|
168
|
+
<Body
|
|
169
|
+
color="light"
|
|
170
|
+
text="Refund issue #12422"
|
|
171
|
+
{...props}
|
|
172
|
+
/>
|
|
173
|
+
</Timeline.Item>
|
|
174
|
+
</Timeline>
|
|
175
|
+
</FlexItem>
|
|
176
|
+
</Flex>
|
|
177
|
+
</div>
|
|
178
|
+
)
|
|
179
|
+
|
|
180
|
+
export default TimelineWithGap
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- timeline_default: Default
|
|
5
5
|
- timeline_vertical: Vertical
|
|
6
6
|
- timeline_with_date: With Date
|
|
7
7
|
- timeline_with_children: With Children
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- timeline_with_gap: With Gap
|
|
9
|
+
|
|
10
|
+
|
|
10
11
|
react:
|
|
11
12
|
- timeline_default: Default
|
|
12
13
|
- timeline_vertical: Vertical
|
|
13
14
|
- timeline_with_date: With Date
|
|
14
15
|
- timeline_with_children: With Children
|
|
16
|
+
- timeline_with_gap: With Gap
|
|
@@ -2,3 +2,5 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
|
|
|
2
2
|
export { default as TimelineVertical } from './_timeline_vertical.jsx'
|
|
3
3
|
export { default as TimelineWithDate } from './_timeline_with_date.jsx'
|
|
4
4
|
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|
|
5
|
+
export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
|
|
6
|
+
|