@workday/canvas-kit-react 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0077-next.0

package/avatar/index.ts

@@ -1 +1,5 @@
 export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';

package/avatar/lib/Avatar.tsx

@@ -1,55 +1,14 @@
-import React, {useState} from 'react';
-import {Property} from 'csstype';
-import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {createStencil, calc, CSProps, px2rem} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, SystemIconCircleSize, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import React from 'react';
 
-import {userIcon} from '@workday/canvas-system-icons-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Property} from 'csstype';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-/**
- * @deprecated ⚠️ `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
- */
-export enum AvatarVariant {
-  Light,
-  Dark,
-}
+import {BaseAvatarProps, BaseAvatar, baseAvatarStencil} from './BaseAvatar';
+import {AvatarNameProps} from './AvatarName';
 
-/**
- * @deprecated ⚠️ `AvatarProps` is deprecated and will be removed in a future major version. Please use the `Avatar` component from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
-export interface AvatarProps extends CSProps {
-  /**
-   * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
-   * @default "light"
-   */
-  variant?: 'light' | 'dark' | AvatarVariant;
-  /**
-   * The size of the Avatar.
-   * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
-   * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
-   * - `large`: 2.5rem x 2.5rem (40px x 40px)
-   * - `medium`: 2rem x 2rem (32px x 32px)
-   * - `small`: 1.5rem x 1.5rem (24px x 24px)
-   * - `small`: 1rem x 1rem (16px x 16px)
-   * @default "medium"
-   */
-  size?: /** size of small */
-  | 'extraSmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'extraLarge'
-    | 'extraExtraLarge'
-    | (string & {})
-    | SystemIconCircleSize
-    | number;
-  /**
-   * The alt text of the Avatar image. This prop is also used for the aria-label.
-   */
-  altText?: string;
+export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
   /**
    * The URL of the user's photo. For best fit, use square images.
    */
@@ -59,256 +18,139 @@ export interface AvatarProps extends CSProps {
    * @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;
 }
 
-/**
- * @deprecated `avatarStencil` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
 export const avatarStencil = createStencil({
-  vars: {
-    size: '',
-  },
+  extends: baseAvatarStencil,
   parts: {
-    icon: 'avatar-icon',
-    image: 'avatar-image',
+    avatarImage: 'avatar-image',
+    avatarName: 'avatar-name',
   },
-  base: ({size, iconPart, imagePart}) => ({
-    background: system.color.bg.caution.default,
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    overflow: 'hidden',
-    cursor: 'default',
-    pointerEvents: 'none',
-    borderRadius: system.shape.round,
-    width: size,
-    height: size,
-    '&:focus-visible, &.focus': {
-      outline: 'none',
-      ...focusRing({separation: 2}),
-    },
-    ':is(button)': {
-      cursor: 'pointer',
-      pointerEvents: 'auto',
-    },
-    '&:disabled, &.disabled': {
-      opacity: system.opacity.disabled,
-    },
-    [iconPart]: {
-      transition: 'opacity 150ms linear',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      [systemIconStencil.vars.size]: calc.multiply(size, 0.625),
-      opacity: 1,
-    },
-    [imagePart]: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      borderRadius: borderRadius.circle,
-      transition: 'opacity 150ms linear',
-      opacity: 0,
-    },
-  }),
+  base: {},
   modifiers: {
-    variant: {
-      light: ({iconPart}) => ({
-        backgroundColor: system.color.bg.alt.default,
-        [iconPart]: {
-          [systemIconStencil.vars.color]: system.color.fg.default,
-        },
-      }),
-      dark: ({iconPart}) => ({
-        backgroundColor: system.color.bg.primary.default,
-        [iconPart]: {
-          [systemIconStencil.vars.color]: system.color.fg.inverse,
-        },
-      }),
-    },
-    size: {
-      extraSmall: ({iconPart}) => ({
-        width: system.space.x4,
-        height: system.space.x4,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
-        },
-      }),
-      small: ({iconPart}) => ({
-        width: system.space.x6,
-        height: system.space.x6,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
-        },
-      }),
-      medium: ({iconPart}) => ({
-        width: system.space.x8,
-        height: system.space.x8,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
-        },
-      }),
-      large: ({iconPart}) => ({
-        width: system.space.x10,
-        height: system.space.x10,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
-        },
-      }),
-      extraLarge: ({iconPart}) => ({
-        width: system.space.x16,
-        height: system.space.x16,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
-        },
-      }),
-      extraExtraLarge: ({iconPart}) => ({
-        width: calc.multiply(system.space.x10, 3),
-        height: calc.multiply(system.space.x10, 3),
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
+    imageLoaded: {
+      false: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          display: 'none',
         },
       }),
+      true: {
+        backgroundColor: system.color.bg.default,
+      },
     },
     objectFit: {
-      contain: ({imagePart}) => ({
-        [imagePart]: {
+      contain: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'contain',
         },
       }),
-      fill: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: 'fill',
-        },
-      }),
-      cover: ({imagePart}) => ({
-        [imagePart]: {
+      cover: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'cover',
         },
       }),
-      ['scale-down']: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: 'scale-down',
+      fill: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'fill',
         },
       }),
-      none: ({imagePart}) => ({
-        [imagePart]: {
+      none: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'none',
         },
       }),
-      ['-moz-initial']: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: '-moz-initial',
+      ['scale-down']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'scale-down',
         },
       }),
-      ['initial']: ({imagePart}) => ({
-        [imagePart]: {
+      initial: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'initial',
         },
       }),
-      ['inherit']: ({imagePart}) => ({
-        [imagePart]: {
+
+      inherit: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'inherit',
         },
       }),
-      ['revert']: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: 'revert',
-        },
-      }),
-      ['unset']: ({imagePart}) => ({
-        [imagePart]: {
+      unset: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'unset',
         },
       }),
-    },
-    isImageLoaded: {
-      true: ({iconPart, imagePart}) => ({
-        [iconPart]: {
-          opacity: 0,
+      ['-moz-initial']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: '-moz-initial',
         },
-        [imagePart]: {
-          opacity: 1,
+      }),
+      ['revert']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'revert',
         },
       }),
     },
   },
-  defaultModifiers: {
-    variant: 'light',
-    objectFit: 'contain',
-  },
 });
 
 /**
- * @deprecated ⚠️ `Avatar` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
+ * JSDoc for Avatar. Will be part of the Component API docs
  */
-export const Avatar = createComponent('button')({
+export const Avatar = createComponent('div')({
   displayName: 'Avatar',
+
   Component: (
-    {variant, size = 'medium', altText, url, objectFit, ...elemProps}: AvatarProps,
+    {
+      url,
+      name,
+      variant,
+      objectFit = 'contain',
+      preferredInitials,
+      isDecorative,
+      size,
+      ...elemProps
+    }: AvatarProps,
     ref,
     Element
   ) => {
-    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageLoaded, setImageLoaded] = React.useState(false);
 
-    const loadImage = () => {
+    const handleImageLoad = () => {
       if (!imageLoaded) {
         setImageLoaded(true);
       }
     };
 
-    React.useLayoutEffect(() => {
-      setImageLoaded(false);
-    }, [url]);
-
-    // TODO: Remove this warning for a hard breaking change in v13
-    if (process.env.NODE_ENV === 'development') {
-      if (typeof variant === 'number') {
-        console.warn(
-          'Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light"  or "dark"'
-        );
-      }
-      if (typeof size === 'number') {
-        console.warn(
-          "Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})"
-        );
-      }
-    }
-
     return (
-      <Element
+      <BaseAvatar
+        as={Element}
         ref={ref}
-        aria-label={Element === 'button' ? altText : undefined}
-        {...mergeStyles(elemProps, [
-          avatarStencil({
-            variant:
-              variant === AvatarVariant.Light
-                ? 'light'
-                : variant === AvatarVariant.Dark
-                ? 'dark'
-                : variant,
-            size: typeof size === 'number' ? px2rem(size) : size,
-            objectFit,
-            isImageLoaded: imageLoaded,
-          }),
-        ])}
+        {...handleCsProp(elemProps, avatarStencil({variant, size, imageLoaded, objectFit}))}
       >
-        <SystemIcon {...avatarStencil.parts.icon} icon={userIcon} />
-        {url && <img {...avatarStencil.parts.image} src={url} alt={altText} onLoad={loadImage} />}
-      </Element>
+        {url && (
+          <>
+            <BaseAvatar.Image
+              onLoad={handleImageLoad}
+              src={url}
+              alt={isDecorative ? undefined : name}
+              aria-hidden={isDecorative}
+              {...avatarStencil.parts.avatarImage}
+            />
+          </>
+        )}
+        {name && (!url || !imageLoaded) && (
+          <BaseAvatar.Name
+            name={name}
+            preferredInitials={preferredInitials}
+            {...avatarStencil.parts.avatarName}
+          />
+        )}
+      </BaseAvatar>
     );
   },
-  subComponents: {
-    /**
-     * @deprecated ⚠️ `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
-     */
-    Variant: AvatarVariant,
-    /**
-     * @deprecated ⚠️ `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
-     */
-    Size: SystemIconCircleSize,
-  },
 });

