playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
  3. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  4. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  5. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
  6. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  9. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  12. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  13. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  14. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  15. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  20. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +12 -2
  21. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +2 -1
  22. data/dist/chunks/_weekday_stacked-CDe9cyw6.js +45 -0
  23. data/dist/chunks/vendor.js +1 -1
  24. data/dist/playbook-doc.js +1 -1
  25. data/dist/playbook.css +1 -1
  26. data/lib/playbook/version.rb +1 -1
  27. metadata +7 -3
  28. data/dist/chunks/_weekday_stacked-BbASNHK_.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d42f1110a8a20f8551570f0838a04c79c4101cd23e99dcfd4de572eae0311937
4
- data.tar.gz: ac930a9c82feef01f65ed6e7a75a99dee87d543953c29a7c95627edb359d6e57
3
+ metadata.gz: f54238916554d7fc5db336d5fd9f600012d2d3451b1232364a9a6f70276f6241
4
+ data.tar.gz: 2081782f7da94b64103e5a4beeb61a34c3fd1d3c9e4d99979388d4042ec5edae
5
5
  SHA512:
6
- metadata.gz: 127549a61089ed9a07131d295dd1b2ae709b305f9088fd8ce8020bb4abcf524da905da22d6404d9d458cc271a2f58456559d031554831fe2a3ea8acbaa71133a
7
- data.tar.gz: 91e89aaa949bda7c4cd680737dd78d977a88d69af7bebdc5da2f4fd296da84be60746d178e7f9712a3042866c9d21f146fd5f5a1ee3bbc1a47bfb5968bb62851
6
+ metadata.gz: c6fffc6c90ba549db56e62d9db74f412ad6d86a52b6ff9dfd1329c33a385226086d547cdbc046555c908cb408c2d262c33b541c63d4e3193bc961bed58475c72
7
+ data.tar.gz: 2e8ffc641e46dd560aeb456042d3f437a152e4341836f2d5ffdf87872264663076c1d0d4f6d8e30ebe80f346aca768764cbb5d57b4280137a63a9b182d5ca019
@@ -1,4 +1,4 @@
1
- import React, { useState, useRef, useEffect } from "react";
1
+ import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
2
2
  import classnames from "classnames";
3
3
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
4
  import { globalProps } from "../utilities/globalProps";
@@ -38,7 +38,14 @@ type DropdownProps = {
38
38
  triggerRef?: any;
39
39
  };
40
40
 
41
- const Dropdown = (props: DropdownProps) => {
41
+ interface DropdownComponent
42
+ extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
43
+ Option: typeof DropdownOption;
44
+ Trigger: typeof DropdownTrigger;
45
+ Container: typeof DropdownContainer;
46
+ }
47
+
48
+ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
42
49
  const {
43
50
  aria = {},
44
51
  autocomplete = false,
@@ -125,7 +132,7 @@ const Dropdown = (props: DropdownProps) => {
125
132
  const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
126
133
  const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
127
134
  return String(label).toLowerCase().includes(filterItem.toLowerCase());
128
- });
135
+ });
129
136
 
130
137
  // For keyboard accessibility: Set focus within dropdown to selected item if it exists
131
138
  useEffect(() => {
@@ -175,6 +182,14 @@ const Dropdown = (props: DropdownProps) => {
175
182
  dark
176
183
  });
177
184
 
185
+ useImperativeHandle(ref, () => ({
186
+ clearSelected: () => {
187
+ setSelected({});
188
+ setFilterItem("");
189
+ setIsDropDownClosed(true);
190
+ onSelect && onSelect(null);
191
+ },
192
+ }));
178
193
 
179
194
  return (
180
195
  <div {...ariaProps}
@@ -258,8 +273,9 @@ const Dropdown = (props: DropdownProps) => {
258
273
  </DropdownContext.Provider>
259
274
  </div>
260
275
  )
261
- };
276
+ }) as DropdownComponent
262
277
 
278
+ Dropdown.displayName = "Dropdown";
263
279
  Dropdown.Option = DropdownOption;
264
280
  Dropdown.Trigger = DropdownTrigger;
