@zendeskgarden/react-avatars 9.0.0-next.20 → 9.0.0-next.22

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 (10) hide show
  1. package/dist/esm/styled/StyledAvatar.js +22 -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 +1 -1
  6. package/dist/esm/styled/StyledStatusIndicatorBase.js +1 -1
  7. package/dist/esm/styled/StyledText.js +1 -1
  8. package/dist/index.cjs.js +28 -13
  9. package/dist/typings/types/index.d.ts +17 -3
  10. package/package.json +4 -4
package/dist/esm/styled/StyledAvatar.js CHANGED
@@ -39,12 +39,27 @@ const colorStyles = _ref => {
39
39
  $status
40
40
  } = _ref;
41
41
  const statusColor = getStatusColor(theme, $status);
42
- const backgroundColor = $backgroundColor || 'transparent';
43
- const foregroundColor = $foregroundColor || theme.palette.white;
44
- const surfaceColor = $status ? $surfaceColor || getColor({
45
- variable: 'background.default',
46
- theme
47
- }) : 'transparent';
42
+ let backgroundColor = 'transparent';
43
+ let foregroundColor = theme.palette.white;
44
+ let surfaceColor = 'transparent';
45
+ if ($backgroundColor) {
46
+ backgroundColor = $backgroundColor.includes('.') ? getColor({
47
+ theme,
48
+ variable: $backgroundColor
49
+ }) : $backgroundColor;
50
+ }
51
+ if ($foregroundColor) {
52
+ foregroundColor = $foregroundColor.includes('.') ? getColor({
53
+ theme,
54
+ variable: $foregroundColor
55
+ }) : $foregroundColor;
56
+ }
57
+ if ($surfaceColor) {
58
+ surfaceColor = $surfaceColor.includes('.') ? getColor({
59
+ theme,
60
+ variable: $surfaceColor
61
+ }) : $surfaceColor;
62
+ }
48
63
  return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
49
64
  };
