playbook_ui_docs 14.5.0.pre.alpha.PBNTR568dropdowncleaning4044 → 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,97 @@
1
+ import React from 'react'
2
+ import Flex from '../../pb_flex/_flex'
3
+ import Title from '../../pb_title/_title'
4
+ import MultipleUsersStacked from '../_multiple_users_stacked'
5
+
6
+ const MultipleUsersStackedSize = (props) => {
7
+ const sizes = [
8
+ { label: 'S', size: 'sm' },
9
+ { label: 'M', size: 'md' },
10
+ { label: 'L', size: 'lg' },
11
+ { label: 'XL', size: 'xl' },
12
+ ]
13
+
14
+ const usersList = [
15
+ [
16
+ {
17
+ name: 'Patrick Welch',
18
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
19
+ },
20
+ ],
21
+ [
22
+ {
23
+ name: 'Patrick Welch',
24
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
25
+ },
26
+ {
27
+ name: 'Lucille Sanchez',
28
+ imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
29
+ },
30
+ ],
31
+ [
32
+ {
33
+ name: 'Patrick Welch',
34
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
35
+ },
36
+ {
37
+ name: 'Lucille Sanchez',
38
+ imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
39
+ },
40
+ {
41
+ name: 'Beverly Reyes',
42
+ imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
43
+ },
44
+ ],
45
+ [
46
+ {
47
+ name: 'Patrick Welch',
48
+ imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
49
+ },
50
+ {
51
+ name: 'Lucille Sanchez',
52
+ imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
53
+ },
54
+ {
55
+ name: 'Beverly Reyes',
56
+ imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
57
+ },
58
+ {
59
+ name: 'Keith Craig',
60
+ imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
61
+ },
62
+ {
63
+ name: 'Alicia Cooper',
64
+ imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
65
+ },
66
+ ],
67
+ ]
68
+
69
+ return (
70
+ <>
71
+ {sizes.map(({ label, size }) => (
72
+ <Flex key={size}
73
+ orientation="column"
74
+ >
75
+ <Title paddingTop='sm' >{label}</Title>
76
+ <Flex>
77
+ {usersList.map((users, index) => (
78
+ <Flex key={index}
79
+ paddingRight='sm'
80
+ >
81
+ <MultipleUsersStacked
82
+ size={size}
83
+ users={users}
84
+ variant="bubble"
85
+ {...props}
86
+ />
87
+ </Flex>
88
+ ))}
89
+ </Flex>
90
+ <br />
91
+ </Flex>
92
+ ))}
93
+ </>
94
+ )
95
+ }
96
+
97
+ export default MultipleUsersStackedSize
@@ -3,11 +3,13 @@ examples:
3
3
  rails:
4
4
  - multiple_users_stacked_default: Default
5
5
  - multiple_users_stacked_bubble: Bubble
6
+ - multiple_users_stacked_size: Sizes
6
7
 
7
8
 
8
9
  react:
9
10
  - multiple_users_stacked_default: Default
10
11
  - multiple_users_stacked_bubble: Bubble
12
+ - multiple_users_stacked_size: Sizes
11
13
 
12
14
  swift:
13
15
  - multiple_users_stacked_default_swift: Default
@@ -1,2 +1,3 @@
1
1
  export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
2
2
  export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
3
+ export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'
@@ -14,7 +14,7 @@
14
14
  trigger_element_id: "regular-popover-1",
15
15
  tooltip_id: "tooltip-1",
16
16
  offset: true,
17
- position: "top"
17
+ position: "top",
18
18
  }) do %>
19
19
  I'm a popover. I can show content of any size.
20
20
  <% end %>