@workday/canvas-kit-preview-react 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0077-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 (51) hide show
  1. package/dist/commonjs/index.d.ts +1 -1
  2. package/dist/commonjs/index.d.ts.map +1 -1
  3. package/dist/commonjs/index.js +1 -1
  4. package/dist/es6/index.d.ts +1 -1
  5. package/dist/es6/index.d.ts.map +1 -1
  6. package/dist/es6/index.js +1 -1
  7. package/index.ts +1 -1
  8. package/package.json +4 -4
  9. package/avatar/index.ts +0 -5
  10. package/avatar/lib/Avatar.tsx +0 -156
  11. package/avatar/lib/AvatarImage.tsx +0 -20
  12. package/avatar/lib/AvatarName.tsx +0 -32
  13. package/avatar/lib/BaseAvatar.tsx +0 -127
  14. package/avatar/lib/getInitialsFromName.ts +0 -11
  15. package/avatar/package.json +0 -6
  16. package/dist/commonjs/avatar/index.d.ts +0 -6
  17. package/dist/commonjs/avatar/index.d.ts.map +0 -1
  18. package/dist/commonjs/avatar/index.js +0 -21
  19. package/dist/commonjs/avatar/lib/Avatar.d.ts +0 -281
  20. package/dist/commonjs/avatar/lib/Avatar.d.ts.map +0 -1
  21. package/dist/commonjs/avatar/lib/Avatar.js +0 -53
  22. package/dist/commonjs/avatar/lib/AvatarImage.d.ts +0 -6
  23. package/dist/commonjs/avatar/lib/AvatarImage.d.ts.map +0 -1
  24. package/dist/commonjs/avatar/lib/AvatarImage.js +0 -15
  25. package/dist/commonjs/avatar/lib/AvatarName.d.ts +0 -14
  26. package/dist/commonjs/avatar/lib/AvatarName.d.ts.map +0 -1
  27. package/dist/commonjs/avatar/lib/AvatarName.js +0 -16
  28. package/dist/commonjs/avatar/lib/BaseAvatar.d.ts +0 -148
  29. package/dist/commonjs/avatar/lib/BaseAvatar.d.ts.map +0 -1
  30. package/dist/commonjs/avatar/lib/BaseAvatar.js +0 -47
  31. package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts +0 -2
  32. package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts.map +0 -1
  33. package/dist/commonjs/avatar/lib/getInitialsFromName.js +0 -13
  34. package/dist/es6/avatar/index.d.ts +0 -6
  35. package/dist/es6/avatar/index.d.ts.map +0 -1
  36. package/dist/es6/avatar/index.js +0 -5
  37. package/dist/es6/avatar/lib/Avatar.d.ts +0 -281
  38. package/dist/es6/avatar/lib/Avatar.d.ts.map +0 -1
  39. package/dist/es6/avatar/lib/Avatar.js +0 -47
  40. package/dist/es6/avatar/lib/AvatarImage.d.ts +0 -6
  41. package/dist/es6/avatar/lib/AvatarImage.d.ts.map +0 -1
  42. package/dist/es6/avatar/lib/AvatarImage.js +0 -12
  43. package/dist/es6/avatar/lib/AvatarName.d.ts +0 -14
  44. package/dist/es6/avatar/lib/AvatarName.d.ts.map +0 -1
  45. package/dist/es6/avatar/lib/AvatarName.js +0 -13
  46. package/dist/es6/avatar/lib/BaseAvatar.d.ts +0 -148
  47. package/dist/es6/avatar/lib/BaseAvatar.d.ts.map +0 -1
  48. package/dist/es6/avatar/lib/BaseAvatar.js +0 -44
  49. package/dist/es6/avatar/lib/getInitialsFromName.d.ts +0 -2
  50. package/dist/es6/avatar/lib/getInitialsFromName.d.ts.map +0 -1
  51. package/dist/es6/avatar/lib/getInitialsFromName.js +0 -9
