playbook_ui 14.6.0.pre.alpha.dropdownclassfix4224 → 14.6.0.pre.alpha.play1586datearea4218

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  3. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +4 -4
  5. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +3 -1
  6. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +2 -2
  7. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  8. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  9. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  10. data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
  11. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_timeline/_item.tsx +59 -23
  13. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +8 -0
  14. data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +12 -0
  15. data/app/pb_kits/playbook/pb_timeline/date_area.rb +13 -0
  16. data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +3 -0
  17. data/app/pb_kits/playbook/pb_timeline/detail_area.rb +11 -0
  18. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
  19. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +68 -0
  20. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +4 -0
  21. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
  22. data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_timeline/item.html.erb +17 -21
  24. data/app/pb_kits/playbook/pb_timeline/item.rb +4 -0
  25. data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +14 -0
  26. data/app/pb_kits/playbook/pb_timeline/node_area.rb +16 -0
  27. data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +29 -0
  28. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +38 -0
  29. data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +42 -0
  30. data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +3 -0
  31. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +84 -0
  32. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  33. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  34. data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
  35. data/dist/chunks/{_weekday_stacked-Dh3OU4s8.js → _weekday_stacked-C-VEa5Ar.js} +2 -2
  36. data/dist/chunks/vendor.js +1 -1
  37. data/dist/playbook-doc.js +1 -1
  38. data/dist/playbook-rails-react-bindings.js +1 -1
  39. data/dist/playbook-rails.js +1 -1
  40. data/dist/playbook.css +1 -1
  41. data/lib/playbook/kit_base.rb +21 -1
  42. data/lib/playbook/version.rb +1 -1
  43. metadata +17 -4
  44. data/dist/chunks/_typeahead-BV_n6U5W.js +0 -22
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2e7c742a82f9119f7c8e916e4388b5a87f0e7431177be7231df60646ce5a59bf
4
- data.tar.gz: 81bcbb4679a6e6a9ed7c208c21675b13843c41a7b054e30bd33cbcd6b45b2f17
3
+ metadata.gz: d34cf484b073d589372720f766effb37be243a1e8c48a3b5eb90a9d683759929
4
+ data.tar.gz: ad599ad33f8f66e1057957ea957899f7d14e9215beaf342132e0f45b37906216
5
5
  SHA512:
6
- metadata.gz: a7bb3a7149a85030b1b7539917f1044127f68b928d008a8f1701bcfb7ddfd64ad01ea43498a10e90d758932adeb94c79751113cd6b2af7bc20d924a5200a43bf
7
- data.tar.gz: dd64a6e5791947eb1f3965be88fc881646bd4bf3569e153ab8b2d226ebb374d653401667ad8650fe5146c8f5bd31e70001b3e68b6c74de2e59c33135137dc986
6
+ metadata.gz: 55fcf62a39e9220df67563a41c5882544c643ed16c12c575fdb2c9a3f0e37023aa56e4ecb6eef3bd34b6467b2995fe0c2918e0deb8d85ed76a042c0b2bccd3e1
7
+ data.tar.gz: 132c841e4900a5612f18ea87831f6ccdea99c9557c3a505b7feb4a0f4e81b22cc2d6721f073b531ed7a99a68e43af2c23c4ef75289e7a2ea75bb5305add7ff22
@@ -5,7 +5,7 @@ import { get } from 'lodash'
5
5
  import classnames from 'classnames'
6
6
 
7
7
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
8
- import { GlobalProps, globalProps } from '../utilities/globalProps'
8
+ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
9
9
  import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
10
10
 
11
11
  import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
49
49
  padding?: string,
50
50
  } & GlobalProps
51
51
 
52
+
52
53
  // Header component
