playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380
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_form_pill/_form_pill.scss +6 -2
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +30 -26
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +24 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +25 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +46 -8
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +59 -23
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +8 -0
- data/app/pb_kits/playbook/pb_timeline/detail.html.erb +3 -0
- data/app/pb_kits/playbook/pb_timeline/detail.rb +11 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +68 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +2 -0
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +17 -21
- data/app/pb_kits/playbook/pb_timeline/item.rb +4 -0
- data/app/pb_kits/playbook/pb_timeline/label.html.erb +12 -0
- data/app/pb_kits/playbook/pb_timeline/label.rb +13 -0
- data/app/pb_kits/playbook/pb_timeline/step.html.erb +14 -0
- data/app/pb_kits/playbook/pb_timeline/step.rb +16 -0
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +29 -0
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +38 -0
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +42 -0
- data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +3 -0
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +84 -0
- data/dist/chunks/{_typeahead-BV_n6U5W.js → _typeahead-BJrdFWHc.js} +2 -2
- data/dist/chunks/{_weekday_stacked-DCgkKIQf.js → _weekday_stacked-DJWwxF-6.js} +2 -2
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +19 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2150b988f879193d665933bcff4a30e8da5ce3b01d92f9b647521594520306ac
|
4
|
+
data.tar.gz: 7023762038f258f24a3699ad06e2dc2f05c600de89cbce803b569aecb7da9f31
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d96de439d140f402f0f7d09483ac2278133f633303c5fed4e15c00748ece77053751874cc0b28a29797e4070e34e762ee32c2aa099ff306556be184a69014044
|
7
|
+
data.tar.gz: 17a2d95ea8a35b7dedb4dc48746a82a02abfb93c6211f8caa9bd6716a364c0b443590f0f3be8d1316d93d392b260375d80d0811da8ae2f6d9126b244a8527d47
|
@@ -142,7 +142,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
|
|
142
142
|
height: 12px !important;
|
143
143
|
width: 12px !important;
|
144
144
|
padding-right: $space_xs;
|
145
|
-
+ .pb_form_pill_text, + .pb_form_pill_tag
|
145
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag,
|
146
|
+
+ .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
|
147
|
+
+ div .pb_form_pill_text, + div .pb_form_pill_tag {
|
146
148
|
padding-left: 0;
|
147
149
|
}
|
148
150
|
}
|
@@ -169,7 +171,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
|
|
169
171
|
}
|
170
172
|
.pb_form_pill_icon {
|
171
173
|
padding-right: $space_xxs;
|
172
|
-
+ .pb_form_pill_text, + .pb_form_pill_tag
|
174
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag,
|
175
|
+
+ .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
|
176
|
+
+ div .pb_form_pill_text, + div .pb_form_pill_tag {
|
173
177
|
padding-left: 0;
|
174
178
|
}
|
175
179
|
}
|
@@ -3,6 +3,7 @@ import classnames from 'classnames'
|
|
3
3
|
import Title from '../pb_title/_title'
|
4
4
|
import Icon from '../pb_icon/_icon'
|
5
5
|
import Avatar from '../pb_avatar/_avatar'
|
6
|
+
import Tooltip from '../pb_tooltip/_tooltip'
|
6
7
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
7
8
|
import { buildDataProps, buildHtmlProps } from '../utilities/props'
|
8
9
|
|
@@ -62,6 +63,30 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
62
63
|
const dataProps = buildDataProps(data)
|
63
64
|
const htmlProps = buildHtmlProps(htmlOptions)
|
64
65
|
|
66
|
+
const renderTitle = (content: string, className: string) => {
|
67
|
+
const titleComponent = (
|
68
|
+
<Title
|
69
|
+
className={className}
|
70
|
+
size={4}
|
71
|
+
text={content}
|
72
|
+
truncate={props.truncate}
|
73
|
+
/>
|
74
|
+
)
|
75
|
+
if (props.truncate) {
|
76
|
+
return (
|
77
|
+
<Tooltip
|
78
|
+
interaction
|
79
|
+
placement="top"
|
80
|
+
position="fixed"
|
81
|
+
text={content}
|
82
|
+
>
|
83
|
+
{titleComponent}
|
84
|
+
</Tooltip>
|
85
|
+
)
|
86
|
+
}
|
87
|
+
return titleComponent
|
88
|
+
}
|
89
|
+
|
65
90
|
return (
|
66
91
|
<div className={css}
|
67
92
|
id={id}
|
@@ -77,12 +102,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
77
102
|
size="xxs"
|
78
103
|
status={null}
|
79
104
|
/>
|
80
|
-
|
81
|
-
className="pb_form_pill_text"
|
82
|
-
size={4}
|
83
|
-
text={name}
|
84
|
-
truncate={props.truncate}
|
85
|
-
/>
|
105
|
+
{renderTitle(name, "pb_form_pill_text")}
|
86
106
|
</>
|
87
107
|
)}
|
88
108
|
{((name && icon && !text) || (name && icon && text)) && (
|
@@ -93,12 +113,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
93
113
|
size="xxs"
|
94
114
|
status={null}
|
95
115
|
/>
|
96
|
-
|
97
|
-
className="pb_form_pill_text"
|
98
|
-
size={4}
|
99
|
-
text={name}
|
100
|
-
truncate={props.truncate}
|
101
|
-
/>
|
116
|
+
{renderTitle(name, "pb_form_pill_text")}
|
102
117
|
<Icon
|
103
118
|
className="pb_form_pill_icon"
|
104
119
|
color={color}
|
@@ -113,22 +128,10 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
113
128
|
color={color}
|
114
129
|
icon={icon}
|
115
130
|
/>
|
116
|
-
|
117
|
-
className="pb_form_pill_tag"
|
118
|
-
size={4}
|
119
|
-
text={text}
|
120
|
-
truncate={props.truncate}
|
121
|
-
/>
|
131
|
+
{renderTitle(text, "pb_form_pill_tag")}
|
122
132
|
</>
|
123
133
|
)}
|
124
|
-
{(!name && !icon && text) && (
|
125
|
-
<Title
|
126
|
-
className="pb_form_pill_tag"
|
127
|
-
size={4}
|
128
|
-
text={text}
|
129
|
-
truncate={props.truncate}
|
130
|
-
/>
|
131
|
-
)}
|
134
|
+
{(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
|
132
135
|
<div
|
133
136
|
className="pb_form_pill_close"
|
134
137
|
onClick={onClick}
|
@@ -143,4 +146,5 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
143
146
|
</div>
|
144
147
|
)
|
145
148
|
}
|
149
|
+
|
146
150
|
export default FormPill
|
@@ -13,7 +13,30 @@
|
|
13
13
|
id: "typeahead-form-pill",
|
14
14
|
is_multi: true,
|
15
15
|
options: names,
|
16
|
-
label: "
|
16
|
+
label: "Truncation Within Typeahead",
|
17
17
|
pills: true,
|
18
18
|
truncate: 1,
|
19
19
|
}) %>
|
20
|
+
|
21
|
+
<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
|
22
|
+
<%= pb_rails("card", props: { max_width: "xs" }) do %>
|
23
|
+
<%= pb_rails("form_pill", props: {
|
24
|
+
name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
|
25
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
26
|
+
tabindex: 0,
|
27
|
+
truncate: 1,
|
28
|
+
id: "truncation-1"
|
29
|
+
}) %>
|
30
|
+
<%= pb_rails("form_pill", props: {
|
31
|
+
icon: "badge-check",
|
32
|
+
text: "icon and a very long tag to show truncation",
|
33
|
+
tabindex: 0,
|
34
|
+
truncate: 1,
|
35
|
+
id: "truncation-2"
|
36
|
+
}) %>
|
37
|
+
<%= pb_rails("form_pill", props: {
|
38
|
+
text: "form pill long tag no tooltip show truncation",
|
39
|
+
tabindex: 0,
|
40
|
+
truncate: 1,
|
41
|
+
}) %>
|
42
|
+
<% end %>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import Typeahead from '
|
2
|
+
import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
|
3
3
|
|
4
4
|
const names = [
|
5
5
|
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
|
|
15
15
|
<Typeahead
|
16
16
|
htmlOptions={{ style: { maxWidth: "240px" }}}
|
17
17
|
isMulti
|
18
|
-
label="
|
18
|
+
label="Truncation Within Typeahead"
|
19
19
|
options={names}
|
20
20
|
truncate={1}
|
21
21
|
{...props}
|
22
22
|
/>
|
23
|
+
<Caption text="Form Pill Truncation"/>
|
24
|
+
<Card maxWidth="xs">
|
25
|
+
<FormPill
|
26
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
27
|
+
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
|
28
|
+
onClick={() => alert('Click!')}
|
29
|
+
tabIndex={0}
|
30
|
+
truncate={1}
|
31
|
+
/>
|
32
|
+
<FormPill
|
33
|
+
icon="badge-check"
|
34
|
+
onClick={() => {alert('Click!')}}
|
35
|
+
tabIndex={0}
|
36
|
+
text="icon and a very long tag to show truncation"
|
37
|
+
truncate={1}
|
38
|
+
/>
|
39
|
+
<FormPill
|
40
|
+
onClick={() => {alert('Click!')}}
|
41
|
+
tabIndex={0}
|
42
|
+
text="form pill with a very long tag to show truncation"
|
43
|
+
truncate={1}
|
44
|
+
/>
|
45
|
+
</Card>
|
23
46
|
</>
|
24
47
|
)
|
25
48
|
}
|
@@ -0,0 +1,3 @@
|
|
1
|
+
For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
2
|
+
|
3
|
+
__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
|
@@ -0,0 +1 @@
|
|
1
|
+
For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
@@ -1,19 +1,57 @@
|
|
1
1
|
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
|
2
2
|
<% if object.name.present? %>
|
3
3
|
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
|
4
|
-
|
4
|
+
<% if object.truncate %>
|
5
|
+
<div>
|
6
|
+
<%= pb_rails("title", props: {
|
7
|
+
classname: "pb_form_pill_text truncate_#{object.truncate}",
|
8
|
+
id: object.id,
|
9
|
+
size: 4,
|
10
|
+
text: object.name,
|
11
|
+
}) %>
|
12
|
+
<% if object.id.present? %>
|
13
|
+
<%= pb_rails("tooltip", props: {
|
14
|
+
position: "top",
|
15
|
+
tooltip_id: "tooltip-#{object.id}",
|
16
|
+
trigger_element_selector: "##{object.id}"
|
17
|
+
}) do %>
|
18
|
+
<%= object.name %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
</div>
|
22
|
+
<% else %>
|
23
|
+
<%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
|
24
|
+
<% end %>
|
5
25
|
<% if object.icon.present? %>
|
6
26
|
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
7
27
|
<% end %>
|
8
28
|
<% elsif object.text.present? %>
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
29
|
+
<% if object.icon.present? %>
|
30
|
+
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
31
|
+
<% end %>
|
32
|
+
<% if object.truncate %>
|
33
|
+
<div>
|
34
|
+
<%= pb_rails("title", props: {
|
35
|
+
classname: "pb_form_pill_tag truncate_#{object.truncate}",
|
36
|
+
id: object.id,
|
37
|
+
size: 4,
|
38
|
+
text: object.text,
|
39
|
+
}) %>
|
40
|
+
<% if object.id.present? %>
|
41
|
+
<%= pb_rails("tooltip", props: {
|
42
|
+
position: "top",
|
43
|
+
tooltip_id: "tooltip-#{object.id}",
|
44
|
+
trigger_element_selector: "##{object.id}"
|
45
|
+
}) do %>
|
46
|
+
<%= object.text %>
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
</div>
|
50
|
+
<% else %>
|
51
|
+
<%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
|
52
|
+
<% end %>
|
15
53
|
<% end %>
|
16
54
|
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
|
17
55
|
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
|
18
56
|
<% end %>
|
19
|
-
<% end %>
|
57
|
+
<% end %>
|
@@ -1,12 +1,15 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
|
4
3
|
import { buildCss, buildHtmlProps } from '../utilities/props'
|
5
|
-
import { globalProps, GlobalProps } from "../utilities/globalProps"
|
4
|
+
import { globalProps, GlobalProps } from "../utilities/globalProps"
|
6
5
|
|
7
6
|
import DateStacked from '../pb_date_stacked/_date_stacked'
|
8
7
|
import IconCircle from '../pb_icon_circle/_icon_circle'
|
9
8
|
|
9
|
+
import TimelineLabel from './subcomponents/Label'
|
10
|
+
import TimelineStep from './subcomponents/Step'
|
11
|
+
import TimelineDetail from './subcomponents/Detail'
|
12
|
+
|
10
13
|
type ItemProps = {
|
11
14
|
className?: string,
|
12
15
|
children?: React.ReactNode[] | React.ReactNode,
|
@@ -17,6 +20,13 @@ type ItemProps = {
|
|
17
20
|
lineStyle?: 'solid' | 'dotted',
|
18
21
|
} & GlobalProps
|
19
22
|
|
23
|
+
function isElementOfType<P>(
|
24
|
+
element: React.ReactNode,
|
25
|
+
component: React.ComponentType<P>
|
26
|
+
): element is React.ReactElement<P> {
|
27
|
+
return React.isValidElement<P>(element) && element.type === component
|
28
|
+
}
|
29
|
+
|
20
30
|
const TimelineItem = ({
|
21
31
|
className,
|
22
32
|
children,
|
@@ -31,31 +41,57 @@ const TimelineItem = ({
|
|
31
41
|
|
32
42
|
const htmlProps = buildHtmlProps(htmlOptions)
|
33
43
|
|
44
|
+
const childrenArray = React.Children.toArray(children)
|
45
|
+
|
46
|
+
const labelChild = childrenArray.find(
|
47
|
+
(child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
|
48
|
+
)
|
49
|
+
|
50
|
+
const stepChild = childrenArray.find(
|
51
|
+
(child): child is React.ReactElement => isElementOfType(child, TimelineStep)
|
52
|
+
)
|
53
|
+
|
54
|
+
const detailChild = childrenArray.find(
|
55
|
+
(child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
|
56
|
+
)
|
57
|
+
|
58
|
+
const otherChildren = childrenArray.filter(
|
59
|
+
(child) =>
|
60
|
+
!isElementOfType(child, TimelineLabel) &&
|
61
|
+
!isElementOfType(child, TimelineStep) &&
|
62
|
+
!isElementOfType(child, TimelineDetail)
|
63
|
+
)
|
64
|
+
|
34
65
|
return (
|
35
|
-
<div
|
66
|
+
<div
|
36
67
|
{...htmlProps}
|
37
68
|
className={classnames(timelineItemCss, globalProps(props), className)}
|
38
69
|
>
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
70
|
+
{labelChild || (
|
71
|
+
<div className="pb_timeline_item_left_block">
|
72
|
+
{date && (
|
73
|
+
<DateStacked
|
74
|
+
align="center"
|
75
|
+
date={date}
|
76
|
+
size="sm"
|
77
|
+
/>
|
78
|
+
)}
|
79
|
+
</div>
|
80
|
+
)}
|
81
|
+
{stepChild || (
|
82
|
+
<div className="pb_timeline_item_step">
|
83
|
+
<IconCircle icon={icon}
|
84
|
+
size="xs"
|
85
|
+
variant={iconColor}
|
86
|
+
/>
|
87
|
+
<div className="pb_timeline_item_connector" />
|
88
|
+
</div>
|
89
|
+
)}
|
90
|
+
{detailChild || (
|
91
|
+
<div className="pb_timeline_item_right_block">
|
92
|
+
{ otherChildren }
|
93
|
+
</div>
|
94
|
+
)}
|
59
95
|
</div>
|
60
96
|
)
|
61
97
|
}
|
@@ -5,6 +5,11 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
|
|
5
5
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
6
6
|
|
7
7
|
import TimelineItem from './_item'
|
8
|
+
import {
|
9
|
+
TimelineStep,
|
10
|
+
TimelineLabel,
|
11
|
+
TimelineDetail,
|
12
|
+
} from './subcomponents'
|
8
13
|
|
9
14
|
type TimelineProps = {
|
10
15
|
aria?: { [key: string]: string },
|
@@ -47,5 +52,8 @@ const Timeline = ({
|
|
47
52
|
}
|
48
53
|
|
49
54
|
Timeline.Item = TimelineItem
|
55
|
+
Timeline.Step = TimelineStep
|
56
|
+
Timeline.Label = TimelineLabel
|
57
|
+
Timeline.Detail = TimelineDetail
|
50
58
|
|
51
59
|
export default Timeline
|
@@ -0,0 +1,43 @@
|
|
1
|
+
<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
|
2
|
+
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
|
3
|
+
|
4
|
+
<% item.label do %>
|
5
|
+
<%= pb_rails("timeline/label") do %>
|
6
|
+
<%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% item.step do %>
|
11
|
+
<%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<% item.detail do %>
|
15
|
+
<%= pb_rails("title_detail", props: {
|
16
|
+
title: "Jackson Heights",
|
17
|
+
detail: "37-27 74th Street"
|
18
|
+
}) %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
<%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
|
22
|
+
|
23
|
+
<% item.step do %>
|
24
|
+
<%= pb_rails("timeline/step") do %>
|
25
|
+
<%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
|
26
|
+
<% end %>
|
27
|
+
<% end %>
|
28
|
+
|
29
|
+
<% item.detail do %>
|
30
|
+
<%= pb_rails("title_detail", props: {
|
31
|
+
title: "Greenpoint",
|
32
|
+
detail: "81 Gate St Brooklyn"
|
33
|
+
}) %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
36
|
+
|
37
|
+
<%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
|
38
|
+
<%= pb_rails("title_detail", props: {
|
39
|
+
title: "Society Hill",
|
40
|
+
detail: "72 E St Astoria"
|
41
|
+
}) %>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Timeline from '../_timeline'
|
4
|
+
import Title from '../../pb_title/_title'
|
5
|
+
import Pill from '../../pb_pill/_pill'
|
6
|
+
|
7
|
+
import TitleDetail from '../../pb_title_detail/_title_detail'
|
8
|
+
|
9
|
+
const TimelineWithChildren = (props) => (
|
10
|
+
<div>
|
11
|
+
<Timeline orientation="horizontal"
|
12
|
+
showDate
|
13
|
+
{...props}
|
14
|
+
>
|
15
|
+
<Timeline.Item lineStyle="solid"
|
16
|
+
{...props}
|
17
|
+
>
|
18
|
+
<Timeline.Label>
|
19
|
+
<Title size={2}
|
20
|
+
text='Any Kit Here'
|
21
|
+
/>
|
22
|
+
</Timeline.Label>
|
23
|
+
<Timeline.Step icon="user"
|
24
|
+
iconColor="royal"
|
25
|
+
/>
|
26
|
+
<Timeline.Detail>
|
27
|
+
<TitleDetail detail="37-27 74th Street"
|
28
|
+
title="Jackson Heights"
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
</Timeline.Detail>
|
32
|
+
</Timeline.Item>
|
33
|
+
|
34
|
+
<Timeline.Item lineStyle="dotted"
|
35
|
+
{...props}
|
36
|
+
>
|
37
|
+
<Timeline.Step>
|
38
|
+
<Pill text="Any Kit"
|
39
|
+
variant="success"
|
40
|
+
/>
|
41
|
+
</Timeline.Step>
|
42
|
+
<Timeline.Detail>
|
43
|
+
<TitleDetail detail="81 Gate St Brooklyn"
|
44
|
+
title="Greenpoint"
|
45
|
+
{...props}
|
46
|
+
/>
|
47
|
+
</Timeline.Detail>
|
48
|
+
</Timeline.Item>
|
49
|
+
|
50
|
+
<Timeline.Item lineStyle="solid"
|
51
|
+
{...props}
|
52
|
+
>
|
53
|
+
<Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
|
54
|
+
<Timeline.Step icon="map-marker-alt"
|
55
|
+
iconColor="purple"
|
56
|
+
/>
|
57
|
+
<Timeline.Detail>
|
58
|
+
<TitleDetail detail="72 E St Astoria"
|
59
|
+
title="Society Hill"
|
60
|
+
{...props}
|
61
|
+
/>
|
62
|
+
</Timeline.Detail>
|
63
|
+
</Timeline.Item>
|
64
|
+
</Timeline>
|
65
|
+
</div>
|
66
|
+
)
|
67
|
+
|
68
|
+
export default TimelineWithChildren
|
@@ -4,10 +4,11 @@ examples:
|
|
4
4
|
- timeline_default: Default
|
5
5
|
- timeline_vertical: Vertical
|
6
6
|
- timeline_with_date: With Date
|
7
|
+
- timeline_with_children: With Children
|
7
8
|
|
8
9
|
|
9
10
|
react:
|
10
11
|
- timeline_default: Default
|
11
12
|
- timeline_vertical: Vertical
|
12
13
|
- timeline_with_date: With Date
|
13
|
-
|
14
|
+
- timeline_with_children: With Children
|
@@ -1,3 +1,4 @@
|
|
1
1
|
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
|
+
export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
|
@@ -1,25 +1,21 @@
|
|
1
1
|
<%= pb_content_tag do %>
|
2
|
+
<% if label %>
|
3
|
+
<%= label %>
|
4
|
+
<% else %>
|
5
|
+
<%= pb_rails("timeline/label", props: { date: date }) %>
|
6
|
+
<% end %>
|
2
7
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
align: "center"
|
9
|
-
}) %>
|
10
|
-
<% end %>
|
11
|
-
</div>
|
12
|
-
|
13
|
-
<div class="pb_timeline_item_step">
|
14
|
-
<%= pb_rails("icon_circle", props: {
|
15
|
-
icon: object.icon,
|
16
|
-
variant: object.icon_color,
|
17
|
-
size: "xs"
|
18
|
-
}) %>
|
19
|
-
<div class="pb_timeline_item_connector"></div>
|
20
|
-
</div>
|
8
|
+
<% if step %>
|
9
|
+
<%= step %>
|
10
|
+
<% else %>
|
11
|
+
<%= pb_rails("timeline/step", props: { icon: icon, icon_color: icon_color }) %>
|
12
|
+
<% end %>
|
21
13
|
|
22
|
-
|
23
|
-
<%=
|
24
|
-
|
14
|
+
<% if detail%>
|
15
|
+
<%= detail%>
|
16
|
+
<% else %>
|
17
|
+
<%= pb_rails("timeline/detail") do %>
|
18
|
+
<%= content %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
25
21
|
<% end %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<%= pb_content_tag do %>
|
2
|
+
<% if object.icon.present? %>
|
3
|
+
<%= pb_rails("icon_circle", props: {
|
4
|
+
icon: object.icon,
|
5
|
+
variant: object.icon_color,
|
6
|
+
size: "xs"
|
7
|
+
}) %>
|
8
|
+
<% else %>
|
9
|
+
<%= content.presence %>
|
10
|
+
<% end %>
|
11
|
+
<div class="pb_timeline_item_connector"></div>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
|