@workday/canvas-kit-docs 14.0.0-alpha.1230-next.0 → 14.0.0-alpha.1234-next.0

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -1,170 +0,0 @@
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-
-import Basic from './examples/Basic';
-import Disabled from './examples/Disabled';
-import Grow from './examples/Grow';
-import LabelPositionHorizontal from './examples/LabelPositionHorizontal';
-import LabelPositionVertical from './examples/LabelPositionVertical';
-import Placeholder from './examples/Placeholder';
-import RefForwarding from './examples/RefForwarding';
-import Required from './examples/Required';
-import Hidden from './examples/Hidden';
-import ReadOnly from './examples/ReadOnly';
-import Password from './examples/Password';
-import HiddenLabel from './examples/HiddenLabel';
-import ThemedAlert from './examples/ThemedAlert';
-import ThemedError from './examples/ThemedError';
-import Error from './examples/Error';
-import Alert from './examples/Alert';
-
-
-# Canvas Kit Text Input <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `TextInput` in Preview has been deprecated and will be removed in a future major version. Please
-    use `TextInput` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs">
-    Text Input Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-Text Inputs allow users to enter words or characters without styling.
-
-[> Workday Design Reference](https://design.workday.com/components/inputs/text-input)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-<ExampleCodeBlock code={Basic} />
-
-### Disabled
-
-Use `TextInput.Field`s `disabled` prop to prevent users from interacting with it.
-
-<ExampleCodeBlock code={Disabled} />
-
-### Placeholder
-
-Use `TextInput.Field`s `placeholder` prop to display a sample of its expected format or value before
-a value has been provided.
-
-<ExampleCodeBlock code={Placeholder} />
-
-### Required
-
-Use `TextInput.Field`'s `isRequired` prop (or use with the `useTextInputModel` hook) to indicate
-that the field is required. This will also add a red asterisk to `TextInput.Label`.
-
-<ExampleCodeBlock code={Required} />
-
-### Read Only
-
-Use `TextInput.Field`'s `readOnly` prop to indicate that the field can not be changed. We reccommend
-setting the background and border color to tranparent and the cursor to default to help inform users
-of the immutiblity.
-
-<ExampleCodeBlock code={ReadOnly} />
-
-### Hidden Input
-
-Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while still submitting its
-value, often used for things like security tokens. Note: You will likely need to manually
-set`aria-describedby={undefined}`and`id={undefined}`
-
-<ExampleCodeBlock code={Hidden} />
-
-### Ref Forwarding
-
-All the TextInput subcomponents support
-[ref forwarding](https://reactjs.org/docs/forwarding-refs.html). e.g. TextInput.Field will forward
-`ref` to its underlying `<input type="text">` element.
-
-<ExampleCodeBlock code={RefForwarding} />
-
-### Grow
-
-There are lots of ways to accomplish this. The TextInput.Field extends from Box so it is easy to
-extend full width, e.g. setting width prop to 100%, or you can set the `alignItems` prop to
-`stretch` on `TextInput`, etc.
-
-<ExampleCodeBlock code={Grow} />
-
-### Label Position
-
-Use the `orientation` property to set `TextInput.Label`'s position. You can override the default
-spacing using the `gap` prop. Below are examples of both positions:
-
-#### Horizontal
-
-<ExampleCodeBlock code={LabelPositionHorizontal} />
-
-#### Vertical
-
-<ExampleCodeBlock code={LabelPositionVertical} />
-
-### Visually Hiding The Label
-
-If your label is just for screen reader users you can use the `accessibleHide` utility class from
-`@workday/canvas-kit-react/common`. You will likely want to set the `gap` prop on `TextInput` to
-`zero`.
-
-<ExampleCodeBlock code={HiddenLabel} />
-
-### Type
-
-Use `TextInput.Field`'s `type` prop to customize the input type, e.g. `password`, `email`, etc.
-
-<ExampleCodeBlock code={Password} />
-
-### Error States
-
-Use the `hasError` property from `useTextInputModel` to set the `TextInput` to the Error state. If
-you have an accompanying hint you can use the TextInput.Hint subcomponent.
-
-#### Errors
-
-<ExampleCodeBlock code={Error} />
-
-#### Themed Errors
-
-<ExampleCodeBlock code={ThemedError} />
-
-### Other Visual States
-
-Use the `useThemedRing` hook to change the visual state of the input field.
-
-#### Alerts
-
-<ExampleCodeBlock code={Alert} />
-
-#### Themed Alerts
-
-If the your theme's `main` color doesn't meet accessibility contrast, the `darkest` color will be
-used in an outer ring.
-
-<ExampleCodeBlock code={ThemedAlert} />
-
-## Component API
-
-<SymbolDoc name="TextInput" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="TextInputPreview.spec.ts" name="Text Input" />

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {useThemedRing} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
-
-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 (
-    <TextInput orientation="vertical">
-      <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field cs={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>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/Basic.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} />
-    </TextInput>
-  );
-};

package/dist/mdx/preview-react/text-input/examples/Disabled.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} disabled />
-    </TextInput>
-  );
-};

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