playbook_ui 4.17.0 → 5.0.1.pre.beta

Sign up to get free protection for your applications and to get access to all the features.
Files changed (208) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  4. data/app/pb_kits/playbook/_playbook.scss +2 -1
  5. data/app/pb_kits/playbook/data/menu.yml +5 -2
  6. data/app/pb_kits/playbook/index.js +1 -0
  7. data/app/pb_kits/playbook/packs/examples.js +4 -0
  8. data/app/pb_kits/playbook/packs/samples.js +4 -0
  9. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb +1 -0
  10. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +3 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +5 -0
  12. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb +15 -0
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +24 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -4
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_caption/_caption.jsx +21 -4
  18. data/app/pb_kits/playbook/pb_card/_card.scss +1 -72
  19. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +72 -0
  20. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +0 -1
  21. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_installer/_installer.html.erb +16 -0
  24. data/app/pb_kits/playbook/pb_installer/_installer.jsx +54 -0
  25. data/app/pb_kits/playbook/pb_installer/_installer.scss +7 -0
  26. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +8 -0
  27. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +16 -0
  28. data/app/pb_kits/playbook/pb_installer/docs/example.yml +9 -0
  29. data/app/pb_kits/playbook/pb_installer/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_installer/installer.rb +18 -0
  31. data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +22 -3
  33. data/app/pb_kits/playbook/pb_layout/_body.html.erb +1 -1
  34. data/app/pb_kits/playbook/pb_layout/_column.html.erb +7 -0
  35. data/app/pb_kits/playbook/pb_layout/_layout.jsx +35 -15
  36. data/app/pb_kits/playbook/pb_layout/_layout.scss +54 -0
  37. data/app/pb_kits/playbook/pb_layout/body.rb +4 -0
  38. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb +140 -0
  39. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx +1234 -0
  40. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb +57 -0
  41. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx +46 -0
  42. data/app/pb_kits/playbook/pb_layout/docs/example.yml +3 -0
  43. data/app/pb_kits/playbook/pb_layout/docs/index.js +2 -0
  44. data/app/pb_kits/playbook/pb_layout/layout.rb +12 -4
  45. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +5 -0
  46. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb +16 -0
  47. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +23 -0
  48. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +5 -3
  49. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  50. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
  51. data/app/pb_kits/playbook/pb_list/_item.html.erb +3 -2
  52. data/app/pb_kits/playbook/pb_list/_list.html.erb +3 -3
  53. data/app/pb_kits/playbook/pb_list/_list.jsx +55 -10
  54. data/app/pb_kits/playbook/pb_list/_list_item.jsx +41 -18
  55. data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx +21 -0
  56. data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx +0 -5
  57. data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx +22 -0
  58. data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx +22 -0
  59. data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx +22 -0
  60. data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx +22 -0
  61. data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx +75 -0
  62. data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx +75 -0
  63. data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx +21 -0
  64. data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx +21 -0
  65. data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx +21 -0
  66. data/app/pb_kits/playbook/pb_list/docs/example.yml +12 -1
  67. data/app/pb_kits/playbook/pb_list/docs/index.js +11 -0
  68. data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +1 -0
  69. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +26 -4
  70. data/app/pb_kits/playbook/pb_message/_message.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_message/_message.jsx +25 -7
  72. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +1 -2
  73. data/app/pb_kits/playbook/pb_message/message.rb +1 -1
  74. data/app/pb_kits/playbook/pb_person/_person.html.erb +9 -2
  75. data/app/pb_kits/playbook/pb_person/_person.jsx +34 -10
  76. data/app/pb_kits/playbook/pb_person/docs/_person_default.html.erb +5 -1
  77. data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb +1 -0
  78. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +57 -5
  79. data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +32 -0
  80. data/app/pb_kits/playbook/pb_person_contact/docs/example.yml +2 -0
  81. data/app/pb_kits/playbook/pb_person_contact/docs/index.js +1 -0
  82. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +4 -4
  83. data/app/pb_kits/playbook/pb_popover/_popover.jsx +41 -8
  84. data/app/pb_kits/playbook/pb_popover/_popover.scss +44 -7
  85. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +42 -0
  86. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +99 -0
  87. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +19 -7
  88. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +22 -6
  89. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +11 -10
  90. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +22 -18
  91. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.md +1 -0
  92. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb +24 -0
  93. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +56 -0
  94. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb +14 -0
  95. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +50 -0
  96. data/app/pb_kits/playbook/pb_popover/docs/example.yml +12 -8
  97. data/app/pb_kits/playbook/pb_popover/docs/index.js +3 -3
  98. data/app/pb_kits/playbook/pb_popover/index.js +18 -9
  99. data/app/pb_kits/playbook/pb_popover/popover.rb +26 -2
  100. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb +1 -0
  101. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx +29 -5
  102. data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb +1 -0
  103. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +22 -13
  104. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +3 -1
  105. data/app/pb_kits/playbook/pb_timeline/_item.html.erb +28 -0
  106. data/app/pb_kits/playbook/pb_timeline/_item.jsx +54 -0
  107. data/app/pb_kits/playbook/pb_timeline/_timeline.html.erb +6 -0
  108. data/app/pb_kits/playbook/pb_timeline/_timeline.jsx +43 -0
  109. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +271 -0
  110. data/app/pb_kits/playbook/pb_timeline/docs/_description.md +3 -0
  111. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb +43 -0
  112. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx +73 -0
  113. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb +43 -0
  114. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx +73 -0
  115. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb +44 -0
  116. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx +85 -0
  117. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +13 -0
  118. data/app/pb_kits/playbook/pb_timeline/docs/index.js +3 -0
  119. data/app/pb_kits/playbook/pb_timeline/item.rb +25 -0
  120. data/app/pb_kits/playbook/pb_timeline/timeline.rb +27 -0
  121. data/app/pb_kits/playbook/pb_title/_title.html.erb +1 -0
  122. data/app/pb_kits/playbook/pb_title/_title.jsx +24 -17
  123. data/app/pb_kits/playbook/plugins/pb_chart.js +8 -2
  124. data/app/pb_kits/playbook/props.rb +7 -0
  125. data/app/views/layouts/playbook/application.html.slim +2 -3
  126. data/app/views/layouts/playbook/fullscreen.html.slim +2 -2
  127. data/app/views/layouts/playbook/grid.html.slim +2 -2
  128. data/app/views/layouts/playbook/samples.html.erb +2 -4
  129. data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
  130. data/app/views/playbook/samples/filter_table/index.jsx +433 -0
  131. data/app/views/playbook/samples/registration/index.html.erb +316 -0
  132. data/app/views/playbook/samples/registration/index.jsx +476 -0
  133. data/lib/playbook/version.rb +1 -1
  134. metadata +62 -79
  135. data/app/pb_kits/playbook/packs/kits/pb_avatar.js +0 -1
  136. data/app/pb_kits/playbook/packs/kits/pb_badge.js +0 -1
  137. data/app/pb_kits/playbook/packs/kits/pb_bar_graph.js +0 -1
  138. data/app/pb_kits/playbook/packs/kits/pb_body.js +0 -1
  139. data/app/pb_kits/playbook/packs/kits/pb_button.js +0 -1
  140. data/app/pb_kits/playbook/packs/kits/pb_caption.js +0 -1
  141. data/app/pb_kits/playbook/packs/kits/pb_card.js +0 -1
  142. data/app/pb_kits/playbook/packs/kits/pb_checkbox.js +0 -1
  143. data/app/pb_kits/playbook/packs/kits/pb_circle_icon_button.js +0 -1
  144. data/app/pb_kits/playbook/packs/kits/pb_contact.js +0 -1
  145. data/app/pb_kits/playbook/packs/kits/pb_currency.js +0 -1
  146. data/app/pb_kits/playbook/packs/kits/pb_dashboard_value.js +0 -1
  147. data/app/pb_kits/playbook/packs/kits/pb_date.js +0 -2
  148. data/app/pb_kits/playbook/packs/kits/pb_date_range_inline.js +0 -1
  149. data/app/pb_kits/playbook/packs/kits/pb_date_range_stacked.js +0 -1
  150. data/app/pb_kits/playbook/packs/kits/pb_date_stacked.js +0 -1
  151. data/app/pb_kits/playbook/packs/kits/pb_date_year_stacked.js +0 -2
  152. data/app/pb_kits/playbook/packs/kits/pb_distribution_bar.js +0 -2
  153. data/app/pb_kits/playbook/packs/kits/pb_fixed_confirmation_toast.js +0 -2
  154. data/app/pb_kits/playbook/packs/kits/pb_flex.js +0 -1
  155. data/app/pb_kits/playbook/packs/kits/pb_form_pill.js +0 -1
  156. data/app/pb_kits/playbook/packs/kits/pb_hashtag.js +0 -2
  157. data/app/pb_kits/playbook/packs/kits/pb_highlight.js +0 -2
  158. data/app/pb_kits/playbook/packs/kits/pb_home_address_street.js +0 -2
  159. data/app/pb_kits/playbook/packs/kits/pb_icon.js +0 -2
  160. data/app/pb_kits/playbook/packs/kits/pb_icon_circle.js +0 -2
  161. data/app/pb_kits/playbook/packs/kits/pb_icon_value.js +0 -2
  162. data/app/pb_kits/playbook/packs/kits/pb_image.js +0 -1
  163. data/app/pb_kits/playbook/packs/kits/pb_label_pill.js +0 -2
  164. data/app/pb_kits/playbook/packs/kits/pb_label_value.js +0 -2
  165. data/app/pb_kits/playbook/packs/kits/pb_layout.js +0 -2
  166. data/app/pb_kits/playbook/packs/kits/pb_legend.js +0 -2
  167. data/app/pb_kits/playbook/packs/kits/pb_line_graph.js +0 -1
  168. data/app/pb_kits/playbook/packs/kits/pb_list.js +0 -2
  169. data/app/pb_kits/playbook/packs/kits/pb_loading_inline.js +0 -2
  170. data/app/pb_kits/playbook/packs/kits/pb_message.js +0 -2
  171. data/app/pb_kits/playbook/packs/kits/pb_multiple_users.js +0 -2
  172. data/app/pb_kits/playbook/packs/kits/pb_multiple_users_stacked.js +0 -2
  173. data/app/pb_kits/playbook/packs/kits/pb_nav.js +0 -1
  174. data/app/pb_kits/playbook/packs/kits/pb_online_status.js +0 -2
  175. data/app/pb_kits/playbook/packs/kits/pb_person.js +0 -2
  176. data/app/pb_kits/playbook/packs/kits/pb_person_contact.js +0 -2
  177. data/app/pb_kits/playbook/packs/kits/pb_pill.js +0 -2
  178. data/app/pb_kits/playbook/packs/kits/pb_popover.js +0 -1
  179. data/app/pb_kits/playbook/packs/kits/pb_progress_pills.js +0 -2
  180. data/app/pb_kits/playbook/packs/kits/pb_progress_simple.js +0 -2
  181. data/app/pb_kits/playbook/packs/kits/pb_progress_step.js +0 -2
  182. data/app/pb_kits/playbook/packs/kits/pb_radio.js +0 -2
  183. data/app/pb_kits/playbook/packs/kits/pb_section_separator.js +0 -2
  184. data/app/pb_kits/playbook/packs/kits/pb_select.js +0 -2
  185. data/app/pb_kits/playbook/packs/kits/pb_selectable_card.js +0 -2
  186. data/app/pb_kits/playbook/packs/kits/pb_source.js +0 -2
  187. data/app/pb_kits/playbook/packs/kits/pb_star_rating.js +0 -2
  188. data/app/pb_kits/playbook/packs/kits/pb_stat_change.js +0 -2
  189. data/app/pb_kits/playbook/packs/kits/pb_stat_value.js +0 -2
  190. data/app/pb_kits/playbook/packs/kits/pb_table.js +0 -1
  191. data/app/pb_kits/playbook/packs/kits/pb_text_input.js +0 -1
  192. data/app/pb_kits/playbook/packs/kits/pb_textarea.js +0 -2
  193. data/app/pb_kits/playbook/packs/kits/pb_time.js +0 -2
  194. data/app/pb_kits/playbook/packs/kits/pb_timestamp.js +0 -2
  195. data/app/pb_kits/playbook/packs/kits/pb_title.js +0 -1
  196. data/app/pb_kits/playbook/packs/kits/pb_title_count.js +0 -2
  197. data/app/pb_kits/playbook/packs/kits/pb_title_detail.js +0 -2
  198. data/app/pb_kits/playbook/packs/kits/pb_toggle.js +0 -2
  199. data/app/pb_kits/playbook/packs/kits/pb_user.js +0 -2
  200. data/app/pb_kits/playbook/packs/kits/pb_user_badge.js +0 -2
  201. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.html.erb +0 -19
  202. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.jsx +0 -40
  203. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.html.erb +0 -14
  204. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.jsx +0 -40
  205. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.html.erb +0 -14
  206. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx +0 -40
  207. data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx +0 -34
  208. data/app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb +0 -5
