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

package/dist/mdx/preview-react/text-area/TextArea.mdx

@@ -1,136 +0,0 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-
-import Alert from './examples/Alert';
-import Basic from './examples/Basic';
-import Disabled from './examples/Disabled';
-import Error from './examples/Error';
-import Grow from './examples/Grow';
-import LabelPositionVertical from './examples/LabelPositionVertical';
-import LabelPositionHorizontal from './examples/LabelPositionHorizontal';
-import HiddenLabel from './examples/HiddenLabel';
-import Placeholder from './examples/Placeholder';
-import RefForwarding from './examples/RefForwarding';
-import Required from './examples/Required';
-import ResizeConstraints from './examples/ResizeConstraints';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-
-
-# Canvas Kit Text Area <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `TextArea` in Preview has been deprecated and will be removed in a future major version. Please
-    use `TextArea` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs">
-    Text Area Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-TextArea's allow users to enter and edit multiple lines of text.
-
-[> Workday Design Reference](https://design.workday.com/components/inputs/text-area)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-<ExampleCodeBlock code={Basic} />
-
-### Disabled
-
-Use `TextArea.Field`'s `disabled` prop to prevent users from interacting with the field.
-
-<ExampleCodeBlock code={Disabled} />
-
-### Placeholder
-
-Use `TextArea.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 `TextArea.Field`'s `isRequired` prop (or use with the `useTextAreaModel` hook) to indicate that
-the field is required. This will also add a red asterisk to `TextArea.Label`.
-
-<ExampleCodeBlock code={Required} />
-
-### Ref Forwarding
-
-`TextArea` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward
-`ref` to its underlying `<textarea>` element.
-
-<ExampleCodeBlock code={RefForwarding} />
-
-### Resize Constraints
-
-Use the `resize` css attribute to restrict resizing of it to certain dimensions.
-
-<ExampleCodeBlock code={ResizeConstraints} />
-
-### Grow
-
-There are lots of ways to accomplish this. The `TextArea.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 `TextArea`, etc.
-
-<ExampleCodeBlock code={Grow} />
-
-### Label Position
-
-Use the `orientation` property to set `TextArea.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 `TextArea` to
-`zero`.
-
-<ExampleCodeBlock code={HiddenLabel} />
-
-### Error States
-
-Use the `hasError` property from `useTextAreaModel` to set the `TextArea` to the Error state. If you
-have an accompanying hint you can use the `TextArea.Hint` subcomponent.
-
-<ExampleCodeBlock code={Error} />
-
-### Other Visual States
-
-Use the `useThemedRing` hook to change the visual state of the `<textarea>` element.
-
-#### Alert
-
-<ExampleCodeBlock code={Alert} />
-
-## Component API
-
-<SymbolDoc name="TextArea" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="TextAreaPreview.spec.ts" name="Text Area" />

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {useThemedRing} from '@workday/canvas-kit-react/common';
-import {space, colors} from '@workday/canvas-kit-react/tokens';
-import {Text} from '@workday/canvas-kit-react/text';
-
-export default () => {
-  const [value, setValue] = React.useState('Hello');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value.slice(0, 10));
-  };
-
-  const alertStyles = useThemedRing(
-    value.length < 3 ? 'success' : value.length < 7 ? 'alert' : 'error'
-  );
-
-  const hintColor =
-    value.length < 3
-      ? colors.greenApple600
-      : value.length < 7
-      ? colors.blackPepper300
-      : colors.cinnamon500;
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Add a comment</TextArea.Label>
-      <TextArea.Field cs={alertStyles} onChange={handleChange} value={value} />
-      <TextArea.Hint paddingTop={space.xxs}>
-        <strong>Character Limit: </strong>
-        <Text color={hintColor}>{10 - value.length} Left</Text>
-      </TextArea.Hint>
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Basic.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Disabled.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field disabled onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

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

@@ -1,40 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-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<HTMLTextAreaElement>) => {
-    validateInput(event.target.value);
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea error={hasError ? 'error' : undefined} orientation="vertical">
-      <TextArea.Label>A three letter word</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-      <TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>
-    </TextArea>
-  );
-};

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field placeholder="Let us know how we did!" onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/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 {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-  const ref = React.useRef(null);
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  const handleClick = () => {
-    changeFocus(ref.current);
-  };
-
-  return (
-    <Flex gap="xxxs" alignItems="flex-start" flexDirection="column">
-      <TextArea orientation="vertical">
-        <TextArea.Label>Leave a review</TextArea.Label>
-        <TextArea.Field onChange={handleChange} value={value} ref={ref} />
-      </TextArea>
-      <SecondaryButton onClick={handleClick}>Focus Text Area</SecondaryButton>
-    </Flex>
-  );
-};

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

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

package/dist/mdx/preview-react/text-area/examples/ResizeConstraints.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {styled} from '@workday/canvas-kit-react/common';
-
-const StyledField = styled(TextArea.Field)({
-  resize: 'vertical',
-});
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <StyledField onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

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