@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
295 lines • 14.7 kB
TypeScript
import { Property } from 'csstype';
import { AvatarNameProps } from './AvatarName';
import { BaseAvatarProps } from './BaseAvatar';
export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
/**
* The URL of the user's photo. For best fit, use square images.
*/
url?: string;
/**
* An objectFit property that can customize how to resize your image to fit its container.
* @default "contain"
*/
objectFit?: Property.ObjectFit;
/**
* 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.
*/
isDecorative?: boolean;
}
export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
imageLoaded: {
false: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
display: string;
};
};
true: {
backgroundColor: "--cnvs-sys-color-bg-default";
};
};
objectFit: {
contain: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
cover: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
fill: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
none: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
"scale-down": ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
initial: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
inherit: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
unset: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
"-moz-initial": ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
revert: ({ avatarImagePart }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: string;
};
};
};
}, {
readonly avatarImage: "avatar-image";
readonly avatarName: "avatar-name";
}, {}, import("@workday/canvas-kit-styling").Stencil<{
variant: {
blue: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)))`; /**
* JSDoc for Avatar. Will be part of the Component API docs
*/
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
amber: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)))`;
color: `var(--${string}, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)))`;
};
teal: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)))`;
color: `var(--${string}, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)))`;
};
purple: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
magenta: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
green: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
};
size: {
extraExtraSmall: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))" | "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))" | "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
};
extraSmall: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))" | "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))" | "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
};
small: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))" | "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))" | "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))" | "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
};
medium: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))" | "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))" | "var(--cnvs-base-size-600, 3rem)";
lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
};
large: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))" | "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))" | "var(--cnvs-base-size-900, 4.5rem)";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
};
extraLarge: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))" | "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))" | "var(--cnvs-base-size-1200, 6rem)";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
};
extraExtraLarge: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: string;
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
};
};
}, {}, {
backgroundColor: string;
color: string;
size: string;
}, never, never>, never>;
/**
* JSDoc for Avatar. Will be part of the Component API docs
*/
export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", AvatarProps>;
//# sourceMappingURL=Avatar.d.ts.map