265
281
  Dropdown.Container = DropdownContainer;
@@ -0,0 +1,45 @@
1
+ import React, { useRef } from 'react'
2
+ import { Button, Dropdown } from 'playbook-ui'
3
+
4
+ const options = [
5
+ {
6
+ label: "United States",
7
+ value: "United States",
8
+ },
9
+ {
10
+ label: "Canada",
11
+ value: "Canada",
12
+ },
13
+ {
14
+ label: "Pakistan",
15
+ value: "Pakistan",
16
+ }
17
+ ]
18
+
19
+ const DropdownClearSelection = (props) => {
20
+ const dropdownRef = useRef(null)
21
+
22
+ const handleReset = () => {
23
+ if (dropdownRef.current) {
24
+ dropdownRef.current.clearSelected()
25
+ }
26
+ }
27
+
28
+ return (
29
+ <>
30
+ <Dropdown
31
+ defaultValue={options[2]}
32
+ options={options}
33
+ ref={dropdownRef}
34
+ {...props}
35
+ />
36
+ <Button
37
+ marginTop="md"
38
+ onClick={handleReset}
39
+ text="Reset"
40
+ />
41
+ </>
42
+ )
43
+ }
44
+
45
+ export default DropdownClearSelection
@@ -0,0 +1 @@
1
+ To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
@@ -22,6 +22,7 @@ examples:
22
22
  - dropdown_error: Dropdown with Error
23
23
  - dropdown_default_value: Default Value
24
24
  - dropdown_blank_selection: Blank Selection
25
+ - dropdown_clear_selection: Clear Selection
25
26
  # - dropdown_with_autocomplete: Autocomplete
26
27
  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
27
28
  # - dropdown_with_external_control: useDropdown Hook
@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
12
12
  export { default as DropdownError } from './_dropdown_error.jsx'
13
13
  export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
14
14
  export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
15
+ export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
62
62
  const focusedClass = isFocused && "focused";
63
63
 
64
64
  const selectedClass = `${
65
- selected.label === option.label
65
+ selected?.label === option.label
66
66
  ? "selected"
67
67
  : "list"
68
68
  }`;
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
73
73
  !autocomplete && "select_only"
74
74
  );
75
75
 