50
65
  const sizeStyles = props => {
@@ -88,7 +103,7 @@ const sizeStyles = props => {
88
103
  };
89
104
  const StyledAvatar = styled.figure.attrs({
90
105
  'data-garden-id': COMPONENT_ID,
91
- 'data-garden-version': '9.0.0-next.20'
106
+ 'data-garden-version': '9.0.0-next.22'
92
107
  }).withConfig({
93
108
  displayName: "StyledAvatar",
94
109
  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.20'
14
+ 'data-garden-version': '9.0.0-next.22'
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.20'
17
+ 'data-garden-version': '9.0.0-next.22'
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.20'
15
+ 'data-garden-version': '9.0.0-next.22'
16
16
  }).withConfig({
17
17
  displayName: "StyledStandaloneStatusIndicator",
18
18
  componentId: "sc-1xt1heq-0"
package/dist/esm/styled/StyledStatusIndicator.js CHANGED
@@ -46,7 +46,7 @@ const colorStyles = _ref => {
46
46
  };
47
47
  const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
48
48
  'data-garden-id': COMPONENT_ID,
49
- 'data-garden-version': '9.0.0-next.20'
49
+ 'data-garden-version': '9.0.0-next.22'
50
50
  }).withConfig({
51
51
  displayName: "StyledStatusIndicator",
52
52
  componentId: "sc-16t9if3-0"
package/dist/esm/styled/StyledStatusIndicatorBase.js CHANGED
@@ -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.20'
43
+ 'data-garden-version': '9.0.0-next.22'
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.20'
13
+ 'data-garden-version': '9.0.0-next.22'
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.20'
125
+ 'data-garden-version': '9.0.0-next.22'
126
126
  }).withConfig({
127
127
  displayName: "StyledText",
128
128
  componentId: "sc-1a6hivh-0"
@@ -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.20'
248
+ 'data-garden-version': '9.0.0-next.22'
249
249
  }).withConfig({
250
250
  displayName: "StyledStatusIndicatorBase",
251
251
  componentId: "sc-1rininy-0"
@@ -290,7 +290,7 @@ const colorStyles$1 = _ref => {
290
290
  };
291
291
  const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
292
292
  'data-garden-id': COMPONENT_ID$4,
293
- 'data-garden-version': '9.0.0-next.20'
293
+ 'data-garden-version': '9.0.0-next.22'
294
294
  }).withConfig({
295
295
  displayName: "StyledStatusIndicator",
296
296
  componentId: "sc-16t9if3-0"
@@ -327,12 +327,27 @@ const colorStyles = _ref => {
327
327
  $status
328
328
  } = _ref;
329
329
  const statusColor = getStatusColor(theme, $status);
330
- const backgroundColor = $backgroundColor || 'transparent';
331
- const foregroundColor = $foregroundColor || theme.palette.white;
332
- const surfaceColor = $status ? $surfaceColor || reactTheming.getColor({
333
- variable: 'background.default',
334
- theme
335
- }) : 'transparent';
330
+ let backgroundColor = 'transparent';
331
+ let foregroundColor = theme.palette.white;
332
+ let surfaceColor = 'transparent';
333
+ if ($backgroundColor) {
334
+ backgroundColor = $backgroundColor.includes('.') ? reactTheming.getColor({
335
+ theme,
336
+ variable: $backgroundColor
337
+ }) : $backgroundColor;
338
+ }
339
+ if ($foregroundColor) {
340
+ foregroundColor = $foregroundColor.includes('.') ? reactTheming.getColor({
341
+ theme,
342
+ variable: $foregroundColor
343
+ }) : $foregroundColor;
344
+ }
345
+ if ($surfaceColor) {
346
+ surfaceColor = $surfaceColor.includes('.') ? reactTheming.getColor({
347
+ theme,
348
+ variable: $surfaceColor
349
+ }) : $surfaceColor;
350
+ }
336
351
  return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
337
352
  };
338
353
  const sizeStyles$1 = props => {
@@ -376,7 +391,7 @@ const sizeStyles$1 = props => {
376
391
  };
377
392
  const StyledAvatar = styled__default.default.figure.attrs({
378
393
  'data-garden-id': COMPONENT_ID$3,
379
- 'data-garden-version': '9.0.0-next.20'
394
+ 'data-garden-version': '9.0.0-next.22'
380
395
  }).withConfig({
381
396
  displayName: "StyledAvatar",
382
397
  componentId: "sc-608m04-0"
@@ -389,7 +404,7 @@ StyledAvatar.defaultProps = {
389
404
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
390
405
  const StyledStandaloneStatus = styled__default.default.figure.attrs({
391
406
  'data-garden-id': COMPONENT_ID$2,
392
- 'data-garden-version': '9.0.0-next.20'
407
+ 'data-garden-version': '9.0.0-next.22'
393
408
  }).withConfig({
394
409
  displayName: "StyledStandaloneStatus",
395
410
  componentId: "sc-1ow4nfj-0"
@@ -405,7 +420,7 @@ function sizeStyles(props) {
405
420
  }
406
421
  const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
407
422
  'data-garden-id': COMPONENT_ID$1,
408
- 'data-garden-version': '9.0.0-next.20'
423
+ 'data-garden-version': '9.0.0-next.22'
409
424
  }).withConfig({
410
425
  displayName: "StyledStandaloneStatusCaption",
411
426
  componentId: "sc-aalyk1-0"
@@ -417,7 +432,7 @@ StyledStandaloneStatusCaption.defaultProps = {
417
432
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
418
433
  const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
419
434
  'data-garden-id': COMPONENT_ID,
420
- 'data-garden-version': '9.0.0-next.20'
435
+ 'data-garden-version': '9.0.0-next.22'
421
436
  }).withConfig({
422
437
  displayName: "StyledStandaloneStatusIndicator",
423
438
  componentId: "sc-1xt1heq-0"
package/dist/typings/types/index.d.ts CHANGED
@@ -8,11 +8,25 @@ import { HTMLAttributes } from 'react';
8
8
  export declare const SIZE: readonly ["extraextrasmall", "extrasmall", "small", "medium", "large"];
9
9
  export declare const STATUS: readonly ["available", "away", "transfers", "offline"];
10
10
  export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
11
- /** Sets the avatar background color */
11
+ /**
12
+ * Sets the avatar background color. Accepts a [color
13
+ * variable](/components/theme-object#colors) key (i.e.
14
+ * `background.emphasis`) to render based on light/dark mode, or any hex
15
+ * value.
16
+ */
12
17
  backgroundColor?: string;
13
- /** Sets the color for child SVG or `Avatar.Text` components */
18
+ /**
19
+ * Sets the color for child SVG or `Avatar.Text` components. Accepts a [color
20
+ * variable](/components/theme-object#colors) key (i.e.
21
+ * `foreground.onEmphasis`) to render based on light/dark mode, or any hex
22
+ * value.
23
+ */
14
24
  foregroundColor?: string;
15
- /** Provides surface color for an avatar placed on a non-white background */
25
+ /**
26
+ * Provides surface color for an avatar placed on a non-default background.
27
+ * Accepts a [color variable](/components/theme-object#colors) key (i.e.
28
+ * `background.primary`) to render based on light/dark mode, or any hex value.
29
+ */
16
30
  surfaceColor?: string;
17
31
  /** Applies system styling for representing objects, brands, or products */
18
32
  isSystem?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "9.0.0-next.20",
3
+ "version": "9.0.0-next.22",
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.20",
35
- "@zendeskgarden/react-theming": "^9.0.0-next.20",
34
+ "@zendeskgarden/react-dropdowns": "^9.0.0-next.22",
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.22",
36
36
  "@zendeskgarden/svg-icons": "7.1.1"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
48
+ "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
49
49
  }