@workday/canvas-kit-docs 6.0.4 → 6.1.0

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

@@ -0,0 +1,8 @@
+import {Basic} from "./examples/PageHeader";
+
+
+# Canvas Kit Examples
+
+## PageHeader
+
+<ExampleCodeBlock code={Basic} />

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {styled, createComponent, dubLogoBlue} from '@workday/canvas-kit-react/common';
+import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {
+  notificationsIcon,
+  inboxIcon,
+  justifyIcon,
+  assistantIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {IconButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {SearchForm, HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <GlobalHeader>
+    <GlobalHeader.Item>
+      <IconButton aria-label="menu" icon={justifyIcon} />
+      <Hyperlink>
+        <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
+      </Hyperlink>
+    </GlobalHeader.Item>
+    <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
+      <SearchForm onSubmit={() => 1} />
+    </GlobalHeader.Item>
+    <GlobalHeader.Item>
+      <IconButton aria-label="messages" icon={assistantIcon} />
+      <IconButton aria-label="notifications" icon={notificationsIcon} />
+      <IconButton aria-label="inbox" icon={inboxIcon} />
+      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+    </GlobalHeader.Item>
+  </GlobalHeader>
+);
+
+const GlobalHeaderItem = createComponent('div')({
+  displayName: 'GlobalHeader.Item',
+  Component: ({spacing = 's', ...props}: HeaderItemProps, ref) => (
+    <HStack spacing={spacing} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+  ),
+});
+
+const GlobalHeader = createComponent('header')({
+  displayName: 'GlobalHeader',
+  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  subComponents: {Item: GlobalHeaderItem},
+});
+
+const HeaderWrapper = styled('header')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  boxSizing: 'border-box',
+  ...type.levels.subtext.large,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  backgroundColor: colors.frenchVanilla100,
+  ...depth[1],
+  padding: space.xxs,
+});
+
+const WorkdayLogo = styled('span')({lineHeight: 0});

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {styled, createComponent} from '@workday/canvas-kit-react/common';
+
+import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+import {IconButton} from '@workday/canvas-kit-react/button';
+import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <PageHeader>
+    <PageHeader.Title>Page Header</PageHeader.Title>
+    <PageHeader.Item>
+      <IconButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
+      <IconButton aria-label="menu" icon={justifyIcon} variant="inverse" />
+    </PageHeader.Item>
+  </PageHeader>
+);
+
+const PageHeaderItem = createComponent('div')({
+  displayName: 'PageHeader.Item',
+  Component: ({spacing = 'xxs', ...props}: HeaderItemProps, ref, Element) => (
+    <HStack spacing={spacing} ref={ref} as={Element} {...props} />
+  ),
+});
+
+const PageHeaderTitle = createComponent('h2')({
+  displayName: 'PageHeader.Title',
+  Component: ({children, ...props}, ref, Element) => (
+    <Title ref={ref} as={Element} {...props}>
+      {children}
+    </Title>
+  ),
+});
+
+const PageHeader = createComponent('header')({
+  displayName: 'PageHeader',
+  Component: (props, ref, Element) => <Header ref={ref} as={Element} {...props} />,
+  subComponents: {Item: PageHeaderItem, Title: PageHeaderTitle},
+});
+
+const Header = styled('header')({
+  padding: `${space.xs} ${space.xl}`,
+  backgroundImage: gradients.blueberry,
+  color: colors.frenchVanilla100,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  display: 'flex',
+  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/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost

package/dist/mdx/react/loading-animation/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingAnimation />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
+import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -87,6 +88,13 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### Delayed Tooltip
+
+The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
+control the length of the delay by providing custom `showDelay` and `hideDelay` in ms.
+
+<ExampleCodeBlock code={DelayedTooltip} />
+
 ### Placements
 
 The tooltip allows for a `placement` configuration. The tooltip uses

package/dist/mdx/react/tooltip/examples/DelayedTooltip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Tooltip type="describe" title="Tooltip Text" showDelay={2000} hideDelay={1000}>
+        <SecondaryButton>
+          Tooltip appears after 2 seconds and disappears after 1 second
+        </SecondaryButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.0.4",
+  "version": "6.1.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "build:specs": "node ./utils/build-specifications.js",
     "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
     "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "publishConfig": {
     "access": "public"
@@ -49,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.0.4"
+    "@workday/canvas-kit-react": "^6.1.0"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "0901b67be51d350b984f71d8cfcb2e2168e332c7"
+  "gitHead": "6c78b250ea2d0dffd52c6502e6ea1f2d6cce71ed"
 }

package/dist/mdx/labs-react/text-input/examples/Alert.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {styled} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
-
-const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
-  ({alertStyles}) => alertStyles
-);
-
-export default () => {
-  const [value, setValue] = React.useState('foo');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing(
-    value.length < 3 ? 'error' : value.length < 5 ? 'alert' : 'success'
-  );
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Password</TextInput.Label>
-        <StyledField
-          alertStyles={alertStyles}
-          onChange={handleChange}
-          value={value}
-          type="password"
-        />
-        <TextInput.Hint paddingTop={space.xxs}>
-          <strong>Password Strength: </strong>
-          {value.length < 3 ? (
-            <span>Weak</span>
-          ) : value.length < 5 ? (
-            <span>Average</span>
-          ) : (
-            <span>Strong</span>
-          )}
-        </TextInput.Hint>
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Basic.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Disabled.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} disabled />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Grow.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs">
-      <TextInput>
-        <TextInput.Label>Street Address</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/LabelPosition.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <HStack spacing="l" alignItems="center">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </HStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Password.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('SuperSecret1');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Password</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} type="password" />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Placeholder.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Required.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput isRequired={true}>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/ThemedAlert.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider, PartialEmotionCanvasTheme, styled} from '@workday/canvas-kit-react/common';
-import {colors, CSSProperties, space} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const theme: PartialEmotionCanvasTheme = {
-    canvas: {
-      palette: {
-        common: {
-          focusOutline: colors.grapeSoda300,
-        },
-        alert: {
-          main: colors.kiwi500,
-          darkest: colors.kiwi600,
-        },
-      },
-    },
-  };
-  return (
-    <CanvasProvider theme={theme}>
-      <AlertInput />
-    </CanvasProvider>
-  );
-};
-
-const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
-  ({alertStyles}) => alertStyles
-);
-
-const AlertInput = () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing('alert');
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <StyledField alertStyles={alertStyles} onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
-      </TextInput>
-    </VStack>
-  );
-};