@workday/canvas-kit-docs 13.0.0-alpha.998-next.0 → 13.0.0

package/dist/mdx/react/_examples/Tooltips.mdx

@@ -0,0 +1,15 @@
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import ListOfUploadedFiles from './examples/Tooltips/ListOfUploadedFiles';
+
+
+# Accessible Tooltip Examples
+
+## Using descriptive tooltips for repeated text buttons
+
+In this example, the "Delete" buttons are used repeatedly to reference the multiple files that have
+been uploaded to the web app. The text buttons already have an accessible name (a.k.a. label)
+derived from the button's inner text. The `describe` tooltip can be useful for providing more
+in-context description for both low vision sighted users and screen reader users without overriding
+the button name "Delete".
+
+<ExampleCodeBlock code={ListOfUploadedFiles} />

package/dist/mdx/react/_examples/examples/Tooltips/ListOfUploadedFiles.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {trashIcon} from '@workday/canvas-system-icons-web';
+
+const files = ['Cover Letter.docx', 'Resume.docx', 'Portfolio.pptx', 'Portrait.png'];
+
+const listStyles = {
+  alignItems: 'center',
+  width: '35rem',
+};
+
+const deleteBtnStyle = {
+  marginLeft: 'auto',
+};
+
+export default () => {
+  return (
+    <>
+      <Heading size="medium">Uploaded Files:</Heading>
+      <Flex as="ul" gap="1rem" flexDirection="column">
+        {files.map(i => (
+          <Flex as="li" style={listStyles}>
+            <Text>{i}</Text>
+            <Tooltip type="description" title={i}>
+              <DeleteButton icon={trashIcon} style={deleteBtnStyle}>
+                Delete
+              </DeleteButton>
+            </Tooltip>
+          </Flex>
+        ))}
+      </Flex>
+    </>
+  );
+};

package/dist/mdx/react/_examples/mdx/SidePanel.mdx

@@ -5,7 +5,24 @@ import WithOverlay from './examples/SidePanelWithOverlay';
 
 # Canvas Kit Examples
 
-## Side Panel With Navigation
+## Side Panel As Navigation
+
+This example demonstrates SidePanel as a navigation system that can be reduced into a "compact view"
+to save horizontal space on screen. It combines semantic HTML nested list markup with Canvas Kit's
+`<Expandable>` component to create an accordion. When in compact view, the Canvas Kit `<Menu>`
+component is used to create the fly-out menus. Both of these components are implemented according to
+the [W3C ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/) to provide a
+wide range of support for accessibility.
+
+- The `<SidePanel>` uses the `as` prop to render with a semantic HTML `<nav>` element
+- The SidePanel's heading element with the `labelProps` must remain in the DOM even while the
+  component is in compact view, else the `aria-labelledby` reference for the toggle button will
+  become invalid. The `hidden` attribute is conditionally set on the heading based on the `expanded`
+  state of the SidePanel provided by the `useSidePanel` hook.
+- The semantic HTML nested list markup helps support non-visual screen reader users understand the
+  nested hierarchy of the elements inside the expandable containers
+- In the compact view, the `<Tooltip>` component is used to provide an accessible name to the icon
+  button menu targets
 
 <ExampleCodeBlock code={WithNavigation} />
 

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