76
- const customDisplayPlaceholder = selected.label ? (
76
+ const customDisplayPlaceholder = selected?.label ? (
77
77
  <b>{selected.label}</b>
78
78
  ) : autocomplete ? (
79
79
  ""
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
83
83
  "Select..."
84
84
  );
85
85
 
86
- const defaultDisplayPlaceholder = selected.label
86
+ const defaultDisplayPlaceholder = selected?.label
87
87
  ? selected.label
88
88
  : autocomplete
89
89
  ? ""
@@ -13,6 +13,7 @@ type ResultsCountProps = {
13
13
  const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
14
14
 
15
15
  const resultTitle = () => {
16
+ if (results == null) return null
16
17
  return (
17
18
  <TitleCount
18
19
  align="center"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
24
25
  }
25
26
 
26
27
  const justResults = () => {
28
+ if (results == null) return null
27
29
  return (
28
30
  <Caption
29
31
  className="filter-results"
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
35
37
  }
36
38
 
37
39
  const displayResultsCount = () => {
38
- if (results && title) {
40
+ if (results != null && results >=0 && title) {
39
41
  return (
40
42
  <>
41
43
  {resultTitle()}
42
44
  </>
43
45
  )
44
- } else if (results) {
46
+ } else if (results !=null && results >=0 ) {
45
47
  return (
46
48
  <>
47
49
  {justResults()}
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
78
78
  double
79
79
  minWidth="375px"
80
80
  onSortChange={SortingChangeCallback}
81
- results={1}
81
+ results={0}
82
82
  sortOptions={{
83
83
  popularity: 'Popularity',
84
84
  // eslint-disable-next-line
@@ -3,6 +3,76 @@
3
3
  @import "../tokens/opacity";
4
4
  @import "../pb_avatar/avatar";
5
5
 
6
+ $sizes: (
7
+ "avatar": ("sm": 38px, "md": 60px, "lg": 80px, "xl": 100px),
8
+ "first-item-double": ("sm": 20px, "md": 32px, "lg": 44px, "xl": 56px),
9
+ "first-item-triple": ("sm": 16px, "md": 24px, "lg": 32px, "xl": 44px),
10
+ "first-item-quadruple": ("sm": 16px, "md": 28px, "lg": 36px, "xl": 44px),
11
+ "second-item-double": ("sm": 12px, "md": 16px, "lg": 20px, "xl": 24px),
12
+ "second-item-triple": ("sm": 12px, "md": 20px, "lg": 24px, "xl": 32px),
13
+ "second-item-quadruple": ("sm": 12px, "md": 20px, "lg": 28px, "xl": 32px),
14
+ "third-item-triple": ("sm": 10px, "md": 16px, "lg": 20px, "xl": 24px),
15
+ "third-item-quadruple": ("sm": 10px, "md": 16px, "lg": 24px, "xl": 24px),
16
+ "fourth-item": ("sm": 8px, "md": 12px, "lg": 16px, "xl": 16px)
17
+ );
18
+
19
+ $positions: (
20
+ "second-item-double": (
21
+ "sm": ("top": null, "bottom": 5px, "right": 4px, "left": null),
22
+ "md": ("top": null, "bottom": 10px, "right": 8px, "left": null),
23
+ "lg": ("top": 46px, "bottom": null, "right": 12px, "left": null),
24
+ "xl": ("top": 58px, "bottom": null, "right": 14px, "left": null)
25
+ ),
26
+ "second-item-triple": (
27
+ "sm": ("top": 12px, "bottom": null, "right": 2px, "left": null),
28
+ "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
29
+ "lg": ("top": 32px, "bottom": null, "right": 9px, "left": null),
30
+ "xl": ("top": 41px, "bottom": null, "right": 11px, "left": null)
31
+ ),
32
+ "second-item-quadruple": (
33
+ "sm": ("top": null, "bottom": 9px, "right": 4px, "left": null),
34
+ "md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
35
+ "lg": ("top": 31px, "bottom": null, "right": 6px, "left": null),
36
+ "xl": ("top": 43px, "bottom": null, "right": 9px, "left": null)
37
+ ),
38
+ "third-item-triple": (
39
+ "sm": ("top": null, "bottom": 3px, "right": null, "left": 11px),
40
+ "md": ("top": null, "bottom": 6px, "right": null, "left": 16px),
41
+ "lg": ("top": null, "bottom": 10px, "right": null, "left": 23px),
42
+ "xl": ("top": null, "bottom": 13px, "right": null, "left": 27px)
43
+ ),
44
+ "third-item-quadruple": (
45
+ "sm": ("top": null, "bottom": 3px, "right": null, "left": 9px),
46
+ "md": ("top": null, "bottom": 5px, "right": null, "left": 15px),
47
+ "lg": ("top": null, "bottom": 7px, "right": null, "left": 20px),
48
+ "xl": ("top": null, "bottom": 11px, "right": null, "left": 27px)
49
+ ),
50
+ "fourth-item": (
51
+ "sm": ("top": 5px, "bottom": null, "right": 6px, "left": null),
52
+ "md": ("top": 7px, "bottom": null, "right": 12px, "left": null),
53
+ "lg": ("top": 9px, "bottom": null, "right": 16px, "left": null),
54
+ "xl": ("top": 16px, "bottom": null, "right": 24px, "left": null)
55
+ ),
56
+ "first-item-double": (
57
+ "sm": ("top": 4px, "bottom": null, "right": null, "left": 3px),
58
+ "md": ("top": 6px, "bottom": null, "right": null, "left": 8px),
59
+ "lg": ("top": 8px, "bottom": null, "right": null, "left": 8px),
60
+ "xl": ("top": 10px, "bottom": null, "right": null, "left": 10px)
61
+ ),
62
+ "first-item-triple": (
63
+ "sm": ("top": 4px, "bottom": null, "right": null, "left": 4px),
64
+ "md": ("top": 7px, "bottom": null, "right": null, "left": 7px),
65
+ "lg": ("top": 10px, "bottom": null, "right": null, "left": 10px),
66
+ "xl": ("top": 12px, "bottom": null, "right": null, "left": 12px)
67
+ ),
68
+ "first-item-quadruple": (
69
+ "sm": ("top": 5px, "bottom": null, "right": null, "left": 3px),
70
+ "md": ("top": 7px, "bottom": null, "right": null, "left": 5px),
71
+ "lg": ("top": 9px, "bottom": null, "right": null, "left": 7px),
72
+ "xl": ("top": 16px, "bottom": null, "right": null, "left": 10px)
73
+ )
74
+ );
75
+
6
76
  @mixin avatar-size($size) {
7
77
  height: $size;
8
78
  width: $size;
@@ -27,8 +97,8 @@
27
97
  $stacked_size: 18px;
28
98
  $max_to_display: 1, 2;
29
99
  display: inline-flex;
30
- width: $container_size;
31
- height: $container_size;
100
+ width: 28px;
101
+ height: 28px;
32
102
  flex-basis: $container_size;
33
103
  position: relative;
34
104
  flex-shrink: 0;
@@ -48,7 +118,7 @@
48
118
  }
49
119
  }
50
120
  &[class*=_single] .pb_multiple_users_stacked_item {
51
- @include avatar-size($container_size);
121
+ @include avatar-size(28px);
52
122
  }
53
123
  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
54
124
  @include position((bottom: 0, right: 0));
@@ -71,72 +141,106 @@
71
141
  color: transparent;
72
142
  }
73
143
 
74
- &[class*=_bubble] {
75
- @include avatar-size($bubble_container_size);
76
- background-color: $bg_light;
77
- border-radius: 50%;
78
-
79
- &.dark {
80
- background-color: $card_dark;
81
- }
82
-
83
- [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
84
- &.dark {
85
- .avatar_wrapper {
86
- border: $border_size solid $border_dark;
87
- }
88
- }
89
- }
90
-
91
- [class^=pb_avatar_kit] {
92
- &.first_item {
93
- @include position((top: 4px, left: 3px));
94
- @include avatar-size(20px);
95
-
96
- &.triple_bubble {
97
- @include position((top: 4px, left: 4px));
98
- @include avatar-size(16px);
144
+ // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
145
+ @each $size_name, $size_value in $avatar-sizes {
146
+ &[class*=_bubble_][class*=_size_#{$size_name}] {
147
+ // Set bubble container size based on the class
148
+ $bubble_container_size: $size_value;
149
+ $container_size: $size_value;
150
+
151
+ // Apply the bubble container size
152
+ @include avatar-size($bubble_container_size);
153
+ width: $bubble_container_size;
154
+ height: $bubble_container_size;
155
+ flex-basis: $bubble_container_size;
156
+
157
+ background-color: $bg_light;
158
+ border-radius: 50%;
159
+
160
+ &.dark {
161
+ background-color: $card_dark;
99
162
  }
100
-
101
- &.quadruple_bubble {
102
- @include position((top: 5px, left: 3px));
103
- @include avatar-size(16px);
104
- }
105
- }
106
-
107
- &.second_item {
108
- @include position((bottom: 5px, right: 4px));
109
- @include avatar-size(12px);
110
-
111
- &.triple_bubble {
112
- @include position((top: 13px, right: 2px));
163
+
164
+ [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
165
+ @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
166
+
167
+ &.dark {
168
+ .avatar_wrapper {
169
+ border: $border_size solid $border_dark;
170
+ }
171
+ }
172
+
173
+ .avatar_wrapper {
174
+ border: $border_size solid $white;
175
+ }
113
176
  }
114
-
115
- &.quadruple_bubble {
116
- @include position((bottom: 9px, right: 4px));
177
+
178
+ [class^=pb_avatar_kit] {
179
+ // First Item
180
+ &.first_item {
181
+ @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
182
+ @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
183
+
184
+ &.double_bubble {
185
+ @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
186
+ @include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
187
+ }
188
+
189
+ &.triple_bubble {
190
+ @include position(map-get(map-get($positions, 'first-item-triple'), $size_name));
191
+ @include avatar-size(map-get(map-get($sizes, 'first-item-triple'), $size_name));
192
+ }
193
+
194
+ &.quadruple_bubble {
195
+ @include position(map-get(map-get($positions, 'first-item-quadruple'), $size_name));
196
+ @include avatar-size(map-get(map-get($sizes, 'first-item-quadruple'), $size_name));
197
+ }
198
+ }
199
+
200
+ // Second Item
201
+ &.second_item {
202
+ @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
203
+
204
+ &.double_bubble {
205
+ @include position(map-get(map-get($positions, 'second-item-double'), $size_name));
206
+ @include avatar-size(map-get(map-get($sizes, 'second-item-double'), $size_name));
207
+ }
208
+
209
+ &.triple_bubble {
210
+ @include position(map-get(map-get($positions, 'second-item-triple'), $size_name));
211
+ @include avatar-size(map-get(map-get($sizes, 'second-item-triple'), $size_name));
212
+ }
213
+
214
+ &.quadruple_bubble {
215
+ @include position(map-get(map-get($positions, 'second-item-quadruple'), $size_name));
216
+ @include avatar-size(map-get(map-get($sizes, 'second-item-quadruple'), $size_name));
217
+ }
218
+ }
219
+
220
+ // Third Item
221
+ &.third_item {
222
+ @include position(map-get(map-get($positions, 'third-item-triple'), $size_name));
223
+ @include avatar-size(map-get(map-get($sizes, 'third-item-triple'), $size_name));
224
+
225
+ &.quadruple_bubble {
226
+ @include position(map-get(map-get($positions, 'third-item-quadruple'), $size_name));
227
+ @include avatar-size(map-get(map-get($sizes, 'third-item-quadruple'), $size_name));
228
+ }
229
+ }
230
+
231
+ // Fourth Item
232
+ &.fourth_item {
233
+ @include position(map-get(map-get($positions, 'fourth-item'), $size_name));
234
+ @include avatar-size(map-get(map-get($sizes, 'fourth-item'), $size_name));
235
+ }
117
236
  }
118
- }
119
-
120
- &.third_item {
121
- @include position((bottom: 3px, left: 11px));
122
- @include avatar-size(10px);
123
-
124
- &.quadruple_bubble {
125
- @include position((bottom: 3px, left: 9px));
237
+
238
+ &[class*=_single_bubble] {
239
+ [class^=pb_avatar_kit].first_item {
240
+ @include position((top: 0, left: 0));
241
+ @include avatar-size($bubble_container_size);
242
+ }
126
243
  }
127
244
  }
128
-
129
- &.fourth_item {
130
- @include position((top: 5px, right: 6px));
131
- @include avatar-size(8px);
132
- }
133
- }
134
- }
135
-
136
- &[class*=_single_bubble] {
137
- [class^=pb_avatar_kit].first_item {
138
- @include position((top: 0, left: 0));
139
- @include avatar-size($bubble_container_size);
140
245
  }
141
246
  }
142
- }
@@ -81,7 +81,7 @@ const MultipleUsersStackedSingleBubble = () => {
81
81
  test('should have a single bubble', () => {
82
82
  render(<MultipleUsersStackedSingleBubble />)
83
83
  const kit = screen.getByTestId(testId)
84
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
84
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble_size_sm")
85
85
 
86
86
  const firstItem = kit.querySelector('.first_item');
87
87
  expect(firstItem).toBeInTheDocument();
@@ -113,7 +113,7 @@ const MultipleUsersStackedDoubleBubble = () => {
113
113
  test('should have a double bubble', () => {
114
114
  render(<MultipleUsersStackedDoubleBubble />)
115
115
  const kit = screen.getByTestId(testId)
116
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
116
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
117
117
 
118
118
  const firstItem = kit.querySelector('.first_item');
119
119
  expect(firstItem).toBeInTheDocument();
@@ -153,7 +153,7 @@ const MultipleUsersStackedTripleBubble = () => {
153
153
  test('should have a triple bubble', () => {
154
154
  render(<MultipleUsersStackedTripleBubble />)
155
155
  const kit = screen.getByTestId(testId)
156
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
156
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
157
157
 
158
158
  const firstItem = kit.querySelector('.first_item');
159
159
  expect(firstItem).toBeInTheDocument();
@@ -208,7 +208,7 @@ const MultipleUsersStackedQuadrupleBubble = () => {
208
208
  test('should have a quadruple bubble', () => {
209
209
  render(<MultipleUsersStackedQuadrupleBubble />)
210
210
  const kit = screen.getByTestId(testId)
211
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
211
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
212
212
 
213
213
  const firstItem = kit.querySelector('.first_item');
214
214
  expect(firstItem).toBeInTheDocument();
@@ -224,4 +224,4 @@ test('should have a quadruple bubble', () => {
224
224
 
225
225
  const fourthItem = kit.querySelector('.fourth_item');
226
226
  expect(fourthItem).toBeInTheDocument();
227
- })
227
+ })
@@ -14,6 +14,7 @@ type MultipleUsersStackedProps = {
14
14
  data?: { [key: string]: string },
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  id?: string,
17
+ size?: "md" | "lg" | "sm" | "xl"
17
18
  users: Array<{ [key: string]: string }>,
18
19
  variant: "default" | "bubble",
19
20
  }
@@ -27,14 +28,17 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
27
28
  htmlOptions = {},
28
29
  id,
29
30
  users,
31
+ size = "sm",
30
32
  variant = "default",
31
33
  } = props
32
34
 
33
35
  const moreThanTwo = users.length > 2
34
36
  const onlyOne = users.length == 1
35
37
  const isBubble = variant === "bubble"
38
+ const doubleBubble = isBubble && users.length === 2
36
39
  const tripleBubble = isBubble && users.length === 3
37
40
  const quadrupleBubble = isBubble && users.length > 3
41
+ const sizeClass = isBubble ? `size_${size}` : ""
38
42
  const displayCount = () => {
39
43
  return moreThanTwo ? 1 : users.length
40
44
  }
@@ -43,17 +47,19 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
43
47
  const htmlProps = buildHtmlProps(htmlOptions)
44
48
  const classes = classnames(buildCss(
45
49
  'pb_multiple_users_stacked_kit',
46
- { single: onlyOne, bubble: isBubble }), globalProps(props), className)
50
+ { single: onlyOne, bubble: isBubble }, sizeClass),
51
+ globalProps(props),
52
+ className)
47
53
 
48
54
  const firstUser = () => {
49
55
  return users.slice(0, 1).map((userObject, index) => {
50
56
  return (
51
57
  <Avatar
52
58
  {...userObject}
53
- className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
59
+ className={`pb_multiple_users_stacked_item first_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
54
60
  dark={dark}
55
61
  key={index}
56
- size={isBubble ? "sm" : "xs"}
62
+ size={isBubble ? "md" : "xs"}
57
63
  />
58
64
  )
59
65
  })
@@ -65,10 +71,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
65
71
  return (
66
72
  <Avatar
67
73
  {...userObject}
68
- className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
74
+ className={`pb_multiple_users_stacked_item second_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
69
75
  dark={dark}
70
76
  key={index}
71
- size="xs"
77
+ size={isBubble ? "md" : "xs"}
72
78
  />
73
79
  )
74
80
  })
@@ -81,10 +87,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
81
87
  return (
82
88
  <Avatar
83
89
  {...userObject}
84
- className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
90
+ className={`pb_multiple_users_stacked_item third_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
85
91
  dark={dark}
86
92
  key={index}
87
- size="xs"
93
+ size="md"
88
94
  />
89
95
  )
90
96
  })
@@ -97,10 +103,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
97
103
  return (
98
104
  <Avatar
99
105
  {...userObject}
100
- className="pb_multiple_users_stacked_item fourth_item"
106
+ className="pb_multiple_users_stacked_item fourth_item quadruple_bubble"
101
107
  dark={dark}
102
108
  key={index}
103
- size="xs"
109
+ size="md"
104
110
  />
105
111
  )
106
112
  })