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

package/switch/lib/Switch.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import {ErrorType, createComponent, useUniqueId} from '@workday/canvas-kit-react/common';
+import {CSProps} from '@workday/canvas-kit-styling';
+
+import {SwitchBackground} from './SwitchBackground';
+import {SwitchCircle} from './SwitchCircle';
+import {SwitchContainer} from './SwitchContainer';
+import {SwitchIcon} from './SwitchIcon';
+import {SwitchInput} from './SwitchInput';
+
+export interface SwitchProps extends CSProps {
+  /**
+   * If true, set the Switch to the on state.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, set the Switch to the disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The HTML `id` of the underlying checkbox input element.
+   * @default A uniquely generated id
+   */
+  id?: string;
+  /**
+   * The function called when the Switch state changes.
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * The value of the Switch.
+   */
+  value?: string;
+  /**
+   * The type of error associated with the Switch (if applicable).
+   */
+  error?: ErrorType;
+}
+
+export const Switch = createComponent('input')({
+  displayName: 'Switch',
+  Component: (
+    {checked = false, id, disabled = false, onChange, value, ...elemProps}: SwitchProps,
+    ref,
+    Element
+  ) => {
+    const inputId = useUniqueId(id);
+    return (
+      <SwitchContainer>
+        <SwitchInput
+          as={Element}
+          checked={checked}
+          disabled={disabled}
+          id={inputId}
+          ref={ref}
+          onChange={onChange}
+          role="switch"
+          type="checkbox"
+          value={value}
+          {...elemProps}
+        />
+        <SwitchBackground>
+          <SwitchCircle checked={checked} />
+          <SwitchIcon checked={checked} />
+        </SwitchBackground>
+      </SwitchContainer>
+    );
+  },
+  subComponents: {
+    ErrorType,
+  },
+});

package/switch/lib/SwitchBackground.tsx

@@ -0,0 +1,33 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+export const switchBackgroundStencil = createStencil({
+  base: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    pointerEvents: 'none',
+    // This is used in "High Contrast Mode" to show a border on the Switch background.
+    border: `${px2rem(1)} solid transparent`,
+    height: base.legacy.size225,
+    // This value is in the spec and there is no token for this size.
+    // calc() does not work inside of cssVar() as the first value.
+    width: px2rem(34),
+    borderRadius: system.legacy.shape.full,
+    padding: `0 ${px2rem(2)}`,
+    transition: 'background-color 200ms ease',
+    backgroundColor: system.legacy.color.accent.muted.soft,
+  },
+});
+
+export const SwitchBackground = createComponent('div')({
+  displayName: 'SwitchBackground',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, switchBackgroundStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});

package/switch/lib/SwitchCircle.tsx

@@ -0,0 +1,37 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {SwitchProps} from './Switch';
+
+export const switchCircleStencil = createStencil({
+  base: {
+    width: base.legacy.size150,
+    height: base.legacy.size150,
+    borderRadius: system.legacy.shape.full,
+    // This is used in "High Contrast Mode" to show a border on the Switch thumb.
+    border: `${px2rem(1)} solid transparent`,
+    boxShadow: system.depth[1],
+    transition: 'transform 150ms ease',
+    pointerEvents: 'none',
+    backgroundColor: system.color.fg.inverse,
+    transform: 'translateX(0)',
+  },
+  modifiers: {
+    checked: {
+      true: {
+        transform: `translateX(${px2rem(16)})`,
+        ':dir(rtl)': {
+          transform: `translateX(${px2rem(-16)})`,
+        },
+      },
+    },
+  },
+});
+
+export const SwitchCircle = createComponent('div')<SwitchProps>({
+  displayName: 'SwitchCircle',
+  Component: ({checked, ...elemProps}, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, switchCircleStencil({checked}))} />;
+  },
+});

package/switch/lib/SwitchContainer.tsx

@@ -0,0 +1,25 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+export const switchContainerStencil = createStencil({
+  base: {
+    position: 'relative',
+    marginTop: system.legacy.gap.xs,
+    height: base.legacy.size225,
+    // This value is in the spec and there is no token for this size.
+    // calc() does not work inside of cssVar() as the first value.
+    width: px2rem(34),
+  },
+});
+
+export const SwitchContainer = createComponent('div')({
+  displayName: 'SwitchContainer',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, switchContainerStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});

