@workday/canvas-kit-docs 5.2.7 → 5.3.0-next.9

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

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        error: {
+          main: colors.islandPunch400,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <VStack spacing="xxxs" alignItems="flex-start">
+        <TextInput hasError={!value} isRequired={true}>
+          <TextInput.Label>Email</TextInput.Label>
+          <TextInput.Field onChange={handleChange} value={value} />
+          <TextInput.Hint paddingTop={space.xxs}>
+            {!value && 'Please enter an email.'}
+          </TextInput.Hint>
+        </TextInput>
+      </VStack>
+    </CanvasProvider>
+  );
+};

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

@@ -23,7 +23,7 @@ Text Areas allow users to enter and edit multiple lines of text.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-react
+yarn add @workday/canvas-kit-labs-react
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.2.7",
+  "version": "5.3.0-next.9+47f4d0a9",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.2.7"
+    "@workday/canvas-kit-react": "^5.3.0-next.9+47f4d0a9"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "def0edbf49b84470fd7b57254dc09ef9dd23d99a"
+  "gitHead": "47f4d0a90fddfb15752be9e6449be2979f934636"
 }