npm - @workday/canvas-kit-docs - Versions diffs - 8.0.0-alpha.144-next.0 → 8.0.0-alpha.151-next.3 - Mend

@workday/canvas-kit-docs 8.0.0-alpha.144-next.0 → 8.0.0-alpha.151-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

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

@@ -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 ADDED Viewed

@@ -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/Grid/GridCard.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {Grid, 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} />;
+export default () => {
+  const [isComplete, setIsComplete] = React.useState(false);
+  return (
+    <Grid
+      padding="m"
+      depth={1}
+      borderRadius="l"
+      border="solid 1px"
+      borderColor="soap400"
+      maxWidth={600}
+      gridTemplate="auto / auto"
+    >
+      <H3>Learn about Grid {isComplete && '🥳'}</H3>
+      <Box paddingY="s">
+        <Body>Complete this task when you have a functional understanding of Grid.</Body>
+      </Box>
+      <Grid gridTemplate="auto / 1fr auto" justifyItems="end">
+        <Box marginRight="xxs">
+          <PrimaryButton onClick={() => setIsComplete(true)}>Complete</PrimaryButton>
+        </Box>
+        <SecondaryButton onClick={() => setIsComplete(false)}>Cancel</SecondaryButton>
+      </Grid>
+    </Grid>
+  );
+};

package/dist/mdx/react/layout/examples/Grid/GridLayout.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {Grid} from '@workday/canvas-kit-react/layout';
+const Cell = (props: {children: React.ReactNode}) => {
+  return (
+    <Grid
+      alignContent="center"
+      padding="xs"
+      justifyContent="center"
+      backgroundColor="soap500"
+      color="blackPepper500"
+      borderRadius="m"
+    >
+      {props.children}
+    </Grid>
+  );
+};
+const CellItem = (props: {children: React.ReactNode}) => {
+  return (
+    <Grid
+      alignContent="center"
+      gridAutoColumns="max-content"
+      gridGap="0 16px"
+      height="100%"
+      gridAutoFlow="column"
+      padding="xs"
+      justifyContent="center"
+      backgroundColor="peach300"
+      color="blackPepper500"
+      borderRadius="m"
+    >
+      {props.children}
+    </Grid>
+  );
+};
+export default () => {
+  return (
+    <Grid gridAutoFlow="row" padding="xs" gridGap="10px 0">
+      <Grid
+        gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))"
+        gridGap="10px"
+        padding="xxs"
+        border="5px solid #c860d1"
+      >
+        <Grid.Item gridRowStart="2">
+          <Grid gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))" gridGap="10px">
+            <Cell>1</Cell>
+            <Cell>2</Cell>
+          </Grid>
+        </Grid.Item>
+        <Grid.Item gridRowStart="1">
+          <Grid gridTemplateColumns="repeat(auto-fit, minmax(100px, 1fr))" gridGap="10px">
+            <CellItem>3</CellItem>
+            <CellItem>4</CellItem>
+            <CellItem>5</CellItem>
+            <CellItem>6</CellItem>
+            <CellItem>7</CellItem>
+          </Grid>
+        </Grid.Item>
+      </Grid>
+    </Grid>
+  );
+};

