@workday/canvas-kit-react 12.0.0-alpha.855-next.0 → 12.0.0-alpha.862-next.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 (8) hide show
  1. package/avatar/lib/Avatar.tsx +210 -147
  2. package/dist/commonjs/avatar/lib/Avatar.d.ts +149 -44
  3. package/dist/commonjs/avatar/lib/Avatar.d.ts.map +1 -1
  4. package/dist/commonjs/avatar/lib/Avatar.js +68 -80
  5. package/dist/es6/avatar/lib/Avatar.d.ts +149 -44
  6. package/dist/es6/avatar/lib/Avatar.d.ts.map +1 -1
  7. package/dist/es6/avatar/lib/Avatar.js +70 -79
  8. package/package.json +4 -4
package/avatar/lib/Avatar.tsx CHANGED
@@ -1,149 +1,231 @@
1
1
  import React, {useState} from 'react';
2
2
  import {Property} from 'csstype';
3
- import {styled, focusRing, hideMouseFocus, filterOutProps} from '@workday/canvas-kit-react/common';
4
- import isPropValid from '@emotion/is-prop-valid';
5
- import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
6
- import {SystemIconCircle, SystemIconCircleSize} from '@workday/canvas-kit-react/icon';
7
- import {userIcon} from '@workday/canvas-system-icons-web';
3
+ import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
4
+ import {createStencil, calc} from '@workday/canvas-kit-styling';
5
+ import {mergeStyles} from '@workday/canvas-kit-react/layout';
6
+ import {borderRadius} from '@workday/canvas-kit-react/tokens';
7
+ import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
8
8
 
9
- export enum AvatarVariant {
10
- Light,
11
- Dark,
12
- }
9
+ import {userIcon} from '@workday/canvas-system-icons-web';
10
+ import {system} from '@workday/canvas-tokens-web';
13
11
 
14
- export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ export interface AvatarProps {
15
13
  /**
16
- * The variant of the Avatar default state. Accepts `Light` or `Dark`.
17
- * @default AvatarVariant.Light
14
+ * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
15
+ * @default "light"
18
16
  */
19
- variant?: AvatarVariant;
17
+ variant?: 'light' | 'dark';
20
18
  /**
21
19
  * The size of the Avatar.
22
- * @default SystemIconCircleSize.m
20
+ * - `extraExtraLarge`: 7.5rem x 7.5rem (120px x 120px)
21
+ * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
22
+ * - `large`: 2.5rem x 2.5rem (40px x 40px)
23
+ * - `medium`: 2rem x 2rem (32px x 32px)
24
+ * - `small`: 1.5rem x 1.5rem (24px x 24px)
25
+ * - `small`: 1rem x 1rem (16px x 16px)
26
+ * @default "medium"
23
27
  */
24
- size?: SystemIconCircleSize | number;
28
+ size?: /** size of small */
29
+ 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
25
30
  /**
26
- * The alt text of the Avatar image. This prop is also used for the aria-label
31
+ * The alt text of the Avatar image. This prop is also used for the aria-label.
27
32
  * @default Avatar
28
33
  */
29
34
  altText?: string;
30
35
  /**
31
- * The url of the Avatar image.
36
+ * The URL of the user's photo. For best fit, use square images.
32
37
  */
33
38
  url?: string;
34
39
  /**
35
- * The alternative container type for the button. Uses Emotion's special `as` prop.
36
- * Will render an `div` tag instead of a `button` when defined.
37
- */
38
- as?: 'div';
39
- /**
40
- * The object-fit CSS property sets how the content of a replaced element,
41
- * such as an `<img>` or `<video>`, should be resized to fit its container.
42
- * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
43
- * If your image is not a square, you can use this property to ensure the image is rendered properly.
40
+ * An objectFit property that can customize how to resize your image to fit its container.
41
+ * @default "contain"
44
42
  */
45
43
  objectFit?: Property.ObjectFit;
46
44
  }
47
45
 
