playbook_ui 14.5.0.pre.alpha.play1549upgradereactmodal4130 → 14.5.0.pre.alpha.play1586datearea4115

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
  3. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  4. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
  5. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
  8. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
  9. data/app/pb_kits/playbook/pb_timeline/_date_area.tsx +38 -0
  10. data/app/pb_kits/playbook/pb_timeline/_detail_area.tsx +29 -0
  11. data/app/pb_kits/playbook/pb_timeline/_item.tsx +59 -23
  12. data/app/pb_kits/playbook/pb_timeline/_node_area.tsx +42 -0
  13. data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +12 -0
  14. data/app/pb_kits/playbook/pb_timeline/date_area.rb +13 -0
  15. data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +3 -0
  16. data/app/pb_kits/playbook/pb_timeline/detail_area.rb +11 -0
  17. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +43 -0
  18. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +72 -0
  19. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +4 -0
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +2 -1
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +17 -21
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +4 -0
  24. data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +14 -0
  25. data/app/pb_kits/playbook/pb_timeline/node_area.rb +16 -0
  26. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +84 -0
  27. data/dist/chunks/{_weekday_stacked-DQN7SPcO.js → _weekday_stacked-C2sJArua.js} +2 -2
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/playbook-doc.js +1 -1
  30. data/dist/playbook.css +1 -1
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +14 -4
  33. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
  34. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