package/dist/mdx/react/layout/examples/Grid/GridLayoutInteractive.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+// eslint-disable-next-line no-duplicate-imports
+import {
+  arrowDownIcon,
+  arrowLeftIcon,
+  arrowRightIcon,
+  arrowUpIcon,
+} from '@workday/canvas-system-icons-web';
+const Cell = (props: {children: React.ReactNode}) => {
+  return (
+    <Grid
+      alignContent="center"
+      padding="xs"
+      justifyContent="center"
+      backgroundColor="soap500"
+      color="blackPepper500"
+      borderRadius="m"
+    >
+      {props.children}
+    </Grid>
+  );
+};
+const CellItem = (props: {children: React.ReactNode}) => {
+  return (
+    <Grid
+      alignContent="center"
+      gridAutoColumns="max-content"
+      gridGap="0 16px"
+      height="100%"
+      gridAutoFlow="column"
+      padding="xs"
+      justifyContent="center"
+      backgroundColor="peach300"
+      color="frenchVanilla100"
+      borderRadius="m"
+    >
+      {props.children}
+    </Grid>
+  );
+};
+export default () => {
+  const [rowCount, setRowCount] = useState(1);
+  const [colCount, setColCount] = useState(1);
+  const Prev = val => {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = val;
+    }, [val]);
+    return ref.current;
+  };
+  const prevRowCount = Prev(rowCount);
+  const prevColCount = Prev(colCount);
+  const plusMinus = (curr, prev) => {
+    if (curr <= 2 && (!prev || prev <= 2)) {
+      return true;
+    }
+  };
+  const incDec = (curr, prev, func) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    plusMinus(curr, prev) ? func(curr + 1) : func(curr - 1);
+  };
+  return (
+    <Grid gridAutoFlow="row" padding="xs" gridGap="10px 0">
+      <Grid
+        gridTemplateColumns="repeat(3, 1fr)"
+        gridTemplateRows="repeat(3, 1fr)"
+        gridGap="10px"
+        padding="xs"
+        border="5px solid #c860d1"
+      >
+        <Grid.Item gridRowStart={rowCount} gridColumnStart={colCount}>
+          <CellItem>
+            <PrimaryButton
+              size="extraSmall"
+              icon={plusMinus(rowCount, prevRowCount) ? arrowDownIcon : arrowUpIcon}
+              onClick={() => {
+                incDec(rowCount, prevRowCount, setRowCount);
+              }}
+            >
+              Row: {rowCount}
+            </PrimaryButton>
+            <PrimaryButton
+              size="extraSmall"
+              icon={plusMinus(colCount, prevColCount) ? arrowRightIcon : arrowLeftIcon}
+              onClick={() => {
+                incDec(colCount, prevColCount, setColCount);
+              }}
+            >
+              Col: {colCount}
+            </PrimaryButton>
+          </CellItem>
+        </Grid.Item>
+        <Cell>2</Cell>
+        <Cell>3</Cell>
+        <Cell>4</Cell>
+        <Cell>5</Cell>
+        <Cell>6</Cell>
+        <Cell>7</Cell>
+        <Cell>8</Cell>
+        <Cell>9</Cell>
+      </Grid>
+    </Grid>
+  );
+};

package/dist/mdx/react/layout/examples/Grid/UIExample.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {Grid, GridProps, Box} from '@workday/canvas-kit-react/layout';
+import {type} from '@workday/canvas-kit-react/tokens';
+import {fontSizes} from '../../../../tokens/lib/type/fontSizes';
+import styled from '@emotion/styled';
+// temporary placeholder until type components are added to canvas-kit
+const StyledHeading = styled(Box.as('h3'))({
+  ...type.levels.body.large,
+  ...type.variants.inverse,
+  margin: 0,
+  fontWeight: type.properties.fontWeights.bold,
+});
+const borderPadProps = {
+  borderRadius: 'm',
+  padding: 's',
+};
+const Header = ({children, ...props}: GridProps) => (
+  <Grid gridArea="Header" depth={1} {...props} {...borderPadProps}>
+    {children}
+  </Grid>
+);
+const BodyContent = ({children, ...props}: GridProps) => (
+  <Grid gridArea="BodyContent" depth={1} {...props} {...borderPadProps}>
+    {children}
+  </Grid>
+);
+const SideBar = ({children, ...props}: GridProps) => (
+  <Grid gridArea="SideBar" depth={1} {...props} {...borderPadProps}>
+    {children}
+  </Grid>
+);
+const Footer = ({children, ...props}: GridProps) => (
+  <Grid gridArea="Footer" depth={1} {...props} {...borderPadProps}>
+    {children}
+  </Grid>
+);
+export default () => {
+  const parentCont = {
+    gridTemplateAreas:
+      "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
+    gridGap: fontSizes[16],
+    gridTemplateColumns: '3fr 9fr',
+    gridTemplateRows: 'auto 300px auto',
+  };
+  return (
+    <Grid as="section" padding="s">
+      <Grid {...parentCont}>
+        <Header backgroundColor="blueberry400">
+          <StyledHeading>Header</StyledHeading>
+        </Header>
+        <SideBar backgroundColor="blueberry300">
+          <StyledHeading>SideBar</StyledHeading>
+        </SideBar>
+        <BodyContent backgroundColor="plum300">
+          <StyledHeading>Body Content</StyledHeading>
+        </BodyContent>
+        <Footer backgroundColor="berrySmoothie300">
+          <StyledHeading>Footer</StyledHeading>
+        </Footer>
+      </Grid>
+    </Grid>
+  );
+};

package/dist/mdx/react/layout/examples/PropTables.splitprops.tsx CHANGED Viewed

@@ -1,7 +1,9 @@
 import React from 'react';
-import {FlexStyleProps, StackStyleProps} from '@workday/canvas-kit-react/layout';
+import {FlexStyleProps, StackStyleProps, GridStyleProps} from '@workday/canvas-kit-react/layout';
 export const FlexStyle = (props: FlexStyleProps) => <div />;
 export const StackStyle = (props: StackStyleProps) => <div />;
+export const GridStyle = (props: GridStyleProps) => <div />;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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/NoValue.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 />;