@workday/canvas-kit-docs 6.0.0-beta.0-next.16 → 6.0.3

package/dist/mdx/labs-react/search-form/examples/RTL.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Flex minHeight={200} alignItems="flex-start" padding="xs">
+        <SearchForm
+          autocompleteItems={menuItems}
+          onInputChange={filterMenuItems}
+          onSubmit={handleSubmit}
+        />
+      </Flex>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/search-form/examples/Theming.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm, SearchTheme} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  return (
+    <Flex minHeight={200} alignItems="flex-start">
+      <Flex padding="xs" backgroundColor="blueberry500" flex={1} flexBasis="auto">
+        <SearchForm
+          searchTheme={SearchTheme.Dark}
+          autocompleteItems={menuItems}
+          onInputChange={filterMenuItems}
+          onSubmit={handleSubmit}
+        />
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,123 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+
+import Basic from './examples/Basic';
+import Disabled from './examples/Disabled';
+import Grow from './examples/Grow';
+import LabelPosition from './examples/LabelPosition';
+import Placeholder from './examples/Placeholder';
+import RefForwarding from './examples/RefForwarding';
+import Required from './examples/Required';
+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';
+import LoginForm from './examples/LoginForm';
+
+
+# Canvas Kit Text Input
+
+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-react
+```
+
+## Usage
+
+### Basic Example
+
+<ExampleCodeBlock code={Basic} />
+
+### Disabled
+
+Set the `disabled` prop of the TextInput.Field to prevent users from interacting with it.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Placeholder
+
+Set the `placeholder` prop of the TextInput.Field to display a sample of its expected format or
+value before a value has been provided.
+
+<ExampleCodeBlock code={Placeholder} />
+
+### Required
+
+Set the `isRequired` property property from useTextInputModel to indicate that the field is
+required. This will also add an red asterisk next to your TextInput.Label.
+
+<ExampleCodeBlock code={Required} />
+
+### 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 wrap the whole TextInput in it a Flex
+and set the growth that way, etc.
+
+<ExampleCodeBlock code={Grow} />
+
+### Label Position
+
+Setting the Label position can be done using HStack or VStack
+
+<ExampleCodeBlock code={LabelPosition} />
+
+### Visually Hiding The Label
+
+If your label is just for screen reader users you can add the isVisuallyHidden to TextInput.Label
+
+<ExampleCodeBlock code={HiddenLabel} />
+
+### Type
+
+Set the `type` prop TextInput.Field to any allowed string, e.g. password to change the input field
+type.
+
+<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
+
+<ExampleCodeBlock code={ThemedAlert} />
+
+#### Full example
+
+Login Form using Formik
+
+<ExampleCodeBlock code={LoginForm} />

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,20 @@
+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/Error.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+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 (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput hasError={hasError}>
+        <TextInput.Label>A three letter word</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} />
+        <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
+      </TextInput>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,20 @@
+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/HiddenLabel.tsx

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

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

@@ -0,0 +1,20 @@
+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/LoginForm.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import {useFormik} from 'formik';
+import * as yup from 'yup';
+
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {HStack, VStack} from '@workday/canvas-kit-labs-react/layout';
+import {IconButton, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const passwordMinimum = 8;
+  const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
+  const emailRequired = 'Email is required';
+  const passwordRequired = 'Password is required';
+
+  const validationSchema = yup.object({
+    email: yup
+      .string()
+      .email('Enter a valid email')
+      .required(emailRequired),
+    password: yup
+      .string()
+      .min(passwordMinimum, passwordHint)
+      .required(passwordRequired),
+  });
+
+  const passwordRef = React.useRef<HTMLInputElement>(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const passwordId = useUniqueId();
+
+  const formik = useFormik({
+    initialValues: {
+      email: 'example@baz.com',
+      password: 'foobarbaz',
+    },
+    validationSchema: validationSchema,
+    onSubmit: values => {
+      passwordRef.current.type = 'password';
+
+      // Send data to server
+      setTimeout(() => {
+        alert(JSON.stringify(values, null, 2));
+      }, 0);
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} action=".">
+      <VStack spacing="xs" alignItems="flex-start">
+        <TextInput isRequired={true} hasError={formik.touched.email && !!formik.errors.email}>
+          <TextInput.Label>Email</TextInput.Label>
+          <TextInput.Field
+            name="email"
+            autoComplete="username"
+            placeholder="yourName@example.com"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.email}
+          />
+          <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
+        </TextInput>
+        <TextInput
+          inputId={passwordId}
+          hasError={formik.touched.password && !!formik.errors.password}
+          isRequired={true}
+        >
+          <TextInput.Label>Password</TextInput.Label>
+          <HStack spacing="xxs">
+            <TextInput.Field
+              type={showPassword ? 'text' : 'password'}
+              name="password"
+              autoComplete="current-password"
+              ref={passwordRef}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.password}
+            />
+            <IconButton
+              type="button"
+              icon={showPassword ? invisibleIcon : visibleIcon}
+              aria-label={showPassword ? 'Hide Password' : 'Show Password'}
+              aria-controls={passwordId}
+              onClick={() => {
+                setShowPassword(state => !state);
+                passwordRef.current.focus();
+              }}
+            />
+          </HStack>
+          <TextInput.Hint>
+            {(formik.touched.password && formik.errors.password) || passwordHint}
+          </TextInput.Hint>
+        </TextInput>
+
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+      </VStack>
+    </form>
+  );
+};

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,20 @@
+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/RefForwarding.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+  const ref = React.useRef(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleClick = () => {
+    ref.current.focus();
+  };
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} ref={ref} />
+      </TextInput>
+      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,20 @@
+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>
+  );
+};