package/avatar/lib/AvatarImage.tsx

@@ -0,0 +1,20 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+import {handleCsProp, createStencil, CSProps} from '@workday/canvas-kit-styling';
+
+export interface AvatarImageProps extends CSProps {}
+
+export const avatarImageStencil = createStencil({
+  base: {
+    height: '100%',
+    width: '100%',
+    objectFit: 'cover',
+  },
+});
+
+export const AvatarImage = createComponent('img')({
+  displayName: 'AvatarImage',
+  Component: ({...elemProps}: AvatarImageProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, avatarImageStencil())} />;
+  },
+});

package/avatar/lib/AvatarName.tsx

@@ -0,0 +1,32 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, handleCsProp, createStencil} from '@workday/canvas-kit-styling';
+import {getInitialsFromName} from './getInitialsFromName';
+
+export interface AvatarNameProps extends CSProps {
+  /**
+   * 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.
+   */
+  name: string;
+  /**
+   * If you want full control over the initials, use `preferredInitials` instead.
+   */
+  preferredInitials?: string;
+}
+
+export const avatarNameStencil = createStencil({
+  base: {
+    textTransform: 'uppercase',
+    cursor: 'default',
+  },
+});
+
+export const AvatarName = createComponent('span')({
+  displayName: 'AvatarName',
+  Component: ({name, preferredInitials, ...elemProps}: AvatarNameProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, avatarNameStencil())}>
+        {preferredInitials || getInitialsFromName(name)}
+      </Element>
+    );
+  },
+});