53
54
  const Header = (props: CardHeaderProps) => {
54
55
  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
107
108
 
108
109
  // coerce to array
109
110
  const cardChildren = React.Children.toArray(children)
111
+ const dynamicInlineProps = globalInlineProps(props);
110
112
 
111
113
  const subComponentTags = (tagName: string) => {
112
114
  return cardChildren.filter((c: string) => (
@@ -135,6 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
135
137
  {...dataProps}
136
138
  {...htmlProps}
137
139
  className={classnames(cardCss, globalProps(props), className)}
140
+ style={dynamicInlineProps}
138
141
  >
139
142
  {subComponentTags('Header')}
140
143
  {
@@ -163,6 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
163
166
  {...dataProps}
164
167
  {...htmlProps}
165
168
  className={classnames(cardCss, globalProps(props), className)}
169
+ style={dynamicInlineProps}
166
170
  >
167
171
  {subComponentTags('Header')}
168
172
  {nonHeaderChildren}
@@ -6,7 +6,7 @@ import classnames from "classnames";
6
6
  import Modal from "react-modal";
7
7
 
8
8
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
9
- import { globalProps } from "../utilities/globalProps";
9
+ import { globalProps, globalInlineProps } from "../utilities/globalProps";
10
10
 
11
11
  import Body from "../pb_body/_body";
12
12
  import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
91
91
  beforeClose: "pb_dialog_overlay_before_close",
92
92
  };
93
93
 
94
+ const dynamicInlineProps = globalInlineProps(props);
95
+
94
96
  const classes = classnames(
95
97
  buildCss("pb_dialog_wrapper"),
96
98
  globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
184
186
  overlayClassName={overlayClassNames}
185
187
  portalClassName={portalClassName}
186
188
  shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
189
+ style={{ content: dynamicInlineProps }}
187
190
  >
188
191
  <>
189
192
  {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
192
195
  <Dialog.Body
193
196
  className="dialog_status_text_align"
194
197
  padding="md"
198
+
195
199
  >
196
200
  <Flex align="center"
197
201
  orientation="column"
@@ -9,7 +9,7 @@
9
9
 
10
10
  @import "./scss_partials/dropdown_animation";
11
11
 
12
- [class*="pb_dropdown"] {
12
+ .pb_dropdown {
13
13
  .dropdown_wrapper {
14
14
  [class*="dropdown_trigger_wrapper"] {
15
15
  @include pb_body;
@@ -131,7 +131,7 @@
131
131
  }
132
132
  }
133
133
 
134
- &[class*="separators_hidden"] {
134
+ &.separators_hidden {
135
135
  .dropdown_wrapper {
136
136
  .pb_dropdown_container {
137
137
 
@@ -142,7 +142,7 @@
142
142
  }
143
143
  }
144
144
 
145
- &[class*="subtle"] {
145
+ &.subtle {
146
146
  .dropdown_wrapper {
147
147
  .pb_dropdown_container {
148
148
 
@@ -178,7 +178,7 @@
178
178
  }
179
179
  }
180
180
 
181
- &[class*="separators_hidden"] {
181
+ &.separators_hidden {
182
182
  .dropdown_wrapper {
183
183
  .pb_dropdown_container {
184
184
  [class*="pb_dropdown_option"]:first-child {
@@ -74,8 +74,10 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
74
74
  const htmlProps = buildHtmlProps(htmlOptions);
75
75
  const separatorsClass = separators ? '' : 'separators_hidden'
76
76
  const classes = classnames(
77
- buildCss("pb_dropdown", variant, separatorsClass),
77
+ buildCss("pb_dropdown"),
78
78
  globalProps(props),
79
+ variant,
80
+ separatorsClass,
79
81
  className
80
82
  );
81
83
 
@@ -24,7 +24,7 @@ module Playbook
24
24
  end
25
25
 
26
26
  def classname
27
- generate_classname("pb_dropdown", variant, separators_class)
27
+ generate_classname("pb_dropdown", variant, separators_class, separator: " ")
28
28
  end
29
29
 
30
30
  private
@@ -38,7 +38,7 @@ module Playbook
38
38
  end
39
39
 
40
40
  def separators_class
41
- separators ? nil : "separators_hidden"
41
+ separators ? "" : "separators_hidden"
42
42
  end
43
43
 
44
44
  def options_with_blank
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
4
- import { GlobalProps, globalProps } from '../utilities/globalProps'
4
+ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
5
5
  import { GenericObject, Sizes } from '../types'
6
6
 
7
7
  type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
61
61
  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
62
62
  const dataProps = buildDataProps(data)
63
63
  const htmlProps = buildHtmlProps(htmlOptions)
64
+ const dynamicInlineProps = globalInlineProps(props)
64
65
 
65
66
 
66
67
  return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
83
84
  globalProps(props),
84
85
  className
85
86
  )}
87
+ style={dynamicInlineProps}
86
88
  {...dataProps}
87
89
  {...htmlProps}
88
90
  >
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildHtmlProps } from '../utilities/props'
4
- import { globalProps, GlobalProps } from '../utilities/globalProps'
4
+ import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
5
5
  type FlexItemPropTypes = {
6
6
  children: React.ReactNode[] | React.ReactNode,
7
7
  fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
35
35
  const fixedStyle =
36
36
  fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
37
37
  const orderClass = order !== 'none' ? `order_${order}` : null
38
+ const dynamicInlineProps = globalInlineProps(props)
39
+ const combinedStyles = {
40
+ ...fixedStyle,
41
+ ...dynamicInlineProps
42
+ }
38
43
 
39
44
  const htmlProps = buildHtmlProps(htmlOptions)
40
45
 
46
+
41
47
  return (
42
48
  <div
43
49
  {...htmlProps}
44
50
  className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
45
- style={fixedStyle}
51
+ style={combinedStyles}
46
52
  >
47
53
  {children}
48
54
  </div>
@@ -1,8 +1,5 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- style: object.style_value,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:div,
2
+ style: object.inline_styles
3
+ ) do %>
7
4
  <%= content.presence %>
8
5
  <% end %>
@@ -20,8 +20,13 @@ module Playbook
20
20
  generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
21
21
  end
22
22
 
23
- def style_value
24
- "flex-basis: #{fixed_size};" if fixed_size.present?
23
+ def inline_styles
24
+ styles = []
25
+ styles << "flex-basis: #{fixed_size};" if fixed_size.present?
26
+ styles << "height: #{height};" if height.present?
27
+ styles << "min-height: #{min_height};" if min_height.present?
28
+ styles << "max-height: #{max_height};" if max_height.present?
29
+ styles.join(" ")
25
30
  end
26
31
 
27
32
  private
@@ -21,7 +21,7 @@ import classnames from "classnames";
21
21
  import { globalProps, GlobalProps } from "../utilities/globalProps";
22
22
  import { uniqueId } from 'lodash';
23
23
 
24
- type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
24
+ type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
25
25
 
26
26
  type PbPopoverProps = {
27
27
  aria?: { [key: string]: string };
@@ -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,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 DateArea < 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,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 DetailArea < 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.date_area do %>
5
+ <%= pb_rails("timeline/date_area") do %>
6
+ <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
7
+ <% end %>
8
+ <% end %>
9
+
10
+ <% item.node_area do %>
11
+ <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
12
+ <% end %>
13
+
14
+ <% item.detail_area 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.node_area do %>
24
+ <%= pb_rails("timeline/node_area") do %>
25
+ <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
26
+ <% end %>
27
+ <% end %>
28
+
29
+ <% item.detail_area 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.Label>
38
+ <Pill text="Any Kit"
39
+ variant="success"
40
+ />
41
+ </Timeline.Label>
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,4 @@
1
+ You can use whatever kit you want for the date area of the timeline item, the node area, and the content area at the bottom or left.
2
+
3
+ Checkout the code in this example to see the children kits in action.
4
+
@@ -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 date_area %>
3
+ <%= date_area %>
4
+ <% else %>
5
+ <%= pb_rails("timeline/date_area", 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 node_area %>
9
+ <%= node_area %>
10
+ <% else %>
11
+ <%= pb_rails("timeline/node_area", 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_area %>
15
+ <%= detail_area %>
16
+ <% else %>
17
+ <%= pb_rails("timeline/detail_area") 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 :date_area
17
+ renders_one :node_area
18
+ renders_one :detail_area
19
+
16
20
  def classname
17
21
  generate_classname("pb_timeline_item_kit", line_style)
18
22
  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
+
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbTimeline
5
+ class NodeArea < Playbook::KitBase
6
+ prop :icon, type: Playbook::Props::String
7
+ prop :icon_color, type: Playbook::Props::Enum,
8
+ values: %w[default royal blue purple teal red yellow green],
9
+ default: "default"
10
+
11
+ def classname
12
+ generate_classname("pb_timeline_item_step")
13
+ end
14
+ end
15
+ end
16
+ end