48
- /**
49
- * Used to get the props of the div version of an avatar
50
- */
51
- type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> &
52
- React.HTMLAttributes<HTMLDivElement>;
53
-
54
- /**
55
- * Returns an overloaded functional component that uses button props by default.
56
- */
57
- type AvatarOverload = {
58
- (props: {as: 'div'} & AvatarDivProps & {ref?: React.Ref<HTMLElement>}): React.ReactElement;
59
- (props: Omit<AvatarProps, 'as'> & {ref?: React.Ref<HTMLButtonElement>}): React.ReactElement;
60
- Variant: typeof AvatarVariant;
61
- Size: typeof SystemIconCircleSize;
62
- };
63
-
64
- const fadeTransition = 'opacity 150ms linear';
65
-
66
- const StyledContainer = styled('button', {
67
- shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
68
- })<Pick<AvatarProps, 'size' | 'onClick'>>(
69
- {
70
- background: colors.soap200,
46
+ export const avatarStencil = createStencil({
47
+ vars: {
48
+ size: '',
49
+ },
50
+ base: ({size}) => ({
51
+ background: system.color.bg.caution.default,
71
52
  position: 'relative',
72
53
  display: 'flex',
73
54
  alignItems: 'center',
74
55
  justifyContent: 'center',
75
56
  padding: 0,
76
57
  border: 0,
77
- boxSizing: 'border-box',
78
58
  overflow: 'hidden',
79
- borderRadius: borderRadius.circle,
80
- '&:not([disabled])': {
81
- '&:focus': {
82
- outline: 'none',
83
- ...focusRing({separation: 2}),
84
- },
85
- },
86
- ...hideMouseFocus,
87
- },
88
- ({size}) => ({
89
- height: size,
59
+ cursor: 'default',
60
+ borderRadius: system.shape.round,
90
61
  width: size,
91
- }),
92
- ({onClick}) => ({
93
- cursor: onClick ? 'pointer' : 'default',
94
- })
95
- );
96
-
97
- const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
98
- {
99
- position: 'absolute',
100
- top: 0,
101
- left: 0,
102
- },
103
- ({size}) => ({
104
62
  height: size,
105
- width: size,
106
- })
107
- );
108
-
109
- const StyledIcon = styled(SystemIconCircle, {
110
- shouldForwardProp: filterOutProps(['isImageLoaded']),
111
- })<{isImageLoaded: boolean}>(
112
- {
113
- transition: fadeTransition,
63
+ '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
64
+ outline: 'none',
65
+ ...focusRing({separation: 2}),
66
+ },
67
+ ':is(button)': {
68
+ cursor: 'pointer',
69
+ },
70
+ ['& > [data-slot="avatar-icon"]']: {
71
+ transition: 'opacity 150ms linear',
72
+ display: 'flex',
73
+ alignItems: 'center',
74
+ justifyContent: 'center',
75
+ [systemIconStencil.vars.size]: calc.multiply(size, 0.625),
76
+ },
77
+ ['& > [data-slot="avatar-image"]']: {
78
+ position: 'absolute',
79
+ width: '100%',
80
+ height: '100%',
81
+ borderRadius: borderRadius.circle,
82
+ transition: 'opacity 150ms linear',
83
+ },
84
+ }),
85
+ modifiers: {
86
+ variant: {
87
+ light: {
88
+ backgroundColor: system.color.bg.alt.default,
89
+ ['& [data-slot="avatar-icon"]']: {
90
+ [systemIconStencil.vars.color]: system.color.fg.default,
91
+ },
92
+ },
93
+ dark: {
94
+ backgroundColor: system.color.bg.primary.default,
95
+ ['& [data-slot="avatar-icon"]']: {
96
+ [systemIconStencil.vars.color]: system.color.fg.inverse,
97
+ },
98
+ },
99
+ },
100
+ size: {
101
+ extraSmall: {
102
+ width: system.space.x4,
103
+ height: system.space.x4,
104
+ ['& [data-slot="avatar-icon"]']: {
105
+ [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
106
+ },
107
+ },
108
+ small: {
109
+ width: system.space.x6,
110
+ height: system.space.x6,
111
+ ['& [data-slot="avatar-icon"]']: {
112
+ [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
113
+ },
114
+ },
115
+ medium: {
116
+ width: system.space.x8,
117
+ height: system.space.x8,
118
+ ['& [data-slot="avatar-icon"]']: {
119
+ [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
120
+ },
121
+ },
122
+ large: {
123
+ width: system.space.x10,
124
+ height: system.space.x10,
125
+ ['& [data-slot="avatar-icon"]']: {
126
+ [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
127
+ },
128
+ },
129
+ extraLarge: {
130
+ width: system.space.x16,
131
+ height: system.space.x16,
132
+ ['& [data-slot="avatar-icon"]']: {
133
+ [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
134
+ },
135
+ },
136
+ extraExtraLarge: {
137
+ width: calc.multiply(system.space.x10, 3),
138
+ height: calc.multiply(system.space.x10, 3),
139
+ ['& [data-slot="avatar-icon"]']: {
140
+ [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
141
+ },
142
+ },
143
+ },
144
+ objectFit: {
145
+ contain: {
146
+ ['& [data-slot="avatar-image"]']: {
147
+ objectFit: 'contain',
148
+ },
149
+ },
150
+ fill: {
151
+ ['& [data-slot="avatar-image"]']: {
152
+ objectFit: 'fill',
153
+ },
154
+ },
155
+ cover: {
156
+ ['& [data-slot="avatar-image"]']: {
157
+ objectFit: 'cover',
158
+ },
159
+ },
160
+ ['scale-down']: {
161
+ ['& [data-slot="avatar-image"]']: {
162
+ objectFit: 'scale-down',
163
+ },
164
+ },
165
+ none: {
166
+ ['& [data-slot="avatar-image"]']: {
167
+ objectFit: 'none',
168
+ },
169
+ },
170
+ ['-moz-initial']: {
171
+ ['& [data-slot="avatar-image"]']: {
172
+ objectFit: '-moz-initial',
173
+ },
174
+ },
175
+ ['initial']: {
176
+ ['& [data-slot="avatar-image"]']: {
177
+ objectFit: 'initial',
178
+ },
179
+ },
180
+ ['inherit']: {
181
+ ['& [data-slot="avatar-image"]']: {
182
+ objectFit: 'inherit',
183
+ },
184
+ },
185
+ ['revert']: {
186
+ ['& [data-slot="avatar-image"]']: {
187
+ objectFit: 'revert',
188
+ },
189
+ },
190
+ ['unset']: {
191
+ ['& [data-slot="avatar-image"]']: {
192
+ objectFit: 'unset',
193
+ },
194
+ },
195
+ },
196
+ isImageLoaded: {
197
+ true: {
198
+ ['& [data-slot="avatar-icon"]']: {
199
+ opacity: 0,
200
+ },
201
+ ['& [data-slot="avatar-image"]']: {
202
+ opacity: 1,
203
+ },
204
+ },
205
+ false: {
206
+ ['& [data-slot="avatar-icon"]']: {
207
+ opacity: 1,
208
+ },
209
+ ['& [data-slot="avatar-image"]']: {
210
+ opacity: 0,
211
+ },
212
+ },
213
+ },
114
214
  },
115
- ({isImageLoaded}) => ({
116
- opacity: isImageLoaded ? 0 : 1,
117
- })
118
- );
119
-
120
- const StyledImage = styled('img', {
121
- shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
122
- })<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
123
- {
124
- width: '100%',
125
- height: '100%',
126
- borderRadius: borderRadius.circle,
127
- transition: fadeTransition,
215
+ defaultModifiers: {
216
+ variant: 'light',
217
+ size: 'medium',
218
+ isImageLoaded: 'false',
219
+ objectFit: 'contain',
128
220
  },
129
- ({isLoaded, objectFit}) => ({
130
- opacity: isLoaded ? 1 : 0,
131
- objectFit,
132
- })
133
- );
221
+ });
134
222
 
135
- export const Avatar: AvatarOverload = React.forwardRef(
136
- (
137
- {
138
- variant = AvatarVariant.Light,
139
- size = SystemIconCircleSize.m,
140
- altText = 'Avatar',
141
- url,
142
- onClick,
143
- objectFit,
144
- ...elemProps
145
- }: AvatarProps,
146
- ref: React.Ref<HTMLButtonElement>
223
+ export const Avatar = createComponent('button')({
224
+ displayName: 'Avatar',
225
+ Component: (
226
+ {variant, size, altText = 'Avatar', url, objectFit, ...elemProps}: AvatarProps,
227
+ ref,
228
+ Element
147
229
  ) => {
148
230
  const [imageLoaded, setImageLoaded] = useState(false);
149
231
 
@@ -157,41 +239,22 @@ export const Avatar: AvatarOverload = React.forwardRef(
157
239
  setImageLoaded(false);
158
240
  }, [url]);
159
241
 
160
- const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
161
-
162
242
  return (
163
- <StyledContainer
164
- size={size}
165
- aria-label={altText}
166
- onClick={onClick}
167
- disabled={onClick ? false : true}
243
+ <Element
168
244
  ref={ref}
169
- {...elemProps}
245
+ aria-label={altText}
246
+ {...mergeStyles(elemProps, [
247
+ avatarStencil({
248
+ variant,
249
+ size,
250
+ objectFit,
251
+ isImageLoaded: imageLoaded,
252
+ }),
253
+ ])}
170
254
  >
171
- <StyledStack size={size}>
172
- <StyledIcon
173
- icon={userIcon}
174
- background={background}
175
- size={size}
176
- isImageLoaded={imageLoaded}
177
- />
178
- </StyledStack>
179
- {url && (
180
- <StyledStack size={size}>
181
- <StyledImage
182
- src={url}
183
- alt={altText}
184
- onLoad={loadImage}
185
- isLoaded={imageLoaded}
186
- objectFit={objectFit}
187
- loading="lazy"
188
- />
189
- </StyledStack>
190
- )}
191
- </StyledContainer>
255
+ <SystemIcon icon={userIcon} data-slot="avatar-icon" />
256
+ {url && <img data-slot="avatar-image" src={url} alt={altText} onLoad={loadImage} />}
257
+ </Element>
192
258
  );
193
- }
194
- ) as any; // AvatarProps and forwardRef signatures are incompatible, so we must force cast
195
-
196
- Avatar.Variant = AvatarVariant;
197
- Avatar.Size = SystemIconCircleSize;
259
+ },
260
+ });
package/dist/commonjs/avatar/lib/Avatar.d.ts CHANGED
@@ -1,62 +1,167 @@
1
- import React from 'react';
2
1
  import { Property } from 'csstype';
3
- import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
4
- export declare enum AvatarVariant {
5
- Light = 0,
6
- Dark = 1
7
- }
8
- export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
2
+ export interface AvatarProps {
9
3
  /**
10
- * The variant of the Avatar default state. Accepts `Light` or `Dark`.
11
- * @default AvatarVariant.Light
4
+ * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
5
+ * @default "light"
12
6
  */
13
- variant?: AvatarVariant;
7
+ variant?: 'light' | 'dark';
14
8
  /**
15
9
  * The size of the Avatar.
16
- * @default SystemIconCircleSize.m
10
+ * - `extraExtraLarge`: 7.5rem x 7.5rem (120px x 120px)
11
+ * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
12
+ * - `large`: 2.5rem x 2.5rem (40px x 40px)
13
+ * - `medium`: 2rem x 2rem (32px x 32px)
14
+ * - `small`: 1.5rem x 1.5rem (24px x 24px)
15
+ * - `small`: 1rem x 1rem (16px x 16px)
16
+ * @default "medium"
17
17
  */
18
- size?: SystemIconCircleSize | number;
18
+ size?: /** size of small */ 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
19
19
  /**
20
- * The alt text of the Avatar image. This prop is also used for the aria-label
20
+ * The alt text of the Avatar image. This prop is also used for the aria-label.
21
21
  * @default Avatar
22
22
  */
23
23
  altText?: string;
24
24
  /**
25
- * The url of the Avatar image.
25
+ * The URL of the user's photo. For best fit, use square images.
26
26
  */
27
27
  url?: string;
28
28
  /**
29
- * The alternative container type for the button. Uses Emotion's special `as` prop.
30
- * Will render an `div` tag instead of a `button` when defined.
31
- */
32
- as?: 'div';
33
- /**
34
- * The object-fit CSS property sets how the content of a replaced element,
35
- * such as an `<img>` or `<video>`, should be resized to fit its container.
36
- * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
37
- * If your image is not a square, you can use this property to ensure the image is rendered properly.
29
+ * An objectFit property that can customize how to resize your image to fit its container.
30
+ * @default "contain"
38
31
  */
39
32
  objectFit?: Property.ObjectFit;
40
33
  }
41
- /**
42
- * Used to get the props of the div version of an avatar
43
- */
44
- declare type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.HTMLAttributes<HTMLDivElement>;
45
- /**
46
- * Returns an overloaded functional component that uses button props by default.
47
- */
48
- declare type AvatarOverload = {
49
- (props: {
50
- as: 'div';
51
- } & AvatarDivProps & {
52
- ref?: React.Ref<HTMLElement>;
53
- }): React.ReactElement;
54
- (props: Omit<AvatarProps, 'as'> & {
55
- ref?: React.Ref<HTMLButtonElement>;
56
- }): React.ReactElement;
57
- Variant: typeof AvatarVariant;
58
- Size: typeof SystemIconCircleSize;
59
- };
60
- export declare const Avatar: AvatarOverload;
61
- export {};
34
+ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
35
+ variant: {
36
+ light: {
37
+ backgroundColor: "--cnvs-sys-color-bg-alt-default";
38
+ "& [data-slot=\"avatar-icon\"]": {
39
+ [x: string]: "--cnvs-sys-color-fg-default";
40
+ };
41
+ };
42
+ dark: {
43
+ backgroundColor: "--cnvs-sys-color-bg-primary-default";
44
+ "& [data-slot=\"avatar-icon\"]": {
45
+ [x: string]: "--cnvs-sys-color-fg-inverse";
46
+ };
47
+ };
48
+ };
49
+ size: {
50
+ extraSmall: {
51
+ width: "--cnvs-sys-space-x4";
52
+ height: "--cnvs-sys-space-x4";
53
+ "& [data-slot=\"avatar-icon\"]": {
54
+ [x: string]: string;
55
+ };
56
+ };
57
+ small: {
58
+ width: "--cnvs-sys-space-x6";
59
+ height: "--cnvs-sys-space-x6";
60
+ "& [data-slot=\"avatar-icon\"]": {
61
+ [x: string]: string;
62
+ };
63
+ };
64
+ medium: {
65
+ width: "--cnvs-sys-space-x8";
66
+ height: "--cnvs-sys-space-x8";
67
+ "& [data-slot=\"avatar-icon\"]": {
68
+ [x: string]: string;
69
+ };
70
+ };
71
+ large: {
72
+ width: "--cnvs-sys-space-x10";
73
+ height: "--cnvs-sys-space-x10";
74
+ "& [data-slot=\"avatar-icon\"]": {
75
+ [x: string]: string;
76
+ };
77
+ };
78
+ extraLarge: {
79
+ width: "--cnvs-sys-space-x16";
80
+ height: "--cnvs-sys-space-x16";
81
+ "& [data-slot=\"avatar-icon\"]": {
82
+ [x: string]: string;
83
+ };
84
+ };
85
+ extraExtraLarge: {
86
+ width: string;
87
+ height: string;
88
+ "& [data-slot=\"avatar-icon\"]": {
89
+ [x: string]: string;
90
+ };
91
+ };
92
+ };
93
+ objectFit: {
94
+ contain: {
95
+ "& [data-slot=\"avatar-image\"]": {
96
+ objectFit: "contain";
97
+ };
98
+ };
99
+ fill: {
100
+ "& [data-slot=\"avatar-image\"]": {
101
+ objectFit: "fill";
102
+ };
103
+ };
104
+ cover: {
105
+ "& [data-slot=\"avatar-image\"]": {
106
+ objectFit: "cover";
107
+ };
108
+ };
109
+ "scale-down": {
110
+ "& [data-slot=\"avatar-image\"]": {
111
+ objectFit: "scale-down";
112
+ };
113
+ };
114
+ none: {
115
+ "& [data-slot=\"avatar-image\"]": {
116
+ objectFit: "none";
117
+ };
118
+ };
119
+ "-moz-initial": {
120
+ "& [data-slot=\"avatar-image\"]": {
121
+ objectFit: "-moz-initial";
122
+ };
123
+ };
124
+ initial: {
125
+ "& [data-slot=\"avatar-image\"]": {
126
+ objectFit: "initial";
127
+ };
128
+ };
129
+ inherit: {
130
+ "& [data-slot=\"avatar-image\"]": {
131
+ objectFit: "inherit";
132
+ };
133
+ };
134
+ revert: {
135
+ "& [data-slot=\"avatar-image\"]": {
136
+ objectFit: "revert";
137
+ };
138
+ };
139
+ unset: {
140
+ "& [data-slot=\"avatar-image\"]": {
141
+ objectFit: "unset";
142
+ };
143
+ };
144
+ };
145
+ isImageLoaded: {
146
+ true: {
147
+ "& [data-slot=\"avatar-icon\"]": {
148
+ opacity: number;
149
+ };
150
+ "& [data-slot=\"avatar-image\"]": {
151
+ opacity: number;
152
+ };
153
+ };
154
+ false: {
155
+ "& [data-slot=\"avatar-icon\"]": {
156
+ opacity: number;
157
+ };
158
+ "& [data-slot=\"avatar-image\"]": {
159
+ opacity: number;
160
+ };
161
+ };
162
+ };
163
+ }, {
164
+ size: string;
165
+ }, never, never>;
166
+ export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps>;
62
167
  //# sourceMappingURL=Avatar.d.ts.map
package/dist/commonjs/avatar/lib/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA2Db,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUjC,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;OASG;IACH,IAAI,CAAC,EACL,AADO,oBAAoB,CAC3B,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/F;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+KxB,CAAC;AAEH,eAAO,MAAM,MAAM,oFAqCjB,CAAC"}
package/dist/commonjs/avatar/lib/Avatar.js CHANGED
@@ -18,91 +18,79 @@ var __importStar = (this && this.__importStar) || function (mod) {
18
18
  __setModuleDefault(result, mod);
19
19
  return result;
20
20
  };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
21
  Object.defineProperty(exports, "__esModule", { value: true });
25
- exports.Avatar = exports.AvatarVariant = void 0;
22
+ exports.Avatar = exports.avatarStencil = void 0;
26
23
  const react_1 = __importStar(require("react"));
27
24
  const common_1 = require("@workday/canvas-kit-react/common");
28
- const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
25
+ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
+ const layout_1 = require("@workday/canvas-kit-react/layout");
29
27
  const tokens_1 = require("@workday/canvas-kit-react/tokens");
30
28
  const icon_1 = require("@workday/canvas-kit-react/icon");
31
29
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
32
- var AvatarVariant;
33
- (function (AvatarVariant) {
34
- AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
35
- AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
36
- })(AvatarVariant = exports.AvatarVariant || (exports.AvatarVariant = {}));
37
- const fadeTransition = 'opacity 150ms linear';
38
- const StyledContainer = common_1.styled('button', {
39
- shouldForwardProp: prop => is_prop_valid_1.default(prop) && prop !== 'size',
40
- })({
41
- background: tokens_1.colors.soap200,
42
- position: 'relative',
43
- display: 'flex',
44
- alignItems: 'center',
45
- justifyContent: 'center',
46
- padding: 0,
47
- border: 0,
48
- boxSizing: 'border-box',
49
- overflow: 'hidden',
50
- borderRadius: tokens_1.borderRadius.circle,
51
- '&:not([disabled])': {
52
- '&:focus': {
53
- outline: 'none',
54
- ...common_1.focusRing({ separation: 2 }),
55
- },
30
+ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
31
+ exports.avatarStencil = canvas_kit_styling_1.createStencil({
32
+ vars: {
33
+ size: '',
56
34
  },
57
- ...common_1.hideMouseFocus,
58
- }, ({ size }) => ({
59
- height: size,
60
- width: size,
61
- }), ({ onClick }) => ({
62
- cursor: onClick ? 'pointer' : 'default',
63
- }));
64
- const StyledStack = common_1.styled('span')({
65
- position: 'absolute',
66
- top: 0,
67
- left: 0,
68
- }, ({ size }) => ({
69
- height: size,
70
- width: size,
71
- }));
72
- const StyledIcon = common_1.styled(icon_1.SystemIconCircle, {
73
- shouldForwardProp: common_1.filterOutProps(['isImageLoaded']),
74
- })({
75
- transition: fadeTransition,
76
- }, ({ isImageLoaded }) => ({
77
- opacity: isImageLoaded ? 0 : 1,
78
- }));
79
- const StyledImage = common_1.styled('img', {
80
- shouldForwardProp: common_1.filterOutProps(['isLoaded', 'objectFit']),
81
- })({
82
- width: '100%',
83
- height: '100%',
84
- borderRadius: tokens_1.borderRadius.circle,
85
- transition: fadeTransition,
86
- }, ({ isLoaded, objectFit }) => ({
87
- opacity: isLoaded ? 1 : 0,
88
- objectFit,
89
- }));
90
- exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, size = icon_1.SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
91
- const [imageLoaded, setImageLoaded] = react_1.useState(false);
92
- const loadImage = () => {
93
- if (!imageLoaded) {
94
- setImageLoaded(true);
35
+ base: { name: "b532d4", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-f68c19);height:var(--size-avatar-f68c19);&:focus-visible:not([disabled]), &.focus:not([disabled]){outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;}& > [data-slot=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-f68c19) * 0.625);}& > [data-slot=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
36
+ modifiers: {
37
+ variant: {
38
+ light: { name: "93f2f0", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-default);}" },
39
+ dark: { name: "094953", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-inverse);}" }
40
+ },
41
+ size: {
42
+ extraSmall: { name: "dd6bba", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
43
+ small: { name: "8bd568", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
44
+ medium: { name: "73d354", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
45
+ large: { name: "b1ab3d", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
46
+ extraLarge: { name: "51b4a9", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
47
+ extraExtraLarge: { name: "271180", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
48
+ },
49
+ objectFit: {
50
+ contain: { name: "ec34b8", styles: "& [data-slot=\"avatar-image\"]{object-fit:contain;}" },
51
+ fill: { name: "f2ce94", styles: "& [data-slot=\"avatar-image\"]{object-fit:fill;}" },
52
+ cover: { name: "f01d16", styles: "& [data-slot=\"avatar-image\"]{object-fit:cover;}" },
53
+ ['scale-down']: { name: "b72ff8", styles: "& [data-slot=\"avatar-image\"]{object-fit:scale-down;}" },
54
+ none: { name: "6349a5", styles: "& [data-slot=\"avatar-image\"]{object-fit:none;}" },
55
+ ['-moz-initial']: { name: "8d0a0d", styles: "& [data-slot=\"avatar-image\"]{object-fit:-moz-initial;}" },
56
+ ['initial']: { name: "23e1a7", styles: "& [data-slot=\"avatar-image\"]{object-fit:initial;}" },
57
+ ['inherit']: { name: "1be8d9", styles: "& [data-slot=\"avatar-image\"]{object-fit:inherit;}" },
58
+ ['revert']: { name: "1f00e3", styles: "& [data-slot=\"avatar-image\"]{object-fit:revert;}" },
59
+ ['unset']: { name: "6f1eb7", styles: "& [data-slot=\"avatar-image\"]{object-fit:unset;}" }
60
+ },
61
+ isImageLoaded: {
62
+ true: { name: "6ab642", styles: "& [data-slot=\"avatar-icon\"]{opacity:0;}& [data-slot=\"avatar-image\"]{opacity:1;}" },
63
+ false: { name: "53c2af", styles: "& [data-slot=\"avatar-icon\"]{opacity:1;}& [data-slot=\"avatar-image\"]{opacity:0;}" }
95
64
  }
96
- };
97
- react_1.default.useLayoutEffect(() => {
98
- setImageLoaded(false);
99
- }, [url]);
100
- const background = variant === AvatarVariant.Dark ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300;
101
- return (react_1.default.createElement(StyledContainer, Object.assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
102
- react_1.default.createElement(StyledStack, { size: size },
103
- react_1.default.createElement(StyledIcon, { icon: canvas_system_icons_web_1.userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
104
- url && (react_1.default.createElement(StyledStack, { size: size },
105
- react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit, loading: "lazy" })))));
106
- }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
107
- exports.Avatar.Variant = AvatarVariant;
108
- exports.Avatar.Size = icon_1.SystemIconCircleSize;
65
+ },
66
+ defaultModifiers: {
67
+ variant: 'light',
68
+ size: 'medium',
69
+ isImageLoaded: 'false',
70
+ objectFit: 'contain',
71
+ }
72
+ }, "avatar-f68c19");
73
+ exports.Avatar = common_1.createComponent('button')({
74
+ displayName: 'Avatar',
75
+ Component: ({ variant, size, altText = 'Avatar', url, objectFit, ...elemProps }, ref, Element) => {
76
+ const [imageLoaded, setImageLoaded] = react_1.useState(false);
77
+ const loadImage = () => {
78
+ if (!imageLoaded) {
79
+ setImageLoaded(true);
80
+ }
81
+ };
82
+ react_1.default.useLayoutEffect(() => {
83
+ setImageLoaded(false);
84
+ }, [url]);
85
+ return (react_1.default.createElement(Element, Object.assign({ ref: ref, "aria-label": altText }, layout_1.mergeStyles(elemProps, [
86
+ exports.avatarStencil({
87
+ variant,
88
+ size,
89
+ objectFit,
90
+ isImageLoaded: imageLoaded,
91
+ }),
92
+ ])),
93
+ react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.userIcon, "data-slot": "avatar-icon" }),
94
+ url && react_1.default.createElement("img", { "data-slot": "avatar-image", src: url, alt: altText, onLoad: loadImage })));
95
+ },
96
+ });
package/dist/es6/avatar/lib/Avatar.d.ts CHANGED
@@ -1,62 +1,167 @@
1
- import React from 'react';
2
1
  import { Property } from 'csstype';
3
- import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
4
- export declare enum AvatarVariant {
5
- Light = 0,
6
- Dark = 1
7
- }
8
- export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
2
+ export interface AvatarProps {
9
3
  /**
10
- * The variant of the Avatar default state. Accepts `Light` or `Dark`.
11
- * @default AvatarVariant.Light
4
+ * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
5
+ * @default "light"
12
6
  */
13
- variant?: AvatarVariant;
7
+ variant?: 'light' | 'dark';
14
8
  /**
15
9
  * The size of the Avatar.
16
- * @default SystemIconCircleSize.m
10
+ * - `extraExtraLarge`: 7.5rem x 7.5rem (120px x 120px)
11
+ * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
12
+ * - `large`: 2.5rem x 2.5rem (40px x 40px)
13
+ * - `medium`: 2rem x 2rem (32px x 32px)
14
+ * - `small`: 1.5rem x 1.5rem (24px x 24px)
15
+ * - `small`: 1rem x 1rem (16px x 16px)
16
+ * @default "medium"
17
17
  */
18
- size?: SystemIconCircleSize | number;
18
+ size?: /** size of small */ 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
19
19
  /**
20
- * The alt text of the Avatar image. This prop is also used for the aria-label
20
+ * The alt text of the Avatar image. This prop is also used for the aria-label.
21
21
  * @default Avatar
22
22
  */
23
23
  altText?: string;
24
24
  /**
25
- * The url of the Avatar image.
25
+ * The URL of the user's photo. For best fit, use square images.
26
26
  */
27
27
  url?: string;
28
28
  /**
29
- * The alternative container type for the button. Uses Emotion's special `as` prop.
30
- * Will render an `div` tag instead of a `button` when defined.
31
- */
32
- as?: 'div';
33
- /**
34
- * The object-fit CSS property sets how the content of a replaced element,
35
- * such as an `<img>` or `<video>`, should be resized to fit its container.
36
- * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
37
- * If your image is not a square, you can use this property to ensure the image is rendered properly.
29
+ * An objectFit property that can customize how to resize your image to fit its container.
30
+ * @default "contain"
38
31
  */
39
32
  objectFit?: Property.ObjectFit;
40
33
  }
41
- /**
42
- * Used to get the props of the div version of an avatar
43
- */
44
- declare type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.HTMLAttributes<HTMLDivElement>;
45
- /**
46
- * Returns an overloaded functional component that uses button props by default.
47
- */
48
- declare type AvatarOverload = {
49
- (props: {
50
- as: 'div';
51
- } & AvatarDivProps & {
52
- ref?: React.Ref<HTMLElement>;
53
- }): React.ReactElement;
54
- (props: Omit<AvatarProps, 'as'> & {
55
- ref?: React.Ref<HTMLButtonElement>;
56
- }): React.ReactElement;
57
- Variant: typeof AvatarVariant;
58
- Size: typeof SystemIconCircleSize;
59
- };
60
- export declare const Avatar: AvatarOverload;
61
- export {};
34
+ export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
35
+ variant: {
36
+ light: {
37
+ backgroundColor: "--cnvs-sys-color-bg-alt-default";
38
+ "& [data-slot=\"avatar-icon\"]": {
39
+ [x: string]: "--cnvs-sys-color-fg-default";
40
+ };
41
+ };
42
+ dark: {
43
+ backgroundColor: "--cnvs-sys-color-bg-primary-default";
44
+ "& [data-slot=\"avatar-icon\"]": {
45
+ [x: string]: "--cnvs-sys-color-fg-inverse";
46
+ };
47
+ };
48
+ };
49
+ size: {
50
+ extraSmall: {
51
+ width: "--cnvs-sys-space-x4";
52
+ height: "--cnvs-sys-space-x4";
53
+ "& [data-slot=\"avatar-icon\"]": {
54
+ [x: string]: string;
55
+ };
56
+ };
57
+ small: {
58
+ width: "--cnvs-sys-space-x6";
59
+ height: "--cnvs-sys-space-x6";
60
+ "& [data-slot=\"avatar-icon\"]": {
61
+ [x: string]: string;
62
+ };
63
+ };
64
+ medium: {
65
+ width: "--cnvs-sys-space-x8";
66
+ height: "--cnvs-sys-space-x8";
67
+ "& [data-slot=\"avatar-icon\"]": {
68
+ [x: string]: string;
69
+ };
70
+ };
71
+ large: {
72
+ width: "--cnvs-sys-space-x10";
73
+ height: "--cnvs-sys-space-x10";
74
+ "& [data-slot=\"avatar-icon\"]": {
75
+ [x: string]: string;
76
+ };
77
+ };
78
+ extraLarge: {
79
+ width: "--cnvs-sys-space-x16";
80
+ height: "--cnvs-sys-space-x16";
81
+ "& [data-slot=\"avatar-icon\"]": {
82
+ [x: string]: string;
83
+ };
84
+ };
85
+ extraExtraLarge: {
86
+ width: string;
87
+ height: string;
88
+ "& [data-slot=\"avatar-icon\"]": {
89
+ [x: string]: string;
90
+ };
91
+ };
92
+ };
93
+ objectFit: {
94
+ contain: {
95
+ "& [data-slot=\"avatar-image\"]": {
96
+ objectFit: "contain";
97
+ };
98
+ };
99
+ fill: {
100
+ "& [data-slot=\"avatar-image\"]": {
101
+ objectFit: "fill";
102
+ };
103
+ };
104
+ cover: {
105
+ "& [data-slot=\"avatar-image\"]": {
106
+ objectFit: "cover";
107
+ };
108
+ };
109
+ "scale-down": {
110
+ "& [data-slot=\"avatar-image\"]": {
111
+ objectFit: "scale-down";
112
+ };
113
+ };
114
+ none: {
115
+ "& [data-slot=\"avatar-image\"]": {
116
+ objectFit: "none";
117
+ };
118
+ };
119
+ "-moz-initial": {
120
+ "& [data-slot=\"avatar-image\"]": {
121
+ objectFit: "-moz-initial";
122
+ };
123
+ };
124
+ initial: {
125
+ "& [data-slot=\"avatar-image\"]": {
126
+ objectFit: "initial";
127
+ };
128
+ };
129
+ inherit: {
130
+ "& [data-slot=\"avatar-image\"]": {
131
+ objectFit: "inherit";
132
+ };
133
+ };
134
+ revert: {
135
+ "& [data-slot=\"avatar-image\"]": {
136
+ objectFit: "revert";
137
+ };
138
+ };
139
+ unset: {
140
+ "& [data-slot=\"avatar-image\"]": {
141
+ objectFit: "unset";
142
+ };
143
+ };
144
+ };
145
+ isImageLoaded: {
146
+ true: {
147
+ "& [data-slot=\"avatar-icon\"]": {
148
+ opacity: number;
149
+ };
150
+ "& [data-slot=\"avatar-image\"]": {
151
+ opacity: number;
152
+ };
153
+ };
154
+ false: {
155
+ "& [data-slot=\"avatar-icon\"]": {
156
+ opacity: number;
157
+ };
158
+ "& [data-slot=\"avatar-image\"]": {
159
+ opacity: number;
160
+ };
161
+ };
162
+ };
163
+ }, {
164
+ size: string;
165
+ }, never, never>;
166
+ export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps>;
62
167
  //# sourceMappingURL=Avatar.d.ts.map
package/dist/es6/avatar/lib/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA2Db,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUjC,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;OASG;IACH,IAAI,CAAC,EACL,AADO,oBAAoB,CAC3B,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/F;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+KxB,CAAC;AAEH,eAAO,MAAM,MAAM,oFAqCjB,CAAC"}
package/dist/es6/avatar/lib/Avatar.js CHANGED
@@ -1,83 +1,74 @@
1
1
  import React, { useState } from 'react';
2
- import { styled, focusRing, hideMouseFocus, filterOutProps } from '@workday/canvas-kit-react/common';
3
- import isPropValid from '@emotion/is-prop-valid';
4
- import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
5
- import { SystemIconCircle, SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
2
+ import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
3
+ import { createStencil, calc } from '@workday/canvas-kit-styling';
4
+ import { mergeStyles } from '@workday/canvas-kit-react/layout';
5
+ import { borderRadius } from '@workday/canvas-kit-react/tokens';
6
+ import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
6
7
  import { userIcon } from '@workday/canvas-system-icons-web';
7
- export var AvatarVariant;
8
- (function (AvatarVariant) {
9
- AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
10
- AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
11
- })(AvatarVariant || (AvatarVariant = {}));
12
- const fadeTransition = 'opacity 150ms linear';
13
- const StyledContainer = styled('button', {
14
- shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
15
- })({
16
- background: colors.soap200,
17
- position: 'relative',
18
- display: 'flex',
19
- alignItems: 'center',
20
- justifyContent: 'center',
21
- padding: 0,
22
- border: 0,
23
- boxSizing: 'border-box',
24
- overflow: 'hidden',
25
- borderRadius: borderRadius.circle,
26
- '&:not([disabled])': {
27
- '&:focus': {
28
- outline: 'none',
29
- ...focusRing({ separation: 2 }),
30
- },
8
+ import { system } from '@workday/canvas-tokens-web';
9
+ export const avatarStencil = createStencil({
10
+ vars: {
11
+ size: '',
31
12
  },
32
- ...hideMouseFocus,
33
- }, ({ size }) => ({
34
- height: size,
35
- width: size,
36
- }), ({ onClick }) => ({
37
- cursor: onClick ? 'pointer' : 'default',
38
- }));
39
- const StyledStack = styled('span')({
40
- position: 'absolute',
41
- top: 0,
42
- left: 0,
43
- }, ({ size }) => ({
44
- height: size,
45
- width: size,
46
- }));
47
- const StyledIcon = styled(SystemIconCircle, {
48
- shouldForwardProp: filterOutProps(['isImageLoaded']),
49
- })({
50
- transition: fadeTransition,
51
- }, ({ isImageLoaded }) => ({
52
- opacity: isImageLoaded ? 0 : 1,
53
- }));
54
- const StyledImage = styled('img', {
55
- shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
56
- })({
57
- width: '100%',
58
- height: '100%',
59
- borderRadius: borderRadius.circle,
60
- transition: fadeTransition,
61
- }, ({ isLoaded, objectFit }) => ({
62
- opacity: isLoaded ? 1 : 0,
63
- objectFit,
64
- }));
65
- export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
66
- const [imageLoaded, setImageLoaded] = useState(false);
67
- const loadImage = () => {
68
- if (!imageLoaded) {
69
- setImageLoaded(true);
13
+ base: { name: "b532d4", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-f68c19);height:var(--size-avatar-f68c19);&:focus-visible:not([disabled]), &.focus:not([disabled]){outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;}& > [data-slot=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-f68c19) * 0.625);}& > [data-slot=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
14
+ modifiers: {
15
+ variant: {
16
+ light: { name: "93f2f0", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-default);}" },
17
+ dark: { name: "094953", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-inverse);}" }
18
+ },
19
+ size: {
20
+ extraSmall: { name: "dd6bba", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
21
+ small: { name: "8bd568", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
22
+ medium: { name: "73d354", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
23
+ large: { name: "b1ab3d", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
24
+ extraLarge: { name: "51b4a9", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
25
+ extraExtraLarge: { name: "271180", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
26
+ },
27
+ objectFit: {
28
+ contain: { name: "ec34b8", styles: "& [data-slot=\"avatar-image\"]{object-fit:contain;}" },
29
+ fill: { name: "f2ce94", styles: "& [data-slot=\"avatar-image\"]{object-fit:fill;}" },
30
+ cover: { name: "f01d16", styles: "& [data-slot=\"avatar-image\"]{object-fit:cover;}" },
31
+ ['scale-down']: { name: "b72ff8", styles: "& [data-slot=\"avatar-image\"]{object-fit:scale-down;}" },
32
+ none: { name: "6349a5", styles: "& [data-slot=\"avatar-image\"]{object-fit:none;}" },
33
+ ['-moz-initial']: { name: "8d0a0d", styles: "& [data-slot=\"avatar-image\"]{object-fit:-moz-initial;}" },
34
+ ['initial']: { name: "23e1a7", styles: "& [data-slot=\"avatar-image\"]{object-fit:initial;}" },
35
+ ['inherit']: { name: "1be8d9", styles: "& [data-slot=\"avatar-image\"]{object-fit:inherit;}" },
36
+ ['revert']: { name: "1f00e3", styles: "& [data-slot=\"avatar-image\"]{object-fit:revert;}" },
37
+ ['unset']: { name: "6f1eb7", styles: "& [data-slot=\"avatar-image\"]{object-fit:unset;}" }
38
+ },
39
+ isImageLoaded: {
40
+ true: { name: "6ab642", styles: "& [data-slot=\"avatar-icon\"]{opacity:0;}& [data-slot=\"avatar-image\"]{opacity:1;}" },
41
+ false: { name: "53c2af", styles: "& [data-slot=\"avatar-icon\"]{opacity:1;}& [data-slot=\"avatar-image\"]{opacity:0;}" }
70
42
  }
71
- };
72
- React.useLayoutEffect(() => {
73
- setImageLoaded(false);
74
- }, [url]);
75
- const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
76
- return (React.createElement(StyledContainer, Object.assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
77
- React.createElement(StyledStack, { size: size },
78
- React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
79
- url && (React.createElement(StyledStack, { size: size },
80
- React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit, loading: "lazy" })))));
81
- }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
82
- Avatar.Variant = AvatarVariant;
83
- Avatar.Size = SystemIconCircleSize;
43
+ },
44
+ defaultModifiers: {
45
+ variant: 'light',
46
+ size: 'medium',
47
+ isImageLoaded: 'false',
48
+ objectFit: 'contain',
49
+ }
50
+ }, "avatar-f68c19");
51
+ export const Avatar = createComponent('button')({
52
+ displayName: 'Avatar',
53
+ Component: ({ variant, size, altText = 'Avatar', url, objectFit, ...elemProps }, ref, Element) => {
54
+ const [imageLoaded, setImageLoaded] = useState(false);
55
+ const loadImage = () => {
56
+ if (!imageLoaded) {
57
+ setImageLoaded(true);
58
+ }
59
+ };
60
+ React.useLayoutEffect(() => {
61
+ setImageLoaded(false);
62
+ }, [url]);
63
+ return (React.createElement(Element, Object.assign({ ref: ref, "aria-label": altText }, mergeStyles(elemProps, [
64
+ avatarStencil({
65
+ variant,
66
+ size,
67
+ objectFit,
68
+ isImageLoaded: imageLoaded,
69
+ }),
70
+ ])),
71
+ React.createElement(SystemIcon, { icon: userIcon, "data-slot": "avatar-icon" }),
72
+ url && React.createElement("img", { "data-slot": "avatar-image", src: url, alt: altText, onLoad: loadImage })));
73
+ },
74
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "12.0.0-alpha.855-next.0",
3
+ "version": "12.0.0-alpha.862-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.855-next.0",
53
- "@workday/canvas-kit-styling": "^12.0.0-alpha.855-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.862-next.0",
53
+ "@workday/canvas-kit-styling": "^12.0.0-alpha.862-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^2.0.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "9bf5667e2a94b160d69cb88c2e053d29760a34a9"
70
+ "gitHead": "3b7726adda5b24aff4229e4ee8ca9f4f83522be3"
71
71
  }