@@ -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 TimelineDateArea from './_date_area'
10
+ import TimelineNodeArea from './_node_area'
11
+ import TimelineDetailArea from './_detail_area'
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 dateAreaChild = childrenArray.find(
47
+ (child): child is React.ReactElement => isElementOfType(child, TimelineDateArea)
48
+ )
49
+
50
+ const nodeAreaChild = childrenArray.find(
51
+ (child): child is React.ReactElement => isElementOfType(child, TimelineNodeArea)
52
+ )
53
+
54
+ const detailAreaChild = childrenArray.find(
55
+ (child): child is React.ReactElement => isElementOfType(child, TimelineDetailArea)
56
+ )
57
+
58
+ const otherChildren = childrenArray.filter(
59
+ (child) =>
60
+ !isElementOfType(child, TimelineDateArea) &&
61
+ !isElementOfType(child, TimelineNodeArea) &&
62
+ !isElementOfType(child, TimelineDetailArea)
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
+ {dateAreaChild || (
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
+ {nodeAreaChild || (
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
+ {detailAreaChild || (
91
+ <div className="pb_timeline_item_right_block">
92
+ { otherChildren }
93
+ </div>
94
+ )}
59
95
  </div>
60
96
  )
61
97
  }
@@ -0,0 +1,42 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+ import { buildHtmlProps } from '../utilities/props'
4
+ import { globalProps, GlobalProps } from "../utilities/globalProps"
5
+ import IconCircle from '../pb_icon_circle/_icon_circle'
6
+
7
+ type TimelineNodeAreaProps = {
8
+ icon?: string,
9
+ iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
10
+ children?: React.ReactNode,
11
+ className?: string,
12
+ htmlOptions?: { [key: string]: any },
13
+ } & GlobalProps
14
+
15
+ const TimelineNodeArea: React.FC<TimelineNodeAreaProps> = ({
16
+ icon = 'user',
17
+ iconColor = 'default',
18
+ children,
19
+ className,
20
+ htmlOptions = {},
21
+ ...props
22
+ }) => {
23
+ const htmlProps = buildHtmlProps(htmlOptions)
24
+ return (
25
+ <div
26
+ {...htmlProps}
27
+ className={classnames('pb_timeline_item_step', globalProps(props), className)}
28
+ >
29
+ {children ? (
30
+ children
31
+ ) : (
32
+ <IconCircle icon={icon}
33
+ size="xs"
34
+ variant={iconColor}
35
+ />
36
+ )}
37
+ <div className="pb_timeline_item_connector" />
38
+ </div>
39
+ )
40
+ }
41
+
42
+ export default TimelineNodeArea
@@ -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,72 @@
1
+ import React from 'react'
2
+
3
+ import Timeline from '../_timeline'
4
+ import TimelineItem from '../_item'
5
+ import TimelineDateArea from '../_date_area'
6
+ import TimelineNodeArea from '../_node_area'
7
+ import TimelineDetailArea from '../_detail_area'
8
+ import Title from '../../pb_title/_title'
9
+ import Pill from '../../pb_pill/_pill'
10
+
11
+ import TitleDetail from '../../pb_title_detail/_title_detail'
12
+
13
+ const TimelineWithChildren = (props) => (
14
+ <div>
15
+ <Timeline orientation="horizontal"
16
+ showDate
17
+ {...props}
18
+ >
19
+ <TimelineItem lineStyle="solid"
20
+ {...props}
21
+ >
22
+ <TimelineDateArea>
23
+ <Title size={2}
24
+ text='Any Kit Here'
25
+ />
26
+ </TimelineDateArea>
27
+ <TimelineNodeArea icon="user"
28
+ iconColor="royal"
29
+ />
30
+ <TimelineDetailArea>
31
+ <TitleDetail detail="37-27 74th Street"
32
+ title="Jackson Heights"
33
+ {...props}
34
+ />
35
+ </TimelineDetailArea>
36
+ </TimelineItem>
37
+
38
+ <TimelineItem lineStyle="dotted"
39
+ {...props}
40
+ >
41
+ <TimelineNodeArea>
42
+ <Pill text="Any Kit"
43
+ variant="success"
44
+ />
45
+ </TimelineNodeArea>
46
+ <TimelineDetailArea>
47
+ <TitleDetail detail="81 Gate St Brooklyn"
48
+ title="Greenpoint"
49
+ {...props}
50
+ />
51
+ </TimelineDetailArea>
52
+ </TimelineItem>
53
+
54
+ <TimelineItem lineStyle="solid"
55
+ {...props}
56
+ >
57
+ <TimelineDateArea date={new Date(new Date().setDate(new Date().getDate() + 1))} />
58
+ <TimelineNodeArea icon="map-marker-alt"
59
+ iconColor="purple"
60
+ />
61
+ <TimelineDetailArea>
62
+ <TitleDetail detail="72 E St Astoria"
63
+ title="Society Hill"
64
+ {...props}
65
+ />
66
+ </TimelineDetailArea>
67
+ </TimelineItem>
68
+ </Timeline>
69
+ </div>
70
+ )
71
+
72
+ 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
@@ -2,6 +2,10 @@ import React from 'react'
2
2
  import { render, screen } from '../utilities/test-utils'
3
3
 
4
4
  import Timeline from './_timeline'
5
+ import TimelineItem from './_item'
6
+ import TimelineDateArea from './_date_area'
7
+ import TimelineNodeArea from './_node_area'
8
+ import TimelineDetailArea from './_detail_area'
5
9
  import TitleDetail from '../pb_title_detail/_title_detail'
6
10
 
7
11
  const testId = 'timeline'
@@ -43,18 +47,91 @@ const TimelineDefault = (props) => (
43
47
  </>
44
48
  )
45
49
 
50
+ const TimelineWithChildren = (props) => (
51
+ <>
52
+ <Timeline
53
+ className={className}
54
+ data={{ testid: testId }}
55
+ orientation="horizontal"
56
+ showDate
57
+ {...props}
58
+ >
59
+ <TimelineItem lineStyle="solid"
60
+ {...props}
61
+ >
62
+ <TimelineDateArea date={new Date()} />
63
+ <TimelineNodeArea icon="user"
64
+ iconColor="royal"
65
+ />
66
+ <TimelineDetailArea>
67
+ <TitleDetail
68
+ detail="37-27 74th Street"
69
+ title="Jackson Heights"
70
+ {...props}
71
+ />
72
+ </TimelineDetailArea>
73
+ </TimelineItem>
74
+
75
+ <TimelineItem lineStyle="dotted"
76
+ {...props}
77
+ >
78
+ <TimelineNodeArea icon="check"
79
+ iconColor="teal"
80
+ />
81
+ <TimelineDetailArea>
82
+ <TitleDetail
83
+ detail="81 Gate St Brooklyn"
84
+ title="Greenpoint"
85
+ {...props}
86
+ />
87
+ </TimelineDetailArea>
88
+ </TimelineItem>
89
+
90
+ <TimelineItem lineStyle="solid"
91
+ {...props}
92
+ >
93
+ <TimelineDateArea
94
+ date={new Date(new Date().setDate(new Date().getDate() + 1))}
95
+ />
96
+ <TimelineNodeArea icon="map-marker-alt"
97
+ iconColor="purple"
98
+ />
99
+ <TimelineDetailArea>
100
+ <TitleDetail
101
+ detail="72 E St Astoria"
102
+ title="Society Hill"
103
+ {...props}
104
+ />
105
+ </TimelineDetailArea>
106
+ </TimelineItem>
107
+ </Timeline>
108
+ </>
109
+ )
110
+
46
111
  test('should pass data prop', () => {
47
112
  render(<TimelineDefault />)
48
113
  const kit = screen.getByTestId(testId)
49
114
  expect(kit).toBeInTheDocument()
50
115
  })
51
116
 
117
+ test('should pass data prop using children', () => {
118
+ render(<TimelineWithChildren />)
119
+ const kit = screen.getByTestId(testId)
120
+ expect(kit).toBeInTheDocument()
121
+ })
122
+
52
123
  test('should pass className prop', () => {
53
124
  render(<TimelineDefault />)
54
125
  const kit = screen.getByTestId(testId)
55
126
  expect(kit).toHaveClass(className)
56
127
  })
57
128
 
129
+ test('should pass className prop with children', () => {
130
+ render(<TimelineWithChildren />)
131
+ const kit = screen.getByTestId(testId)
132
+ expect(kit).toHaveClass(className)
133
+ })
134
+
58
135
  test('should pass aria prop', () => {
59
136
  render(<TimelineDefault />)
60
137
  const kit = screen.getByTestId(testId)
@@ -86,3 +163,10 @@ test('should pass showDate prop', () => {
86
163
  const kit = screen.getByTestId(testId)
87
164
  expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
88
165
  })
166
+
167
+ test('should pass showDate prop with Children', () => {
168
+ const props = { showDate: true }
169
+ render(<TimelineWithChildren {...props} />)
170
+ const kit = screen.getByTestId(testId)
171
+ expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
172
+ })