@zendeskgarden/react-avatars 9.13.0 → 9.14.0

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 +17 -31
  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 +22 -36
  9. package/package.json +6 -6
package/dist/esm/styled/StyledAvatar.js CHANGED
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import styled, { css, keyframes } from 'styled-components';
8
- import { componentStyles, getColor } from '@zendeskgarden/react-theming';
8
+ import { componentStyles, getHueColor } from '@zendeskgarden/react-theming';
9
9
  import { math } from 'polished';
10
10
  import { SIZE } from '../types/index.js';
11
11
  import { StyledText } from './StyledText.js';
@@ -32,38 +32,24 @@ const badgeStyles = props => {
32
32
  };
33
33
  const colorStyles = ({
34
34
  theme,
35
- $foregroundColor,
36
- $surfaceColor,
37
- $backgroundColor,
35
+ $foregroundColor = theme.palette.white,
36
+ $surfaceColor = 'background.default',
37
+ $backgroundColor = 'transparent',
38
38
  $status
39
39
  }) => {
40
40
  const statusColor = getStatusColor(theme, $status);
41
- let backgroundColor = 'transparent';
42
- let foregroundColor = theme.palette.white;
43
- let surfaceColor;
44
- if ($backgroundColor) {
45
- backgroundColor = $backgroundColor.includes('.') ? getColor({
46
- theme,
47
- variable: $backgroundColor
48
- }) : $backgroundColor;
49
- }
50
- if ($foregroundColor) {
51
- foregroundColor = $foregroundColor.includes('.') ? getColor({
52
- theme,
53
- variable: $foregroundColor
54
- }) : $foregroundColor;
55
- }
56
- if ($status) {
57
- surfaceColor = $surfaceColor?.includes('.') ? getColor({
58
- variable: $surfaceColor,
59
- theme
60
- }) : $surfaceColor || getColor({
61
- variable: 'background.default',
62
- theme
63
- });
64
- } else {
65
- surfaceColor = 'transparent';
66
- }
41
+ const backgroundColor = getHueColor({
42
+ theme,
43
+ value: $backgroundColor
44
+ });
45
+ const foregroundColor = getHueColor({
46
+ theme,
47
+ value: $foregroundColor
48
+ });
49
+ const surfaceColor = $status ? getHueColor({
50
+ theme,
51
+ value: $surfaceColor
52
+ }) : 'transparent';
67
53
  return css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
68
54
  };
