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

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

@@ -1,119 +0,0 @@
-import * as React from 'react';
-
-import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
-import {
-  styled,
-  StyledType,
-  ExtractProps,
-  mouseFocusBehavior,
-} from '@workday/canvas-kit-react/common';
-import {colors, borderRadius, space} from '@workday/canvas-kit-react/tokens';
-import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
-import {CanvasIconTypes, CanvasSystemIcon} from '@workday/design-assets-types';
-const placeholderIcon: CanvasSystemIcon = {
-  name: '',
-  svg: '',
-  filename: '',
-  type: CanvasIconTypes.System,
-};
-
-const getIconButtonColors = (toggled?: boolean): ButtonColors => {
-  return {
-    default: {
-      background: toggled ? colors.blueberry400 : colors.soap200,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice200,
-    },
-    hover: {
-      background: toggled ? colors.blueberry400 : colors.soap300,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
-    },
-    active: {
-      background: toggled ? colors.blueberry400 : colors.soap500,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
-    },
-    focus: {
-      background: toggled ? colors.blueberry400 : undefined,
-      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
-      label: toggled ? colors.frenchVanilla100 : colors.licorice500,
-    },
-    disabled: {
-      background: toggled ? colors.soap100 : colors.soap100,
-      icon: colors.soap600,
-      label: colors.soap600,
-      opacity: '1',
-    },
-  };
-};
-
-const StyledBaseButton = styled(BaseButton)<
-  ExtractProps<typeof SegmentedControl.Button> & StyledType
->({
-  borderRadius: borderRadius.zero,
-  border: `1px solid ${colors.soap500}`,
-  borderLeft: 'none',
-  minWidth: space.xxxl,
-  '&:first-of-type': {
-    borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-    borderLeft: `1px solid ${colors.soap500}`,
-  },
-  '&:last-of-type': {
-    borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-  },
-  '&[aria-pressed="true"]': {
-    borderColor: `${colors.blueberry400} !important`,
-    '&:hover, &:focus:hover': {
-      background: colors.blueberry400,
-    },
-  },
-  '&:focus': {
-    borderRadius: borderRadius.m,
-    zIndex: 1,
-    animation: 'none', // reset focusRing animation
-    transition: 'all 120ms, border-radius 1ms',
-    ...mouseFocusBehavior({
-      '&': {
-        borderRadius: borderRadius.zero,
-        '&:first-of-type': {
-          borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-        },
-        '&:last-of-type': {
-          borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-        },
-      },
-    }),
-  },
-});
-
-export default () => {
-  const [value, setValue] = React.useState<string | number>('day');
-  const handleToggle = (selectedValue: string | number) => {
-    setValue(selectedValue);
-  };
-
-  const isDayToggled = value === 'day';
-  const isWeekToggled = value === 'week';
-
-  return (
-    <SegmentedControl value={value} onChange={handleToggle}>
-      <StyledBaseButton
-        icon={{...placeholderIcon}}
-        colors={getIconButtonColors(isDayToggled)}
-        value="day"
-        onClick={() => setValue('day')}
-      >
-        Day
-      </StyledBaseButton>
-      <StyledBaseButton
-        icon={placeholderIcon}
-        colors={getIconButtonColors(isWeekToggled)}
-        value="week"
-        onClick={() => setValue('week')}
-      >
-        Week
-      </StyledBaseButton>
-    </SegmentedControl>
-  );
-};

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

