@workday/canvas-kit-preview-react
Version:
Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.
281 lines • 11.4 kB
TypeScript
import { Property } from 'csstype';
import { BaseAvatarProps } from './BaseAvatar';
import { AvatarNameProps } from './AvatarName';
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-300))`;
color: `var(--${string}, var(--cnvs-base-palette-blue-800))`;
};
amber: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-200))`;
color: `var(--${string}, var(--cnvs-base-palette-amber-700))`;
};
teal: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300))`;
color: `var(--${string}, var(--cnvs-base-palette-teal-800))`;
};
purple: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-300))`;
color: `var(--${string}, var(--cnvs-base-palette-purple-800))`;
};
};
size: {
extraExtraSmall: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
lineHeight: "--cnvs-sys-line-height-subtext-small";
fontSize: "--cnvs-sys-font-size-subtext-small";
letterSpacing: "--cnvs-base-letter-spacing-50";
};
extraSmall: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
lineHeight: "--cnvs-sys-line-height-subtext-medium";
fontSize: "--cnvs-sys-font-size-subtext-medium";
letterSpacing: "--cnvs-base-letter-spacing-100";
};
small: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
lineHeight: "--cnvs-sys-line-height-body-small";
fontSize: "--cnvs-sys-font-size-body-small";
letterSpacing: "--cnvs-base-letter-spacing-200";
};
medium: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
lineHeight: "--cnvs-sys-line-height-body-medium";
fontSize: "--cnvs-sys-font-size-body-medium";
};
large: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "--cnvs-sys-line-height-heading-medium";
fontSize: "--cnvs-sys-font-size-heading-medium";
};
extraLarge: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "--cnvs-sys-line-height-title-small";
fontSize: "--cnvs-sys-font-size-title-small";
};
extraExtraLarge: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "--cnvs-sys-line-height-title-medium";
fontSize: "--cnvs-sys-font-size-title-medium";
};
};
}, {}, {
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