69
55
  const sizeStyles$1 = props => {
@@ -107,7 +93,7 @@ const sizeStyles$1 = props => {
107
93
  };
108
94
  const StyledAvatar = styled.figure.attrs(props => ({
109
95
  'data-garden-id': COMPONENT_ID$3,
110
- 'data-garden-version': '9.13.0',
96
+ 'data-garden-version': '9.14.0',
111
97
  $size: props.$size ?? 'medium'
112
98
  })).withConfig({
113
99
  displayName: "StyledAvatar",
package/dist/esm/styled/StyledStandaloneStatus.js CHANGED
@@ -11,7 +11,7 @@ import { TRANSITION_DURATION } from './utility.js';
11
11
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
12
12
  const StyledStandaloneStatus = styled.figure.attrs({
13
13
  'data-garden-id': COMPONENT_ID$2,
14
- 'data-garden-version': '9.13.0'
14
+ 'data-garden-version': '9.14.0'
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$1,
17
- 'data-garden-version': '9.13.0'
17
+ 'data-garden-version': '9.14.0'
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(props => ({
14
14
  'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.13.0',
15
+ 'data-garden-version': '9.14.0',
16
16
  $type: props.$type ?? 'offline'
17
17
  })).withConfig({
18
18
  displayName: "StyledStandaloneStatusIndicator",
package/dist/esm/styled/StyledStatusIndicator.js CHANGED
@@ -50,7 +50,7 @@ const colorStyles$1 = ({
50
50
  };
51
51
  const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs(props => ({
52
52
  'data-garden-id': COMPONENT_ID$4,
53
- 'data-garden-version': '9.13.0',
53
+ 'data-garden-version': '9.14.0',
54
54
  $size: props.$size ?? 'medium'
55
55
  })).withConfig({
56
56
  displayName: "StyledStatusIndicator",
package/dist/esm/styled/StyledStatusIndicatorBase.js CHANGED
@@ -39,7 +39,7 @@ const colorStyles$2 = ({
39
39
  };
40
40
  const StyledStatusIndicatorBase = styled.div.attrs({
41
41
  'data-garden-id': COMPONENT_ID$5,
42
- 'data-garden-version': '9.13.0'
42
+ 'data-garden-version': '9.14.0'
43
43
  }).withConfig({
44
44
  displayName: "StyledStatusIndicatorBase",
45
45
  componentId: "sc-1rininy-0"
package/dist/esm/styled/StyledText.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID$6 = 'avatars.text';
11
11
  const StyledText = styled.span.attrs({
12
12
  'data-garden-id': COMPONENT_ID$6,
13
- 'data-garden-version': '9.13.0'
13
+ 'data-garden-version': '9.14.0'
14
14
  }).withConfig({
15
15
  displayName: "StyledText",
16
16
  componentId: "sc-1a6hivh-0"
package/dist/index.cjs.js CHANGED
@@ -123,7 +123,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
123
123
  const COMPONENT_ID$6 = 'avatars.text';
124
124
  const StyledText = styled__default.default.span.attrs({
125
125
  'data-garden-id': COMPONENT_ID$6,
126
- 'data-garden-version': '9.13.0'
126
+ 'data-garden-version': '9.14.0'
127
127
  }).withConfig({
128
128
  displayName: "StyledText",
129
129
  componentId: "sc-1a6hivh-0"
@@ -242,7 +242,7 @@ const colorStyles$2 = ({
242
242
  };
243
243
  const StyledStatusIndicatorBase = styled__default.default.div.attrs({
244
244
  'data-garden-id': COMPONENT_ID$5,
245
- 'data-garden-version': '9.13.0'
245
+ 'data-garden-version': '9.14.0'
246
246
  }).withConfig({
247
247
  displayName: "StyledStatusIndicatorBase",
248
248
  componentId: "sc-1rininy-0"
@@ -287,7 +287,7 @@ const colorStyles$1 = ({
287
287
  };
288
288
  const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs(props => ({
289
289
  'data-garden-id': COMPONENT_ID$4,
290
- 'data-garden-version': '9.13.0',
290
+ 'data-garden-version': '9.14.0',
291
291
  $size: props.$size ?? 'medium'
292
292
  })).withConfig({
293
293
  displayName: "StyledStatusIndicator",
@@ -314,38 +314,24 @@ const badgeStyles = props => {
314
314
  };
315
315
  const colorStyles = ({
316
316
  theme,
317
- $foregroundColor,
318
- $surfaceColor,
319
- $backgroundColor,
317
+ $foregroundColor = theme.palette.white,
318
+ $surfaceColor = 'background.default',
319
+ $backgroundColor = 'transparent',
320
320
  $status
321
321
  }) => {
322
322
  const statusColor = getStatusColor(theme, $status);
323
- let backgroundColor = 'transparent';
324
- let foregroundColor = theme.palette.white;
325
- let surfaceColor;
326
- if ($backgroundColor) {
327
- backgroundColor = $backgroundColor.includes('.') ? reactTheming.getColor({
328
- theme,
329
- variable: $backgroundColor
330
- }) : $backgroundColor;
331
- }
332
- if ($foregroundColor) {
333
- foregroundColor = $foregroundColor.includes('.') ? reactTheming.getColor({
334
- theme,
335
- variable: $foregroundColor
336
- }) : $foregroundColor;
337
- }
338
- if ($status) {
339
- surfaceColor = $surfaceColor?.includes('.') ? reactTheming.getColor({
340
- variable: $surfaceColor,
341
- theme
342
- }) : $surfaceColor || reactTheming.getColor({
343
- variable: 'background.default',
344
- theme
345
- });
346
- } else {
347
- surfaceColor = 'transparent';
348
- }
323
+ const backgroundColor = reactTheming.getHueColor({
324
+ theme,
325
+ value: $backgroundColor
326
+ });
327
+ const foregroundColor = reactTheming.getHueColor({
328
+ theme,
329
+ value: $foregroundColor
330
+ });
331
+ const surfaceColor = $status ? reactTheming.getHueColor({
332
+ theme,
333
+ value: $surfaceColor
334
+ }) : 'transparent';
349
335
  return styled.css(["box-shadow:", ";background-color:", ";&&{color:", ";}& > svg,& ", "{color:", ";}"], theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
350
336
  };
351
337
  const sizeStyles$1 = props => {
@@ -389,7 +375,7 @@ const sizeStyles$1 = props => {
389
375
  };
390
376
  const StyledAvatar = styled__default.default.figure.attrs(props => ({
391
377
  'data-garden-id': COMPONENT_ID$3,
392
- 'data-garden-version': '9.13.0',
378
+ 'data-garden-version': '9.14.0',
393
379
  $size: props.$size ?? 'medium'
394
380
  })).withConfig({
395
381
  displayName: "StyledAvatar",
@@ -399,7 +385,7 @@ const StyledAvatar = styled__default.default.figure.attrs(props => ({
399
385
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
400
386
  const StyledStandaloneStatus = styled__default.default.figure.attrs({
401
387
  'data-garden-id': COMPONENT_ID$2,
402
- 'data-garden-version': '9.13.0'
388
+ 'data-garden-version': '9.14.0'
403
389
  }).withConfig({
404
390
  displayName: "StyledStandaloneStatus",
405
391
  componentId: "sc-1ow4nfj-0"
@@ -412,7 +398,7 @@ function sizeStyles(props) {
412
398
  }
413
399
  const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
414
400
  'data-garden-id': COMPONENT_ID$1,
415
- 'data-garden-version': '9.13.0'
401
+ 'data-garden-version': '9.14.0'
416
402
  }).withConfig({
417
403
  displayName: "StyledStandaloneStatusCaption",
418
404
  componentId: "sc-aalyk1-0"
@@ -421,7 +407,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
421
407
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
422
408
  const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs(props => ({
423
409
  'data-garden-id': COMPONENT_ID,
424
- 'data-garden-version': '9.13.0',
410
+ 'data-garden-version': '9.14.0',
425
411
  $type: props.$type ?? 'offline'
426
412
  })).withConfig({
427
413
  displayName: "StyledStandaloneStatusIndicator",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "9.13.0",
3
+ "version": "9.14.0",
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>",
@@ -21,19 +21,19 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/react-typography": "^9.13.0",
24
+ "@zendeskgarden/react-typography": "^9.14.0",
25
25
  "polished": "^4.3.1",
26
26
  "prop-types": "^15.5.7"
27
27
  },
28
28
  "peerDependencies": {
29
- "@zendeskgarden/react-theming": ">=9.0.0",
29
+ "@zendeskgarden/react-theming": ">=9.14.0",
30
30
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
31
31
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
32
32
  "styled-components": "^5.3.1 || ^6.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-dropdowns": "^9.13.0",
36
- "@zendeskgarden/react-theming": "^9.13.0",
35
+ "@zendeskgarden/react-dropdowns": "^9.14.0",
36
+ "@zendeskgarden/react-theming": "^9.14.0",
37
37
  "@zendeskgarden/svg-icons": "7.6.0"
38
38
  },
39
39
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "74cc076e1e82a1ee20df7733a9663c6096eefd83"
49
+ "gitHead": "75fd88fc9ea5e6dd48a188d6a15c93a98356b0b7"
50
50
  }