@@ -1,109 +0,0 @@
-import {
-  Specifications,
-  SymbolDoc,
-  SymbolDescription,
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-
-import Basic from './examples/Basic';
-import Button from './examples/Button';
-import Image from './examples/Image';
-import LazyLoad from './examples/LazyLoad';
-import ObjectFit from './examples/ObjectFit';
-import Size from './examples/Size';
-import Variant from './examples/Variant';
-import CustomStyles from './examples/CustomStyles';
-
-
-# Canvas Kit Avatar <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
-    [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
-    instead.
-  </InformationHighlight.Body>
-</InformationHighlight>
-
-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

@@ -1,17 +0,0 @@
-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 altText="Avatar" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" as="div" />
-  </div>
-);

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

@@ -1,20 +0,0 @@
-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 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,34 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStencil, createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const customOrangeAvatar = createStencil({
-  base: {
-    backgroundColor: system.color.static.amber.default,
-    ['[data-part="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-const customGreenAvatarStencil = createStencil({
-  base: {
-    backgroundColor: system.color.static.green.default,
-    ['[data-part="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" as="div" {...customOrangeAvatar()} />
-    <Avatar altText="Avatar" as="div" {...customGreenAvatarStencil()} />
-  </div>
-);

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

@@ -1,25 +0,0 @@
-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 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 altText="Avatar" url="/fake/path/to/image.png" as="div" />
-  </div>
-);

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

@@ -1,20 +0,0 @@
-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) => (
-      <div>
-        <Avatar
-          altText="Avatar"
-          key={index}
-          as="div"
-          size="medium"
-          url={testAvatar + '?v=' + index}
-        />
-        <br />
-      </div>
-    ))}
-  </div>
-);

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

@@ -1,30 +0,0 @@
-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 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"
-      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 altText="Avatar" as="div" url="https://picsum.photos/id/237/300/300" />
-    <h3>Object fit on a Square Image using Dynamic Size</h3>
-    <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,27 +0,0 @@
-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 altText="Avatar" as="div" size="extraExtraLarge" />
-    <h3>Extra Large</h3>
-    <Avatar altText="Avatar" as="div" size="extraLarge" />
-    <h3>Large</h3>
-    <Avatar altText="Avatar" as="div" size="large" />
-    <h3>Medium</h3>
-    <Avatar altText="Avatar" as="div" size="medium" />
-    <h3>Small</h3>
-    <Avatar altText="Avatar" as="div" size="small" />
-    <h3>Extra Small</h3>
-    <Avatar altText="Avatar" as="div" size="extraSmall" />
-    <h3>30px</h3>
-    <Avatar altText="Avatar" as="div" size={px2rem(30)} />
-    <h3>40px</h3>
-    <Avatar altText="Avatar" as="div" size={px2rem(40)} />
-    <h3>3rem</h3>
-    <Avatar altText="Avatar" as="div" size="3rem" />
-    <h3>4rem</h3>
-    <Avatar altText="Avatar" as="div" size="4rem" />
-  </div>
-);

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

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

package/dist/mdx/react/icon/examples/Overview.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {shieldIcon} from '@workday/canvas-accent-icons-web';
-import {benefitsIcon} from '@workday/canvas-applet-icons-web';
-import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
-
-import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
-import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const graphicExample: CanvasGraphic = {
-  name: 'badgeAchievement',
-  type: CanvasIconTypes.Graphic,
-  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
-  filename: 'wd-graphic-badge-achievement.svg',
-  category: '',
-  tags: [],
-};
-
-const styleOverrides = {
-  container: createStyles({
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: system.space.x4,
-  }),
-  systemIconStyles: createStyles({
-    background: system.color.static.red.softer,
-  }),
-};
-
-export default () => (
-  <Flex cs={styleOverrides.container}>
-    <AccentIcon icon={shieldIcon} />
-    <AppletIcon icon={benefitsIcon} />
-    <SystemIcon icon={activityStreamIcon} cs={styleOverrides.systemIconStyles} />
-    <SystemIconCircle icon={activityStreamIcon} />
-    <Graphic src={graphicExample} />
-  </Flex>
-);

package/dist/mdx/react/text-area/examples/Caution.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextArea} from '@workday/canvas-kit-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField error="caution">
-      <FormField.Label>Please enter your review.</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
-        <FormField.Hint>Please enter your review.</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/react/text-area/examples/Error.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextArea} from '@workday/canvas-kit-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField error="error">
-      <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
-        <FormField.Hint>Please enter your review.</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/react/text-input/examples/Caution.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField error="caution">
-      <FormField.Label>Email</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint>Please enter a valid email.</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/react/text-input/examples/Error.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField error="error">
-      <FormField.Label>Email</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint>Please enter a valid email.</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};