@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.
148 lines • 6.55 kB
TypeScript
import React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
export interface BaseAvatarProps extends CSProps {
/**
* Children of the BaseAvatar.
*/
children?: React.ReactNode;
/**
* The variant of the Avatar.
* @default "blue"
*/
variant?: 'blue' | 'amber' | 'teal' | 'purple';
/**
* The size of the Avatar.
* `extraExtraSmall` is 24px x 24px
* `extraSmall` is 32px x 32px
* `small` is 40px x 40px
* `medium` is 48px x 48px
* `large` is 72px x 72px
* `extraLarge` is 96px x 96px
* `extraExtraLarge` is 120px x 120px
* @default "medium"
*/
size?: 'extraExtraSmall' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
}
export declare const baseAvatarStencil: 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>;
/**
* JSDoc for Avatar. Will be part of the Component API docs
*/
export declare const BaseAvatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", BaseAvatarProps> & {
Image: import("@workday/canvas-kit-react/common").ElementComponent<"img", import("./AvatarImage").AvatarImageProps>;
Name: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./AvatarName").AvatarNameProps>;
};
//# sourceMappingURL=BaseAvatar.d.ts.map