data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx ADDED
@@ -0,0 +1,1234 @@
1
+ import React from 'react'
2
+ import {
3
+ Avatar,
4
+ Caption,
5
+ Card,
6
+ Flex,
7
+ FlexItem,
8
+ Icon,
9
+ Layout,
10
+ MultipleUsers,
11
+ Timestamp,
12
+ Title,
13
+ } from '../../'
14
+
15
+ const LayoutKanban = () => {
16
+ return (
17
+ <div>
18
+ <Layout layout="kanban">
19
+ <Layout.Body>
20
+ <Caption>{'Queue'}</Caption>
21
+ <Card
22
+ padding="sm"
23
+ shadow="deep"
24
+ >
25
+ <Flex
26
+ orientation="row"
27
+ spacing="between"
28
+ >
29
+ <FlexItem>
30
+ <Title size="4">{'Design Homepage'}</Title>
31
+ </FlexItem>
32
+ <FlexItem>
33
+ <Icon icon="ellipsis-h" />
34
+ </FlexItem>
35
+ </Flex>
36
+ <Flex
37
+ orientation="row"
38
+ spacing="between"
39
+ vertical="bottom"
40
+ >
41
+ <FlexItem marginTop="xs">
42
+ <Avatar
43
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
44
+ name="Michelle Smith"
45
+ size="sm"
46
+ />
47
+ </FlexItem>
48
+ <FlexItem>
49
+ <Flex
50
+ orientation="row"
51
+ vertical="center"
52
+ >
53
+ <Icon icon="clock" />
54
+ <Timestamp text="00:00:00 h" />
55
+ </Flex>
56
+ </FlexItem>
57
+ </Flex>
58
+ </Card>
59
+ <Card
60
+ padding="sm"
61
+ shadow="deep"
62
+ >
63
+ <Flex
64
+ orientation="row"
65
+ spacing="between"
66
+ >
67
+ <FlexItem>
68
+ <Title size="4">{'Change Old App Icon'}</Title>
69
+ </FlexItem>
70
+ <FlexItem>
71
+ <Icon icon="ellipsis-h" />
72
+ </FlexItem>
73
+ </Flex>
74
+ <Flex
75
+ orientation="row"
76
+ spacing="between"
77
+ vertical="bottom"
78
+ >
79
+ <FlexItem marginTop="xs">
80
+ <Avatar
81
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
82
+ name="Roger Donahue"
83
+ size="sm"
84
+ />
85
+ </FlexItem>
86
+ <FlexItem>
87
+ <Flex
88
+ orientation="row"
89
+ vertical="center"
90
+ >
91
+ <Icon icon="clock" />
92
+ <Timestamp text="00:00:00 h" />
93
+ </Flex>
94
+ </FlexItem>
95
+ </Flex>
96
+ </Card>
97
+ </Layout.Body>
98
+ <Layout.Body>
99
+ <Caption>{'In Progress'}</Caption>
100
+ <Card
101
+ padding="sm"
102
+ shadow="deep"
103
+ >
104
+ <Flex
105
+ orientation="row"
106
+ spacing="between"
107
+ >
108
+ <FlexItem>
109
+ <Title size="4">{'Dashboard Updates'}</Title>
110
+ </FlexItem>
111
+ <FlexItem>
112
+ <Icon icon="ellipsis-h" />
113
+ </FlexItem>
114
+ </Flex>
115
+ <Flex
116
+ orientation="row"
117
+ spacing="between"
118
+ vertical="bottom"
119
+ >
120
+ <FlexItem marginTop="xs">
121
+ <Avatar
122
+ imageUrl="https://images.unsplash.com/photo-1509868918748-a554ad25f858?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=3159ec467959b2aada4b75d565c270aa"
123
+ name="Michelle Smith"
124
+ size="sm"
125
+ />
126
+ </FlexItem>
127
+ <FlexItem>
128
+ <Flex
129
+ orientation="row"
130
+ vertical="center"
131
+ >
132
+ <Icon icon="clock" />
133
+ <Timestamp text="00:00:00 h" />
134
+ </Flex>
135
+ </FlexItem>
136
+ </Flex>
137
+ </Card>
138
+ <Card
139
+ padding="sm"
140
+ shadow="deep"
141
+ >
142
+ <Flex
143
+ orientation="row"
144
+ spacing="between"
145
+ >
146
+ <FlexItem>
147
+ <Title size="4">{'Usability Testing'}</Title>
148
+ </FlexItem>
149
+ <FlexItem>
150
+ <Icon icon="ellipsis-h" />
151
+ </FlexItem>
152
+ </Flex>
153
+ <Flex
154
+ orientation="row"
155
+ spacing="between"
156
+ vertical="bottom"
157
+ >
158
+ <FlexItem marginTop="xs">
159
+ <MultipleUsers
160
+ paddingLeft="xs"
161
+ users={[
162
+ {
163
+ name: 'Shawn Palmer',
164
+ imageUrl:
165
+ 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=74daec1914d1d105202bca8a310a6a71',
166
+ },
167
+ {
168
+ name: 'Andrew Murray Cooper Craig',
169
+ imageUrl:
170
+ 'https://images.unsplash.com/photo-1513732822839-24f03a92f633?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
171
+ },
172
+ ]}
173
+ />
174
+ </FlexItem>
175
+ <FlexItem>
176
+ <Flex
177
+ orientation="row"
178
+ vertical="center"
179
+ >
180
+ <Icon icon="clock" />
181
+ <Timestamp text="00:00:00 h" />
182
+ </Flex>
183
+ </FlexItem>
184
+ </Flex>
185
+ </Card>
186
+ <Card
187
+ padding="sm"
188
+ shadow="deep"
189
+ >
190
+ <Flex
191
+ orientation="row"
192
+ spacing="between"
193
+ >
194
+ <FlexItem>
195
+ <Title size="4">{'New Icons'}</Title>
196
+ </FlexItem>
197
+ <FlexItem>
198
+ <Icon icon="ellipsis-h" />
199
+ </FlexItem>
200
+ </Flex>
201
+ <Flex
202
+ orientation="row"
203
+ spacing="between"
204
+ vertical="bottom"
205
+ >
206
+ <FlexItem marginTop="xs">
207
+ <Avatar
208
+ imageUrl="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
209
+ name="Roger Donahue"
210
+ size="sm"
211
+ />
212
+ </FlexItem>
213
+ <FlexItem>
214
+ <Flex
215
+ orientation="row"
216
+ vertical="center"
217
+ >
218
+ <Icon icon="clock" />
219
+ <Timestamp text="00:00:00 h" />
220
+ </Flex>
221
+ </FlexItem>
222
+ </Flex>
223
+ </Card>
224
+ </Layout.Body>
225
+ <Layout.Body>
226
+ <Caption>{'Validation'}</Caption>
227
+ <Card
228
+ padding="sm"
229
+ shadow="deep"
230
+ >
231
+ <Flex
232
+ orientation="row"
233
+ spacing="between"
234
+ >
235
+ <FlexItem>
236
+ <Title size="4">{'Build Full Page Example'}</Title>
237
+ </FlexItem>
238
+ <FlexItem>
239
+ <Icon icon="ellipsis-h" />
240
+ </FlexItem>
241
+ </Flex>
242
+ <Flex
243
+ orientation="row"
244
+ spacing="between"
245
+ vertical="bottom"
246
+ >
247
+ <FlexItem marginTop="xs">
248
+ <Avatar
249
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
250
+ name="Michelle Smith"
251
+ size="sm"
252
+ />
253
+ </FlexItem>
254
+ <FlexItem>
255
+ <Flex
256
+ orientation="row"
257
+ vertical="center"
258
+ >
259
+ <Icon icon="clock" />
260
+ <Timestamp text="00:00:00 h" />
261
+ </Flex>
262
+ </FlexItem>
263
+ </Flex>
264
+ </Card>
265
+ <Card
266
+ padding="sm"
267
+ shadow="deep"
268
+ >
269
+ <Flex
270
+ orientation="row"
271
+ spacing="between"
272
+ >
273
+ <FlexItem>
274
+ <Title size="4">{'Design System Documentation'}</Title>
275
+ </FlexItem>
276
+ <FlexItem>
277
+ <Icon icon="ellipsis-h" />
278
+ </FlexItem>
279
+ </Flex>
280
+ <Flex
281
+ orientation="row"
282
+ spacing="between"
283
+ vertical="bottom"
284
+ >
285
+ <FlexItem marginTop="xs">
286
+ <Avatar
287
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
288
+ name="Roger Donahue"
289
+ size="sm"
290
+ />
291
+ </FlexItem>
292
+ <FlexItem>
293
+ <Flex
294
+ orientation="row"
295
+ vertical="center"
296
+ >
297
+ <Icon icon="clock" />
298
+ <Timestamp text="00:00:00 h" />
299
+ </Flex>
300
+ </FlexItem>
301
+ </Flex>
302
+ </Card>
303
+ <Card
304
+ padding="sm"
305
+ shadow="deep"
306
+ >
307
+ <Flex
308
+ orientation="row"
309
+ spacing="between"
310
+ >
311
+ <FlexItem>
312
+ <Title size="4">{'Prop Bug'}</Title>
313
+ </FlexItem>
314
+ <FlexItem>
315
+ <Icon icon="ellipsis-h" />
316
+ </FlexItem>
317
+ </Flex>
318
+ <Flex
319
+ orientation="row"
320
+ spacing="between"
321
+ vertical="bottom"
322
+ >
323
+ <FlexItem marginTop="xs">
324
+ <Avatar
325
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
326
+ name="Roger Donahue"
327
+ size="sm"
328
+ />
329
+ </FlexItem>
330
+ <FlexItem>
331
+ <Flex
332
+ orientation="row"
333
+ vertical="center"
334
+ >
335
+ <Icon icon="clock" />
336
+ <Timestamp text="00:00:00 h" />
337
+ </Flex>
338
+ </FlexItem>
339
+ </Flex>
340
+ </Card>
341
+ <Card
342
+ padding="sm"
343
+ shadow="deep"
344
+ >
345
+ <Flex
346
+ orientation="row"
347
+ spacing="between"
348
+ >
349
+ <FlexItem>
350
+ <Title size="4">{'Discovery Session'}</Title>
351
+ </FlexItem>
352
+ <FlexItem>
353
+ <Icon icon="ellipsis-h" />
354
+ </FlexItem>
355
+ </Flex>
356
+ <Flex
357
+ orientation="row"
358
+ spacing="between"
359
+ vertical="bottom"
360
+ >
361
+ <FlexItem marginTop="xs">
362
+ <Avatar
363
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
364
+ name="Michelle Smith"
365
+ size="sm"
366
+ />
367
+ </FlexItem>
368
+ <FlexItem>
369
+ <Flex
370
+ orientation="row"
371
+ vertical="center"
372
+ >
373
+ <Icon icon="clock" />
374
+ <Timestamp text="00:00:00 h" />
375
+ </Flex>
376
+ </FlexItem>
377
+ </Flex>
378
+ </Card>
379
+ <Card
380
+ padding="sm"
381
+ shadow="deep"
382
+ >
383
+ <Flex
384
+ orientation="row"
385
+ spacing="between"
386
+ >
387
+ <FlexItem>
388
+ <Title size="4">{'Design Exploration'}</Title>
389
+ </FlexItem>
390
+ <FlexItem>
391
+ <Icon icon="ellipsis-h" />
392
+ </FlexItem>
393
+ </Flex>
394
+ <Flex
395
+ orientation="row"
396
+ spacing="between"
397
+ vertical="bottom"
398
+ >
399
+ <FlexItem marginTop="xs">
400
+ <Avatar
401
+ imageUrl="https://images.unsplash.com/photo-1513732822839-24f03a92f633?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
402
+ name="Roger Donahue"
403
+ size="sm"
404
+ />
405
+ </FlexItem>
406
+ <FlexItem>
407
+ <Flex
408
+ orientation="row"
409
+ vertical="center"
410
+ >
411
+ <Icon icon="clock" />
412
+ <Timestamp text="00:00:00 h" />
413
+ </Flex>
414
+ </FlexItem>
415
+ </Flex>
416
+ </Card>
417
+ <Card
418
+ padding="sm"
419
+ shadow="deep"
420
+ >
421
+ <Flex
422
+ orientation="row"
423
+ spacing="between"
424
+ >
425
+ <FlexItem>
426
+ <Title size="4">{'Fix Sketch Bugs'}</Title>
427
+ </FlexItem>
428
+ <FlexItem>
429
+ <Icon icon="ellipsis-h" />
430
+ </FlexItem>
431
+ </Flex>
432
+ <Flex
433
+ orientation="row"
434
+ spacing="between"
435
+ vertical="bottom"
436
+ >
437
+ <FlexItem marginTop="xs">
438
+ <Avatar
439
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
440
+ name="Roger Donahue"
441
+ size="sm"
442
+ />
443
+ </FlexItem>
444
+ <FlexItem>
445
+ <Flex
446
+ orientation="row"
447
+ vertical="center"
448
+ >
449
+ <Icon icon="clock" />
450
+ <Timestamp text="00:00:00 h" />
451
+ </Flex>
452
+ </FlexItem>
453
+ </Flex>
454
+ </Card>
455
+ <Card
456
+ padding="sm"
457
+ shadow="deep"
458
+ >
459
+ <Flex
460
+ orientation="row"
461
+ spacing="between"
462
+ >
463
+ <FlexItem>
464
+ <Title size="4">{'Test Out Figma'}</Title>
465
+ </FlexItem>
466
+ <FlexItem>
467
+ <Icon icon="ellipsis-h" />
468
+ </FlexItem>
469
+ </Flex>
470
+ <Flex
471
+ orientation="row"
472
+ spacing="between"
473
+ vertical="bottom"
474
+ >
475
+ <FlexItem marginTop="xs">
476
+ <Avatar
477
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
478
+ name="Michelle Smith"
479
+ size="sm"
480
+ />
481
+ </FlexItem>
482
+ <FlexItem>
483
+ <Flex
484
+ orientation="row"
485
+ vertical="center"
486
+ >
487
+ <Icon icon="clock" />
488
+ <Timestamp text="00:00:00 h" />
489
+ </Flex>
490
+ </FlexItem>
491
+ </Flex>
492
+ </Card>
493
+ <Card
494
+ padding="sm"
495
+ shadow="deep"
496
+ >
497
+ <Flex
498
+ orientation="row"
499
+ spacing="between"
500
+ >
501
+ <FlexItem>
502
+ <Title size="4">{'Ship New Feature'}</Title>
503
+ </FlexItem>
504
+ <FlexItem>
505
+ <Icon icon="ellipsis-h" />
506
+ </FlexItem>
507
+ </Flex>
508
+ <Flex
509
+ orientation="row"
510
+ spacing="between"
511
+ vertical="bottom"
512
+ >
513
+ <FlexItem marginTop="xs">
514
+ <Avatar
515
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
516
+ name="Roger Donahue"
517
+ size="sm"
518
+ />
519
+ </FlexItem>
520
+ <FlexItem>
521
+ <Flex
522
+ orientation="row"
523
+ vertical="center"
524
+ >
525
+ <Icon icon="clock" />
526
+ <Timestamp text="00:00:00 h" />
527
+ </Flex>
528
+ </FlexItem>
529
+ </Flex>
530
+ </Card>
531
+ <Card
532
+ padding="sm"
533
+ shadow="deep"
534
+ >
535
+ <Flex
536
+ orientation="row"
537
+ spacing="between"
538
+ >
539
+ <FlexItem>
540
+ <Title size="4">{'Meet with Client'}</Title>
541
+ </FlexItem>
542
+ <FlexItem>
543
+ <Icon icon="ellipsis-h" />
544
+ </FlexItem>
545
+ </Flex>
546
+ <Flex
547
+ orientation="row"
548
+ spacing="between"
549
+ vertical="bottom"
550
+ >
551
+ <FlexItem marginTop="xs">
552
+ <Avatar
553
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
554
+ name="Roger Donahue"
555
+ size="sm"
556
+ />
557
+ </FlexItem>
558
+ <FlexItem>
559
+ <Flex
560
+ orientation="row"
561
+ vertical="center"
562
+ >
563
+ <Icon icon="clock" />
564
+ <Timestamp text="00:00:00 h" />
565
+ </Flex>
566
+ </FlexItem>
567
+ </Flex>
568
+ </Card>
569
+
570
+ <Card
571
+ padding="sm"
572
+ shadow="deep"
573
+ >
574
+ <Flex
575
+ orientation="row"
576
+ spacing="between"
577
+ >
578
+ <FlexItem>
579
+ <Title size="4">{'Re-engineer Old Modal'}</Title>
580
+ </FlexItem>
581
+ <FlexItem>
582
+ <Icon icon="ellipsis-h" />
583
+ </FlexItem>
584
+ </Flex>
585
+ <Flex
586
+ orientation="row"
587
+ spacing="between"
588
+ vertical="bottom"
589
+ >
590
+ <FlexItem marginTop="xs">
591
+ <Avatar
592
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
593
+ name="Michelle Smith"
594
+ size="sm"
595
+ />
596
+ </FlexItem>
597
+ <FlexItem>
598
+ <Flex
599
+ orientation="row"
600
+ vertical="center"
601
+ >
602
+ <Icon icon="clock" />
603
+ <Timestamp text="00:00:00 h" />
604
+ </Flex>
605
+ </FlexItem>
606
+ </Flex>
607
+ </Card>
608
+ <Card
609
+ padding="sm"
610
+ shadow="deep"
611
+ >
612
+ <Flex
613
+ orientation="row"
614
+ spacing="between"
615
+ >
616
+ <FlexItem>
617
+ <Title size="4">{'Setup Permissions'}</Title>
618
+ </FlexItem>
619
+ <FlexItem>
620
+ <Icon icon="ellipsis-h" />
621
+ </FlexItem>
622
+ </Flex>
623
+ <Flex
624
+ orientation="row"
625
+ spacing="between"
626
+ vertical="bottom"
627
+ >
628
+ <FlexItem marginTop="xs">
629
+ <Avatar
630
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
631
+ name="Roger Donahue"
632
+ size="sm"
633
+ />
634
+ </FlexItem>
635
+ <FlexItem>
636
+ <Flex
637
+ orientation="row"
638
+ vertical="center"
639
+ >
640
+ <Icon icon="clock" />
641
+ <Timestamp text="00:00:00 h" />
642
+ </Flex>
643
+ </FlexItem>
644
+ </Flex>
645
+ </Card>
646
+ <Card
647
+ padding="sm"
648
+ shadow="deep"
649
+ >
650
+ <Flex
651
+ orientation="row"
652
+ spacing="between"
653
+ >
654
+ <FlexItem>
655
+ <Title size="4">{'Build Prototype'}</Title>
656
+ </FlexItem>
657
+ <FlexItem>
658
+ <Icon icon="ellipsis-h" />
659
+ </FlexItem>
660
+ </Flex>
661
+ <Flex
662
+ orientation="row"
663
+ spacing="between"
664
+ vertical="bottom"
665
+ >
666
+ <FlexItem marginTop="xs">
667
+ <Avatar
668
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
669
+ name="Roger Donahue"
670
+ size="sm"
671
+ />
672
+ </FlexItem>
673
+ <FlexItem>
674
+ <Flex
675
+ orientation="row"
676
+ vertical="center"
677
+ >
678
+ <Icon icon="clock" />
679
+ <Timestamp text="00:00:00 h" />
680
+ </Flex>
681
+ </FlexItem>
682
+ </Flex>
683
+ </Card>
684
+ <Card
685
+ padding="sm"
686
+ shadow="deep"
687
+ >
688
+ <Flex
689
+ orientation="row"
690
+ spacing="between"
691
+ >
692
+ <FlexItem>
693
+ <Title size="4">{'Collaborate with Team'}</Title>
694
+ </FlexItem>
695
+ <FlexItem>
696
+ <Icon icon="ellipsis-h" />
697
+ </FlexItem>
698
+ </Flex>
699
+ <Flex
700
+ orientation="row"
701
+ spacing="between"
702
+ vertical="bottom"
703
+ >
704
+ <FlexItem marginTop="xs">
705
+ <Avatar
706
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
707
+ name="Michelle Smith"
708
+ size="sm"
709
+ />
710
+ </FlexItem>
711
+ <FlexItem>
712
+ <Flex
713
+ orientation="row"
714
+ vertical="center"
715
+ >
716
+ <Icon icon="clock" />
717
+ <Timestamp text="00:00:00 h" />
718
+ </Flex>
719
+ </FlexItem>
720
+ </Flex>
721
+ </Card>
722
+ <Card
723
+ padding="sm"
724
+ shadow="deep"
725
+ >
726
+ <Flex
727
+ orientation="row"
728
+ spacing="between"
729
+ >
730
+ <FlexItem>
731
+ <Title size="4">{'Interview Candidates'}</Title>
732
+ </FlexItem>
733
+ <FlexItem>
734
+ <Icon icon="ellipsis-h" />
735
+ </FlexItem>
736
+ </Flex>
737
+ <Flex
738
+ orientation="row"
739
+ spacing="between"
740
+ vertical="bottom"
741
+ >
742
+ <FlexItem marginTop="xs">
743
+ <Avatar
744
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
745
+ name="Roger Donahue"
746
+ size="sm"
747
+ />
748
+ </FlexItem>
749
+ <FlexItem>
750
+ <Flex
751
+ orientation="row"
752
+ vertical="center"
753
+ >
754
+ <Icon icon="clock" />
755
+ <Timestamp text="00:00:00 h" />
756
+ </Flex>
757
+ </FlexItem>
758
+ </Flex>
759
+ </Card>
760
+ <Card
761
+ padding="sm"
762
+ shadow="deep"
763
+ >
764
+ <Flex
765
+ orientation="row"
766
+ spacing="between"
767
+ >
768
+ <FlexItem>
769
+ <Title size="4">{'Run Testing Suite'}</Title>
770
+ </FlexItem>
771
+ <FlexItem>
772
+ <Icon icon="ellipsis-h" />
773
+ </FlexItem>
774
+ </Flex>
775
+ <Flex
776
+ orientation="row"
777
+ spacing="between"
778
+ vertical="bottom"
779
+ >
780
+ <FlexItem marginTop="xs">
781
+ <Avatar
782
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
783
+ name="Roger Donahue"
784
+ size="sm"
785
+ />
786
+ </FlexItem>
787
+ <FlexItem>
788
+ <Flex
789
+ orientation="row"
790
+ vertical="center"
791
+ >
792
+ <Icon icon="clock" />
793
+ <Timestamp text="00:00:00 h" />
794
+ </Flex>
795
+ </FlexItem>
796
+ </Flex>
797
+ </Card>
798
+ <Card
799
+ padding="sm"
800
+ shadow="deep"
801
+ >
802
+ <Flex
803
+ orientation="row"
804
+ spacing="between"
805
+ >
806
+ <FlexItem>
807
+ <Title size="4">{'Live Coding Session'}</Title>
808
+ </FlexItem>
809
+ <FlexItem>
810
+ <Icon icon="ellipsis-h" />
811
+ </FlexItem>
812
+ </Flex>
813
+ <Flex
814
+ orientation="row"
815
+ spacing="between"
816
+ vertical="bottom"
817
+ >
818
+ <FlexItem marginTop="xs">
819
+ <Avatar
820
+ imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
821
+ name="Michelle Smith"
822
+ size="sm"
823
+ />
824
+ </FlexItem>
825
+ <FlexItem>
826
+ <Flex
827
+ orientation="row"
828
+ vertical="center"
829
+ >
830
+ <Icon icon="clock" />
831
+ <Timestamp text="00:00:00 h" />
832
+ </Flex>
833
+ </FlexItem>
834
+ </Flex>
835
+ </Card>
836
+ <Card
837
+ padding="sm"
838
+ shadow="deep"
839
+ >
840
+ <Flex
841
+ orientation="row"
842
+ spacing="between"
843
+ >
844
+ <FlexItem>
845
+ <Title size="4">{'All Hands Meeting'}</Title>
846
+ </FlexItem>
847
+ <FlexItem>
848
+ <Icon icon="ellipsis-h" />
849
+ </FlexItem>
850
+ </Flex>
851
+ <Flex
852
+ orientation="row"
853
+ spacing="between"
854
+ vertical="bottom"
855
+ >
856
+ <FlexItem marginTop="xs">
857
+ <Avatar
858
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
859
+ name="Roger Donahue"
860
+ size="sm"
861
+ />
862
+ </FlexItem>
863
+ <FlexItem>
864
+ <Flex
865
+ orientation="row"
866
+ vertical="center"
867
+ >
868
+ <Icon icon="clock" />
869
+ <Timestamp text="00:00:00 h" />
870
+ </Flex>
871
+ </FlexItem>
872
+ </Flex>
873
+ </Card>
874
+ <Card
875
+ padding="sm"
876
+ shadow="deep"
877
+ >
878
+ <Flex
879
+ orientation="row"
880
+ spacing="between"
881
+ >
882
+ <FlexItem>
883
+ <Title size="4">{'Growth Engineering Meeting'}</Title>
884
+ </FlexItem>
885
+ <FlexItem>
886
+ <Icon icon="ellipsis-h" />
887
+ </FlexItem>
888
+ </Flex>
889
+ <Flex
890
+ orientation="row"
891
+ spacing="between"
892
+ vertical="bottom"
893
+ >
894
+ <FlexItem marginTop="xs">
895
+ <Avatar
896
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
897
+ name="Roger Donahue"
898
+ size="sm"
899
+ />
900
+ </FlexItem>
901
+ <FlexItem>
902
+ <Flex
903
+ orientation="row"
904
+ vertical="center"
905
+ >
906
+ <Icon icon="clock" />
907
+ <Timestamp text="00:00:00 h" />
908
+ </Flex>
909
+ </FlexItem>
910
+ </Flex>
911
+ </Card>
912
+ </Layout.Body>
913
+ <Layout.Body>
914
+ <Caption>{'Done'}</Caption>
915
+ <Card
916
+ padding="sm"
917
+ shadow="deep"
918
+ >
919
+ <Flex
920
+ orientation="row"
921
+ spacing="between"
922
+ >
923
+ <FlexItem>
924
+ <Title size="4">{'Re-rendering Bug'}</Title>
925
+ </FlexItem>
926
+ <FlexItem>
927
+ <Icon icon="ellipsis-h" />
928
+ </FlexItem>
929
+ </Flex>
930
+ <Flex
931
+ orientation="row"
932
+ spacing="between"
933
+ vertical="bottom"
934
+ >
935
+ <FlexItem marginTop="xs">
936
+ <Avatar
937
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
938
+ name="Roger Donahue"
939
+ size="sm"
940
+ />
941
+ </FlexItem>
942
+ <FlexItem>
943
+ <Flex
944
+ orientation="row"
945
+ vertical="center"
946
+ >
947
+ <Icon icon="clock" />
948
+ <Timestamp text="00:00:00 h" />
949
+ </Flex>
950
+ </FlexItem>
951
+ </Flex>
952
+ </Card>
953
+ <Card
954
+ padding="sm"
955
+ shadow="deep"
956
+ >
957
+ <Flex
958
+ orientation="row"
959
+ spacing="between"
960
+ >
961
+ <FlexItem>
962
+ <Title size="4">{'Gather Resources'}</Title>
963
+ </FlexItem>
964
+ <FlexItem>
965
+ <Icon icon="ellipsis-h" />
966
+ </FlexItem>
967
+ </Flex>
968
+ <Flex
969
+ orientation="row"
970
+ spacing="between"
971
+ vertical="bottom"
972
+ >
973
+ <FlexItem marginTop="xs">
974
+ <Avatar
975
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
976
+ name="Roger Donahue"
977
+ size="sm"
978
+ />
979
+ </FlexItem>
980
+ <FlexItem>
981
+ <Flex
982
+ orientation="row"
983
+ vertical="center"
984
+ >
985
+ <Icon icon="clock" />
986
+ <Timestamp text="00:00:00 h" />
987
+ </Flex>
988
+ </FlexItem>
989
+ </Flex>
990
+ </Card>
991
+ </Layout.Body>
992
+ <Layout.Body>
993
+ <Caption>{'Another Column'}</Caption>
994
+ <Card
995
+ padding="sm"
996
+ shadow="deep"
997
+ >
998
+ <Flex
999
+ orientation="row"
1000
+ spacing="between"
1001
+ >
1002
+ <FlexItem>
1003
+ <Title size="4">{'All Hands Meeting'}</Title>
1004
+ </FlexItem>
1005
+ <FlexItem>
1006
+ <Icon icon="ellipsis-h" />
1007
+ </FlexItem>
1008
+ </Flex>
1009
+ <Flex
1010
+ orientation="row"
1011
+ spacing="between"
1012
+ vertical="bottom"
1013
+ >
1014
+ <FlexItem marginTop="xs">
1015
+ <Avatar
1016
+ imageUrl="https://images.unsplash.com/photo-1544817747-b11e3e3b6ac2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
1017
+ name="Roger Donahue"
1018
+ size="sm"
1019
+ />
1020
+ </FlexItem>
1021
+ <FlexItem>
1022
+ <Flex
1023
+ orientation="row"
1024
+ vertical="center"
1025
+ >
1026
+ <Icon icon="clock" />
1027
+ <Timestamp text="00:00:00 h" />
1028
+ </Flex>
1029
+ </FlexItem>
1030
+ </Flex>
1031
+ </Card>
1032
+ <Card
1033
+ padding="sm"
1034
+ shadow="deep"
1035
+ >
1036
+ <Flex
1037
+ orientation="row"
1038
+ spacing="between"
1039
+ >
1040
+ <FlexItem>
1041
+ <Title size="4">{'Growth Engineering Meeting'}</Title>
1042
+ </FlexItem>
1043
+ <FlexItem>
1044
+ <Icon icon="ellipsis-h" />
1045
+ </FlexItem>
1046
+ </Flex>
1047
+ <Flex
1048
+ orientation="row"
1049
+ spacing="between"
1050
+ vertical="bottom"
1051
+ >
1052
+ <FlexItem marginTop="xs">
1053
+ <Avatar
1054
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
1055
+ name="Roger Donahue"
1056
+ size="sm"
1057
+ />
1058
+ </FlexItem>
1059
+ <FlexItem>
1060
+ <Flex
1061
+ orientation="row"
1062
+ vertical="center"
1063
+ >
1064
+ <Icon icon="clock" />
1065
+ <Timestamp text="00:00:00 h" />
1066
+ </Flex>
1067
+ </FlexItem>
1068
+ </Flex>
1069
+ </Card>
1070
+ </Layout.Body>
1071
+ <Layout.Body>
1072
+ <Caption>{'Another Column'}</Caption>
1073
+ <Card
1074
+ padding="sm"
1075
+ shadow="deep"
1076
+ >
1077
+ <Flex
1078
+ orientation="row"
1079
+ spacing="between"
1080
+ >
1081
+ <FlexItem>
1082
+ <Title size="4">{'All Hands Meeting'}</Title>
1083
+ </FlexItem>
1084
+ <FlexItem>
1085
+ <Icon icon="ellipsis-h" />
1086
+ </FlexItem>
1087
+ </Flex>
1088
+ <Flex
1089
+ orientation="row"
1090
+ spacing="between"
1091
+ vertical="bottom"
1092
+ >
1093
+ <FlexItem marginTop="xs">
1094
+ <Avatar
1095
+ imageUrl="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=73a9df4b7bd1b330db1e903e08575ec1"
1096
+ name="Roger Donahue"
1097
+ size="sm"
1098
+ />
1099
+ </FlexItem>
1100
+ <FlexItem>
1101
+ <Flex
1102
+ orientation="row"
1103
+ vertical="center"
1104
+ >
1105
+ <Icon icon="clock" />
1106
+ <Timestamp text="00:00:00 h" />
1107
+ </Flex>
1108
+ </FlexItem>
1109
+ </Flex>
1110
+ </Card>
1111
+ <Card
1112
+ padding="sm"
1113
+ shadow="deep"
1114
+ >
1115
+ <Flex
1116
+ orientation="row"
1117
+ spacing="between"
1118
+ >
1119
+ <FlexItem>
1120
+ <Title size="4">{'Pairing'}</Title>
1121
+ </FlexItem>
1122
+ <FlexItem>
1123
+ <Icon icon="ellipsis-h" />
1124
+ </FlexItem>
1125
+ </Flex>
1126
+ <Flex
1127
+ orientation="row"
1128
+ spacing="between"
1129
+ vertical="bottom"
1130
+ >
1131
+ <FlexItem marginTop="xs">
1132
+ <Avatar
1133
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
1134
+ name="Roger Donahue"
1135
+ size="sm"
1136
+ />
1137
+ </FlexItem>
1138
+ <FlexItem>
1139
+ <Flex
1140
+ orientation="row"
1141
+ vertical="center"
1142
+ >
1143
+ <Icon icon="clock" />
1144
+ <Timestamp text="00:00:00 h" />
1145
+ </Flex>
1146
+ </FlexItem>
1147
+ </Flex>
1148
+ </Card>
1149
+ </Layout.Body>
1150
+ <Layout.Body>
1151
+ <Caption>{'Another Column'}</Caption>
1152
+ <Card
1153
+ padding="sm"
1154
+ shadow="deep"
1155
+ >
1156
+ <Flex
1157
+ orientation="row"
1158
+ spacing="between"
1159
+ >
1160
+ <FlexItem>
1161
+ <Title size="4">{'Design Session'}</Title>
1162
+ </FlexItem>
1163
+ <FlexItem>
1164
+ <Icon icon="ellipsis-h" />
1165
+ </FlexItem>
1166
+ </Flex>
1167
+ <Flex
1168
+ orientation="row"
1169
+ spacing="between"
1170
+ vertical="bottom"
1171
+ >
1172
+ <FlexItem marginTop="xs">
1173
+ <Avatar
1174
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
1175
+ name="Roger Donahue"
1176
+ size="sm"
1177
+ />
1178
+ </FlexItem>
1179
+ <FlexItem>
1180
+ <Flex
1181
+ orientation="row"
1182
+ vertical="center"
1183
+ >
1184
+ <Icon icon="clock" />
1185
+ <Timestamp text="00:00:00 h" />
1186
+ </Flex>
1187
+ </FlexItem>
1188
+ </Flex>
1189
+ </Card>
1190
+ <Card
1191
+ padding="sm"
1192
+ shadow="deep"
1193
+ >
1194
+ <Flex
1195
+ orientation="row"
1196
+ spacing="between"
1197
+ >
1198
+ <FlexItem>
1199
+ <Title size="4">{'UX Engineering Meeting'}</Title>
1200
+ </FlexItem>
1201
+ <FlexItem>
1202
+ <Icon icon="ellipsis-h" />
1203
+ </FlexItem>
1204
+ </Flex>
1205
+ <Flex
1206
+ orientation="row"
1207
+ spacing="between"
1208
+ vertical="bottom"
1209
+ >
1210
+ <FlexItem marginTop="xs">
1211
+ <Avatar
1212
+ imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
1213
+ name="Roger Donahue"
1214
+ size="sm"
1215
+ />
1216
+ </FlexItem>
1217
+ <FlexItem>
1218
+ <Flex
1219
+ orientation="row"
1220
+ vertical="center"
1221
+ >
1222
+ <Icon icon="clock" />
1223
+ <Timestamp text="00:00:00 h" />
1224
+ </Flex>
1225
+ </FlexItem>
1226
+ </Flex>
1227
+ </Card>
1228
+ </Layout.Body>
1229
+ </Layout>
1230
+ </div>
1231
+ )
1232
+ }
1233
+
1234
+ export default LayoutKanban