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

package/dist/es6/lib/specs.js

@@ -1,4 +1,116 @@
 module.exports = {specifications: [
+  {
+    "type": "file",
+    "name": "Accessory",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Accessory",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the Media story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should render the image"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "ActionBar",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.1.10",
-    "@workday/canvas-kit-preview-react": "16.1.10",
-    "@workday/canvas-kit-react": "16.1.10",
-    "@workday/canvas-kit-react-fonts": "^16.1.10",
-    "@workday/canvas-kit-styling": "16.1.10",
+    "@workday/canvas-kit-labs-react": "16.1.12",
+    "@workday/canvas-kit-preview-react": "16.1.12",
+    "@workday/canvas-kit-react": "16.1.12",
+    "@workday/canvas-kit-react-fonts": "^16.1.12",
+    "@workday/canvas-kit-styling": "16.1.12",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.1.10",
-    "@workday/canvas-kit-preview-react": "16.1.10",
-    "@workday/canvas-kit-react": "16.1.10",
-    "@workday/canvas-kit-react-fonts": "^16.1.10",
-    "@workday/canvas-kit-styling": "16.1.10",
+    "@workday/canvas-kit-labs-react": "16.1.12",
+    "@workday/canvas-kit-preview-react": "16.1.12",
+    "@workday/canvas-kit-react": "16.1.12",
+    "@workday/canvas-kit-react-fonts": "^16.1.12",
+    "@workday/canvas-kit-styling": "16.1.12",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/mdx/labs-react/accessory/Accessory.mdx

@@ -0,0 +1,138 @@
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import Calendar from './examples/Calendar';
+import Custom from './examples/Custom';
+import Favicon from './examples/Favicon';
+import File from './examples/File';
+import Icon from './examples/Icon';
+import Media from './examples/Media';
+import Sizes from './examples/Sizes';
+import Variants from './examples/Variants';
+
+
+# Canvas Kit Accessory
+
+`Accessory` is the small rounded visual that sits beside text, most often the leading element in a
+list item or other row. It keeps every thumbnail in one consistent shape and size, so a list of
+mixed content still feels uniform.
+
+It can show a system icon, a file type, an image, a site favicon, a calendar date, or fully custom
+content — whichever suits the row. Prefer `AccessoryIcon`, `AccessoryFile`, `AccessoryMedia`,
+`AccessoryFavicon`, or `AccessoryCalendar`, which each extend the shared `Accessory` props (`size`,
+`color`, `background`)
+and render that shell. Use `Accessory` itself for custom content, such as a gradient icon.
+Accessories are decorative and always hidden from
+assistive technology. They do not handle clicks or focus.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Basic Example
+
+`Accessory` is only the tile — size and corner radius. It does not render a visual by itself. Use a
+targeted accessory instead: `AccessoryIcon` for a system icon, `AccessoryFile` for a file type,
+`AccessoryMedia` for an image (optionally with an icon on a scrim), `AccessoryFavicon` for a site
+favicon, or `AccessoryCalendar` for a month and day. Put custom content inside
+`Accessory` when none of those fit the row.
+
+<ExampleCodeBlock code={Basic} />
+
+### Icon
+
+`AccessoryIcon` renders a system icon in the tile. `variant` sets the fill and icon color.
+
+<ExampleCodeBlock code={Icon} />
+
+### Media
+
+`AccessoryMedia` fills the tile with an image. The image stays hidden until it loads. Pass `icon`
+to center a glyph on a contrast scrim.
+
+<ExampleCodeBlock code={Media} />
+
+### Favicon
+
+`AccessoryFavicon` resolves a brand mark from a site URL or domain. The browser requests that mark
+from Google's favicon service, which receives the hostname and the user's IP. The image uses
+`referrerPolicy="no-referrer"`, so the app origin is not sent. At `large` and `extraLarge` the mark
+sits inset in an outlined tile. At `medium` and smaller it fills the tile.
+
+<ExampleCodeBlock code={Favicon} />
+
+### File
+
+`AccessoryFile` renders a file type through the shared icon graphic. `type` chooses the glyph and
+is a stencil modifier for the fill and icon color. Colored types keep their accent fill at every
+size. `file` and `txt` use `surface.alt` and a default border.
+
+<ExampleCodeBlock code={File} />
+
+### Calendar
+
+`AccessoryCalendar` stacks a month label over the day. Pass `month` and `date`. The month uses a
+critical color. The day uses the default foreground color. Both scale with `size`.
+
+<ExampleCodeBlock code={Calendar} />
+
+### Custom
+
+Use `Accessory` when the row needs content that is not a system icon, file type, image, or favicon.
+Set
+`accessoryStencil.vars.iconColor` and `accessoryStencil.vars.tileBackground` to recolor the tile.
+The icon `data-part` keeps the tile's corner radius.
+
+<ExampleCodeBlock code={Custom} />
+
+### Sizes
+
+`size` is a shared `Accessory` prop on each component. `extraLarge` (40px) is the default.
+
+<ExampleCodeBlock code={Sizes} />
+
+### Variants
+
+`variant` is set on `AccessoryIcon`. It pairs an icon color with a tile fill. The fill is painted
+at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those larger sizes.
+
+<ExampleCodeBlock code={Variants} />
+
+### Accessibility
+
+Accessory components are presentational and always `aria-hidden`. Images use an empty `alt` because
+assistive technology does not see content inside that tile. Name the item in adjacent text instead
+of on the accessory. They are not buttons and do not take click or keyboard handlers.
+
+## Component API
+
+### Accessory
+
+<SymbolDoc name="Accessory" fileName="/labs-react/" />
+
+### AccessoryIcon
+
+<SymbolDoc name="AccessoryIcon" fileName="/labs-react/" />
+
+### AccessoryFile
+
+<SymbolDoc name="AccessoryFile" fileName="/labs-react/" />
+
+### AccessoryMedia
+
+<SymbolDoc name="AccessoryMedia" fileName="/labs-react/" />
+
+### AccessoryFavicon
+
+<SymbolDoc name="AccessoryFavicon" fileName="/labs-react/" />
+
+### AccessoryCalendar
+
+<SymbolDoc name="AccessoryCalendar" fileName="/labs-react/" />
+
+## Specifications
+
+<Specifications file="./cypress/component/Accessory.spec.tsx" name="Accessory" />

package/dist/mdx/labs-react/accessory/examples/Basic.tsx

@@ -0,0 +1,23 @@
+import {
+  AccessoryFile,
+  AccessoryIcon,
+  AccessoryMedia,
+} from '@workday/canvas-kit-labs-react/accessory';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {checkIcon, playCircleIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+  flexWrap: 'wrap',
+});
+
+export default () => (
+  <div className={rowStyles}>
+    <AccessoryIcon icon={checkIcon} variant="blue" />
+    <AccessoryFile type="pdf" />
+    <AccessoryMedia icon={playCircleIcon} src="https://picsum.photos/seed/accessory/200/200" />
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/Calendar.tsx

@@ -0,0 +1,17 @@
+import {AccessoryCalendar} from '@workday/canvas-kit-labs-react/accessory';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+});
+
+export default () => (
+  <div className={rowStyles}>
+    <AccessoryCalendar date={30} month="Apr" />
+    <AccessoryCalendar date={1} month="May" />
+    <AccessoryCalendar date={24} month="Dec" />
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/Custom.tsx

@@ -0,0 +1,69 @@
+import {
+  AccessoryFile,
+  AccessoryMedia,
+  accessoryStencil,
+} from '@workday/canvas-kit-labs-react/accessory';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const columnStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.md,
+});
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+});
+
+const labelStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: system.gap.xs,
+});
+
+const customFileStencil = createStencil({
+  base: {
+    [accessoryStencil.vars.iconColor]: system.color.fg.inverse,
+    [accessoryStencil.vars.tileBackground]: system.color.accent.info,
+  },
+});
+
+const photo =
+  'data:image/svg+xml,' +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="80" viewBox="0 0 160 80">
+      <rect width="160" height="80" fill="#1c2833"/>
+      <circle cx="40" cy="40" r="22" fill="#243140"/>
+      <circle cx="80" cy="28" r="18" fill="#0e1620"/>
+      <circle cx="118" cy="48" r="24" fill="#2c3a48"/>
+    </svg>`
+  );
+
+export default () => (
+  <div className={columnStyles}>
+    <div className={rowStyles}>
+      <AccessoryMedia icon={checkIcon} src={photo} />
+      <AccessoryMedia icon={checkIcon} objectFit="contain" src={photo} />
+    </div>
+    <div className={rowStyles}>
+      <div className={labelStyles}>
+        <AccessoryFile type="pdf" />
+      </div>
+      <div className={labelStyles}>
+        <AccessoryFile
+          background={system.color.accent.warning}
+          color={system.color.fg.warning.strong}
+          type="pdf"
+        />
+      </div>
+      <div className={labelStyles}>
+        <AccessoryFile cs={customFileStencil()} type="pdf" />
+      </div>
+    </div>
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/Favicon.tsx

@@ -0,0 +1,16 @@
+import {AccessoryFavicon} from '@workday/canvas-kit-labs-react/accessory';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+});
+
+export default () => (
+  <div className={rowStyles}>
+    <AccessoryFavicon size="medium" url="workday.com" />
+    <AccessoryFavicon url="design.workday.com" />
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/File.tsx

@@ -0,0 +1,29 @@
+import {AccessoryFile, AccessoryFileType} from '@workday/canvas-kit-labs-react/accessory';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+  flexWrap: 'wrap',
+});
+
+const types: AccessoryFileType[] = [
+  'pdf',
+  'spreadsheet',
+  'document',
+  'presentation',
+  'video',
+  'file',
+  'txt',
+];
+
+export default () => (
+  <div className={rowStyles}>
+    {types.map(type => (
+      <AccessoryFile key={type} type={type} />
+    ))}
+    <AccessoryFile size="large" type="pdf" />
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/Icon.tsx

@@ -0,0 +1,17 @@
+import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+});
+
+export default () => (
+  <div className={rowStyles}>
+    <AccessoryIcon icon={checkIcon} />
+    <AccessoryIcon icon={checkIcon} variant="blue" />
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/Media.tsx

@@ -0,0 +1,3 @@
+import {AccessoryMedia} from '@workday/canvas-kit-labs-react/accessory';
+
+export default () => <AccessoryMedia src="https://picsum.photos/seed/accessory/200/200" />;

package/dist/mdx/labs-react/accessory/examples/Sizes.tsx

@@ -0,0 +1,34 @@
+import {AccessoryIcon} from '@workday/canvas-kit-labs-react/accessory';
+import {Subtext} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.md,
+});
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.md,
+  p: {
+    minWidth: px2rem(104),
+    margin: 0,
+  },
+});
+
+const sizes = ['extraSmall', 'small', 'medium', 'large', 'extraLarge'] as const;
+
+export default () => (
+  <div className={containerStyles}>
+    {sizes.map(size => (
+      <div className={rowStyles} key={size}>
+        <Subtext size="large">{size}</Subtext>
+        <AccessoryIcon icon={checkIcon} size={size} />
+      </div>
+    ))}
+  </div>
+);

package/dist/mdx/labs-react/accessory/examples/Variants.tsx

@@ -0,0 +1,31 @@
+import {AccessoryIcon, AccessoryIconVariant} from '@workday/canvas-kit-labs-react/accessory';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+  flexWrap: 'wrap',
+});
+
+const variants: AccessoryIconVariant[] = [
+  'grey',
+  'green',
+  'blue',
+  'purple',
+  'amber',
+  'magenta',
+  'red',
+  'orange',
+  'outline',
+];
+
+export default () => (
+  <div className={rowStyles}>
+    {variants.map(variant => (
+      <AccessoryIcon key={variant} icon={checkIcon} variant={variant} />
+    ))}
+  </div>
+);