playbook_ui 4.18.1.pre.alpha1 → 5.0.2

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 (83) 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 +1 -1
  5. data/app/pb_kits/playbook/data/menu.yml +3 -1
  6. data/app/pb_kits/playbook/packs/examples.js +2 -0
  7. data/app/pb_kits/playbook/packs/samples.js +2 -0
  8. data/app/pb_kits/playbook/pb_caption/_caption.jsx +21 -4
  9. data/app/pb_kits/playbook/pb_card/_card.scss +1 -72
  10. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +72 -0
  11. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +0 -1
  12. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_installer/_installer.html.erb +16 -0
  15. data/app/pb_kits/playbook/pb_installer/_installer.jsx +54 -0
  16. data/app/pb_kits/playbook/pb_installer/_installer.scss +7 -0
  17. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +8 -0
  18. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +16 -0
  19. data/app/pb_kits/playbook/pb_installer/docs/example.yml +9 -0
  20. data/app/pb_kits/playbook/pb_installer/docs/index.js +1 -0
  21. data/app/pb_kits/playbook/pb_installer/installer.rb +18 -0
  22. data/app/pb_kits/playbook/pb_layout/_body.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_layout/_column.html.erb +7 -0
  24. data/app/pb_kits/playbook/pb_layout/_layout.jsx +31 -13
  25. data/app/pb_kits/playbook/pb_layout/_layout.scss +54 -0
  26. data/app/pb_kits/playbook/pb_layout/body.rb +4 -0
  27. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb +140 -0
  28. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx +1234 -0
  29. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb +57 -0
  30. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx +46 -0
  31. data/app/pb_kits/playbook/pb_layout/docs/example.yml +3 -0
  32. data/app/pb_kits/playbook/pb_layout/docs/index.js +2 -0
  33. data/app/pb_kits/playbook/pb_layout/layout.rb +12 -4
  34. data/app/pb_kits/playbook/pb_list/_item.html.erb +3 -2
  35. data/app/pb_kits/playbook/pb_list/_list.html.erb +3 -3
  36. data/app/pb_kits/playbook/pb_list/_list.jsx +55 -10
  37. data/app/pb_kits/playbook/pb_list/_list_item.jsx +41 -18
  38. data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx +21 -0
  39. data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx +0 -5
  40. data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx +22 -0
  41. data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx +22 -0
  42. data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx +22 -0
  43. data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx +22 -0
  44. data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx +75 -0
  45. data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx +75 -0
  46. data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx +21 -0
  47. data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx +21 -0
  48. data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx +21 -0
  49. data/app/pb_kits/playbook/pb_list/docs/example.yml +12 -1
  50. data/app/pb_kits/playbook/pb_list/docs/index.js +11 -0
  51. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +4 -4
  52. data/app/pb_kits/playbook/pb_popover/_popover.jsx +41 -8
  53. data/app/pb_kits/playbook/pb_popover/_popover.scss +44 -7
  54. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +42 -0
  55. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +99 -0
  56. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +19 -7
  57. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +22 -6
  58. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +11 -10
  59. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +22 -18
  60. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.md +1 -0
  61. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb +24 -0
  62. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +56 -0
  63. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb +14 -0
  64. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +50 -0
  65. data/app/pb_kits/playbook/pb_popover/docs/example.yml +12 -8
  66. data/app/pb_kits/playbook/pb_popover/docs/index.js +3 -3
  67. data/app/pb_kits/playbook/pb_popover/index.js +18 -9
  68. data/app/pb_kits/playbook/pb_popover/popover.rb +26 -2
  69. data/app/pb_kits/playbook/pb_title/_title.html.erb +1 -0
  70. data/app/pb_kits/playbook/pb_title/_title.jsx +24 -17
  71. data/app/pb_kits/playbook/props.rb +7 -0
  72. data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
  73. data/app/views/playbook/samples/filter_table/index.jsx +433 -0
  74. data/lib/playbook/version.rb +1 -1
  75. metadata +37 -12
  76. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.html.erb +0 -19
  77. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.jsx +0 -40
  78. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.html.erb +0 -14
  79. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.jsx +0 -40
  80. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.html.erb +0 -14
  81. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx +0 -40
  82. data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx +0 -34
  83. data/app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb +0 -5
