@zendeskgarden/react-avatars 9.0.0-next.23 → 9.0.0-next.24

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 (9) hide show
  1. package/dist/esm/styled/StyledAvatar.js +7 -7
  2. package/dist/esm/styled/StyledStandaloneStatus.js +1 -1
  3. package/dist/esm/styled/StyledStandaloneStatusCaption.js +1 -1
  4. package/dist/esm/styled/StyledStandaloneStatusIndicator.js +1 -1
  5. package/dist/esm/styled/StyledStatusIndicator.js +7 -3
  6. package/dist/esm/styled/StyledStatusIndicatorBase.js +2 -2
  7. package/dist/esm/styled/StyledText.js +1 -1
  8. package/dist/index.cjs.js +20 -16
  9. package/package.json +4 -4
package/dist/esm/styled/StyledAvatar.js CHANGED
@@ -17,15 +17,15 @@ const badgeStyles = props => {
17
17
  const [xxs, xs, s, m, l] = SIZE;
18
18
  let position = `${props.theme.space.base * -1}px`;
19
19
  switch (props.$size) {
20
- case s:
21
- case m:
22
- position = math(`${position} + 2`);
23
- break;
24
20
  case xxs:
25
21
  case xs:
26
- case l:
27
22
  position = math(`${position} + 3`);
28
23
  break;
24
+ case s:
25
+ case m:
26
+ case l:
27
+ position = math(`${position} + 2`);
28
+ break;
29
29
  }
30
30
  const animation = keyframes(["0%{transform:scale(.1);}"]);
31
31
  return css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.$status === 'active' && css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
@@ -63,7 +63,7 @@ const colorStyles = _ref => {
63
63
  theme
64
64
  });
65
65
  } else {
66
- surfaceColor = $surfaceColor || 'transparent';
66
+ surfaceColor = 'transparent';
67
67
  }
68
68
  return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
69
69
  };
@@ -108,7 +108,7 @@ const sizeStyles = props => {
108
108
  };
