@workday/canvas-kit-docs 14.0.0-alpha.1229-next.0 → 14.0.0-alpha.1233-next.0

package/dist/mdx/preview-react/text-input/examples/Error.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {space} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const [value, setValue] = React.useState('four');
-  const [hint, setHint] = React.useState('');
-  const [hasError, setHasError] = React.useState(false);
-
-  const validateInput = (value: string) => {
-    const stringLength = value.length;
-    if (stringLength !== 3) {
-      setHasError(true);
-      const hintStart = 'Word length must be';
-      setHint(stringLength < 3 ? `${hintStart} greater than 2` : `${hintStart} less than 4`);
-    } else {
-      setHasError(false);
-      setHint('');
-    }
-  };
-
-  React.useEffect(() => {
-    validateInput(value);
-    // Only run on load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    validateInput(event.target.value);
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput error={hasError ? 'error' : undefined} orientation="vertical">
-      <TextInput.Label>A three letter word</TextInput.Label>
-      <TextInput.Field onChange={handleChange} value={value} />
-      <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
-    </TextInput>
-  );
-};

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

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

package/dist/mdx/preview-react/text-input/examples/Hidden.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  return (
-    <>
-      <h2>Inspect Element to see the markup</h2>
-      <TextInput.Field value={'Secret'} type="hidden" />
-    </>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
-
-const StyledTextAreaLabel = styled(TextInput.Label)({
-  ...accessibleHide,
-});
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput orientation="vertical" gap="zero">
-      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
-      <TextInput.Field onChange={handleChange} value={value} />
-    </TextInput>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput orientation="horizontalStart">
-      <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field onChange={handleChange} value={value} />
-    </TextInput>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/LabelPositionVertical.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput orientation="vertical" gap="xxxs">
-      <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field onChange={handleChange} value={value} />
-    </TextInput>
-  );
-};

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('SuperSecret1');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput orientation="vertical">
-      <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field onChange={handleChange} value={value} type="password" />
-    </TextInput>
-  );
-};

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput orientation="vertical">
-      <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
-    </TextInput>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/ReadOnly.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  return (
-    <TextInput orientation="vertical">
-      <TextInput.Label>Unwavering Opinion</TextInput.Label>
-      <TextInput.Field
-        value={'CKR is great'}
-        readOnly={true}
-        borderColor="transparent"
-        background="transparent"
-        cursor="default"
-      />
-    </TextInput>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/RefForwarding.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import {changeFocus} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-  const ref = React.useRef(null);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const handleClick = () => {
-    changeFocus(ref.current);
-  };
-
-  return (
-    <Flex gap="xxxs" alignItems="flex-start" flexDirection="column">
-      <TextInput orientation="vertical">
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} ref={ref} />
-      </TextInput>
-      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
-    </Flex>
-  );
-};

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextInput isRequired={true} orientation="vertical">
-      <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field onChange={handleChange} value={value} />
-    </TextInput>
-  );
-};

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {
-  CanvasProvider,
-  PartialEmotionCanvasTheme,
-  useThemedRing,
-} from '@workday/canvas-kit-react/common';
-import {base, system} from '@workday/canvas-tokens-web';
-import {cssVar} from '@workday/canvas-kit-styling';
-
-export default () => {
-  const theme: PartialEmotionCanvasTheme = {
-    canvas: {
-      palette: {
-        alert: {
-          lightest: cssVar(system.color.static.green.softer),
-        },
-        common: {
-          focusOutline: cssVar(base.purple500),
-          alertInner: cssVar(base.green400),
-          alertOuter: cssVar(base.green500),
-        },
-      },
-    },
-  };
-  return (
-    <CanvasProvider theme={theme}>
-      <AlertInput />
-    </CanvasProvider>
-  );
-};
-
-const AlertInput = () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing('alert');
-
-  return (
-    <TextInput error="alert" orientation="vertical">
-      <TextInput.Label>Email</TextInput.Label>
-      <TextInput.Field cs={alertStyles} onChange={handleChange} value={value} />
-      <TextInput.Hint cs={{paddingTop: cssVar(system.space.x2)}}>
-        Please enter a valid email.
-      </TextInput.Hint>
-    </TextInput>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-import {system, base} from '@workday/canvas-tokens-web';
-import {cssVar} from '@workday/canvas-kit-styling';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const theme: PartialEmotionCanvasTheme = {
-    canvas: {
-      palette: {
-        error: {
-          lightest: cssVar(base.purple100),
-          main: cssVar(base.purple600),
-        },
-        common: {
-          focusOutline: cssVar(system.color.static.green.default),
-          errorInner: cssVar(base.purple600),
-        },
-      },
-    },
-  };
-
-  return (
-    <CanvasProvider theme={theme}>
-      <TextInput error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-        <TextInput.Hint cs={{paddingTop: cssVar(system.space.x2)}}>
-          {!value && 'Please enter an email.'}
-        </TextInput.Hint>
-      </TextInput>
-    </CanvasProvider>
-  );
-};

package/dist/mdx/react/_examples/mdx/SearchForm.mdx

@@ -1,19 +0,0 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import SearchFormBasic from './examples/SearchFormBasic';
-
-
-# Canvas Kit Examples
-
-## Search Form Basic
-
-A search form has a couple unique attributes to work correctly across platforms.
-
-If you are a SPA and use an `onSubmit` attritbute be sure to also include a `action="."` attribute
-to get the correct keyboard on mobile devices.
-
-The form should always have a `role="search"` and the input should be `type="search"`
-
-If you want to use a CKR clear button you will need to hide the webkit default one using the
-`::-webkit-search-cancel-button` pseudo selector.
-
-<ExampleCodeBlock code={SearchFormBasic} />

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {InputGroup} from '@workday/canvas-kit-react/text-input';
-import {searchIcon} from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
-
-const hideNativeClearStyles = createStyles({
-  '&::-webkit-search-cancel-button': {
-    display: 'none',
-  },
-});
-
-export default () => {
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log(e.target[1]);
-  };
-  return (
-    <form role="search" action="." onSubmit={handleSubmit}>
-      <InputGroup>
-        <InputGroup.InnerStart>
-          <TertiaryButton size="small" aria-label="Search" icon={searchIcon} type="submit" />
-        </InputGroup.InnerStart>
-        <InputGroup.Input
-          type="search"
-          placeholder="Search for your favorite wine"
-          cs={hideNativeClearStyles}
-        />
-        <InputGroup.InnerEnd>
-          <InputGroup.ClearButton />
-        </InputGroup.InnerEnd>
-      </InputGroup>
-    </form>
-  );
-};