data/app/pb_kits/playbook/pb_installer/docs/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as InstallerDefault } from './_installer_default.jsx'
data/app/pb_kits/playbook/pb_installer/installer.rb ADDED
@@ -0,0 +1,18 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbInstaller
5
+ class Installer
6
+ include Playbook::Props
7
+
8
+ partial "pb_installer/installer"
9
+
10
+ prop :link
11
+ prop :project_name
12
+
13
+ def classname
14
+ generate_classname("pb_installer_kit")
15
+ end
16
+ end
17
+ end
18
+ end
data/app/pb_kits/playbook/pb_layout/_body.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= content_tag(:div,
1
+ <%= content_tag(object.tag,
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname) do %>
data/app/pb_kits/playbook/pb_layout/_column.html.erb ADDED
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ ) do %>
6
+ <%= capture(&object.children) %>
7
+ <% end %>
data/app/pb_kits/playbook/pb_layout/_layout.jsx CHANGED
@@ -14,12 +14,12 @@ type LayoutPropTypes = {
14
14
  dark?: Boolean,
15
15
  data?: object,
16
16
  full?: Boolean,
17
- position?: 'left' | 'right',
18
- size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
19
- variant?: 'light' | 'dark' | 'gradient',
17
+ position?: "left" | "right",
18
+ responsive?: Boolean,
19
+ size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
20
+ variant?: "light" | "dark" | "gradient",
20
21
  transparent?: Boolean,
21
- layout?: 'sidebar' | 'collection',
22
-
22
+ layout?: "sidebar" | "collection" | "kanban",
23
23
  }
24
24
 
25
25
  type LayoutSideProps = {
@@ -36,14 +36,20 @@ type LayoutBodyProps = {
36
36
  const Side = (props: LayoutSideProps) => {
37
37
  const { children, className } = props
38
38
  return (
39
- <div className={classnames('layout_sidebar', className, spacing(props))}>{children}</div>
39
+ <div className={classnames('layout_sidebar', className, spacing(props))}>
40
+ {children}
41
+ </div>
40
42
  )
41
43
  }
42
44
 
43
45
  // Body component
44
46
  const Body = (props: LayoutBodyProps) => {
45
47
  const { children, className } = props
46
- return <div className={classnames('layout_body', className, spacing(props))}>{children}</div>
48
+ return (
49
+ <div className={classnames('layout_body', className, spacing(props))}>
50
+ {children}
51
+ </div>
52
+ )
47
53
  }
48
54
 
49
55
  // Main componenet
@@ -58,20 +64,32 @@ const Layout = (props: LayoutPropTypes) => {
58
64
  data = {},
59
65
  full = false,
60
66
  position = 'left',
67
+ responsive = false,
61
68
  size = 'md',
62
69
  layout = 'sidebar',
63
70
  variant = 'light',
64
71
  transparent = false,
65
72
  } = props
73
+ const responsiveClass = responsive ? '_responsive' : ''
66
74
  const ariaProps = buildAriaProps(aria)
67
75
  const dataProps = buildDataProps(data)
68
- const layoutCss = buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
69
- 'dark': dark,
70
- 'transparent': transparent,
71
- 'full': full,
72
- })
76
+ const layoutCss =
77
+ layout == 'collection'
78
+ ? `pb_layout_kit_${layout}`
79
+ : layout == 'kanban'
80
+ ? `pb_layout_kit_${layout}${responsiveClass}`
81
+ : buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
82
+ dark: dark,
83
+ transparent: transparent,
84
+ full: full,
85
+ })
73
86
 
74
- const layoutCollapseCss = buildCss('layout', position, 'collapse', collapse)
87
+ const layoutCollapseCss =
88
+ layout == 'collection'
89
+ ? ''
90
+ : layout == 'kanban'
91
+ ? ''
92
+ : buildCss('layout', position, 'collapse', collapse)
75
93
 
