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

package/dist/commonjs/index.d.ts

@@ -1,4 +1,4 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';

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

@@ -1 +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,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}

package/dist/commonjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./avatar"), exports);
+__exportStar(require("@workday/canvas-kit-react/avatar"), exports);
 __exportStar(require("./color-picker"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./loading-sparkles"), exports);

package/dist/es6/index.d.ts

@@ -1,4 +1,4 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';

package/dist/es6/index.d.ts.map

@@ -1 +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,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}

package/dist/es6/index.js

@@ -1,4 +1,4 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';

package/index.ts

@@ -1,4 +1,4 @@
-export * from './avatar';
+export * from '@workday/canvas-kit-react/avatar';
 export * from './color-picker';
 export * from './divider';
 export * from './loading-sparkles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "15.0.0-alpha.0076-next.0",
+  "version": "15.0.0-alpha.0077-next.0",
   "description": "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.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0076-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0077-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0077-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
+  "gitHead": "6944d028b6f1250481ad8c4f8d5f817bea4e01a1"
 }

package/avatar/index.ts

@@ -1,5 +0,0 @@
-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,156 +0,0 @@
-import React from 'react';
-
-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';
-
-import {BaseAvatarProps, BaseAvatar, baseAvatarStencil} 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 const avatarStencil = createStencil({
-  extends: baseAvatarStencil,
-  parts: {
-    avatarImage: 'avatar-image',
-    avatarName: 'avatar-name',
-  },
-  base: {},
-  modifiers: {
-    imageLoaded: {
-      false: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          display: 'none',
-        },
-      }),
-      true: {
-        backgroundColor: system.color.bg.default,
-      },
-    },
-    objectFit: {
-      contain: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'contain',
-        },
-      }),
-      cover: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'cover',
-        },
-      }),
-      fill: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'fill',
-        },
-      }),
-      none: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'none',
-        },
-      }),
-      ['scale-down']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'scale-down',
-        },
-      }),
-      initial: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'initial',
-        },
-      }),
-
-      inherit: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'inherit',
-        },
-      }),
-      unset: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'unset',
-        },
-      }),
-      ['-moz-initial']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: '-moz-initial',
-        },
-      }),
-      ['revert']: ({avatarImagePart}) => ({
-        [avatarImagePart]: {
-          objectFit: 'revert',
-        },
-      }),
-    },
-  },
-});
-
-/**
- * JSDoc for Avatar. Will be part of the Component API docs
- */
-export const Avatar = createComponent('div')({
-  displayName: 'Avatar',
-
-  Component: (
-    {
-      url,
-      name,
-      variant,
-      objectFit = 'contain',
-      preferredInitials,
-      isDecorative,
-      size,
-      ...elemProps
-    }: AvatarProps,
-    ref,
-    Element
-  ) => {
-    const [imageLoaded, setImageLoaded] = React.useState(false);
-
-    const handleImageLoad = () => {
-      if (!imageLoaded) {
-        setImageLoaded(true);
-      }
-    };
-
-    return (
-      <BaseAvatar
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, avatarStencil({variant, size, imageLoaded, objectFit}))}
-      >
-        {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>
-    );
-  },
-});

package/avatar/lib/AvatarImage.tsx

@@ -1,20 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/avatar/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../dist/commonjs/avatar",
-  "module": "../dist/es6/avatar",
-  "sideEffects": false,
-  "types": "../dist/es6/avatar"
-}

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

@@ -1,6 +0,0 @@
-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 +0,0 @@
-{"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

@@ -1,21 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-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);