@@ -149,7 +149,7 @@ export default () => {
             <TertiaryButton icon={inboxIcon} />
           </Tooltip>
           <Tooltip title="Profile">
-            <Avatar />
+            <Avatar altText="Avatar" />
           </Tooltip>
         </GlobalHeader.Item>
       </GlobalHeader>

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

@@ -1,130 +1,168 @@
 import * as React from 'react';
-import {styled, StyledType} from '@workday/canvas-kit-react/common';
-import {colors, space, gradients, type} from '@workday/canvas-kit-react/tokens';
-import {SidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {BodyText, Subtext} from '@workday/canvas-kit-react/text';
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {base, system} from '@workday/canvas-tokens-web';
+import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {birthdayIcon, ribbonIcon} from '@workday/canvas-system-icons-web';
+import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {birthdayIcon, checkIcon, ribbonIcon} from '@workday/canvas-system-icons-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {Tooltip} from '../../../../tooltip';
 
-const StyledPanel = styled(SidePanel.as('nav'))({
-  backgroundColor: colors.soap200,
-  zIndex: 1,
-});
-
-const StyledExpandable = styled(Expandable.Target)({
-  borderRadius: 0,
-  ':hover': {
-    backgroundColor: colors.soap500,
+const data = {
+  bestsellers: {
+    icon: ribbonIcon,
+    title: 'Best Sellers',
+    subtitle: 'Award winning sweet treats',
+    items: ['Mango Coco Sago', 'Matcha Creme Pie', 'Key Lime Cheesecake', 'Tiramisu'],
   },
-});
-
-const StyledLink = styled(Subtext.as('a'))<StyledType>({
-  color: colors.blackPepper300,
-  ':hover': {
-    backgroundColor: colors.soap500,
+  cakes: {
+    icon: birthdayIcon,
+    title: 'Custom Cakes',
+    subtitle: 'To celebrate your life milestones',
+    items: ['Anniversary', 'Birthday', 'Graduation', 'Wedding'],
   },
-});
+};
+
+const stylesOverride = {
+  navContainer: createStyles({
+    height: px2rem(800),
+    positio: 'relative',
+    backgroundColor: base.frenchVanilla100,
+  }),
+  accordionContainer: createStyles({
+    flexDirection: 'column',
+    rowGap: system.space.zero,
+    paddingInlineStart: system.space.zero,
+  }),
+  accordionIcon: createStyles({
+    verticalAlign: 'middle',
+    padding: system.space.x1,
+  }),
+  accordionSubText: createStyles({
+    margin: system.space.zero,
+  }),
+  listContainer: createStyles({
+    listStyle: 'none',
+    padding: system.space.x4,
+    paddingTop: system.space.x16,
+    flexDirection: 'column',
+  }),
+  links: createStyles({
+    textDecoration: 'none',
+    padding: system.space.x4,
+  }),
+  linkCheck: createStyles({
+    marginLeft: 'auto',
+  }),
+  flyOut: createStyles({
+    marginTop: '8rem',
+  }),
+};
+
+const Accordion = ({config}) => {
+  const [currentPage, setCurrentPage] = React.useState('');
 
-const cakes = [
-  {value: 'Anniversary', linkValue: '#AnniversaryCakes'},
-  {value: 'Birthday', linkValue: '#BirthdayCakes'},
-  {value: 'Graduation', linkValue: '#GraduationCakes'},
-  {value: 'Wedding', linkValue: 'WeddingCakes'},
-];
+  const handleClick = e => {
+    e.preventDefault();
+    setCurrentPage(e.target.textContent);
+  };
 
-const bestsellers = [
-  {value: 'Mango Coco Sago', linkValue: '#LemonRhubarbBars'},
-  {value: 'Matcha Creme Pie', linkValue: '#MatchaCremePie'},
-  {value: 'Key Lime Cheesecake', linkValue: '#KeyLimeCheesecake'},
-  {value: 'Tiramisu', linkValue: '#Tiramisu'},
-];
+  return (
+    <Expandable>
+      <Expandable.Target>
+        <SystemIcon cs={stylesOverride.accordionIcon} icon={config.icon} />
+        <Expandable.Title>
+          {config.title}
+          <Subtext size="medium" cs={stylesOverride.accordionSubText}>
+            {config.subtitle}
+          </Subtext>
+        </Expandable.Title>
+        <Expandable.Icon iconPosition="end" />
+      </Expandable.Target>
+      <Expandable.Content as="ul" cs={stylesOverride.listContainer}>
+        {config.items.map(i => {
+          return (
+            <li key={i}>
+              <Flex
+                as="a"
+                href="#"
+                aria-current={i === currentPage ? 'true' : undefined}
+                className={stylesOverride.links}
+                onClick={handleClick}
+              >
+                {i}
+                {i === currentPage && <SystemIcon icon={checkIcon} cs={stylesOverride.linkCheck} />}
+              </Flex>
+            </li>
+          );
+        })}
+      </Expandable.Content>
+    </Expandable>
+  );
+};
 
-const gettingStarted = [
-  'Extended Systems',
-  'Canvas Glossary',
-  'Frequently Asked Questions',
-  'Canvas Support',
-];
+const IconButtonMenu = ({config}) => {
+  return (
+    <Menu>
+      <Tooltip title={config.title} placement="right">
+        <Menu.Target as={TertiaryButton}>
+          <SystemIcon icon={config.icon} />
+        </Menu.Target>
+      </Tooltip>
+      <Menu.Popper placement="right">
+        <Menu.Card cs={stylesOverride.flyOut}>
+          <Menu.List>
+            {config.items.map(i => (
+              <Menu.Item>{i}</Menu.Item>
+            ))}
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+    </Menu>
+  );
+};
+
+const CompactView = () => {
+  return (
+    <Flex as="ul" cs={stylesOverride.listContainer}>
+      <Flex.Item as="li">
+        <IconButtonMenu config={data.bestsellers} />
+      </Flex.Item>
+      <Flex.Item as="li">
+        <IconButtonMenu config={data.cakes} />
+      </Flex.Item>
+    </Flex>
+  );
+};
+
+const ExpandedView = () => {
+  return (
+    <Flex as="ul" cs={stylesOverride.accordionContainer}>
+      <Flex.Item as="li">
+        <Accordion config={data.bestsellers} />
+      </Flex.Item>
+      <Flex.Item as="li">
+        <Accordion config={data.cakes} />
+      </Flex.Item>
+    </Flex>
+  );
+};
 
 export default () => {
+  const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
+
   return (
-    <Flex height={800} position="relative" backgroundColor="frenchVanilla100">
-      <StyledPanel touched={true} variant="alternate">
-        <Flex as="ul" flexDirection="column" rowGap="zero" paddingInlineStart="zero">
-          <Flex.Item as="li" listStyle="none">
-            <Expandable padding="zero">
-              <StyledExpandable paddingTop="m" paddingBottom="xxs" paddingX="m" textAlign="center">
-                <SystemIcon icon={ribbonIcon} paddingRight="s" />
-                <Expandable.Title padding="zero">
-                  <BodyText size="small" fontWeight="bold" color="blackpepper300" marginY="zero">
-                    Bestsellers
-                  </BodyText>
-                  <Subtext size="medium" color="blackpepper300" marginY="zero">
-                    Award winning sweet treats
-                  </Subtext>
-                </Expandable.Title>
-                <Expandable.Icon iconPosition="end" />
-              </StyledExpandable>
-              <Expandable.Content paddingY="zero" paddingX="zero" as="ul">
-                {bestsellers.map(item => {
-                  return (
-                    <li>
-                      <StyledLink
-                        size="large"
-                        display="flex"
-                        textDecoration="none"
-                        paddingLeft="xxl"
-                        paddingTop="xxs"
-                        paddingBottom="zero"
-                        href={item.linkValue}
-                      >
-                        {item.value}
-                      </StyledLink>
-                    </li>
-                  );
-                })}
-              </Expandable.Content>
-            </Expandable>
-          </Flex.Item>
-          <Flex.Item as="li" listStyle="none">
-            <Expandable padding="zero">
-              <StyledExpandable paddingTop="m" paddingBottom="xxs" paddingX="m" textAlign="center">
-                <SystemIcon icon={birthdayIcon} paddingRight="s" />
-                <Expandable.Title padding="zero">
-                  <BodyText size="small" fontWeight="bold" color="blackpepper300" marginY="zero">
-                    Custom Cakes
-                  </BodyText>
-                  <Subtext size="medium" color="blackpepper300" marginY="zero">
-                    To celebrate your life milestones
-                  </Subtext>
-                </Expandable.Title>
-                <Expandable.Icon iconPosition="end" />
-              </StyledExpandable>
-              <Expandable.Content paddingY="zero" paddingX="zero" as="ul">
-                {cakes.map(item => {
-                  return (
-                    <li>
-                      <StyledLink
-                        size="large"
-                        display="flex"
-                        textDecoration="none"
-                        paddingLeft="xxl"
-                        paddingTop="xxs"
-                        paddingBottom="zero"
-                        href={item.linkValue}
-                      >
-                        {item.value}
-                      </StyledLink>
-                    </li>
-                  );
-                })}
-              </Expandable.Content>
-            </Expandable>
-          </Flex.Item>
-        </Flex>
-      </StyledPanel>
+    <Flex cs={stylesOverride.navContainer}>
+      <SidePanel as="nav" {...panelProps}>
+        <Heading size="small" {...labelProps} hidden={!expanded ? true : undefined}>
+          Cake or Death Bakery
+        </Heading>
+        <SidePanel.ToggleButton {...controlProps} />
+        {expanded ? <ExpandedView /> : <CompactView />}
+      </SidePanel>
     </Flex>
   );
 };

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

@@ -1,28 +1,46 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {depth} from '@workday/canvas-kit-react/tokens';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system, base} from '@workday/canvas-tokens-web';
 
-const StyledPanel = styled(SidePanel)({
-  ...depth[6],
-  zIndex: 1,
-});
+const stylesOverride = {
+  panelContainer: createStyles({
+    height: px2rem(320),
+    backgroundColor: base.soap100,
+    position: 'relative',
+  }),
+  panelContent: createStyles({
+    alignItems: 'center',
+    paddingY: system.space.x4,
+    paddingX: system.space.x4,
+  }),
+  panel: createStyles({
+    zIndex: 1,
+  }),
+  overlay: createStyles({
+    position: 'absolute',
+    background: system.color.bg.overlay,
+    height: '100%',
+    width: '100%',
+  }),
+};
 
 export default () => {
-  const {labelProps} = useSidePanel();
+  const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
 
   return (
-    <Flex height={320} backgroundColor="soap100" position="relative">
-      <StyledPanel touched={true} variant="alternate">
-        <Flex alignItems="center" paddingY="s" paddingX="s">
-          <Text as="h3" typeLevel="body.large" fontWeight="bold" color="licorice500">
+    <Flex cs={stylesOverride.panelContainer}>
+      <SidePanel className={stylesOverride.panel} {...panelProps} variant="alternate">
+        <Flex cs={stylesOverride.panelContainer}>
+          <Heading size="small" {...labelProps} hidden={!expanded ? true : undefined}>
             Alternate Panel
-          </Text>
+          </Heading>
+          <SidePanel.ToggleButton {...controlProps} />
         </Flex>
-      </StyledPanel>
-      <Box position="absolute" background="rgba(0,0,0,0.65)" height="100%" width="100%" />
+      </SidePanel>
+      {expanded && <Box cs={stylesOverride.overlay} />}
     </Flex>
   );
 };

package/dist/mdx/react/_examples/mdx/examples/Table/WithSelectableRows.tsx

@@ -45,7 +45,7 @@ const SelectableRow = createComponent('tr')({
             <Checkbox checked={rowData.checked} onChange={onSelect} />
           </Tooltip>
         </Table.Cell>
-        <Table.Cell cs={tableCellStyles} scope="row">
+        <Table.Cell as="th" cs={tableCellStyles} scope="row">
           {rowData.name}
         </Table.Cell>
         <Table.Cell cs={tableCellStyles}>{rowData.amount}</Table.Cell>

package/dist/mdx/react/action-bar/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 

package/dist/mdx/react/action-bar/examples/DeleteAction.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 

package/dist/mdx/react/action-bar/examples/Icons.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {notificationsIcon, alarmClockIcon} from '@workday/canvas-system-icons-web';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';

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

@@ -1,4 +1,3 @@
-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';
@@ -12,7 +11,7 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Avatar onClick={handleAvatarButtonClick} />
-    <Avatar as="div" />
+    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" as="div" />
   </div>
 );

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

@@ -1,4 +1,3 @@
-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';
@@ -14,8 +13,8 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Avatar variant="dark" onClick={handleAvatarButtonClick} />
-    <Avatar onClick={handleAvatarButtonClick} />
-    <Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" url={testAvatar} onClick={handleAvatarButtonClick} />
   </div>
 );

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

@@ -1,4 +1,3 @@
-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';
@@ -29,7 +28,7 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Avatar as="div" {...customBlueAvatarStencil()} />
-    <Avatar as="div" {...customGreenAvatarStencil()} />
+    <Avatar altText="Avatar" as="div" {...customBlueAvatarStencil()} />
+    <Avatar altText="Avatar" as="div" {...customGreenAvatarStencil()} />
   </div>
 );

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
@@ -14,13 +13,13 @@ const containerStyles = createStyles({
 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} />
+    <Avatar altText="Avatar" size="extraExtraLarge" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="extraLarge" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="large" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="medium" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="small" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="extraSmall" as="div" url={testAvatar} />
     <h3>Broken Image</h3>
-    <Avatar url="/fake/path/to/image.png" as="div" />
+    <Avatar altText="Avatar" url="/fake/path/to/image.png" as="div" />
   </div>
 );

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

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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {px2rem} from '@workday/canvas-kit-styling';
 
@@ -7,9 +6,10 @@ export default () => (
     <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" />
+    <Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/200" />
     <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
     <Avatar
+      altText="Avatar"
       as="div"
       size={px2rem(200)}
       url="https://picsum.photos/id/237/300/200"
@@ -18,8 +18,13 @@ export default () => (
     <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" />
+    <Avatar altText="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" />
+    <Avatar
+      altText="Avatar"
+      as="div"
+      size={px2rem(200)}
+      url="https://picsum.photos/id/237/300/300"
+    />
   </div>
 );

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

@@ -1,28 +1,27 @@
-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" />
+    <Avatar altText="Avatar" as="div" size="extraExtraLarge" />
     <h3>Extra Large</h3>
-    <Avatar as="div" size="extraLarge" />
+    <Avatar altText="Avatar" as="div" size="extraLarge" />
     <h3>Large</h3>
-    <Avatar as="div" size="large" />
+    <Avatar altText="Avatar" as="div" size="large" />
     <h3>Medium</h3>
-    <Avatar as="div" size="medium" />
+    <Avatar altText="Avatar" as="div" size="medium" />
     <h3>Small</h3>
-    <Avatar as="div" size="small" />
+    <Avatar altText="Avatar" as="div" size="small" />
     <h3>Extra Small</h3>
-    <Avatar as="div" size="extraSmall" />
+    <Avatar altText="Avatar" as="div" size="extraSmall" />
     <h3>30px</h3>
-    <Avatar as="div" size={px2rem(30)} />
+    <Avatar altText="Avatar" as="div" size={px2rem(30)} />
     <h3>40px</h3>
-    <Avatar as="div" size={px2rem(40)} />
+    <Avatar altText="Avatar" as="div" size={px2rem(40)} />
     <h3>3rem</h3>
-    <Avatar as="div" size="3rem" />
+    <Avatar altText="Avatar" as="div" size="3rem" />
     <h3>4rem</h3>
-    <Avatar as="div" size="4rem" />
+    <Avatar altText="Avatar" as="div" size="4rem" />
   </div>
 );

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

@@ -1,11 +1,10 @@
-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" />
+    <Avatar altText="Avatar" as="div" size="medium" />
     <h3>Dark</h3>
-    <Avatar as="div" size="medium" variant="dark" />
+    <Avatar altText="Avatar" as="div" size="medium" variant="dark" />
   </div>
 );