@workday/canvas-kit-labs-react 17.0.0-alpha.0645-next.0 → 17.0.0-alpha.0655-next.0

package/accessory/index.ts

@@ -0,0 +1,6 @@
+export * from './lib/Accessory';
+export * from './lib/AccessoryCalendar';
+export * from './lib/AccessoryFavicon';
+export * from './lib/AccessoryFile';
+export * from './lib/AccessoryIcon';
+export * from './lib/AccessoryMedia';

package/accessory/lib/Accessory.tsx

@@ -0,0 +1,156 @@
+import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {base, component, system} from '@workday/canvas-tokens-web';
+
+/**
+ * The size of an `Accessory` tile.
+ *
+ * * `extraSmall` — 16px tile, 16px icon
+ * * `small` — 20px tile, 18px icon
+ * * `medium` — 24px tile, 16px icon
+ * * `large` — 32px tile, 18px icon
+ * * `extraLarge` — 40px tile, 20px icon
+ */
+export type AccessorySize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
+
+export interface AccessoryProps extends CSProps {
+  /**
+   * The size of the tile. Icon glyph size follows the tile through the icon `data-part`: 16px,
+   * 18px, 16px, 18px, and 20px from `extraSmall` to `extraLarge`.
+   *
+   * * `extraSmall` — 16px
+   * * `small` — 20px
+   * * `medium` — 24px
+   * * `large` — 32px
+   * * `extraLarge` — 40px
+   *
+   * @default 'extraLarge'
+   */
+  size?: AccessorySize;
+  /**
+   * The color of the icon. When set, this overrides the icon color from `variant` on
+   * `AccessoryIcon`. Inherited by the icon `data-part` via a CSS variable.
+   */
+  color?: string;
+  /**
+   * The background color of the icon tile. When set, this overrides the fill from `variant` and is
+   * painted at every size, including `small` and `extraSmall`. Inherited by the icon `data-part`
+   * via a CSS variable.
+   */
+  background?: string;
+}
+
+/**
+ * Tile shell for accessory visuals. Owns size, corner radius, icon glyph size, and optional icon
+ * color / fill overrides through the icon `data-part`. Prefer `AccessoryIcon`, `AccessoryFile`, or
+ * `AccessoryMedia`, which render this shell.
+ */
+export const accessoryStencil = createStencil({
+  extends: cornerShapeStencil,
+  vars: {
+    iconColor: '',
+    tileBackground: '',
+  },
+  parts: {
+    icon: 'accessory-icon',
+  },
+  base: ({iconColor, iconPart, shape}) => ({
+    display: 'inline-flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    verticalAlign: 'middle',
+    [iconPart]: {
+      position: 'absolute',
+      inset: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: shape,
+      cornerShape: 'superellipse(1.1)',
+      [systemIconStencil.vars.color]: cssVar(iconColor),
+    },
+  }),
+  modifiers: {
+    size: {
+      extraSmall: ({iconPart, tileBackground}) => ({
+        width: system.legacy.size.xxxs,
+        height: system.legacy.size.xxxs,
+        [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
+        [iconPart]: {
+          [systemIconStencil.vars.size]: base.legacy.size200,
+          backgroundColor: cssVar(tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+      }),
+      small: ({iconPart, tileBackground}) => ({
+        width: system.legacy.size.xxs,
+        height: system.legacy.size.xxs,
+        [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
+        [iconPart]: {
+          [systemIconStencil.vars.size]: base.legacy.size225,
+          backgroundColor: cssVar(tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+      }),
+      medium: ({iconPart}) => ({
+        width: system.legacy.size.xs,
+        height: system.legacy.size.xs,
+        [cornerShapeStencil.vars.shape]: system.legacy.shape.md,
+        [iconPart]: {
+          [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
+        },
+      }),
+      large: ({iconPart}) => ({
+        width: system.legacy.size.sm,
+        height: system.legacy.size.sm,
+        [cornerShapeStencil.vars.shape]: base.legacy.size125,
+        [iconPart]: {
+          [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+        },
+      }),
+      extraLarge: ({iconPart}) => ({
+        width: system.legacy.size.md,
+        height: system.legacy.size.md,
+        [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
+        [iconPart]: {
+          [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+        },
+      }),
+    },
+  },
+});
+
+/**
+ * `Accessory` is the small rounded visual that sits beside text, most often the leading element in
+ * a list item or other row. It owns the tile size and corner radius so a system icon, file type,
+ * image, site favicon, calendar date, or custom content stays one consistent shape.
+ * `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`, `AccessoryFavicon`, and `AccessoryCalendar`
+ * render this shell. Accessories are
+ * decorative and always hidden from assistive technology.
+ *
+ * ```tsx
+ * <AccessoryIcon icon={activityIcon} />
+ * ```
+ */
+export const Accessory = createComponent('span')({
+  displayName: 'Accessory',
+  Component: (
+    {size = 'extraLarge', color, background, ...elemProps}: AccessoryProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Element
+        ref={ref}
+        {...handleCsProp(
+          elemProps,
+          accessoryStencil({size, iconColor: color, tileBackground: background})
+        )}
+        aria-hidden={true}
+      />
+    );
+  },
+});

package/accessory/lib/AccessoryCalendar.tsx

@@ -0,0 +1,114 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {Accessory, AccessoryProps, accessoryStencil} from './Accessory';
+
+export interface AccessoryCalendarProps extends AccessoryProps {
+  /**
+   * The month label, such as `Apr`.
+   */
+  month: string;
+  /**
+   * The day of the month, such as `30`.
+   */
+  date: number | string;
+}
+
+/**
+ * Calendar treatment for `AccessoryCalendar`. The month uses a critical color. The day uses the
+ * default foreground color. `size` scales both. `color` overrides the month. `background`
+ * overrides the tile fill.
+ */
+export const accessoryCalendarStencil = createStencil({
+  parts: {
+    icon: 'accessory-icon',
+    month: 'accessory-calendar-month',
+    date: 'accessory-calendar-date',
+  },
+  base: ({datePart, iconPart, monthPart}) => ({
+    [iconPart]: {
+      flexDirection: 'column',
+      // 3px stack gap on the 40px tile, scaled with the tile.
+      gap: '0.075em',
+      overflow: 'hidden',
+      backgroundColor: cssVar(
+        accessoryStencil.vars.tileBackground,
+        system.legacy.color.surface.default
+      ),
+      borderWidth: px2rem(1),
+      borderStyle: 'solid',
+      borderColor: system.legacy.color.border.default,
+    },
+    [monthPart]: {
+      color: cssVar(accessoryStencil.vars.iconColor, system.legacy.color.fg.danger.default),
+      fontSize: '0.25em',
+      fontWeight: system.fontWeight.medium,
+      lineHeight: 1,
+      whiteSpace: 'nowrap',
+    },
+    [datePart]: {
+      color: system.color.fg.default,
+      fontSize: '0.4em',
+      fontWeight: system.fontWeight.normal,
+      lineHeight: 1,
+      whiteSpace: 'nowrap',
+    },
+  }),
+  modifiers: {
+    /**
+     * The icon part's font size matches the tile so month (`0.25em`) and day (`0.4em`) stay in
+     * proportion. At `extraLarge` that is 10px and 16px (`subtext.sm` and `body.sm`). Type tokens
+     * do not go below 10px, so smaller tiles keep the ratio instead of a fixed type level.
+     */
+    size: {
+      extraSmall: ({iconPart}) => ({
+        [iconPart]: {fontSize: system.legacy.fontSize.body.sm},
+      }),
+      small: ({iconPart}) => ({
+        [iconPart]: {fontSize: system.legacy.fontSize.body.lg},
+      }),
+      medium: ({iconPart}) => ({
+        [iconPart]: {fontSize: system.legacy.fontSize.heading.sm},
+      }),
+      large: ({iconPart}) => ({
+        [iconPart]: {fontSize: system.legacy.fontSize.heading.lg},
+      }),
+      extraLarge: ({iconPart}) => ({
+        [iconPart]: {fontSize: system.legacy.fontSize.title.sm},
+      }),
+    },
+  },
+  defaultModifiers: {
+    size: 'extraLarge',
+  },
+});
+
+/**
+ * `AccessoryCalendar` renders a month and day in an accessory tile. The month is critical and the
+ * day is the default foreground color. Both scale with `size`. Always decorative.
+ */
+export const AccessoryCalendar = createComponent('span')({
+  displayName: 'AccessoryCalendar',
+  Component: (
+    {month, date, size = 'extraLarge', color, background, ...elemProps}: AccessoryCalendarProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Accessory
+        as={Element}
+        ref={ref}
+        background={background}
+        color={color}
+        size={size}
+        {...handleCsProp(elemProps, accessoryCalendarStencil({size}))}
+      >
+        <span {...accessoryStencil.parts.icon}>
+          <span {...accessoryCalendarStencil.parts.month}>{month}</span>
+          <span {...accessoryCalendarStencil.parts.date}>{date}</span>
+        </span>
+      </Accessory>
+    );
+  },
+});

package/accessory/lib/AccessoryFavicon.tsx

@@ -0,0 +1,156 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {Accessory, AccessoryProps, AccessorySize, accessoryStencil} from './Accessory';
+
+/** Hostname from a site URL or a bare domain such as `workday.com`. */
+function hostnameFromSiteUrl(siteUrl: string): string {
+  const trimmed = siteUrl.trim();
+  if (!trimmed) {
+    return '';
+  }
+
+  try {
+    const withProtocol = /^[a-z][a-z0-9+.-]*:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+    return new URL(withProtocol).hostname || '';
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Brand favicon URL for a site, resolved through the public Google favicon endpoint. Tiles larger
+ * than 32px request a 180px source. Smaller tiles request 64px.
+ */
+function faviconSrcFromSiteUrl(siteUrl: string, size: AccessorySize): string {
+  const host = hostnameFromSiteUrl(siteUrl);
+  if (!host) {
+    return '';
+  }
+
+  const sourceSize = size === 'extraLarge' ? 180 : 64;
+  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=${sourceSize}`;
+}
+
+export interface AccessoryFaviconProps extends AccessoryProps {
+  /**
+   * The site URL or bare domain, such as `https://design.workday.com` or `workday.com`. The hostname is
+   * used to resolve the favicon.
+   */
+  url: string;
+}
+
+/**
+ * Favicon treatment for `AccessoryFavicon`. At `large` and `extraLarge` the mark is inset in an
+ * outlined tile. At `medium` and smaller the mark fills the tile and the frame is removed.
+ * `background` overrides the tile fill.
+ */
+export const accessoryFaviconStencil = createStencil({
+  parts: {
+    icon: 'accessory-icon',
+    image: 'accessory-favicon-image',
+  },
+  base: ({iconPart, imagePart}) => ({
+    [iconPart]: {
+      overflow: 'hidden',
+      backgroundColor: cssVar(
+        accessoryStencil.vars.tileBackground,
+        system.legacy.color.surface.default
+      ),
+      borderWidth: px2rem(1),
+      borderStyle: 'solid',
+      borderColor: system.legacy.color.border.default,
+    },
+    [imagePart]: {
+      width: `calc(100% - ${system.legacy.padding.sm})`,
+      height: `calc(100% - ${system.legacy.padding.sm})`,
+      objectFit: 'contain',
+      borderRadius: system.legacy.shape.md,
+      cornerShape: 'superellipse(1.1)',
+    },
+  }),
+  modifiers: {
+    size: {
+      extraSmall: ({iconPart, imagePart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+        [imagePart]: {
+          width: '100%',
+          height: '100%',
+          borderRadius: 0,
+        },
+      }),
+      small: ({iconPart, imagePart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+        [imagePart]: {
+          width: '100%',
+          height: '100%',
+          borderRadius: 0,
+        },
+      }),
+      medium: ({iconPart, imagePart}) => ({
+        [iconPart]: {
+          backgroundColor: cssVar(accessoryStencil.vars.tileBackground, 'transparent'),
+          borderWidth: 0,
+        },
+        [imagePart]: {
+          width: '100%',
+          height: '100%',
+          borderRadius: 0,
+        },
+      }),
+      large: {},
+      extraLarge: {},
+    },
+  },
+  defaultModifiers: {
+    size: 'extraLarge',
+  },
+});
+
+/**
+ * `AccessoryFavicon` renders a site favicon in an accessory tile. Pass a site URL or domain as
+ * `url`. The mark is inset in an outlined frame at `large` and `extraLarge`, and fills the tile at
+ * smaller sizes. Always decorative.
+ *
+ * The image is requested from the user's browser at `https://www.google.com/s2/favicons`. Google
+ * receives the hostname and the user's IP address. `referrerPolicy="no-referrer"` keeps the app
+ * origin off that request. It does not proxy the request.
+ */
+export const AccessoryFavicon = createComponent('span')({
+  displayName: 'AccessoryFavicon',
+  Component: (
+    {url, size = 'extraLarge', background, ...elemProps}: AccessoryFaviconProps,
+    ref,
+    Element
+  ) => {
+    const src = faviconSrcFromSiteUrl(url, size);
+
+    return (
+      <Accessory
+        as={Element}
+        ref={ref}
+        background={background}
+        size={size}
+        {...handleCsProp(elemProps, accessoryFaviconStencil({size}))}
+      >
+        {src ? (
+          <span {...accessoryStencil.parts.icon}>
+            <img
+              alt=""
+              src={src}
+              {...accessoryFaviconStencil.parts.image}
+              referrerPolicy="no-referrer"
+            />
+          </span>
+        ) : null}
+      </Accessory>
+    );
+  },
+});

package/accessory/lib/AccessoryFile.tsx

@@ -0,0 +1,140 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {
+  documentIcon,
+  pdfIcon,
+  playCircleIcon,
+  stackIcon,
+  tableExpandIcon,
+  txtIcon,
+} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+import {Accessory, AccessoryProps, accessoryStencil} from './Accessory';
+
+/**
+ * The kind of file `AccessoryFile` represents.
+ */
+export type AccessoryFileType =
+  | 'pdf'
+  | 'spreadsheet'
+  | 'document'
+  | 'presentation'
+  | 'video'
+  | 'file'
+  | 'txt';
+
+export interface AccessoryFileProps extends AccessoryProps {
+  /**
+   * The file type. Chooses the glyph and sets the tile fill and icon color through a stencil
+   * modifier. Colored types keep their accent fill at every size. `file` and `txt` use
+   * `surface.alt` with a `border.default` stroke. `video` uses `surface.alt` and an inverse icon.
+   * `color` and `background` override the type colors.
+   * @default 'file'
+   */
+  type?: AccessoryFileType;
+}
+
+/**
+ * File-type treatment for `AccessoryFile`. Each `type` sets the tile fill and icon color.
+ * `outline` adds the default border used by `file` and `txt`. `color` and `background` on
+ * `Accessory` still override the type colors.
+ */
+export const accessoryFileStencil = createStencil({
+  parts: {
+    icon: 'accessory-icon',
+  },
+  base: ({iconPart}) => ({
+    [iconPart]: {
+      backgroundColor: cssVar(accessoryStencil.vars.tileBackground),
+      [systemIconStencil.vars.color]: cssVar(accessoryStencil.vars.iconColor),
+    },
+  }),
+  modifiers: {
+    type: {
+      pdf: {
+        [accessoryStencil.vars.iconColor]: system.color.fg.inverse,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.danger,
+      },
+      spreadsheet: {
+        [accessoryStencil.vars.iconColor]: system.color.fg.inverse,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.success,
+      },
+      document: {
+        [accessoryStencil.vars.iconColor]: system.color.fg.inverse,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.info,
+      },
+      presentation: {
+        // Amber is too light for an inverse glyph (about 2:1). `accent.contrast` is the dark
+        // foreground paired with accent fills.
+        [accessoryStencil.vars.iconColor]: system.legacy.color.accent.contrast,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.accent.warning,
+      },
+      video: {
+        [accessoryStencil.vars.iconColor]: system.color.fg.default,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default,
+      },
+      file: {
+        [accessoryStencil.vars.iconColor]: system.color.fg.default,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default,
+      },
+      txt: {
+        [accessoryStencil.vars.iconColor]: system.color.fg.default,
+        [accessoryStencil.vars.tileBackground]: system.legacy.color.surface.alt.default,
+      },
+    },
+    outline: {
+      true: ({iconPart}) => ({
+        [iconPart]: {
+          borderWidth: px2rem(1),
+          borderStyle: 'solid',
+          borderColor: system.legacy.color.border.default,
+        },
+      }),
+    },
+  },
+  defaultModifiers: {
+    type: 'file',
+  },
+});
+
+const fileIcons: Record<AccessoryFileType, SystemIconProps['icon']> = {
+  pdf: pdfIcon,
+  spreadsheet: tableExpandIcon,
+  document: documentIcon,
+  presentation: stackIcon,
+  video: playCircleIcon,
+  file: documentIcon,
+  txt: txtIcon,
+};
+
+/**
+ * `AccessoryFile` renders a file-type tile. `type` chooses the glyph and sets the fill and icon
+ * color. Colored types keep their fill at every size. Generic file and text use `surface.alt` and
+ * a `border.default` stroke. Always decorative.
+ */
+export const AccessoryFile = createComponent('span')({
+  displayName: 'AccessoryFile',
+  Component: (
+    {type = 'file', size = 'extraLarge', color, background, ...elemProps}: AccessoryFileProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Accessory
+        as={Element}
+        ref={ref}
+        background={background}
+        color={color}
+        size={size}
+        {...handleCsProp(
+          elemProps,
+          accessoryFileStencil({type, outline: type === 'file' || type === 'txt'})
+        )}
+      >
+        <SystemIcon icon={fileIcons[type]} {...accessoryStencil.parts.icon} />
+      </Accessory>
+    );
+  },
+});