package/switch/lib/SwitchIcon.tsx

@@ -0,0 +1,44 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {checkSmallIcon, xSmallIcon} from '@workday/canvas-system-icons-web';
+import {component, system} from '@workday/canvas-tokens-web';
+
+import {SwitchProps} from './Switch';
+
+export const switchIconStencil = createStencil({
+  base: {
+    [systemIconStencil.vars.color]: system.color.fg.inverse,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+    position: 'absolute',
+    transition: 'transform 0ms',
+    pointerEvents: 'none',
+    transform: `translateX(${px2rem(12)})`,
+    ':dir(rtl)': {
+      transform: `translateX(${px2rem(-12)})`,
+    },
+  },
+  modifiers: {
+    checked: {
+      true: {
+        transform: `translateX(${px2rem(-2)})`,
+        ':dir(rtl)': {
+          transform: `translateX(${px2rem(2)})`,
+        },
+      },
+    },
+  },
+});
+
+export const SwitchIcon = createComponent('div')<SwitchProps>({
+  displayName: 'SwitchIcon',
+  Component: ({checked, ...elemProps}, ref) => {
+    return (
+      <SystemIcon
+        icon={checked ? checkSmallIcon : xSmallIcon}
+        ref={ref}
+        {...handleCsProp(elemProps, switchIconStencil({checked}))}
+      />
+    );
+  },
+});

package/switch/lib/SwitchInput.tsx

@@ -0,0 +1,76 @@
+import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {SwitchProps} from './Switch';
+
+export const switchInputStencil = createStencil({
+  base: {
+    display: 'flex',
+    position: 'absolute',
+    // This allows for the input to be the same size as the clickable area for the Switch
+    margin: 0,
+    height: base.legacy.size225,
+    // This value is in the spec and there is no token for this size.
+    // calc() does not work inside of cssVar() as the first value.
+    width: px2rem(34),
+    borderRadius: system.legacy.shape.full,
+    opacity: '0',
+    cursor: 'pointer',
+    // This is used in "High Contrast Mode" to show an outline on the Switch background.
+    '& ~ div:first-of-type': {
+      outlineOffset: px2rem(2),
+    },
+    '&:checked, &.checked': {
+      '& ~ div:first-of-type': {
+        backgroundColor: system.legacy.color.brand.accent.primary,
+      },
+      '&:disabled, &.disabled': {
+        '& ~ div:first-of-type': {
+          opacity: system.opacity.disabled,
+        },
+      },
+    },
+    '&:disabled, &.disabled': {
+      cursor: 'not-allowed',
+      '& ~ div:first-of-type': {
+        opacity: system.opacity.disabled,
+      },
+    },
+    '&:focus-visible, &:focus, &.focus': {
+      outline: 'none',
+      '& ~ div:first-of-type': {
+        // This is used in "High Contrast Mode" to show an outline on the Switch background.
+        outline: `${px2rem(1)} solid transparent`,
+        ...focusRing({separation: 2, animate: false}),
+      },
+    },
+  },
+  modifiers: {
+    error: {
+      error: {
+        '& ~ div:first-of-type': {
+          boxShadow: `
+              0 0 0 ${base.legacy.size25} ${system.legacy.color.focus.inverse},
+              0 0 0 ${base.legacy.size50} ${system.legacy.color.brand.focus.critical},
+              0 0 0 ${px2rem(5)} transparent`,
+        },
+      },
+      caution: {
+        '& ~ div:first-of-type': {
+          boxShadow: `
+          0 0 0 ${base.legacy.size25} ${system.legacy.color.focus.inverse},
+          0 0 0 ${base.legacy.size50} ${system.legacy.color.brand.focus.caution.inner},
+          0 0 0 ${px2rem(5)} ${system.legacy.color.brand.border.caution}`,
+        },
+      },
+    },
+  },
+});
+
+export const SwitchInput = createComponent('input')<SwitchProps>({
+  displayName: 'SwitchInput',
+  Component: ({error, ...elemProps}, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, switchInputStencil({error}))} />;
+  },
+});

package/switch/package.json

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

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"}