@workday/canvas-kit-preview-react 14.0.0-alpha.1212-next.0 → 14.0.0-alpha.1213-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 +5 -0
- package/avatar/lib/Avatar.tsx +152 -0
- 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/avatar/package.json +6 -0
- package/dist/commonjs/avatar/index.d.ts +6 -0
- package/dist/commonjs/avatar/index.d.ts.map +1 -0
- package/dist/commonjs/avatar/index.js +21 -0
- package/dist/commonjs/avatar/lib/Avatar.d.ts +234 -0
- package/dist/commonjs/avatar/lib/Avatar.d.ts.map +1 -0
- package/dist/commonjs/avatar/lib/Avatar.js +51 -0
- 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/index.d.ts +2 -1
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +2 -1
- package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +3 -3
- package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +5 -5
- package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +1 -1
- package/dist/commonjs/pill/lib/PillAvatar.d.ts +158 -169
- package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillAvatar.js +5 -4
- package/dist/es6/avatar/index.d.ts +6 -0
- package/dist/es6/avatar/index.d.ts.map +1 -0
- package/dist/es6/avatar/index.js +5 -0
- package/dist/es6/avatar/lib/Avatar.d.ts +234 -0
- package/dist/es6/avatar/lib/Avatar.d.ts.map +1 -0
- package/dist/es6/avatar/lib/Avatar.js +45 -0
- 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/index.d.ts +2 -1
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +2 -1
- package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +3 -3
- package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +5 -5
- package/dist/es6/information-highlight/lib/parts/Icon.d.ts +1 -1
- package/dist/es6/pill/lib/PillAvatar.d.ts +158 -169
- package/dist/es6/pill/lib/PillAvatar.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillAvatar.js +5 -4
- package/index.ts +2 -1
- package/package.json +4 -4
- package/pill/lib/PillAvatar.tsx +7 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAGjC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqExB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
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 { BaseAvatar, baseAvatarStencil } from './BaseAvatar';
|
|
6
|
+
export const avatarStencil = createStencil({
|
|
7
|
+
extends: baseAvatarStencil,
|
|
8
|
+
parts: {
|
|
9
|
+
avatarImage: 'avatar-image',
|
|
10
|
+
avatarName: 'avatar-name',
|
|
11
|
+
},
|
|
12
|
+
base: { name: "9aw6t", styles: "box-sizing:border-box;" },
|
|
13
|
+
modifiers: {
|
|
14
|
+
imageLoaded: {
|
|
15
|
+
false: { name: "24t5xr", styles: "[data-part=\"avatar-image\"]{display:none;}" }
|
|
16
|
+
},
|
|
17
|
+
objectFit: {
|
|
18
|
+
contain: { name: "1ngso1", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
|
|
19
|
+
cover: { name: "346tv9", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
|
|
20
|
+
fill: { name: "2fmgie", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
|
|
21
|
+
none: { name: "1u6u1", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
|
|
22
|
+
['scale-down']: { name: "4d1vf4", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
|
|
23
|
+
initial: { name: "crrue", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
|
|
24
|
+
inherit: { name: "1jucsi", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
|
|
25
|
+
unset: { name: "t95mm", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
|
|
26
|
+
['-moz-initial']: { name: "2eu3f2", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
|
|
27
|
+
['revert']: { name: "1d127p", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}, "avatar-b17e14");
|
|
31
|
+
/**
|
|
32
|
+
* JSDoc for Avatar. Will be part of the Component API docs
|
|
33
|
+
*/
|
|
34
|
+
export const Avatar = createComponent('div')({
|
|
35
|
+
displayName: 'Avatar',
|
|
36
|
+
Component: ({ url, name, variant, objectFit = 'cover', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
|
|
37
|
+
const [imageLoaded, setImageLoaded] = React.useState(false);
|
|
38
|
+
const handleImageLoad = () => {
|
|
39
|
+
if (!imageLoaded) {
|
|
40
|
+
setImageLoaded(true);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
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 }))] }));
|
|
44
|
+
},
|
|
45
|
+
});
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
|
@@ -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,12 @@
|
|
|
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: "1obfp9", 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
|
+
});
|
|
@@ -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,13 @@
|
|
|
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: "wq5uw", 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
|
+
});
|
|
@@ -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: string;
|
|
34
|
+
color: string;
|
|
35
|
+
};
|
|
36
|
+
amber: ({ backgroundColor, color }: {
|
|
37
|
+
backgroundColor: string;
|
|
38
|
+
color: string;
|
|
39
|
+
size: string;
|
|
40
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
41
|
+
backgroundColor: string;
|
|
42
|
+
color: string;
|
|
43
|
+
};
|
|
44
|
+
teal: ({ backgroundColor, color }: {
|
|
45
|
+
backgroundColor: string;
|
|
46
|
+
color: string;
|
|
47
|
+
size: string;
|
|
48
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
49
|
+
backgroundColor: string;
|
|
50
|
+
color: string;
|
|
51
|
+
};
|
|
52
|
+
purple: ({ backgroundColor, color }: {
|
|
53
|
+
backgroundColor: string;
|
|
54
|
+
color: string;
|
|
55
|
+
size: string;
|
|
56
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
57
|
+
backgroundColor: string;
|
|
58
|
+
color: string;
|
|
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,44 @@
|
|
|
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: "24mfuw", 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: "4a27uy", 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: "16wami", 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: "4237t9", 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: "6mg2b", 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: "19evwl", 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: "3unls5", 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: "u2zbv", 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: "3urp6u", 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: "49whfi", 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: "456ixs", 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: "19o354", 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
|
+
});
|
|
@@ -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,9 @@
|
|
|
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
|
+
};
|
package/dist/es6/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
export * from './avatar';
|
|
1
2
|
export * from './color-picker';
|
|
2
3
|
export * from './divider';
|
|
4
|
+
export * from './information-highlight';
|
|
3
5
|
export * from './loading-sparkles';
|
|
4
6
|
export * from './pill';
|
|
5
7
|
export * from './radio';
|
|
@@ -9,5 +11,4 @@ export * from './side-panel';
|
|
|
9
11
|
export * from './status-indicator';
|
|
10
12
|
export * from './text-area';
|
|
11
13
|
export * from './text-input';
|
|
12
|
-
export * from './information-highlight';
|
|
13
14
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/es6/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
|
package/dist/es6/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
export * from './avatar';
|
|
1
2
|
export * from './color-picker';
|
|
2
3
|
export * from './divider';
|
|
4
|
+
export * from './information-highlight';
|
|
3
5
|
export * from './loading-sparkles';
|
|
4
6
|
export * from './pill';
|
|
5
7
|
export * from './radio';
|
|
@@ -9,4 +11,3 @@ export * from './side-panel';
|
|
|
9
11
|
export * from './status-indicator';
|
|
10
12
|
export * from './text-area';
|
|
11
13
|
export * from './text-input';
|
|
12
|
-
export * from './information-highlight';
|
|
@@ -52,18 +52,18 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
|
|
|
52
52
|
};
|
|
53
53
|
}, {}, {}, never, never>;
|
|
54
54
|
export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
|
|
55
|
-
variant: "
|
|
55
|
+
variant: "informational" | "caution" | "critical";
|
|
56
56
|
emphasis: "high" | "low";
|
|
57
57
|
}> & {} & {}, {
|
|
58
58
|
state: {
|
|
59
|
-
variant: "
|
|
59
|
+
variant: "informational" | "caution" | "critical";
|
|
60
60
|
emphasis: "high" | "low";
|
|
61
61
|
};
|
|
62
62
|
events: {};
|
|
63
63
|
}> & {
|
|
64
64
|
Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
|
|
65
65
|
state: {
|
|
66
|
-
variant: "
|
|
66
|
+
variant: "informational" | "caution" | "critical";
|
|
67
67
|
emphasis: "high" | "low";
|
|
68
68
|
};
|
|
69
69
|
events: {};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
2
|
-
variant: "
|
|
2
|
+
variant: "informational" | "caution" | "critical";
|
|
3
3
|
emphasis: "high" | "low";
|
|
4
4
|
}> & {} & {}) | undefined) => {
|
|
5
5
|
state: {
|
|
6
|
-
variant: "
|
|
6
|
+
variant: "informational" | "caution" | "critical";
|
|
7
7
|
emphasis: "high" | "low";
|
|
8
8
|
};
|
|
9
9
|
events: {};
|
|
10
10
|
}) & import("@workday/canvas-kit-react/common").ModelExtras<{
|
|
11
|
-
variant: "
|
|
11
|
+
variant: "informational" | "caution" | "critical";
|
|
12
12
|
emphasis: "high" | "low";
|
|
13
13
|
}, {}, {
|
|
14
|
-
variant: "
|
|
14
|
+
variant: "informational" | "caution" | "critical";
|
|
15
15
|
emphasis: "high" | "low";
|
|
16
16
|
}, {}, {
|
|
17
17
|
state: {
|
|
18
|
-
variant: "
|
|
18
|
+
variant: "informational" | "caution" | "critical";
|
|
19
19
|
emphasis: "high" | "low";
|
|
20
20
|
};
|
|
21
21
|
events: {};
|
|
@@ -4,7 +4,7 @@ export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never
|
|
|
4
4
|
}
|
|
5
5
|
export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
|
|
6
6
|
state: {
|
|
7
|
-
variant: "
|
|
7
|
+
variant: "informational" | "caution" | "critical";
|
|
8
8
|
emphasis: "high" | "low";
|
|
9
9
|
};
|
|
10
10
|
events: {};
|