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.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +6 -2
  3. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +30 -26
  4. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +24 -1
  5. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +25 -2
  6. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +3 -0
  7. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -0
  8. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +46 -8
  9. data/app/pb_kits/playbook/pb_timeline/_item.tsx +59 -23
  10. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +8 -0
  11. data/app/pb_kits/playbook/pb_timeline/detail.html.erb +3 -0
  12. data/app/pb_kits/playbook/pb_timeline/detail.rb +11 -0
  13. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
  14. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +68 -0
  15. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +2 -0
  16. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
  17. data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_timeline/item.html.erb +17 -21
  19. data/app/pb_kits/playbook/pb_timeline/item.rb +4 -0
  20. data/app/pb_kits/playbook/pb_timeline/label.html.erb +12 -0
  21. data/app/pb_kits/playbook/pb_timeline/label.rb +13 -0
  22. data/app/pb_kits/playbook/pb_timeline/step.html.erb +14 -0
  23. data/app/pb_kits/playbook/pb_timeline/step.rb +16 -0
  24. data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +29 -0
  25. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +38 -0
  26. data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +42 -0
  27. data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +3 -0
  28. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +84 -0
  29. data/dist/chunks/{_typeahead-BV_n6U5W.js → _typeahead-BJrdFWHc.js} +2 -2
  30. data/dist/chunks/{_weekday_stacked-DCgkKIQf.js → _weekday_stacked-DJWwxF-6.js} +2 -2
  31. data/dist/chunks/vendor.js +1 -1
  32. data/dist/playbook-doc.js +1 -1
  33. data/dist/playbook-rails-react-bindings.js +1 -1
  34. data/dist/playbook-rails.js +1 -1
  35. data/dist/playbook.css +1 -1
  36. data/lib/playbook/version.rb +1 -1
  37. metadata +19 -5
  38. 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: 845eb3cdd33a7fef9c5af145bcf680907b6c74d5126bba69805acf33f3ff6a48
4
- data.tar.gz: 18d01e30a45050069d838577a03df29a892c7ebe042ca8a252ed68b665fd7c56
3
+ metadata.gz: 2150b988f879193d665933bcff4a30e8da5ce3b01d92f9b647521594520306ac
4
+ data.tar.gz: 7023762038f258f24a3699ad06e2dc2f05c600de89cbce803b569aecb7da9f31
5
5
  SHA512:
6
- metadata.gz: 06afa342868f031819a728684e905aaeb09445e855ac28938e3b746deb93e37bc0b0ff22f6d133d9b80f005c420cb3e500b3081f12e688844238658ba8ded457
7
- data.tar.gz: '08f62a0749684bc633d09aed01b768aae32d2569fa0ee13224647bce0152ccce9016931104990822e12218c46e955cee0b81baafec0897c710407a979b7007b1'
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
- <Title
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
- <Title
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
- <Title
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: "Names",
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 '../../pb_typeahead/_typeahead'
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="Names"
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
- <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
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
- <% if object.icon.present? %>
10
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
11
- <% end %>
12
- <% if object.text.present? %>
13
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
14
- <% end %>
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
- <div className="pb_timeline_item_left_block">
40
- {date &&
41
- <DateStacked
42
- align="center"
43
- date={date}
44
- size="sm"
45
- />
46
- }
47
- </div>
48
- <div className="pb_timeline_item_step">
49
- <IconCircle
50
- icon={icon}
51
- size="xs"
52
- variant={iconColor}
53
- />
54
- <div className="pb_timeline_item_connector" />
55
- </div>
56
- <div className="pb_timeline_item_right_block">
57
- {children}
58
- </div>
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,3 @@
1
+ <%= pb_content_tag do %>
2
+ <%= content.presence %>
3
+ <% end %>
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbTimeline
5
+ class Detail < Playbook::KitBase
6
+ def classname
7
+ generate_classname("pb_timeline_item_right_block")
8
+ end
9
+ end
10
+ end
11
+ end
@@ -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
@@ -0,0 +1,2 @@
1
+ Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
2
+
@@ -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
- <div class="pb_timeline_item_left_block">
4
- <% if object.date.present? %>
5
- <%= pb_rails("date_stacked", props: {
6
- date: object.date,
7
- size: "sm",
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
- <div class="pb_timeline_item_right_block">
23
- <%= content.presence %>
24
- </div>
14
+ <% if detail%>
15
+ <%= detail%>
16
+ <% else %>
17
+ <%= pb_rails("timeline/detail") do %>
18
+ <%= content %>
19
+ <% end %>
20
+ <% end %>
25
21
  <% end %>
@@ -13,6 +13,10 @@ module Playbook
13
13
  values: %w[solid dotted],
14
14
  default: "solid"
15
15
 
16
+ renders_one :label
17
+ renders_one :step
18
+ renders_one :detail
19
+
16
20
  def classname
17
21
  generate_classname("pb_timeline_item_kit", line_style)
18
22
  end
@@ -0,0 +1,12 @@
1
+ <%= pb_content_tag do %>
2
+ <% if object.date.present? %>
3
+ <%= pb_rails("date_stacked", props: {
4
+ date: object.date,
5
+ size: "sm",
6
+ align: "center"
7
+ }) %>
8
+ <% else %>
9
+ <%= content.presence %>
10
+ <% end %>
11
+ <% end %>
12
+
@@ -0,0 +1,13 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbTimeline
5
+ class Label < Playbook::KitBase
6
+ prop :date
7
+
8
+ def classname
9
+ generate_classname("pb_timeline_item_left_block")
10
+ end
11
+ end
12
+ end
13
+ 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
+