package/avatar/lib/BaseAvatar.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+import {AvatarImage} from './AvatarImage';
+import {AvatarName} from './AvatarName';
+import {createStencil, cssVar, calc, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {system, base} from '@workday/canvas-tokens-web';
+
+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 const baseAvatarStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+    color: '',
+    size: '',
+  },
+  base: ({backgroundColor, color, size}) => ({
+    borderRadius: system.shape.round,
+    width: cssVar(size, calc.add(system.space.x10, system.space.x2)),
+    height: cssVar(size, calc.add(system.space.x10, system.space.x2)),
+    backgroundColor: cssVar(backgroundColor, base.blue300),
+    color: cssVar(color, base.blue800),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    border: 'none',
+    ...system.type.body.medium,
+  }),
+  modifiers: {
+    variant: {
+      blue: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.blue300),
+        color: cssVar(color, base.blue800),
+      }),
+      amber: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.amber200),
+        color: cssVar(color, base.amber700),
+      }),
+
+      teal: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.teal300),
+        color: cssVar(color, base.teal800),
+      }),
+      purple: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.purple300),
+        color: cssVar(color, base.purple800),
+      }),
+    },
+    size: {
+      extraExtraSmall: ({size}) => ({
+        [size]: system.space.x6,
+        ...system.type.subtext.small,
+      }),
+      extraSmall: ({size}) => ({
+        [size]: system.space.x8,
+        ...system.type.subtext.medium,
+      }),
+      small: ({size}) => ({
+        [size]: system.space.x10,
+        ...system.type.body.small,
+      }),
+      medium: ({size}) => ({
+        [size]: calc.add(system.space.x10, system.space.x2),
+        ...system.type.body.medium,
+      }),
+      large: ({size}) => ({
+        [size]: calc.add(system.space.x16, system.space.x2),
+        ...system.type.heading.medium,
+      }),
+      extraLarge: ({size}) => ({
+        [size]: calc.add(system.space.x20, system.space.x4),
+        ...system.type.title.small,
+      }),
+      extraExtraLarge: ({size}) => ({
+        [size]: calc.multiply(system.space.x10, 3),
+        ...system.type.title.medium,
+      }),
+    },
+  },
+});
+
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export const BaseAvatar = createComponent('div')({
+  displayName: 'BaseAvatar',
+  subComponents: {
+    Image: AvatarImage,
+    Name: AvatarName,
+  },
+  Component: ({variant, size, ...elemProps}: BaseAvatarProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, baseAvatarStencil({variant, size}))} />;
+  },
+});

package/avatar/lib/getInitialsFromName.ts

@@ -0,0 +1,11 @@
+export const getInitialsFromName = (name: string) => {
+  // Trim and split by one or more whitespace characters
+  const nameParts = name.trim().split(/\s+/).filter(Boolean);
+
+  const first = nameParts[0];
+  const firstInitial = first?.[0] || '';
+  const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
+  const lastInitial = last?.[0] || '';
+
+  return `${firstInitial}${lastInitial}`;
+};

package/dist/commonjs/avatar/index.d.ts

@@ -1,2 +1,6 @@
 export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/commonjs/avatar/index.js

@@ -15,3 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/Avatar"), exports);
+__exportStar(require("./lib/AvatarImage"), exports);
+__exportStar(require("./lib/AvatarName"), exports);
+__exportStar(require("./lib/BaseAvatar"), exports);
+__exportStar(require("./lib/getInitialsFromName"), exports);