@workday/canvas-kit-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.
- package/avatar/index.ts +4 -0
- package/avatar/lib/Avatar.tsx +85 -243
- package/avatar/lib/AvatarImage.tsx +20 -0
- package/avatar/lib/AvatarName.tsx +32 -0
- package/avatar/lib/BaseAvatar.tsx +127 -0
- package/avatar/lib/getInitialsFromName.ts +11 -0
- package/dist/commonjs/avatar/index.d.ts +4 -0
- package/dist/commonjs/avatar/index.d.ts.map +1 -1
- package/dist/commonjs/avatar/index.js +4 -0
- package/dist/commonjs/avatar/lib/Avatar.d.ts +183 -185
- package/dist/commonjs/avatar/lib/Avatar.d.ts.map +1 -1
- package/dist/commonjs/avatar/lib/Avatar.js +29 -113
- package/dist/commonjs/avatar/lib/AvatarImage.d.ts +6 -0
- package/dist/commonjs/avatar/lib/AvatarImage.d.ts.map +1 -0
- package/dist/commonjs/avatar/lib/AvatarImage.js +15 -0
- package/dist/commonjs/avatar/lib/AvatarName.d.ts +14 -0
- package/dist/commonjs/avatar/lib/AvatarName.d.ts.map +1 -0
- package/dist/commonjs/avatar/lib/AvatarName.js +16 -0
- package/dist/commonjs/avatar/lib/BaseAvatar.d.ts +148 -0
- package/dist/commonjs/avatar/lib/BaseAvatar.d.ts.map +1 -0
- package/dist/commonjs/avatar/lib/BaseAvatar.js +47 -0
- package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts +2 -0
- package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts.map +1 -0
- package/dist/commonjs/avatar/lib/getInitialsFromName.js +13 -0
- package/dist/commonjs/expandable/lib/ExpandableAvatar.d.ts +1 -1
- package/dist/commonjs/expandable/lib/ExpandableAvatar.d.ts.map +1 -1
- package/dist/commonjs/expandable/lib/ExpandableAvatar.js +3 -3
- package/dist/commonjs/pill/lib/PillAvatar.d.ts +1 -1
- package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillAvatar.js +3 -3
- package/dist/es6/avatar/index.d.ts +4 -0
- package/dist/es6/avatar/index.d.ts.map +1 -1
- package/dist/es6/avatar/index.js +4 -0
- package/dist/es6/avatar/lib/Avatar.d.ts +183 -185
- package/dist/es6/avatar/lib/Avatar.d.ts.map +1 -1
- package/dist/es6/avatar/lib/Avatar.js +29 -93
- package/dist/es6/avatar/lib/AvatarImage.d.ts +6 -0
- package/dist/es6/avatar/lib/AvatarImage.d.ts.map +1 -0
- package/dist/es6/avatar/lib/AvatarImage.js +12 -0
- package/dist/es6/avatar/lib/AvatarName.d.ts +14 -0
- package/dist/es6/avatar/lib/AvatarName.d.ts.map +1 -0
- package/dist/es6/avatar/lib/AvatarName.js +13 -0
- package/dist/es6/avatar/lib/BaseAvatar.d.ts +148 -0
- package/dist/es6/avatar/lib/BaseAvatar.d.ts.map +1 -0
- package/dist/es6/avatar/lib/BaseAvatar.js +44 -0
- package/dist/es6/avatar/lib/getInitialsFromName.d.ts +2 -0
- package/dist/es6/avatar/lib/getInitialsFromName.d.ts.map +1 -0
- package/dist/es6/avatar/lib/getInitialsFromName.js +9 -0
- package/dist/es6/expandable/lib/ExpandableAvatar.d.ts +1 -1
- package/dist/es6/expandable/lib/ExpandableAvatar.d.ts.map +1 -1
- package/dist/es6/expandable/lib/ExpandableAvatar.js +3 -3
- package/dist/es6/pill/lib/PillAvatar.d.ts +1 -1
- package/dist/es6/pill/lib/PillAvatar.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillAvatar.js +3 -3
- package/expandable/lib/ExpandableAvatar.tsx +1 -1
- package/package.json +5 -5
- package/pill/lib/PillAvatar.tsx +1 -1
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AvatarImage = exports.avatarImageStencil = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
7
|
+
exports.avatarImageStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
8
|
+
base: { name: "3g853f", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
|
|
9
|
+
}, "avatar-image-4ccccb");
|
|
10
|
+
exports.AvatarImage = (0, common_1.createComponent)('img')({
|
|
11
|
+
displayName: 'AvatarImage',
|
|
12
|
+
Component: ({ ...elemProps }, ref, Element) => {
|
|
13
|
+
return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarImageStencil)()) });
|
|
14
|
+
},
|
|
15
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AvatarName = exports.avatarNameStencil = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
7
|
+
const getInitialsFromName_1 = require("./getInitialsFromName");
|
|
8
|
+
exports.avatarNameStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
9
|
+
base: { name: "2ezy3g", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
|
|
10
|
+
}, "avatar-name-54f0c2");
|
|
11
|
+
exports.AvatarName = (0, common_1.createComponent)('span')({
|
|
12
|
+
displayName: 'AvatarName',
|
|
13
|
+
Component: ({ name, preferredInitials, ...elemProps }, ref, Element) => {
|
|
14
|
+
return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarNameStencil)()), children: preferredInitials || (0, getInitialsFromName_1.getInitialsFromName)(name) }));
|
|
15
|
+
},
|
|
16
|
+
});
|
|
@@ -0,0 +1,148 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BaseAvatar = exports.baseAvatarStencil = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const AvatarImage_1 = require("./AvatarImage");
|
|
7
|
+
const AvatarName_1 = require("./AvatarName");
|
|
8
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
9
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
10
|
+
exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
|
+
vars: {
|
|
12
|
+
backgroundColor: '',
|
|
13
|
+
color: '',
|
|
14
|
+
size: '',
|
|
15
|
+
},
|
|
16
|
+
base: { name: "2276l2", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);width:var(--size-base-avatar-12352d, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));height:var(--size-base-avatar-12352d, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));background-color:var(--backgroundColor-base-avatar-12352d, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-12352d, 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);" },
|
|
17
|
+
modifiers: {
|
|
18
|
+
variant: {
|
|
19
|
+
blue: { name: "1monu3", styles: "background-color:var(--backgroundColor-base-avatar-12352d, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-12352d, var(--cnvs-base-palette-blue-800));" },
|
|
20
|
+
amber: { name: "6vl7x", styles: "background-color:var(--backgroundColor-base-avatar-12352d, var(--cnvs-base-palette-amber-200));color:var(--color-base-avatar-12352d, var(--cnvs-base-palette-amber-700));" },
|
|
21
|
+
teal: { name: "1uu1i2", styles: "background-color:var(--backgroundColor-base-avatar-12352d, var(--cnvs-base-palette-teal-300));color:var(--color-base-avatar-12352d, var(--cnvs-base-palette-teal-800));" },
|
|
22
|
+
purple: { name: "zp8v4", styles: "background-color:var(--backgroundColor-base-avatar-12352d, var(--cnvs-base-palette-purple-300));color:var(--color-base-avatar-12352d, var(--cnvs-base-palette-purple-800));" }
|
|
23
|
+
},
|
|
24
|
+
size: {
|
|
25
|
+
extraExtraSmall: { name: "3oglon", styles: "--size-base-avatar-12352d: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);" },
|
|
26
|
+
extraSmall: { name: "48lf34", styles: "--size-base-avatar-12352d: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);" },
|
|
27
|
+
small: { name: "3p0m0i", styles: "--size-base-avatar-12352d: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);" },
|
|
28
|
+
medium: { name: "4cjxsy", styles: "--size-base-avatar-12352d: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);" },
|
|
29
|
+
large: { name: "2fjoig", styles: "--size-base-avatar-12352d: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);" },
|
|
30
|
+
extraLarge: { name: "4d4sqz", styles: "--size-base-avatar-12352d: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);" },
|
|
31
|
+
extraExtraLarge: { name: "8j63u", styles: "--size-base-avatar-12352d: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);" }
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}, "base-avatar-12352d");
|
|
35
|
+
/**
|
|
36
|
+
* JSDoc for Avatar. Will be part of the Component API docs
|
|
37
|
+
*/
|
|
38
|
+
exports.BaseAvatar = (0, common_1.createComponent)('div')({
|
|
39
|
+
displayName: 'BaseAvatar',
|
|
40
|
+
subComponents: {
|
|
41
|
+
Image: AvatarImage_1.AvatarImage,
|
|
42
|
+
Name: AvatarName_1.AvatarName,
|
|
43
|
+
},
|
|
44
|
+
Component: ({ variant, size, ...elemProps }, ref, Element) => {
|
|
45
|
+
return (0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.baseAvatarStencil)({ variant, size })) });
|
|
46
|
+
},
|
|
47
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getInitialsFromName.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/getInitialsFromName.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,SAAU,MAAM,WAU/C,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getInitialsFromName = void 0;
|
|
4
|
+
const getInitialsFromName = (name) => {
|
|
5
|
+
// Trim and split by one or more whitespace characters
|
|
6
|
+
const nameParts = name.trim().split(/\s+/).filter(Boolean);
|
|
7
|
+
const first = nameParts[0];
|
|
8
|
+
const firstInitial = (first === null || first === void 0 ? void 0 : first[0]) || '';
|
|
9
|
+
const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
|
|
10
|
+
const lastInitial = (last === null || last === void 0 ? void 0 : last[0]) || '';
|
|
11
|
+
return `${firstInitial}${lastInitial}`;
|
|
12
|
+
};
|
|
13
|
+
exports.getInitialsFromName = getInitialsFromName;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarProps } from '
|
|
1
|
+
import { AvatarProps } from '../../avatar';
|
|
2
2
|
export interface ExpandableAvatarProps extends AvatarProps {
|
|
3
3
|
}
|
|
4
4
|
export declare const expandableAvatarStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableAvatar.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"ExpandableAvatar.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,cAAc,CAAC;AAIhE,MAAM,WAAW,qBAAsB,SAAQ,WAAW;CAAG;AAE7D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAKlC,CAAC;AAMH,eAAO,MAAM,gBAAgB,2FAkB3B,CAAC"}
|
|
@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.ExpandableAvatar = exports.expandableAvatarStencil = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
const avatar_1 = require("
|
|
6
|
+
const avatar_1 = require("../../avatar");
|
|
7
7
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
8
8
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
9
|
exports.expandableAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
10
10
|
extends: avatar_1.avatarStencil,
|
|
11
|
-
base: { name: "
|
|
12
|
-
}, "expandable-avatar-
|
|
11
|
+
base: { name: "24kicv", styles: "box-sizing:border-box;flex-shrink:0;" }
|
|
12
|
+
}, "expandable-avatar-96f8b2");
|
|
13
13
|
// When the component is created, it needs to be a button element to match AvatarProps.
|
|
14
14
|
// Once Avatar becomes a `createComponent` we can default the element type to a `div`
|
|
15
15
|
// and the types should be properly extracted
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarProps } from '@workday/canvas-kit-
|
|
1
|
+
import { AvatarProps } from '@workday/canvas-kit-react/avatar';
|
|
2
2
|
export interface PillAvatarProps extends AvatarProps {
|
|
3
3
|
}
|
|
4
4
|
export declare const pillAvatarStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,WAAW,EAAgB,MAAM,kCAAkC,CAAC;AAMpF,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAS5B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}
|
|
@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PillAvatar = exports.pillAvatarStencil = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
const avatar_1 = require("@workday/canvas-kit-
|
|
6
|
+
const avatar_1 = require("@workday/canvas-kit-react/avatar");
|
|
7
7
|
const usePillModel_1 = require("./usePillModel");
|
|
8
8
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
9
9
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
10
10
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
11
11
|
exports.pillAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
12
|
extends: avatar_1.avatarStencil,
|
|
13
|
-
base: { name: "
|
|
14
|
-
}, "pill-avatar-
|
|
13
|
+
base: { name: "3cfgq0", styles: "box-sizing:border-box;flex:0 0 auto;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);&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
14
|
+
}, "pill-avatar-36143b");
|
|
15
15
|
exports.PillAvatar = (0, common_1.createSubcomponent)('div')({
|
|
16
16
|
modelHook: usePillModel_1.usePillModel,
|
|
17
17
|
})(({ size, ...elemProps }, Element, _model) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}
|