@workday/canvas-kit-docs 8.0.0-alpha.150-next.2 → 8.0.0-alpha.155-next.0

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

@@ -1,10 +1,12 @@
-# Canvas Kit 7.0 Upgrade Guide
+# Canvas Kit 8.0 Upgrade Guide
 
-This guide contains breaking changes in Canvas Kit v7. Please
+This guide contains breaking changes in Canvas Kit v8. Please
 [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
 any questions.
 
 - [Codemod](#codemod)
+- [Components](#components)
+  - [Box](#box)
 - [General Changes](#general-changes) -[Remove Default Imports](#remove-default-imports)
 
 ## Codemod
@@ -32,6 +34,30 @@ rollback more easily if necessary.**
 [Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
 encounter any issues or use cases that we've missed.
 
+## Components
+
+### Box
+
+#### Updating props
+
+The following props have been added to the `Box` component to support font and text styles:
+`fontFamily`, `fontSize`, `fontStyle`, `fontWeight`, `lineHeight`, `letterSpacing`, `textAlign`,
+`textDecoration`, `textTransform`, `textShadow`, `whiteSpace`, `wordBreak`.
+
+```tsx
+// v7
+const StyledBox = styled(Box)({
+  fontFamily: 'monospace',
+  fontSize: type.properties.fontSizes[16],
+  fontWeight: type.properties.fontWeights.medium
+})
+
+<StyledBox />
+
+// v8
+<Box fontFamily="monospace" fontSize={16} fontWeight="medium" />
+```
+
 ## General Changes
 
 ### Remove Default Imports

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

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import {styled} from '@workday/canvas-kit-react/common';
-import {colors, depth, type} from '@workday/canvas-kit-react/tokens';
+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';
-
-const StyledHeader = styled('h3')({
-  ...type.levels.body.large,
-  color: colors.licorice500,
-  fontWeight: type.properties.fontWeights.bold,
-});
+import {Text} from '@workday/canvas-kit-react/text';
 
 const StyledPanel = styled(SidePanel)({
   ...depth[6],
@@ -22,7 +17,9 @@ export default () => {
     <Flex height={320} backgroundColor="soap100" position="relative">
       <StyledPanel touched={true} variant="alternate">
         <Flex alignItems="center" paddingY="s" paddingX="s">
-          <StyledHeader {...labelProps}>Alternate Panel</StyledHeader>
+          <Text as="h3" typeLevel="body.large" fontWeight="bold" color="licorice500">
+            Alternate Panel
+          </Text>
         </Flex>
       </StyledPanel>
       <Box position="absolute" background="rgba(0,0,0,0.65)" height="100%" width="100%" />

package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import {colors, space, type} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex, HStack} from '@workday/canvas-kit-react/layout';
-import {styled} from '@workday/canvas-kit-react/common';
-
-const StyledHeader = styled('h3')({
-  ...type.levels.body.large,
-  color: colors.licorice500,
-  fontWeight: type.properties.fontWeights.bold,
-});
+import {Text} from '@workday/canvas-kit-react/text';
 
 const StyledAccentIcon = styled(AccentIcon)({
   marginRight: space.s,
@@ -24,7 +19,15 @@ export default () => {
       <SidePanel {...panelProps}>
         <Flex alignItems="center" paddingY="s" paddingX="s">
           <StyledAccentIcon icon={rocketIcon} />
-          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
+          <Text
+            as="h3"
+            typeLevel="body.large"
+            color="licorice500"
+            fontWeight="bold"
+            {...labelProps}
+          >
+            Tasks Panel
+          </Text>
         </Flex>
       </SidePanel>
     </HStack>

package/dist/mdx/preview-react/side-panel/examples/Basic.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   SidePanel,
@@ -7,18 +6,13 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
-const StyledHeader = styled('h3')({
-  ...type.levels.body.large,
-  color: colors.licorice500,
-  fontWeight: type.properties.fontWeights.bold,
-});
-
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -36,7 +30,15 @@ export default () => {
               <Flex marginInlineEnd="s">
                 <AccentIcon icon={rocketIcon} />
               </Flex>
-              <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
+              <Text
+                as="h3"
+                typeLevel="body.large"
+                color="licorice500"
+                fontWeight="bold"
+                {...labelProps}
+              >
+                Tasks Panel
+              </Text>
             </Flex>
           )}
         </SidePanel>

package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx

@@ -5,15 +5,8 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {colors, type} from '@workday/canvas-kit-react/tokens';
-import {styled} from '@workday/canvas-kit-react/common';
-
-const StyledHeader = styled('h3')({
-  ...type.levels.body.large,
-  color: colors.licorice500,
-  fontWeight: type.properties.fontWeights.bold,
-});
 
 export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel({initialExpanded: false});
@@ -33,7 +26,15 @@ export default () => {
       >
         {panelState === 'expanded' && (
           <Flex alignItems="center" paddingY="s" paddingX="s">
-            <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
+            <Text
+              as="h3"
+              typeLevel="body.large"
+              color="licorice500"
+              fontWeight="bold"
+              {...labelProps}
+            >
+              Tasks Panel
+            </Text>
           </Flex>
         )}
       </SidePanel>

package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   SidePanel,
@@ -7,16 +6,11 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
-const StyledHeader = styled('h3')({
-  ...type.levels.body.large,
-  color: colors.licorice500,
-  fontWeight: type.properties.fontWeights.bold,
-});
-
 const StyledSidePanel = styled(SidePanel)({
   marginLeft: 'auto',
 });
@@ -32,7 +26,15 @@ const RightPanel = () => {
       <SidePanel.ToggleButton {...controlProps} />
       {panelState === 'expanded' && (
         <Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="s">
-          <StyledHeader {...labelProps}>Tasks Panel</StyledHeader>
+          <Text
+            as="h3"
+            typeLevel="body.large"
+            color="licorice500"
+            fontWeight="bold"
+            {...labelProps}
+          >
+            Tasks Panel
+          </Text>
         </Flex>
       )}
     </StyledSidePanel>

package/dist/mdx/preview-react/side-panel/examples/Variant.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {colors, type} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   SidePanel,
@@ -7,16 +6,11 @@ import {
   SidePanelTransitionStates,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
 
-const StyledHeader = styled('h3')({
-  ...type.levels.body.large,
-  color: colors.licorice500,
-  fontWeight: type.properties.fontWeights.bold,
-});
-
 export default () => {
   const {direction, toggleDirection} = useDirection();
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
@@ -31,7 +25,15 @@ export default () => {
           <SidePanel.ToggleButton {...controlProps} />
           {panelState === 'expanded' && (
             <Flex alignItems="center" paddingY="s" paddingX="s">
-              <StyledHeader {...labelProps}>Alternate Panel</StyledHeader>
+              <Text
+                as="h3"
+                typeLevel="body.large"
+                color="licorice500"
+                fontWeight="bold"
+                {...labelProps}
+              >
+                Alternate Panel
+              </Text>
             </Flex>
           )}
         </SidePanel>

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -5,9 +5,10 @@ import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
 import {space, colors} from '@workday/canvas-kit-react/tokens';
+import {Text} from '@workday/canvas-kit-react/text';
 
 export default () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState('Hello');
 
   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setValue(event.target.value.slice(0, 10));
@@ -30,7 +31,7 @@ export default () => {
       <TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>
         <strong>Character Limit: </strong>
-        <span css={{color: hintColor}}>{10 - value.length} Left</span>
+        <Text color={hintColor}>{10 - value.length} Left</Text>
       </TextArea.Hint>
     </TextArea>
   );

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import {createComponent, styled} from '@workday/canvas-kit-react/common';
 
-import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
+import {colors, gradients, space} from '@workday/canvas-kit-react/tokens';
 
 import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+import {Heading} from '@workday/canvas-kit-react/text';
 
 interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
   spacing?: StackSpacing;
@@ -31,9 +32,18 @@ const PageHeaderItem = createComponent('div')({
 const PageHeaderTitle = createComponent('h2')({
   displayName: 'PageHeader.Title',
   Component: ({children, ...props}, ref, Element) => (
-    <Title ref={ref} as={Element} {...props}>
+    <Heading
+      as={Element}
+      ref={ref}
+      size="medium"
+      variant="inverse"
+      padding={`${space.xs} 0`}
+      margin={0}
+      whiteSpace="nowrap"
+      {...props}
+    >
       {children}
-    </Title>
+    </Heading>
   ),
 });
 
@@ -53,11 +63,3 @@ const Header = styled('header')({
   alignItems: 'center',
   justifyContent: 'space-between',
 });
-
-const Title = styled('h2')({
-  ...type.levels.heading.medium,
-  color: colors.frenchVanilla100,
-  padding: `${space.xs} 0`,
-  margin: 0,
-  whiteSpace: 'nowrap',
-});

package/dist/mdx/react/layout/Box.mdx

@@ -3,12 +3,14 @@ import {Box} from '@workday/canvas-kit-react/layout';
 import As from './examples/As';
 import Border from './examples/Border';
 import Color from './examples/Color';
+import Font from './examples/Font';
 import Depth from './examples/Depth';
 import FlexItem from './examples/FlexItem';
 import Layout from './examples/Layout';
 import Position from './examples/Position';
 import Ref from './examples/Ref';
 import Space from './examples/Space';
+import Text from './examples/Text';
 // props tables
 import {
   BoxBorder,
@@ -60,16 +62,20 @@ is highly flexible, and its primary purpose is to build other components.
       - [Example](#example-2)
     - [Flex Item](#flex-item)
       - [Example](#example-3)
-    - [Layout](#layout)
+    - [Font](#font)
       - [Example](#example-4)
+    - [Layout](#layout)
+      - [Example](#example-5)
     - [Position](#position)
       - [Position Logical Props](#position-logical-props)
       - [Position Standard Props](#position-standard-props)
-      - [Example](#example-5)
+      - [Example](#example-6)
     - [Space](#space)
       - [Space Logical Props](#space-logical-props)
       - [Space Standard Props](#space-standard-props)
-      - [Example](#example-6)
+      - [Example](#example-7)
+    - [Text](#space)
+      - [Example](#example-8)
   - [Exhaustive Style Prop List](#exhaustive-style-prop-list)
     - [Border Props](#border-props)
     - [Color Props](#color-props)
@@ -273,6 +279,16 @@ table for flex item props:
 
 ---
 
+### Font
+
+Font style props allow you to adjust the font family, style, size or weight of components.
+
+#### Example
+
+<ExampleCodeBlock code={Font} />
+
+---
+
 ### Layout
 
 Layout style props allow you to adjust the display, dimensions, and overflow of a component. These
@@ -372,6 +388,17 @@ Bidirectional support will only affect `marginLeft`, `marginRight`, `paddingLeft
 
 <ExampleCodeBlock code={Space} />
 
+### Text
+
+Text style props allow you to modify text using props such as `textDecoration` or `textTransform` or
+set line styles by `lineHeight` or `letterSpacing`, etc.
+
+#### Example
+
+<ExampleCodeBlock code={Text} />
+
+---
+
 ## Exhaustive Style Prop List
 
 Below is an exhaustive list of `Box` style props divided by category.

package/dist/mdx/react/layout/examples/Flex/FlexCard.tsx

@@ -1,21 +1,7 @@
 import * as React from 'react';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {type} from '@workday/canvas-kit-react/tokens';
-
-// temporary placeholder until type components are added to canvas-kit
-const H3 = props => (
-  <h3
-    style={{
-      ...type.levels.body.large,
-      margin: 0,
-      fontWeight: type.properties.fontWeights.bold,
-    }}
-    {...props}
-  />
-);
-
-const Body = props => <p style={{...type.levels.body.small, margin: 0}} {...props} />;
+import {BodyText} from '@workday/canvas-kit-react/text';
 
 export default () => {
   const [isComplete, setIsComplete] = React.useState(false);
@@ -29,10 +15,12 @@ export default () => {
       borderColor="soap400"
       maxWidth={600}
     >
-      <H3>Learn about Flex {isComplete && '🥳'}</H3>
-      <Box paddingY="s">
-        <Body>Complete this task when you have a functional understanding of Flex.</Body>
-      </Box>
+      <BodyText as="h3" size="large" fontWeight="bold" margin={0}>
+        Learn about Flex {isComplete && '🥳'}
+      </BodyText>
+      <BodyText size="small" margin={0} paddingY="s">
+        Complete this task when you have a functional understanding of Flex.
+      </BodyText>
       <Flex justifyContent="flex-end">
         <Box marginRight="xxs">
           <PrimaryButton onClick={() => setIsComplete(true)}>Complete</PrimaryButton>

package/dist/mdx/react/layout/examples/Flex/Usage.tsx

@@ -1,23 +1,6 @@
 import * as React from 'react';
-import {Flex, FlexProps, Box} from '@workday/canvas-kit-react/layout';
-import {type} from '@workday/canvas-kit-react/tokens';
-
-// temporary placeholder until type components are added to canvas-kit
-const H3 = props => (
-  <h3
-    style={{
-      ...type.levels.body.large,
-      ...type.variants.inverse,
-      margin: 0,
-      fontWeight: type.properties.fontWeights.bold,
-    }}
-    {...props}
-  />
-);
-
-const Body = props => (
-  <p style={{...type.levels.body.small, ...type.variants.inverse, margin: 0}} {...props} />
-);
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {BodyText} from '@workday/canvas-kit-react/text';
 
 const Card = ({children, ...props}: FlexProps) => (
   <Flex
@@ -40,41 +23,41 @@ export default () => {
       <h2>Canvas Principles</h2>
       <Flex alignItems="stretch" flexWrap="wrap">
         <Card backgroundColor="blueberry400">
-          <H3>Empower over Enforce</H3>
-          <Box paddingY="xs">
-            <Body>
-              Encourage our user's expression. Stay out of the way and provide them with the tools
-              and resources to build their vision.
-            </Body>
-          </Box>
+          <BodyText as="h3" size="large" variant="inverse" fontWeight="bold" margin={0}>
+            Empower over Enforce
+          </BodyText>
+          <BodyText size="small" variant="inverse" margin={0} paddingY="xs">
+            Encourage our user's expression. Stay out of the way and provide them with the tools and
+            resources to build their vision.
+          </BodyText>
         </Card>
         <Card backgroundColor="juicyPear500">
-          <H3>Evolution over Perfection</H3>
-          <Box paddingY="xs">
-            <Body>
-              Nothing is ever perfect – embrace that. Make educated assumptions, validate and test
-              our decisions, then iterate! Aim of continous rather than perfect solutions.
-            </Body>
-          </Box>
+          <BodyText as="h3" size="large" variant="inverse" fontWeight="bold" margin={0}>
+            Evolution over Perfection
+          </BodyText>
+          <BodyText size="small" variant="inverse" margin={0} paddingY="xs">
+            Nothing is ever perfect – embrace that. Make educated assumptions, validate and test our
+            decisions, then iterate! Aim of continous rather than perfect solutions.
+          </BodyText>
         </Card>
         <Card backgroundColor="chiliMango400">
-          <H3>Simple over Clever</H3>
-          <Box paddingY="xs">
-            <Body>
-              Simple solutions invite the user in - clever solutions invite complexity. Make the
-              system easy and predictable, and progressively disclose advanced functionality.
-            </Body>
-          </Box>
+          <BodyText as="h3" size="large" variant="inverse" fontWeight="bold" margin={0}>
+            Simple over Clever
+          </BodyText>
+          <BodyText size="small" variant="inverse" margin={0} paddingY="xs">
+            Simple solutions invite the user in - clever solutions invite complexity. Make the
+            system easy and predictable, and progressively disclose advanced functionality.
+          </BodyText>
         </Card>
         <Card backgroundColor="blackberry400">
-          <H3>Everyone over Every One</H3>
-          <Box paddingY="xs">
-            <Body>
-              Each piece of the system is designs and built to be accessible, while still providing
-              the best experience for all consumers. But not if something is focused on a single use
-              case and negates the usability for others.
-            </Body>
-          </Box>
+          <BodyText as="h3" size="large" variant="inverse" fontWeight="bold" margin={0}>
+            Everyone over Every One
+          </BodyText>
+          <BodyText size="small" variant="inverse" margin={0} paddingY="xs">
+            Each piece of the system is designs and built to be accessible, while still providing
+            the best experience for all consumers. But not if something is focused on a single use
+            case and negates the usability for others.
+          </BodyText>
         </Card>
       </Flex>
     </Flex>

package/dist/mdx/react/layout/examples/Font.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <>
+    <Box fontSize={14} fontWeight="bold" border="1px solid black" margin="xxs" padding="s">
+      Default font, 14px, medium weight
+    </Box>
+    <Box
+      fontFamily="monospace"
+      fontSize={12}
+      fontWeight="bold"
+      fontStyle="italic"
+      border="1px solid black"
+      margin="xxs"
+      padding="s"
+    >
+      Monospace font, 12px, italic style
+    </Box>
+  </>
+);

package/dist/mdx/react/layout/examples/Stack/HStackCards.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import {HStack, Stack, Flex, Box} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 
 const Card = ({heading = '', body = ''}) => (
   <Flex flex={1} flexBasis="auto" depth={1} padding="s" backgroundColor="frenchVanilla100">
     <Stack flexDirection="column" spacing="xs">
-      <h3 style={{...type.levels.heading.small, margin: 0}}>{heading}</h3>
+      <Heading as="h3" size="small" margin={0}>
+        {heading}
+      </Heading>
       <Box maxWidth={240}>
-        <p style={{...type.levels.body.small, margin: 0}}>{body}</p>
+        <BodyText size="small" margin={0}>
+          {body}
+        </BodyText>
       </Box>
       <Box>
         <TertiaryButton>Add to order</TertiaryButton>

package/dist/mdx/react/layout/examples/Stack/StackCard.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import {Stack, Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 
 export default () => {
   return (
     <Flex backgroundColor="soap100" alignItems="flex-start" padding="s">
       <Flex depth={1} padding="s" backgroundColor="frenchVanilla100">
         <Stack flexDirection="column" spacing="xs">
-          <h3 style={{...type.levels.heading.small, margin: 0}}>Stack</h3>
-          <span style={{...type.levels.body.small}}>
+          <Heading as="h3" size="small" margin={0}>
+            Stack
+          </Heading>
+          <BodyText size="small" margin={0}>
             Stack provides a simple API for managing consistent space between elements in
             one-dimensional layouts. In this Card example, we are setting extra-small spacing the
             heading, body text, and button elements.
-          </span>
+          </BodyText>
           <Flex>
             <TertiaryButton>Learn more</TertiaryButton>
           </Flex>

package/dist/mdx/react/layout/examples/Stack/VStackCards.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import {VStack, Stack, Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 
 const Card = ({heading = '', body = ''}) => (
   <Flex flex={1} flexBasis="auto" depth={1} padding="s" backgroundColor="frenchVanilla100">
     <Stack flexDirection="column" spacing="xs">
-      <h3 style={{...type.levels.heading.small, margin: 0}}>{heading}</h3>
-      <span style={{...type.levels.body.small}}>{body}</span>
+      <Heading as="h3" size="small" margin={0}>
+        {heading}
+      </Heading>
+      <BodyText size="small" margin={0}>
+        {body}
+      </BodyText>
       <Flex>
         <TertiaryButton>Add to order</TertiaryButton>
       </Flex>

package/dist/mdx/react/layout/examples/Text.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+const Card = props => <Box border="1px solid black" margin="xxs" padding="s" {...props} />;
+
+export default () => (
+  <>
+    <Card
+      textAlign="center"
+      textDecoration="line-through"
+      textTransform="uppercase"
+      letterSpacing="0.05em"
+      lineHeight="2em"
+      wordBreak="break-all"
+      whiteSpace="break-spaces"
+    >
+      Centered text, uppercase, with line through, 0.05em letter-spacing, 2em line-height, with
+      breack-all and break-spaces.
+    </Card>
+    <Card
+      textAlign="left"
+      textDecoration="underline"
+      textTransform="lowercase"
+      letterSpacing="0.1em"
+      lineHeight="1em"
+      whiteSpace="nowrap"
+    >
+      Nowrap, Left-aligned text, with lowercase and underline, 0.1em letter-spacing, 1em
+      line-height,
+    </Card>
+  </>
+);

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import styled from '@emotion/styled';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -11,7 +12,7 @@ export default () => {
   };
 
   const StyledFormField = styled(FormField)({
-    width: '161px',
+    width: space.xl,
   });
 
   return (
@@ -21,10 +22,7 @@ export default () => {
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-        <Radio
-          label="My favorite pizza crust flavor is butter because it's the best thing to put on bread"
-          value="cauliflower"
-        />
+        <Radio label="Butter - the best thing to put on bread" value="butter" />
       </RadioGroup>
     </StyledFormField>
   );

package/dist/mdx/react/radio/examples/NoValue.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {type} from '@workday/canvas-kit-react/tokens';
+import {Subtext} from '@workday/canvas-kit-react/text';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>(0);
@@ -20,7 +20,7 @@ export default () => {
           <Radio label="Cauliflower" />
         </RadioGroup>
       </FormField>
-      <p style={type.levels.subtext.large}>Value: {value}</p>
+      <Subtext size="large">Value: {value}</Subtext>
     </>
   );
 };

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -14,9 +14,10 @@ import {
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {borderRadius, space, type} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {patternIcon} from '@workday/canvas-system-icons-web';
 import {StyledType} from '@workday/canvas-kit-react/common';
+import {Heading} from '@workday/canvas-kit-react/text';
 
 const fadeOut = keyframes`
   from {
@@ -105,14 +106,9 @@ export default () => {
               <Box>
                 <Flex alignItems="center" display="inline-flex" marginBottom="s">
                   <SystemIconCircle icon={patternIcon} />
-                  <h3
-                    style={{
-                      ...type.levels.heading.small,
-                      margin: `0 0 0 ${space.xxs}`,
-                    }}
-                  >
+                  <Heading as="h3" size="small" margin={`0 0 0 ${space.xxs}`}>
                     Patterns
-                  </h3>
+                  </Heading>
                 </Flex>
                 <p>
                   Canvas Patterns classify and document reusable solutions built to respond to

package/dist/mdx/react/text/PropTables.splitprops.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {TextProps, TypeLabelProps, TypeLevelProps} from '@workday/canvas-kit-react/text';
+
+// <ArgsTable of={Text} /> generates a very large props table given that
+// Text includes BoxProps. Use this dummy component instead to
+// limit the props shown.
+export const TextComponent = (_: TextProps) => <div />;
+
+// <ArgsTable of={Label} /> generates a props table with
+// Text and Box props. Use this dummy component instead to limit the props shown.
+export const LabelComponent = (_: TypeLabelProps) => <div />;
+
+// <ArgsTable of={Heading} /> generates a props table with
+// Text and Box props. Use this dummy component instead to limit the props shown.
+export const TypeLevelComponent = (_: TypeLevelProps) => <div />;

package/dist/mdx/react/text/Text.mdx

@@ -0,0 +1,129 @@
+import {Basic as BasicText} from './examples/Text';
+import Label from './examples/Label';
+import BodyText from './examples/BodyText';
+import Heading from './examples/Heading';
+import Subtext from './examples/Subtext';
+import Title from './examples/Title';
+
+import {TextComponent, LabelComponent, TypeLevelComponent} from './PropTables.splitprops.tsx';
+
+
+# Canvas Kit React Text
+
+`Text` is a group of text components that provide a common, ergonomic API to render text with
+simplified usage of Canvas Kit type token.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Text
+
+### Usage
+
+`Text` is the base component that is used to render text in the UI. It is built off of our `Box`
+component which allows the use of styles props such as `display`, `margin`, `padding` as well as the
+most common type styles such as `fontWeight`, `fontSize` amongst others. This component is an
+extension of our [type tokens](https://canvas.workdaydesign.com/tokens/type/#type-styles),
+therefore, props like `typeLevel` and `variant` all exists.
+
+By default `Text` component is a `span` element, but it's possible to override the element by
+passing `as` prop.
+
+```tsx
+<Text as="p" fontSize={14} fontWeight="medium">
+  Text here...
+</Text>
+```
+
+<ExampleCodeBlock code={BasicText} />
+
+### Text Props
+
+As previously mentioned, `Text` is built on top of `Box` and has access to all its props. In
+addition `Text` has its own props:
+
+<ArgsTable of={TextComponent} />
+
+## LabelText
+
+`LabelText` is a `label` element build based on the top of `Text` component with added ability to
+add a cursor or disabled style.
+
+### Usage
+
+```tsx
+<LabelText cursor="pointer" disabled={true}>
+  Text here...
+</LabelText>
+```
+
+<ExampleCodeBlock code={Label} />
+
+### LabelText Props
+
+In addition to `Text` component props, `LabelText` has the following props:
+
+<ArgsTable of={LabelComponent} />
+
+## Type Level Components
+
+Type Level Components, `Subtext`, `BodyText`, `Heading` and `Title`, apply type token styles to text
+element. Instead of passing type level token you can use one of Type Level Components, like in
+example below:
+
+```tsx
+// v7
+<p css={{...type.levels.subtext.small}}>Small Subtext Text</p>
+
+// v8
+<Subtext size="small">Small Subtext Text</Subtext>
+```
+
+### Props
+
+In addition to `Text` component props, each type level components has the following props:
+
+<ArgsTable of={TypeLevelComponent} />
+
+### BodyText
+
+`BodyText` component renders text with `type.levels.body[size]` styles.
+
+```tsx
+<BodyText size="small">Small Body Text</BodyText>
+```
+
+<ExampleCodeBlock code={BodyText} />
+
+### Heading
+
+`Heading` component renders text with `type.levels.heading[size]` styles.
+
+```tsx
+<Heading size="small">Small Heading Text</Heading>
+```
+
+<ExampleCodeBlock code={Heading} />
+
+### Subtext
+
+`Subtext` component renders text with `type.levels.subtext[size]` styles.
+
+```tsx
+<Subtext size="small">Small Subtext Text</Subtext>
+```
+
+<ExampleCodeBlock code={Subtext} />
+
+### Title
+
+`Title` component renders text with `type.levels.title[size]` styles.
+
+```tsx
+<Title size="small">Small Title Text</Title>
+```
+
+<ExampleCodeBlock code={Title} />

package/dist/mdx/react/text/examples/BodyText.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {BodyText as BodyTextComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <BodyTextComponent size="large">Large Body Text</BodyTextComponent>
+    <BodyTextComponent size="medium">Medium Body Text</BodyTextComponent>
+    <BodyTextComponent size="small">Small Body Text</BodyTextComponent>
+  </>
+);

package/dist/mdx/react/text/examples/Heading.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Heading as HeadingComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <HeadingComponent as="h4" size="large">
+      Large Heading Text
+    </HeadingComponent>
+    <HeadingComponent as="h5" size="medium">
+      Medium Heading Text
+    </HeadingComponent>
+    <HeadingComponent as="h6" size="small">
+      Small Heading Text
+    </HeadingComponent>
+  </>
+);

package/dist/mdx/react/text/examples/Label.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {LabelText} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <LabelText marginBottom="s">Label</LabelText>
+    <LabelText cursor="pointer" marginBottom="s">
+      Label with pointer
+    </LabelText>
+    <LabelText disabled marginBottom="s">
+      Disabled Label
+    </LabelText>
+  </>
+);

package/dist/mdx/react/text/examples/Subtext.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {Subtext as SubtextComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <SubtextComponent size="large">Large Subtext</SubtextComponent>
+    <SubtextComponent size="medium">Medium Subtext</SubtextComponent>
+    <SubtextComponent size="small">Small Subtext</SubtextComponent>
+  </>
+);

package/dist/mdx/react/text/examples/Text.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {type, typeColors} from '@workday/canvas-kit-react/tokens';
+import {Box} from '@workday/canvas-kit-react';
+import {Text} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <Box>
+    <Text as="h4">Text as h4</Text>
+    <Text as="p" fontSize={14} fontWeight="regular" fontFamily="monospace">
+      Text with props passed
+    </Text>
+    <Text as="p" {...type.levels.subtext.large}>
+      Text with type token passed
+    </Text>
+    <Box {...type.levels.subtext.large} color={typeColors.hint} marginBottom="s">
+      <Text>Text with inherenced styles</Text>
+    </Box>
+    <Text as="p" typeLevel="body.small">
+      Small Body level text
+    </Text>
+  </Box>
+);

package/dist/mdx/react/text/examples/Title.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Title as TitleComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <TitleComponent as="h1" size="large">
+      Large Title Text
+    </TitleComponent>
+    <TitleComponent as="h2" size="medium">
+      Medium Title Text
+    </TitleComponent>
+    <TitleComponent as="h3" size="small">
+      Small Title Text
+    </TitleComponent>
+  </>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.0.0-alpha.150-next.2+b0c3f340",
+  "version": "8.0.0-alpha.155-next.0+f2928aa0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^8.0.0-alpha.150-next.2+b0c3f340"
+    "@workday/canvas-kit-react": "^8.0.0-alpha.155-next.0+f2928aa0"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "b0c3f340ec8e06d39bed5d992b23a1b36892106f"
+  "gitHead": "f2928aa01f06683f727079a905a202b55ce3f9c4"
 }