@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.862-next.0

package/dist/es6/lib/specs.js

@@ -538,7 +538,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given default avatar light is rendered",
+            "name": "given default avatar is rendered",
             "children": [
               {
                 "type": "it",

package/dist/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -43,9 +43,8 @@ A note to the reader:
   - [Select (Preview)](#select-preview)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Avatar](#avatar)
   - [Text Area](#text-area)
-- [Style Utility Updates](#style-utility-updates)
-  - [createStencil](#createstencil)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -94,7 +93,8 @@ from Main instead.
 ### Styling API and CSS Tokens
 
 **PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825),
-[#2795](https://github.com/Workday/canvas-kit/pull/2795)
+[#2795](https://github.com/Workday/canvas-kit/pull/2795),
+[#2793](https://github.com/Workday/canvas-kit/pull/2793)
 
 Several components have been refactored to use our new
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -103,6 +103,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 
 The following components are affected:
 
+- `Avatar`
 - `Dialog`
 - `Modal`
 - `Popup`
@@ -114,6 +115,15 @@ The following components are affected:
 > with `cs` in our
 > [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
 
+### Avatar
+
+- Avatar no longer uses `SystemIconCircle` for sizing.
+- `Avatar.Size` is no longer supported. The `size` prop type has change to accept the following:
+  `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})`
+- `Avatar.Variant` is no longer supported. Enum `AvatarVariant` has been removed. The `variant` type
+  prop now accepts `"dark" | "light"`
+- The `as` prop now accepts any element, not just `div`.
+
 ### Text Area
 
 **PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)

package/dist/mdx/react/_examples/examples/GlobalHeader.tsx

@@ -31,7 +31,7 @@ export default () => (
       <TertiaryButton aria-label="messages" icon={assistantIcon} />
       <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
       <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+      <Avatar size="medium" variant="light" />
     </GlobalHeader.Item>
   </GlobalHeader>
 );

package/dist/mdx/react/avatar/avatar/Avatar.mdx

@@ -0,0 +1,93 @@
+import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
+
+import {Basic} from '../avatar/examples/Basic';
+import {Button} from '../avatar/examples/Button';
+import {Image} from '../avatar/examples/Image';
+import {LazyLoad} from '../avatar/examples/LazyLoad';
+import {ObjectFit} from '../avatar/examples/ObjectFit';
+import {Size} from '../avatar/examples/Size';
+import {Variant} from '../avatar/examples/Variant';
+import {CustomStyles} from '../avatar/examples/CustomStyles';
+
+
+# Canvas Kit Avatar
+
+Represents a person's profile.
+
+[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+<SymbolDescription name="Avatar" fileName="/react/" />
+
+The example below shows multiple instances of a `Avatar` with various configurations.
+
+### Basic
+
+By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
+the `as` prop.
+
+<ExampleCodeBlock code={Basic} />
+
+### Button
+
+Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
+semantic element to a `div`. This should be done with caution to ensure the best accessibility.
+Generally, `<button>` elements should be used for actions.
+
+<ExampleCodeBlock code={Button} />
+
+### Variant
+
+Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
+by including `variant="dark"`.
+
+<ExampleCodeBlock code={Variant} />
+
+### Size
+
+Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
+sizing options. See Component API for more details.
+
+Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
+
+<ExampleCodeBlock code={Size} />
+
+### Image
+
+Avatar renders an image when the `url` prop is defined.
+
+<ExampleCodeBlock code={Image} />
+
+### Object Fit
+
+Avatar defaults to using `contain` for object-fit. You can change this property to any other
+acceptable `object-fit` properties. For best fit, try to use square images.
+
+<ExampleCodeBlock code={ObjectFit} />
+
+### Lazy Load
+
+Example of implementing lazy load behavior with Avatar.
+
+<ExampleCodeBlock code={LazyLoad} />
+
+### Custom Styling
+
+To change the background color of the Avatar, you can use our `createStencil` functionality.
+
+<ExampleCodeBlock code={CustomStyles} />
+
+## Component API
+
+<SymbolDoc name="Avatar" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="Avatar.spec.ts" name="Avatar" />

package/dist/mdx/react/avatar/avatar/examples/Basic.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar as="div" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Button.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Avatar variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../../../icon';
+
+const customBlueAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.berrySmoothie400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.berrySmoothie100,
+    },
+  },
+});
+
+const customGreenAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.watermelon400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.watermelon100,
+    },
+  },
+});
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Avatar as="div" {...customBlueAvatarStencil()} />
+    <Avatar as="div" {...customGreenAvatarStencil()} />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Image.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <h3>Working Images</h3>
+    <Avatar size="extraExtraLarge" as="div" url={testAvatar} />
+    <Avatar size="extraLarge" as="div" url={testAvatar} />
+    <Avatar size="large" as="div" url={testAvatar} />
+    <Avatar size="medium" as="div" url={testAvatar} />
+    <Avatar size="small" as="div" url={testAvatar} />
+    <Avatar size="extraSmall" as="div" url={testAvatar} />
+    <h3>Broken Image</h3>
+    <Avatar url="/fake/path/to/image.png" as="div" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+export default () => (
+  <div className="story">
+    {Array.from({length: 5}, (v, index) => (
+      <>
+        <Avatar key={index} as="div" size="medium" url={testAvatar + '?v=' + index} />
+        <br />
+      </>
+    ))}
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export default () => (
+  <div className="story">
+    <h3>Original Rectangle Image</h3>
+    <img alt="" src="https://picsum.photos/id/237/300/200" />
+    <h3>Object fit on a Rectangle Image</h3>
+    <Avatar as="div" url="https://picsum.photos/id/237/300/200" />
+    <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
+    <Avatar
+      as="div"
+      size={px2rem(200)}
+      url="https://picsum.photos/id/237/300/200"
+      objectFit="contain"
+    />
+    <h3>Original Square Image</h3>
+    <img alt="" src="https://picsum.photos/id/237/300/300" />
+    <h3>Object fit on a Square Image</h3>
+    <Avatar as="div" url="https://picsum.photos/id/237/300/300" />
+    <h3>Object fit on a Square Image using Dynamic Size</h3>
+    <Avatar as="div" size={px2rem(200)} url="https://picsum.photos/id/237/300/300" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Size.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export default () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar as="div" size="extraExtraLarge" />
+    <h3>Extra Large</h3>
+    <Avatar as="div" size="extraLarge" />
+    <h3>Large</h3>
+    <Avatar as="div" size="large" />
+    <h3>Medium</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Small</h3>
+    <Avatar as="div" size="small" />
+    <h3>Extra Small</h3>
+    <Avatar as="div" size="extraSmall" />
+    <h3>30px</h3>
+    <Avatar as="div" size={px2rem(30)} />
+    <h3>40px</h3>
+    <Avatar as="div" size={px2rem(40)} />
+    <h3>3rem</h3>
+    <Avatar as="div" size="3rem" />
+    <h3>4rem</h3>
+    <Avatar as="div" size="4rem" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Variant.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export default () => (
+  <div className="story">
+    <h3>Light</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Dark</h3>
+    <Avatar as="div" size="medium" variant="dark" />
+  </div>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.855-next.0",
+  "version": "12.0.0-alpha.862-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.855-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.855-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.855-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.855-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.862-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "9bf5667e2a94b160d69cb88c2e053d29760a34a9"
+  "gitHead": "3b7726adda5b24aff4229e4ee8ca9f4f83522be3"
 }