76
94
  const layoutChildren =
77
95
  typeof children === 'object' && children.length ? children : [children]
data/app/pb_kits/playbook/pb_layout/_layout.scss CHANGED
@@ -3,6 +3,15 @@
3
3
  @import "../tokens/screen_sizes";
4
4
  @import "./layout_mixin";
5
5
 
6
+ $list-width: 300px;
7
+ $gap: $space_sm;
8
+ $scrollbar-thickness: $space_md;
9
+ $list-header-height: $space_lg;
10
+ $list-footer-height: $space_lg;
11
+ $list-border-radius: $border_rad_lighter;
12
+ $card-border-radius: $border_rad_lightest;
13
+
14
+
6
15
  [class^=pb_layout_kit] {
7
16
 
8
17
  &[class*=_collection]{
@@ -22,6 +31,51 @@
22
31
  }
23
32
 
24
33
  }
34
+
35
+ &[class*=_kanban]{
36
+ display: flex;
37
+ overflow-x: auto;
38
+
39
+ > * {
40
+ flex: 0 0 auto;
41
+ margin-left: $gap;
42
+ }
43
+ &::after {
44
+ content: '';
45
+ flex: 0 0 $gap;
46
+ }
47
+
48
+ div.layout_body{
49
+ width: $list-width;
50
+ height: 100vh;
51
+ list-style: none;
52
+ margin: 0;
53
+ overflow-y: auto;
54
+
55
+ & > * {
56
+ margin: $space_xs $space_xs $space_xs;
57
+ &:not(:last-child) {
58
+ margin-bottom: 0;
59
+ }
60
+ }
61
+ }
62
+ }
63
+
64
+ // For future release as of 6/18/2020
65
+ &[class*=_kanban_responsive] {
66
+ display: grid;
67
+ grid-auto-flow: column;
68
+ grid-auto-columns: minmax(0, 1fr);
69
+ &::after {
70
+ flex: none;
71
+ content: none;
72
+ }
73
+ div.layout_body{
74
+ width: 100%;
75
+ }
76
+ }
77
+
78
+
25
79
  &[class*=_sidebar]{
26
80
  $layout_sizes: (
27
81
  "xs": 64px,
data/app/pb_kits/playbook/pb_layout/body.rb CHANGED
@@ -7,6 +7,10 @@ module Playbook
7
7
 
8
8
  partial "pb_layout/body"
9
9
 
10
+ prop :tag, type: Playbook::Props::Enum,
11
+ values: %w[ul li span div],
12
+ default: "div"
13
+
10
14
  def classname
11
15
  generate_classname("layout_body")
12
16
  end
data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb ADDED
@@ -0,0 +1,140 @@
1
+ <%= pb_rails("layout", props: {layout: "kanban"}) do %>
2
+ <%= pb_rails("layout/body") do %>
3
+ <%= pb_rails("caption", props: {text: 'Queued'}) %>
4
+ <%= pb_rails("card") do %>
5
+ Kanban Item
6
+ <% end %>
7
+ <% end %>
8
+ <%= pb_rails("layout/body") do %>
9
+ <%= pb_rails("caption", props: {text: 'In Progress'}) %>
10
+ <%= pb_rails("card") do %>
11
+ Kanban Item
12
+ <% end %>
13
+ <%= pb_rails("card") do %>
14
+ Kanban Item
15
+ <% end %>
16
+ <%= pb_rails("card") do %>
17
+ Kanban Item
18
+ <% end %>
19
+ <% end %>
20
+ <%= pb_rails("layout/body") do %>
21
+ <%= pb_rails("caption", props: {text: 'Validation'}) %>
22
+ <%= pb_rails("card") do %>
23
+ Kanban Item
24
+ <% end %>
25
+ <%= pb_rails("card") do %>
26
+ Kanban Item
27
+ <% end %>
28
+ <%= pb_rails("card") do %>
29
+ Kanban Item
30
+ <% end %>
31
+ <%= pb_rails("card") do %>
32
+ Kanban Item
33
+ <% end %>
34
+ <%= pb_rails("card") do %>
35
+ Kanban Item
36
+ <% end %>
37
+ <%= pb_rails("card") do %>
38
+ Kanban Item
39
+ <% end %>
40
+ <%= pb_rails("card") do %>
41
+ Kanban Item
42
+ <% end %>
43
+ <%= pb_rails("card") do %>
44
+ Kanban Item
45
+ <% end %>
46
+ <%= pb_rails("card") do %>
47
+ Kanban Item
48
+ <% end %>
49
+ <%= pb_rails("card") do %>
50
+ Kanban Item
51
+ <% end %>
52
+ <%= pb_rails("card") do %>
53
+ Kanban Item
54
+ <% end %>
55
+ <%= pb_rails("card") do %>
56
+ Kanban Item
57
+ <% end %>
58
+ <%= pb_rails("card") do %>
59
+ Kanban Item
60
+ <% end %>
61
+ <%= pb_rails("card") do %>
62
+ Kanban Item
63
+ <% end %>
64
+ <%= pb_rails("card") do %>
65
+ Kanban Item
66
+ <% end %>
67
+ <% end %>
68
+ <%= pb_rails("layout/body") do %>
69
+ <%= pb_rails("caption", props: {text: 'Done'}) %>
70
+ <%= pb_rails("card") do %>
71
+ Kanban Item
72
+ <% end %>
73
+ <%= pb_rails("card") do %>
74
+ Kanban Item
75
+ <% end %>
76
+ <%= pb_rails("card") do %>
77
+ Kanban Item
78
+ <% end %>
79
+ <% end %>
80
+ <%= pb_rails("layout/body") do %>
81
+ <%= pb_rails("caption", props: {text: 'OKRs'}) %>
82
+ <%= pb_rails("card") do %>
83
+ Kanban Item
84
+ <% end %>
85
+ <%= pb_rails("card") do %>
86
+ Kanban Item
87
+ <% end %>
88
+ <%= pb_rails("card") do %>
89
+ Kanban Item
90
+ <% end %>
91
+ <% end %>
92
+ <%= pb_rails("layout/body") do %>
93
+ <%= pb_rails("caption", props: {text: 'Bugs'}) %>
94
+ <%= pb_rails("card") do %>
95
+ Kanban Item
96
+ <% end %>
97
+ <%= pb_rails("card") do %>
98
+ Kanban Item
99
+ <% end %>
100
+ <%= pb_rails("card") do %>
101
+ Kanban Item
102
+ <% end %>
103
+ <% end %>
104
+ <%= pb_rails("layout/body") do %>
105
+ <%= pb_rails("caption", props: {text: 'Another Column'}) %>
106
+ <%= pb_rails("card") do %>
107
+ Kanban Item
108
+ <% end %>
109
+ <%= pb_rails("card") do %>
110
+ Kanban Item
111
+ <% end %>
112
+ <%= pb_rails("card") do %>
113
+ Kanban Item
114
+ <% end %>
115
+ <% end %>
116
+ <%= pb_rails("layout/body") do %>
117
+ <%= pb_rails("caption", props: {text: 'Another Column'}) %>
118
+ <%= pb_rails("card") do %>
119
+ Kanban Item
120
+ <% end %>
121
+ <%= pb_rails("card") do %>
122
+ Kanban Item
123
+ <% end %>
124
+ <%= pb_rails("card") do %>
125
+ Kanban Item
126
+ <% end %>
127
+ <% end %>
128
+ <%= pb_rails("layout/body") do %>
129
+ <%= pb_rails("caption", props: {text: 'A Final Column'}) %>
130
+ <%= pb_rails("card") do %>
131
+ Kanban Item
132
+ <% end %>
133
+ <%= pb_rails("card") do %>
134
+ Kanban Item
135
+ <% end %>
136
+ <%= pb_rails("card") do %>
137
+ Kanban Item
138
+ <% end %>
139
+ <% end %>
140
+ <% end %>
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