@workday/canvas-kit-docs 6.0.7 → 6.1.0

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>
-  );
-};