@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.
Files changed (64) hide show
  1. package/avatar/index.ts +5 -0
  2. package/avatar/lib/Avatar.tsx +152 -0
  3. package/avatar/lib/AvatarImage.tsx +20 -0
  4. package/avatar/lib/AvatarName.tsx +32 -0
  5. package/avatar/lib/BaseAvatar.tsx +127 -0
  6. package/avatar/lib/getInitialsFromName.ts +11 -0
  7. package/avatar/package.json +6 -0
  8. package/dist/commonjs/avatar/index.d.ts +6 -0
  9. package/dist/commonjs/avatar/index.d.ts.map +1 -0
  10. package/dist/commonjs/avatar/index.js +21 -0
  11. package/dist/commonjs/avatar/lib/Avatar.d.ts +234 -0
  12. package/dist/commonjs/avatar/lib/Avatar.d.ts.map +1 -0
  13. package/dist/commonjs/avatar/lib/Avatar.js +51 -0
  14. package/dist/commonjs/avatar/lib/AvatarImage.d.ts +6 -0
  15. package/dist/commonjs/avatar/lib/AvatarImage.d.ts.map +1 -0
  16. package/dist/commonjs/avatar/lib/AvatarImage.js +15 -0
  17. package/dist/commonjs/avatar/lib/AvatarName.d.ts +14 -0
  18. package/dist/commonjs/avatar/lib/AvatarName.d.ts.map +1 -0
  19. package/dist/commonjs/avatar/lib/AvatarName.js +16 -0
  20. package/dist/commonjs/avatar/lib/BaseAvatar.d.ts +148 -0
  21. package/dist/commonjs/avatar/lib/BaseAvatar.d.ts.map +1 -0
  22. package/dist/commonjs/avatar/lib/BaseAvatar.js +47 -0
  23. package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts +2 -0
  24. package/dist/commonjs/avatar/lib/getInitialsFromName.d.ts.map +1 -0
  25. package/dist/commonjs/avatar/lib/getInitialsFromName.js +13 -0
  26. package/dist/commonjs/index.d.ts +2 -1
  27. package/dist/commonjs/index.d.ts.map +1 -1
  28. package/dist/commonjs/index.js +2 -1
  29. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +3 -3
  30. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +5 -5
  31. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +1 -1
  32. package/dist/commonjs/pill/lib/PillAvatar.d.ts +158 -169
  33. package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +1 -1
  34. package/dist/commonjs/pill/lib/PillAvatar.js +5 -4
  35. package/dist/es6/avatar/index.d.ts +6 -0
  36. package/dist/es6/avatar/index.d.ts.map +1 -0
  37. package/dist/es6/avatar/index.js +5 -0
  38. package/dist/es6/avatar/lib/Avatar.d.ts +234 -0
  39. package/dist/es6/avatar/lib/Avatar.d.ts.map +1 -0
  40. package/dist/es6/avatar/lib/Avatar.js +45 -0
  41. package/dist/es6/avatar/lib/AvatarImage.d.ts +6 -0
  42. package/dist/es6/avatar/lib/AvatarImage.d.ts.map +1 -0
  43. package/dist/es6/avatar/lib/AvatarImage.js +12 -0
  44. package/dist/es6/avatar/lib/AvatarName.d.ts +14 -0
  45. package/dist/es6/avatar/lib/AvatarName.d.ts.map +1 -0
  46. package/dist/es6/avatar/lib/AvatarName.js +13 -0
  47. package/dist/es6/avatar/lib/BaseAvatar.d.ts +148 -0
  48. package/dist/es6/avatar/lib/BaseAvatar.d.ts.map +1 -0
  49. package/dist/es6/avatar/lib/BaseAvatar.js +44 -0
  50. package/dist/es6/avatar/lib/getInitialsFromName.d.ts +2 -0
  51. package/dist/es6/avatar/lib/getInitialsFromName.d.ts.map +1 -0
  52. package/dist/es6/avatar/lib/getInitialsFromName.js +9 -0
  53. package/dist/es6/index.d.ts +2 -1
  54. package/dist/es6/index.d.ts.map +1 -1
  55. package/dist/es6/index.js +2 -1
  56. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +3 -3
  57. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +5 -5
  58. package/dist/es6/information-highlight/lib/parts/Icon.d.ts +1 -1
  59. package/dist/es6/pill/lib/PillAvatar.d.ts +158 -169
  60. package/dist/es6/pill/lib/PillAvatar.d.ts.map +1 -1
  61. package/dist/es6/pill/lib/PillAvatar.js +5 -4
  62. package/index.ts +2 -1
  63. package/package.json +4 -4
  64. 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,2 @@
1
+ export declare const getInitialsFromName: (name: string) => string;
2
+ //# sourceMappingURL=getInitialsFromName.d.ts.map
@@ -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
+ };
@@ -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
@@ -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;AAC7B,cAAc,yBAAyB,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: "caution" | "critical" | "informational";
55
+ variant: "informational" | "caution" | "critical";
56
56
  emphasis: "high" | "low";
57
57
  }> & {} & {}, {
58
58
  state: {
59
- variant: "caution" | "critical" | "informational";
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: "caution" | "critical" | "informational";
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: "caution" | "critical" | "informational";
2
+ variant: "informational" | "caution" | "critical";
3
3
  emphasis: "high" | "low";
4
4
  }> & {} & {}) | undefined) => {
5
5
  state: {
6
- variant: "caution" | "critical" | "informational";
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: "caution" | "critical" | "informational";
11
+ variant: "informational" | "caution" | "critical";
12
12
  emphasis: "high" | "low";
13
13
  }, {}, {
14
- variant: "caution" | "critical" | "informational";
14
+ variant: "informational" | "caution" | "critical";
15
15
  emphasis: "high" | "low";
16
16
  }, {}, {
17
17
  state: {
18
- variant: "caution" | "critical" | "informational";
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: "caution" | "critical" | "informational";
7
+ variant: "informational" | "caution" | "critical";
8
8
  emphasis: "high" | "low";
9
9
  };
10
10
  events: {};