@workday/canvas-kit-docs 6.9.0-next.0 → 6.9.0-next.4

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {Banner} from '@workday/canvas-kit-react/banner';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledBanner = styled(Banner)({
+  position: 'absolute',
+  right: 0,
+});
 
 export default () => {
   return (
     <Box height={64}>
-      <Banner
-        error={Banner.ErrorType.Error}
-        label="3 Errors"
-        variant={Banner.Variant.Sticky}
-        style={{position: 'absolute', right: 0}}
-      />
+      <StyledBanner hasError={true} isSticky={true}>
+        <Banner.Icon />
+        <Banner.Label>3 Errors</Banner.Label>
+        <Banner.ActionText />
+      </StyledBanner>
     </Box>
   );
 };

package/dist/mdx/react/banner/examples/StickyAnimation.tsx

@@ -0,0 +1,64 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import {jsx, keyframes} from '@emotion/react';
+import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {loopIcon} from '@workday/canvas-system-icons-web';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+const containerStyles: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+  overflow: 'hidden',
+};
+
+export default () => {
+  const {themeRTL, theme} = useThemeRTL();
+  const bannerRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [styles, setStyles] = React.useState<CSSProperties>();
+
+  const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes
+
+  React.useLayoutEffect(() => {
+    let width = bannerRef.current.offsetWidth;
+    if (theme.canvas.direction === 'rtl') {
+      width *= -1;
+    }
+    const slideInKeyframes = keyframes({
+      '0%': {
+        transform: `translateX(${width}px)`,
+      },
+      '100%': {
+        transform: `translateX(0 * ${rerun})`,
+      },
+    });
+
+    setStyles({
+      margin: '4px 0px 4px 4px', // Room for focus outline since container is overflow hidden
+      animation: `${slideInKeyframes} .3s ease-out forwards`,
+    });
+  }, [theme.canvas.direction, rerun]);
+
+  return (
+    <Box height={64}>
+      <div css={containerStyles} ref={containerRef}>
+        <div css={themeRTL(styles)}>
+          <Banner
+            onClick={() => setRerun(r => r + 1)}
+            hasError={true}
+            isSticky={true}
+            ref={bannerRef}
+          >
+            <Banner.Icon icon={loopIcon} />
+            <Banner.Label>Click to run animation</Banner.Label>
+            <Banner.ActionText />
+          </Banner>
+        </div>
+      </div>
+    </Box>
+  );
+};

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Box} from '@workday/canvas-kit-react/layout';
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  styled,
+} from '@workday/canvas-kit-react/common';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    direction: ContentDirection.RTL,
+  },
+};
+
+const StyledStickyBanner = styled(Banner)({
+  position: 'absolute',
+  right: 0,
+});
+
+export default () => {
+  return (
+    <CanvasProvider theme={theme}>
+      <Box height={64}>
+        <StyledStickyBanner isSticky={true}>
+          <Banner.Icon />
+          <Banner.Label>3 אזהרות</Banner.Label>
+          <Banner.ActionText />
+        </StyledStickyBanner>
+      </Box>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/banner/examples/ThemedAlert.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        alert: {
+          main: colors.kiwi200,
+          dark: colors.kiwi300,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Banner>
+        <Banner.Icon />
+        <Banner.Label>3 Items</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/banner/examples/ThemedError.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        error: {
+          main: colors.islandPunch500,
+          dark: colors.islandPunch600,
+          contrast: colors.berrySmoothie100,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Banner hasError={true}>
+        <Banner.Icon />
+        <Banner.Label>3 Items</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/button/button/Button.mdx

@@ -39,7 +39,7 @@ action. Multiple primary buttons make it confusing for the user to understand wh
 should take. Not all screens require a Primary Button.
 
 Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
-for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+for every size and can be positioned at the `start` or `end` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Primary} />
 
@@ -62,7 +62,7 @@ Buttons can be used on most pages without restrictions and work well for multipl
 weight. They can be used in conjunction with a Primary Button or independently.
 
 Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
-for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+for every size and can be positioned at the `start` or `end` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Secondary} />
 
@@ -85,7 +85,7 @@ not visible until it is interacted with. Use Tertiary Buttons for supplemental a
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
 Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported for
-every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+every size and can be positioned at the `start` or `end` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Tertiary} />
 

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -0,0 +1,72 @@
+import {Hyperlink, ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import Link from './examples/Hyperlink';
+import LinkInverse from './examples/HyperlinkInverse';
+import ExternalLink from './examples/ExternalHyperlink';
+import ExternalLinkInverse from './examples/ExternalHyperlinkInverse';
+
+
+# Canvas Kit Hyperlinks
+
+Clickable anchor elements that extend the native `<a>` element with Canvas styling.
+
+[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Hyperlink
+
+`Hyperlink`s should be used when you want to navigate away from the current page or to an anchor on
+the current page.
+
+<ExampleCodeBlock code={Link} />
+
+#### Inverse
+
+`Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink` on a
+dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={LinkInverse} />
+
+#### Props
+
+Undocumented props are spread to the underlying `<a>` element.
+
+<ArgsTable of={Hyperlink} />
+
+### ExternalHyperlink
+
+If your link should open in a new tab or window use the `ExternalHyperlink` component. It will let
+users know about the behavior by adding an icon, `extLinkIcon`. By default, the icon has a label of
+"Opens link in new window". You can override `aria-label` of the icon by using the `iconLabel`
+prop. This override will be needed for translations.
+
+<ExampleCodeBlock code={ExternalLink} />
+
+`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the link on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={ExternalLinkInverse} />
+
+#### Props
+
+Undocumented props are spread to the underlying `<a>` element.
+
+<ArgsTable of={ExternalHyperlink} />
+
+### Accessible Use of the `as` Prop
+
+Like many of our components, `Hyperlink` and `ExternalHyperlink` accept an `as` prop, which lets you change the underlying
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
+
+## Specifications
+
+<Specifications file="Hyperlink.spec.ts" name="Hyperlink" />

package/dist/mdx/react/button/button/examples/ExternalHyperlink.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => (
+  <ExternalHyperlink href="https://workday.com">External Hyperlink</ExternalHyperlink>
+);

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Box backgroundColor="blueberry400" padding="s">
+    <ExternalHyperlink href="https://workday.com" variant="inverse">
+      Hyperlink
+    </ExternalHyperlink>
+  </Box>
+);

package/dist/mdx/react/button/button/examples/Hyperlink.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => <Hyperlink href="#hyperlink">Hyperlink</Hyperlink>;

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Box backgroundColor="blueberry400" padding="s">
+    <Hyperlink href="#hyperlink" variant="inverse">
+      Hyperlink
+    </Hyperlink>
+  </Box>
+);

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
 
 export default () => (
   <HStack spacing="s" padding="s">
     <PrimaryButton>Primary</PrimaryButton>
-    <PrimaryButton icon={plusIcon} iconPosition="right">
+    <PrimaryButton icon={plusIcon} iconPosition="start">
       Primary
     </PrimaryButton>
+    <PrimaryButton icon={caretDownIcon} iconPosition="end">
+      Primary
+    </PrimaryButton>
+    <PrimaryButton icon={relatedActionsVerticalIcon} />
   </HStack>
 );

package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
 
 export default () => (
   <HStack spacing="s" backgroundColor="blueberry400" padding="s">
     <PrimaryButton variant="inverse">Primary</PrimaryButton>
-    <PrimaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+    <PrimaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Primary
     </PrimaryButton>
+    <PrimaryButton icon={caretDownIcon} iconPosition="end" variant="inverse">
+      Primary
+    </PrimaryButton>
+    <PrimaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
   </HStack>
 );

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
 
 export default () => (
   <HStack spacing="s" padding="s">
     <SecondaryButton>Secondary</SecondaryButton>
-    <SecondaryButton icon={plusIcon} iconPosition="right">
+    <SecondaryButton icon={plusIcon} iconPosition="start">
       Secondary
     </SecondaryButton>
+    <SecondaryButton icon={caretDownIcon} iconPosition="end">
+      Secondary
+    </SecondaryButton>
+    <SecondaryButton icon={relatedActionsVerticalIcon} />
   </HStack>
 );

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
 
 export default () => (
   <HStack spacing="s" backgroundColor="blueberry400" padding="s">
     <SecondaryButton variant="inverse">Secondary</SecondaryButton>
-    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+    <SecondaryButton icon={plusIcon} variant="inverse">
       Secondary
     </SecondaryButton>
+    <SecondaryButton icon={caretDownIcon} variant="inverse" iconPosition="end">
+      Secondary
+    </SecondaryButton>
+    <SecondaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
   </HStack>
 );

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
 
 export default () => (
   <HStack spacing="s" padding="s">
     <TertiaryButton>Tertiary</TertiaryButton>
-    <TertiaryButton icon={plusIcon} iconPosition="right">
+    <TertiaryButton icon={plusIcon} iconPosition="start">
       Tertiary
     </TertiaryButton>
-    <TertiaryButton icon={plusIcon} iconPosition="right" disabled>
+    <TertiaryButton icon={caretDownIcon} iconPosition="end">
       Tertiary
     </TertiaryButton>
+    <TertiaryButton icon={relatedActionsVerticalIcon} />
   </HStack>
 );

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  arrowRightIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
 
 export default () => (
   <HStack spacing="s" backgroundColor="blueberry400" padding="s">
     <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
-    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+    <TertiaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Tertiary
     </TertiaryButton>
+    <TertiaryButton icon={caretDownIcon} iconPosition="end" variant="inverse">
+      Tertiary
+    </TertiaryButton>
+    <TertiaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
   </HStack>
 );

package/dist/mdx/react/card/card.mdx

@@ -34,9 +34,9 @@ Card includes a container `Card` component and the following subcomponents: `Car
 `Card` extends from `Box` so it supports all of
 [Box's style props](/components/layout/box/#style-props). This includes `depth`, which changes the
 Card's perceived "height" above the page surface by adjusting its box shadow. `Card` has a default
-depth of `2`.
+depth of `1`.
 
-Here's an example of a `Card` with a reduced `depth` of `1`.
+Here's an example of a `Card` with a increased `depth` of `2`.
 
 <ExampleCodeBlock code={Depth} />
 

package/dist/mdx/react/card/examples/Depth.tsx

@@ -3,7 +3,7 @@ import {Card} from '@workday/canvas-kit-react/card';
 
 export default () => {
   return (
-    <Card depth={1}>
+    <Card depth={2}>
       <Card.Heading>Canvas Supreme</Card.Heading>
       <Card.Body>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -4,6 +4,7 @@ import Checkbox from '@workday/canvas-kit-react/checkbox/lib/Checkbox.tsx';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
+import Inverse from './examples/Inverse';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
 import Indeterminate from './examples/Indeterminate';
@@ -35,6 +36,12 @@ element.
 
 <ExampleCodeBlock code={Basic} />
 
+### Inverse
+
+Checkbox with inverse variation
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Disabled
 
 Set the `disabled` prop of the Checkbox to prevent users from interacting with it.

package/dist/mdx/react/checkbox/examples/Indeterminate.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const [pizzaChecked, setPizzaChecked] = React.useState(false);

package/dist/mdx/react/checkbox/examples/Inverse.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {HStack} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+      <Checkbox
+        variant="inverse"
+        checked={checked}
+        label="I agree to the terms"
+        onChange={handleChange}
+      />
+    </HStack>
+  );
+};

package/dist/mdx/react/checkbox/examples/RefForwarding.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);