109
109
  const StyledAvatar = styled.figure.attrs({
110
110
  'data-garden-id': COMPONENT_ID,
111
- 'data-garden-version': '9.0.0-next.23'
111
+ 'data-garden-version': '9.0.0-next.24'
112
112
  }).withConfig({
113
113
  displayName: "StyledAvatar",
114
114
  componentId: "sc-608m04-0"
package/dist/esm/styled/StyledStandaloneStatus.js CHANGED
@@ -11,7 +11,7 @@ import { TRANSITION_DURATION } from './utility.js';
11
11
  const COMPONENT_ID = 'avatars.status-indicator.status';
12
12
  const StyledStandaloneStatus = styled.figure.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.23'
14
+ 'data-garden-version': '9.0.0-next.24'
15
15
  }).withConfig({
16
16
  displayName: "StyledStandaloneStatus",
17
17
  componentId: "sc-1ow4nfj-0"
package/dist/esm/styled/StyledStandaloneStatusCaption.js CHANGED
@@ -14,7 +14,7 @@ function sizeStyles(props) {
14
14
  }
15
15
  const StyledStandaloneStatusCaption = styled.figcaption.attrs({
16
16
  'data-garden-id': COMPONENT_ID,
17
- 'data-garden-version': '9.0.0-next.23'
17
+ 'data-garden-version': '9.0.0-next.24'
18
18
  }).withConfig({
19
19
  displayName: "StyledStandaloneStatusCaption",
20
20
  componentId: "sc-aalyk1-0"
package/dist/esm/styled/StyledStandaloneStatusIndicator.js CHANGED
@@ -12,7 +12,7 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
12
12
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
13
13
  const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
14
14
  'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.0.0-next.23'
15
+ 'data-garden-version': '9.0.0-next.24'
16
16
  }).withConfig({
17
17
  displayName: "StyledStandaloneStatusIndicator",
18
18
  componentId: "sc-1xt1heq-0"
package/dist/esm/styled/StyledStatusIndicator.js CHANGED
@@ -34,19 +34,23 @@ const colorStyles = _ref => {
34
34
  } = _ref;
35
35
  const shadowSize = $size === xxs ? 'xs' : 'sm';
36
36
  let boxShadow;
37
+ const surfaceColor = $surfaceColor?.includes('.') ? getColor({
38
+ variable: $surfaceColor,
39
+ theme
40
+ }) : $surfaceColor;
37
41
  if ($type) {
38
- boxShadow = theme.shadows[shadowSize]($surfaceColor || getColor({
42
+ boxShadow = theme.shadows[shadowSize](surfaceColor || getColor({
39
43
  theme,
40
44
  variable: 'background.default'
41
45
  }));
42
46
  } else {
43
- boxShadow = theme.shadows[shadowSize]($surfaceColor || theme.palette.white);
47
+ boxShadow = theme.shadows[shadowSize](surfaceColor || theme.palette.white);
44
48
  }
45
49
  return css(["border-color:", ";box-shadow:", ";"], $borderColor, boxShadow);
46
50
  };
47
51
  const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
48
52
  'data-garden-id': COMPONENT_ID,
49
- 'data-garden-version': '9.0.0-next.23'
53
+ 'data-garden-version': '9.0.0-next.24'
50
54
  }).withConfig({
51
55
  displayName: "StyledStatusIndicator",
52
56
  componentId: "sc-16t9if3-0"
package/dist/esm/styled/StyledStatusIndicatorBase.js CHANGED
@@ -13,7 +13,7 @@ const iconFadeIn = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
13
13
  const sizeStyles = props => {
14
14
  const offset = getStatusBorderOffset(props);
15
15
  const size = getStatusSize(props, offset);
16
- return css(["border:", " ", ";border-radius:", ";width:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
16
+ return css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
17
17
  };
18
18
  const colorStyles = _ref => {
19
19
  let {
@@ -40,7 +40,7 @@ const colorStyles = _ref => {
40
40
  };
41
41
  const StyledStatusIndicatorBase = styled.div.attrs({
42
42
  'data-garden-id': COMPONENT_ID,
43
- 'data-garden-version': '9.0.0-next.23'
43
+ 'data-garden-version': '9.0.0-next.24'
44
44
  }).withConfig({
45
45
  displayName: "StyledStatusIndicatorBase",
46
46
  componentId: "sc-1rininy-0"
package/dist/esm/styled/StyledText.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'avatars.text';
11
11
  const StyledText = styled.span.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.23'
13
+ 'data-garden-version': '9.0.0-next.24'
14
14
  }).withConfig({
15
15
  displayName: "StyledText",
16
16
  componentId: "sc-1a6hivh-0"
package/dist/index.cjs.js CHANGED
@@ -122,7 +122,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
122
122
  const COMPONENT_ID$6 = 'avatars.text';
123
123
  const StyledText = styled__default.default.span.attrs({
124
124
  'data-garden-id': COMPONENT_ID$6,
125
- 'data-garden-version': '9.0.0-next.23'
125
+ 'data-garden-version': '9.0.0-next.24'
126
126
  }).withConfig({
127
127
  displayName: "StyledText",
128
128
  componentId: "sc-1a6hivh-0"
@@ -218,7 +218,7 @@ const iconFadeIn = styled.keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
218
218
  const sizeStyles$3 = props => {
219
219
  const offset = getStatusBorderOffset(props);
220
220
  const size = getStatusSize(props, offset);
221
- return styled.css(["border:", " ", ";border-radius:", ";width:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
221
+ return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";height:", ";line-height:", ";& > svg{position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;animation:", " ", "s;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], offset, props.theme.borderStyles.solid, size, size, size, size, offset, offset, iconFadeIn, TRANSITION_DURATION, props.theme.rtl ? -1 : 1);
222
222
  };
223
223
  const colorStyles$2 = _ref => {
224
224
  let {
@@ -245,7 +245,7 @@ const colorStyles$2 = _ref => {
245
245
  };
246
246
  const StyledStatusIndicatorBase = styled__default.default.div.attrs({
247
247
  'data-garden-id': COMPONENT_ID$5,
248
- 'data-garden-version': '9.0.0-next.23'
248
+ 'data-garden-version': '9.0.0-next.24'
249
249
  }).withConfig({
250
250
  displayName: "StyledStatusIndicatorBase",
251
251
  componentId: "sc-1rininy-0"
@@ -278,19 +278,23 @@ const colorStyles$1 = _ref => {
278
278
  } = _ref;
279
279
  const shadowSize = $size === xxs ? 'xs' : 'sm';
280
280
  let boxShadow;
281
+ const surfaceColor = $surfaceColor?.includes('.') ? reactTheming.getColor({
282
+ variable: $surfaceColor,
283
+ theme
284
+ }) : $surfaceColor;
281
285
  if ($type) {
282
- boxShadow = theme.shadows[shadowSize]($surfaceColor || reactTheming.getColor({
286
+ boxShadow = theme.shadows[shadowSize](surfaceColor || reactTheming.getColor({
283
287
  theme,
284
288
  variable: 'background.default'
285
289
  }));
286
290
  } else {
287
- boxShadow = theme.shadows[shadowSize]($surfaceColor || theme.palette.white);
291
+ boxShadow = theme.shadows[shadowSize](surfaceColor || theme.palette.white);
288
292
  }
289
293
  return styled.css(["border-color:", ";box-shadow:", ";"], $borderColor, boxShadow);
290
294
  };
291
295
  const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
292
296
  'data-garden-id': COMPONENT_ID$4,
293
- 'data-garden-version': '9.0.0-next.23'
297
+ 'data-garden-version': '9.0.0-next.24'
294
298
  }).withConfig({
295
299
  displayName: "StyledStatusIndicator",
296
300
  componentId: "sc-16t9if3-0"
@@ -305,15 +309,15 @@ const badgeStyles = props => {
305
309
  const [xxs, xs, s, m, l] = SIZE;
306
310
  let position = `${props.theme.space.base * -1}px`;
307
311
  switch (props.$size) {
308
- case s:
309
- case m:
310
- position = polished.math(`${position} + 2`);
311
- break;
312
312
  case xxs:
313
313
  case xs:
314
- case l:
315
314
  position = polished.math(`${position} + 3`);
316
315
  break;
316
+ case s:
317
+ case m:
318
+ case l:
319
+ position = polished.math(`${position} + 2`);
320
+ break;
317
321
  }
318
322
  const animation = styled.keyframes(["0%{transform:scale(.1);}"]);
319
323
  return styled.css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.$status === 'active' && styled.css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
@@ -351,7 +355,7 @@ const colorStyles = _ref => {
351
355
  theme
352
356
  });
353
357
  } else {
354
- surfaceColor = $surfaceColor || 'transparent';
358
+ surfaceColor = 'transparent';
355
359
  }
356
360
  return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
357
361
  };
@@ -396,7 +400,7 @@ const sizeStyles$1 = props => {
396
400
  };
397
401
  const StyledAvatar = styled__default.default.figure.attrs({
398
402
  'data-garden-id': COMPONENT_ID$3,
399
- 'data-garden-version': '9.0.0-next.23'
403
+ 'data-garden-version': '9.0.0-next.24'
400
404
  }).withConfig({
401
405
  displayName: "StyledAvatar",
402
406
  componentId: "sc-608m04-0"
@@ -409,7 +413,7 @@ StyledAvatar.defaultProps = {
409
413
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
410
414
  const StyledStandaloneStatus = styled__default.default.figure.attrs({
411
415
  'data-garden-id': COMPONENT_ID$2,
412
- 'data-garden-version': '9.0.0-next.23'
416
+ 'data-garden-version': '9.0.0-next.24'
413
417
  }).withConfig({
414
418
  displayName: "StyledStandaloneStatus",
415
419
  componentId: "sc-1ow4nfj-0"
@@ -425,7 +429,7 @@ function sizeStyles(props) {
425
429
  }
426
430
  const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
427
431
  'data-garden-id': COMPONENT_ID$1,
428
- 'data-garden-version': '9.0.0-next.23'
432
+ 'data-garden-version': '9.0.0-next.24'
429
433
  }).withConfig({
430
434
  displayName: "StyledStandaloneStatusCaption",
431
435
  componentId: "sc-aalyk1-0"
@@ -437,7 +441,7 @@ StyledStandaloneStatusCaption.defaultProps = {
437
441
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
438
442
  const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
439
443
  'data-garden-id': COMPONENT_ID,
440
- 'data-garden-version': '9.0.0-next.23'
444
+ 'data-garden-version': '9.0.0-next.24'
441
445
  }).withConfig({
442
446
  displayName: "StyledStandaloneStatusIndicator",
443
447
  componentId: "sc-1xt1heq-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "9.0.0-next.23",
3
+ "version": "9.0.0-next.24",
4
4
  "description": "Components relating to avatars in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,8 +31,8 @@
31
31
  "styled-components": "^5.3.1"
32
32
  },
33
33
  "devDependencies": {
34
- "@zendeskgarden/react-dropdowns": "^9.0.0-next.23",
35
- "@zendeskgarden/react-theming": "^9.0.0-next.23",
34
+ "@zendeskgarden/react-dropdowns": "^9.0.0-next.24",
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.24",
36
36
  "@zendeskgarden/svg-icons": "7.2.0"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
48
+ "gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
49
49
  }