@@ -1,281 +0,0 @@
1
- import { Property } from 'csstype';
2
- import { BaseAvatarProps } from './BaseAvatar';
3
- import { AvatarNameProps } from './AvatarName';
4
- export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
5
- /**
6
- * The URL of the user's photo. For best fit, use square images.
7
- */
8
- url?: string;
9
- /**
10
- * An objectFit property that can customize how to resize your image to fit its container.
11
- * @default "contain"
12
- */
13
- objectFit?: Property.ObjectFit;
14
- /**
15
- * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
16
- */
17
- isDecorative?: boolean;
18
- }
19
- export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
20
- imageLoaded: {
21
- false: ({ avatarImagePart }: {
22
- backgroundColor: `--${string}`;
23
- color: `--${string}`;
24
- size: `--${string}`;
25
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
26
- readonly avatarImage: "avatar-image";
27
- readonly avatarName: "avatar-name";
28
- }>) => {
29
- "[data-part=\"avatar-image\"]": {
30
- display: string;
31
- };
32
- };
33
- true: {
34
- backgroundColor: "--cnvs-sys-color-bg-default";
35
- };
36
- };
37
- objectFit: {
38
- contain: ({ avatarImagePart }: {
39
- backgroundColor: `--${string}`;
40
- color: `--${string}`;
41
- size: `--${string}`;
42
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
43
- readonly avatarImage: "avatar-image";
44
- readonly avatarName: "avatar-name";
45
- }>) => {
46
- "[data-part=\"avatar-image\"]": {
47
- objectFit: string;
48
- };
49
- };
50
- cover: ({ avatarImagePart }: {
51
- backgroundColor: `--${string}`;
52
- color: `--${string}`;
53
- size: `--${string}`;
54
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
55
- readonly avatarImage: "avatar-image";
56
- readonly avatarName: "avatar-name";
57
- }>) => {
58
- "[data-part=\"avatar-image\"]": {
59
- objectFit: string;
60
- };
61
- };
62
- fill: ({ avatarImagePart }: {
63
- backgroundColor: `--${string}`;
64
- color: `--${string}`;
65
- size: `--${string}`;
66
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
67
- readonly avatarImage: "avatar-image";
68
- readonly avatarName: "avatar-name";
69
- }>) => {
70
- "[data-part=\"avatar-image\"]": {
71
- objectFit: string;
72
- };
73
- };
74
- none: ({ avatarImagePart }: {
75
- backgroundColor: `--${string}`;
76
- color: `--${string}`;
77
- size: `--${string}`;
78
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
79
- readonly avatarImage: "avatar-image";
80
- readonly avatarName: "avatar-name";
81
- }>) => {
82
- "[data-part=\"avatar-image\"]": {
83
- objectFit: string;
84
- };
85
- };
86
- "scale-down": ({ avatarImagePart }: {
87
- backgroundColor: `--${string}`;
88
- color: `--${string}`;
89
- size: `--${string}`;
90
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
91
- readonly avatarImage: "avatar-image";
92
- readonly avatarName: "avatar-name";
93
- }>) => {
94
- "[data-part=\"avatar-image\"]": {
95
- objectFit: string;
96
- };
97
- };
98
- initial: ({ avatarImagePart }: {
99
- backgroundColor: `--${string}`;
100
- color: `--${string}`;
101
- size: `--${string}`;
102
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
103
- readonly avatarImage: "avatar-image";
104
- readonly avatarName: "avatar-name";
105
- }>) => {
106
- "[data-part=\"avatar-image\"]": {
107
- objectFit: string;
108
- };
109
- };
110
- inherit: ({ avatarImagePart }: {
111
- backgroundColor: `--${string}`;
112
- color: `--${string}`;
113
- size: `--${string}`;
114
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
115
- readonly avatarImage: "avatar-image";
116
- readonly avatarName: "avatar-name";
117
- }>) => {
118
- "[data-part=\"avatar-image\"]": {
119
- objectFit: string;
120
- };
121
- };
122
- unset: ({ avatarImagePart }: {
123
- backgroundColor: `--${string}`;
124
- color: `--${string}`;
125
- size: `--${string}`;
126
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
127
- readonly avatarImage: "avatar-image";
128
- readonly avatarName: "avatar-name";
129
- }>) => {
130
- "[data-part=\"avatar-image\"]": {
131
- objectFit: string;
132
- };
133
- };
134
- "-moz-initial": ({ avatarImagePart }: {
135
- backgroundColor: `--${string}`;
136
- color: `--${string}`;
137
- size: `--${string}`;
138
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
139
- readonly avatarImage: "avatar-image";
140
- readonly avatarName: "avatar-name";
141
- }>) => {
142
- "[data-part=\"avatar-image\"]": {
143
- objectFit: string;
144
- };
145
- };
146
- revert: ({ avatarImagePart }: {
147
- backgroundColor: `--${string}`;
148
- color: `--${string}`;
149
- size: `--${string}`;
150
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{
151
- readonly avatarImage: "avatar-image";
152
- readonly avatarName: "avatar-name";
153
- }>) => {
154
- "[data-part=\"avatar-image\"]": {
155
- objectFit: string;
156
- };
157
- };
158
- };
159
- }, {
160
- readonly avatarImage: "avatar-image";
161
- readonly avatarName: "avatar-name";
162
- }, {}, import("@workday/canvas-kit-styling").Stencil<{
163
- variant: {
164
- blue: ({ backgroundColor, color }: {
165
- backgroundColor: `--${string}`;
166
- color: `--${string}`;
167
- size: `--${string}`;
168
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
169
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
170
- color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
171
- };
172
- amber: ({ backgroundColor, color }: {
173
- backgroundColor: `--${string}`;
174
- color: `--${string}`;
175
- size: `--${string}`;
176
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
177
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
178
- color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
179
- };
180
- teal: ({ backgroundColor, color }: {
181
- backgroundColor: `--${string}`;
182
- color: `--${string}`;
183
- size: `--${string}`;
184
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
185
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
186
- color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
187
- };
188
- purple: ({ backgroundColor, color }: {
189
- backgroundColor: `--${string}`;
190
- color: `--${string}`;
191
- size: `--${string}`;
192
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
193
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
194
- color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
195
- };
196
- };
197
- size: {
198
- extraExtraSmall: ({ size }: {
199
- backgroundColor: `--${string}`;
200
- color: `--${string}`;
201
- size: `--${string}`;
202
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
203
- fontFamily: "--cnvs-sys-font-family-default";
204
- fontWeight: "--cnvs-sys-font-weight-normal";
205
- lineHeight: "--cnvs-sys-line-height-subtext-small";
206
- fontSize: "--cnvs-sys-font-size-subtext-small";
207
- letterSpacing: "--cnvs-base-letter-spacing-50";
208
- };
209
- extraSmall: ({ size }: {
210
- backgroundColor: `--${string}`;
211
- color: `--${string}`;
212
- size: `--${string}`;
213
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
214
- fontFamily: "--cnvs-sys-font-family-default";
215
- fontWeight: "--cnvs-sys-font-weight-normal";
216
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
217
- fontSize: "--cnvs-sys-font-size-subtext-medium";
218
- letterSpacing: "--cnvs-base-letter-spacing-100";
219
- };
220
- small: ({ size }: {
221
- backgroundColor: `--${string}`;
222
- color: `--${string}`;
223
- size: `--${string}`;
224
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
225
- fontFamily: "--cnvs-sys-font-family-default";
226
- fontWeight: "--cnvs-sys-font-weight-normal";
227
- lineHeight: "--cnvs-sys-line-height-body-small";
228
- fontSize: "--cnvs-sys-font-size-body-small";
229
- letterSpacing: "--cnvs-base-letter-spacing-200";
230
- };
231
- medium: ({ size }: {
232
- backgroundColor: `--${string}`;
233
- color: `--${string}`;
234
- size: `--${string}`;
235
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
236
- fontFamily: "--cnvs-sys-font-family-default";
237
- fontWeight: "--cnvs-sys-font-weight-normal";
238
- lineHeight: "--cnvs-sys-line-height-body-medium";
239
- fontSize: "--cnvs-sys-font-size-body-medium";
240
- };
241
- large: ({ size }: {
242
- backgroundColor: `--${string}`;
243
- color: `--${string}`;
244
- size: `--${string}`;
245
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
246
- fontFamily: "--cnvs-sys-font-family-default";
247
- fontWeight: "--cnvs-sys-font-weight-bold";
248
- lineHeight: "--cnvs-sys-line-height-heading-medium";
249
- fontSize: "--cnvs-sys-font-size-heading-medium";
250
- };
251
- extraLarge: ({ size }: {
252
- backgroundColor: `--${string}`;
253
- color: `--${string}`;
254
- size: `--${string}`;
255
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
256
- fontFamily: "--cnvs-sys-font-family-default";
257
- fontWeight: "--cnvs-sys-font-weight-bold";
258
- lineHeight: "--cnvs-sys-line-height-title-small";
259
- fontSize: "--cnvs-sys-font-size-title-small";
260
- };
261
- extraExtraLarge: ({ size }: {
262
- backgroundColor: `--${string}`;
263
- color: `--${string}`;
264
- size: `--${string}`;
265
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
266
- fontFamily: "--cnvs-sys-font-family-default";
267
- fontWeight: "--cnvs-sys-font-weight-bold";
268
- lineHeight: "--cnvs-sys-line-height-title-medium";
269
- fontSize: "--cnvs-sys-font-size-title-medium";
270
- };
271
- };
272
- }, {}, {
273
- backgroundColor: string;
274
- color: string;
275
- size: string;
276
- }, never, never>, never>;
277
- /**
278
- * JSDoc for Avatar. Will be part of the Component API docs
279
- */
280
- export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", AvatarProps>;
281
- //# sourceMappingURL=Avatar.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAC,eAAe,EAAgC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}
@@ -1,47 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React from 'react';
3
- import { createComponent } from '@workday/canvas-kit-react/common';
4
- import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
5
- import { system } from '@workday/canvas-tokens-web';
6
- import { BaseAvatar, baseAvatarStencil } from './BaseAvatar';
7
- export const avatarStencil = createStencil({
8
- extends: baseAvatarStencil,
9
- parts: {
10
- avatarImage: 'avatar-image',
11
- avatarName: 'avatar-name',
12
- },
13
- base: { name: "11iq0a", styles: "box-sizing:border-box;" },
14
- modifiers: {
15
- imageLoaded: {
16
- false: { name: "1cr95k", styles: "[data-part=\"avatar-image\"]{display:none;}" },
17
- true: { name: "21awd2", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
18
- },
19
- objectFit: {
20
- contain: { name: "43qbeo", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
21
- cover: { name: "omtaa", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
22
- fill: { name: "1og5lu", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
23
- none: { name: "38xksi", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
24
- ['scale-down']: { name: "1mjstm", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
25
- initial: { name: "sfrv", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
26
- inherit: { name: "1c6pkc", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
27
- unset: { name: "87qd7", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
28
- ['-moz-initial']: { name: "373nc2", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
29
- ['revert']: { name: "31qeat", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
30
- }
31
- }
32
- }, "avatar-e93ffc");
33
- /**
34
- * JSDoc for Avatar. Will be part of the Component API docs
35
- */
36
- export const Avatar = createComponent('div')({
37
- displayName: 'Avatar',
38
- Component: ({ url, name, variant, objectFit = 'contain', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
39
- const [imageLoaded, setImageLoaded] = React.useState(false);
40
- const handleImageLoad = () => {
41
- if (!imageLoaded) {
42
- setImageLoaded(true);
43
- }
44
- };
45
- return (_jsxs(BaseAvatar, { as: Element, ref: ref, ...handleCsProp(elemProps, avatarStencil({ variant, size, imageLoaded, objectFit })), children: [url && (_jsx(_Fragment, { children: _jsx(BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && (_jsx(BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...avatarStencil.parts.avatarName }))] }));
46
- },
47
- });
@@ -1,6 +0,0 @@
1
- import { CSProps } from '@workday/canvas-kit-styling';
2
- export interface AvatarImageProps extends CSProps {
3
- }
4
- export declare const avatarImageStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
5
- export declare const AvatarImage: import("@workday/canvas-kit-react/common").ElementComponent<"img", AvatarImageProps>;
6
- //# sourceMappingURL=AvatarImage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarImage.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAEjF,MAAM,WAAW,gBAAiB,SAAQ,OAAO;CAAG;AAEpD,eAAO,MAAM,kBAAkB,iJAM7B,CAAC;AAEH,eAAO,MAAM,WAAW,sFAKtB,CAAC"}
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
4
- export const avatarImageStencil = createStencil({
5
- base: { name: "3g853f", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
6
- }, "avatar-image-e8e8d8");
7
- export const AvatarImage = createComponent('img')({
8
- displayName: 'AvatarImage',
9
- Component: ({ ...elemProps }, ref, Element) => {
10
- return _jsx(Element, { ref: ref, ...handleCsProp(elemProps, avatarImageStencil()) });
11
- },
12
- });
@@ -1,14 +0,0 @@
1
- import { CSProps } from '@workday/canvas-kit-styling';
2
- export interface AvatarNameProps extends CSProps {
3
- /**
4
- * The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
5
- */
6
- name: string;
7
- /**
8
- * If you want full control over the initials, use `preferredInitials` instead.
9
- */
10
- preferredInitials?: string;
11
- }
12
- export declare const avatarNameStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
13
- export declare const AvatarName: import("@workday/canvas-kit-react/common").ElementComponent<"span", AvatarNameProps>;
14
- //# sourceMappingURL=AvatarName.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarName.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/AvatarName.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAGjF,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,iJAK5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFASrB,CAAC"}
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
4
- import { getInitialsFromName } from './getInitialsFromName';
5
- export const avatarNameStencil = createStencil({
6
- base: { name: "2ezy3g", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
7
- }, "avatar-name-ead534");
8
- export const AvatarName = createComponent('span')({
9
- displayName: 'AvatarName',
10
- Component: ({ name, preferredInitials, ...elemProps }, ref, Element) => {
11
- return (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, avatarNameStencil()), children: preferredInitials || getInitialsFromName(name) }));
12
- },
13
- });
@@ -1,148 +0,0 @@
1
- import React from 'react';
2
- import { CSProps } from '@workday/canvas-kit-styling';
3
- export interface BaseAvatarProps extends CSProps {
4
- /**
5
- * Children of the BaseAvatar.
6
- */
7
- children?: React.ReactNode;
8
- /**
9
- * The variant of the Avatar.
10
- * @default "blue"
11
- */
12
- variant?: 'blue' | 'amber' | 'teal' | 'purple';
13
- /**
14
- * The size of the Avatar.
15
- * `extraExtraSmall` is 24px x 24px
16
- * `extraSmall` is 32px x 32px
17
- * `small` is 40px x 40px
18
- * `medium` is 48px x 48px
19
- * `large` is 72px x 72px
20
- * `extraLarge` is 96px x 96px
21
- * `extraExtraLarge` is 120px x 120px
22
- * @default "medium"
23
- */
24
- size?: 'extraExtraSmall' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
25
- }
26
- export declare const baseAvatarStencil: import("@workday/canvas-kit-styling").Stencil<{
27
- variant: {
28
- blue: ({ backgroundColor, color }: {
29
- backgroundColor: `--${string}`;
30
- color: `--${string}`;
31
- size: `--${string}`;
32
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
33
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-300))`;
34
- color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
35
- };
36
- amber: ({ backgroundColor, color }: {
37
- backgroundColor: `--${string}`;
38
- color: `--${string}`;
39
- size: `--${string}`;
40
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
41
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
42
- color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
43
- };
44
- teal: ({ backgroundColor, color }: {
45
- backgroundColor: `--${string}`;
46
- color: `--${string}`;
47
- size: `--${string}`;
48
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
49
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
50
- color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
51
- };
52
- purple: ({ backgroundColor, color }: {
53
- backgroundColor: `--${string}`;
54
- color: `--${string}`;
55
- size: `--${string}`;
56
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
57
- backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
58
- color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
59
- };
60
- };
61
- size: {
62
- extraExtraSmall: ({ size }: {
63
- backgroundColor: `--${string}`;
64
- color: `--${string}`;
65
- size: `--${string}`;
66
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
67
- fontFamily: "--cnvs-sys-font-family-default";
68
- fontWeight: "--cnvs-sys-font-weight-normal";
69
- lineHeight: "--cnvs-sys-line-height-subtext-small";
70
- fontSize: "--cnvs-sys-font-size-subtext-small";
71
- letterSpacing: "--cnvs-base-letter-spacing-50";
72
- };
73
- extraSmall: ({ size }: {
74
- backgroundColor: `--${string}`;
75
- color: `--${string}`;
76
- size: `--${string}`;
77
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
78
- fontFamily: "--cnvs-sys-font-family-default";
79
- fontWeight: "--cnvs-sys-font-weight-normal";
80
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
81
- fontSize: "--cnvs-sys-font-size-subtext-medium";
82
- letterSpacing: "--cnvs-base-letter-spacing-100";
83
- };
84
- small: ({ size }: {
85
- backgroundColor: `--${string}`;
86
- color: `--${string}`;
87
- size: `--${string}`;
88
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
89
- fontFamily: "--cnvs-sys-font-family-default";
90
- fontWeight: "--cnvs-sys-font-weight-normal";
91
- lineHeight: "--cnvs-sys-line-height-body-small";
92
- fontSize: "--cnvs-sys-font-size-body-small";
93
- letterSpacing: "--cnvs-base-letter-spacing-200";
94
- };
95
- medium: ({ size }: {
96
- backgroundColor: `--${string}`;
97
- color: `--${string}`;
98
- size: `--${string}`;
99
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
100
- fontFamily: "--cnvs-sys-font-family-default";
101
- fontWeight: "--cnvs-sys-font-weight-normal";
102
- lineHeight: "--cnvs-sys-line-height-body-medium";
103
- fontSize: "--cnvs-sys-font-size-body-medium";
104
- };
105
- large: ({ size }: {
106
- backgroundColor: `--${string}`;
107
- color: `--${string}`;
108
- size: `--${string}`;
109
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
110
- fontFamily: "--cnvs-sys-font-family-default";
111
- fontWeight: "--cnvs-sys-font-weight-bold";
112
- lineHeight: "--cnvs-sys-line-height-heading-medium";
113
- fontSize: "--cnvs-sys-font-size-heading-medium";
114
- };
115
- extraLarge: ({ size }: {
116
- backgroundColor: `--${string}`;
117
- color: `--${string}`;
118
- size: `--${string}`;
119
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
120
- fontFamily: "--cnvs-sys-font-family-default";
121
- fontWeight: "--cnvs-sys-font-weight-bold";
122
- lineHeight: "--cnvs-sys-line-height-title-small";
123
- fontSize: "--cnvs-sys-font-size-title-small";
124
- };
125
- extraExtraLarge: ({ size }: {
126
- backgroundColor: `--${string}`;
127
- color: `--${string}`;
128
- size: `--${string}`;
129
- } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
130
- fontFamily: "--cnvs-sys-font-family-default";
131
- fontWeight: "--cnvs-sys-font-weight-bold";
132
- lineHeight: "--cnvs-sys-line-height-title-medium";
133
- fontSize: "--cnvs-sys-font-size-title-medium";
134
- };
135
- };
136
- }, {}, {
137
- backgroundColor: string;
138
- color: string;
139
- size: string;
140
- }, never, never>;
141
- /**
142
- * JSDoc for Avatar. Will be part of the Component API docs
143
- */
144
- export declare const BaseAvatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", BaseAvatarProps> & {
145
- Image: import("@workday/canvas-kit-react/common").ElementComponent<"img", import("./AvatarImage").AvatarImageProps>;
146
- Name: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./AvatarName").AvatarNameProps>;
147
- };
148
- //# sourceMappingURL=BaseAvatar.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BaseAvatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/BaseAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAA4C,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAG/F,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAE/C;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EACD,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAsE5B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;;CASrB,CAAC"}
@@ -1,44 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { AvatarImage } from './AvatarImage';
4
- import { AvatarName } from './AvatarName';
5
- import { createStencil, cssVar, calc, handleCsProp } from '@workday/canvas-kit-styling';
6
- import { system, base } from '@workday/canvas-tokens-web';
7
- export const baseAvatarStencil = createStencil({
8
- vars: {
9
- backgroundColor: '',
10
- color: '',
11
- size: '',
12
- },
13
- base: { name: "2276l2", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);width:var(--size-base-avatar-b2787e, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));height:var(--size-base-avatar-b2787e, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-blue-800));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);" },
14
- modifiers: {
15
- variant: {
16
- blue: { name: "1monu3", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-blue-800));" },
17
- amber: { name: "6vl7x", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-amber-200));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-amber-700));" },
18
- teal: { name: "1uu1i2", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-teal-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-teal-800));" },
19
- purple: { name: "zp8v4", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-purple-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-purple-800));" }
20
- },
21
- size: {
22
- extraExtraSmall: { name: "3oglon", styles: "--size-base-avatar-b2787e:var(--cnvs-sys-space-x6);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);" },
23
- extraSmall: { name: "48lf34", styles: "--size-base-avatar-b2787e:var(--cnvs-sys-space-x8);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);" },
24
- small: { name: "3p0m0i", styles: "--size-base-avatar-b2787e:var(--cnvs-sys-space-x10);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);" },
25
- medium: { name: "4cjxsy", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);" },
26
- large: { name: "2fjoig", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x16) + var(--cnvs-sys-space-x2));font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);" },
27
- extraLarge: { name: "4d4sqz", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x20) + var(--cnvs-sys-space-x4));font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);" },
28
- extraExtraLarge: { name: "8j63u", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x10) * 3);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);" }
29
- }
30
- }
31
- }, "base-avatar-b2787e");
32
- /**
33
- * JSDoc for Avatar. Will be part of the Component API docs
34
- */
35
- export const BaseAvatar = createComponent('div')({
36
- displayName: 'BaseAvatar',
37
- subComponents: {
38
- Image: AvatarImage,
39
- Name: AvatarName,
40
- },
41
- Component: ({ variant, size, ...elemProps }, ref, Element) => {
42
- return _jsx(Element, { ref: ref, ...handleCsProp(elemProps, baseAvatarStencil({ variant, size })) });
43
- },
44
- });
@@ -1,2 +0,0 @@
1
- export declare const getInitialsFromName: (name: string) => string;
2
- //# sourceMappingURL=getInitialsFromName.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getInitialsFromName.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/getInitialsFromName.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,SAAU,MAAM,WAU/C,CAAC"}
@@ -1,9 +0,0 @@
1
- export const getInitialsFromName = (name) => {
2
- // Trim and split by one or more whitespace characters
3
- const nameParts = name.trim().split(/\s+/).filter(Boolean);
4
- const first = nameParts[0];
5
- const firstInitial = (first === null || first === void 0 ? void 0 : first[0]) || '';
6
- const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
7
- const lastInitial = (last === null || last === void 0 ? void 0 : last[0]) || '';
8
- return `${firstInitial}${lastInitial}`;
9
- };