@workday/canvas-kit-docs 5.3.0 → 5.3.4

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

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

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

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

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

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

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

@@ -1,40 +0,0 @@
-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/button/button/examples/PrimaryInverse.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
-    <PrimaryButton variant="inverse">Primary</PrimaryButton>
-    <PrimaryButton icon={plusIcon} iconPosition="right" variant="inverse">
-      Primary
-    </PrimaryButton>
-  </HStack>
-);

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
-    <SecondaryButton variant="inverse">Secondary</SecondaryButton>
-    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
-      Secondary
-    </SecondaryButton>
-  </HStack>
-);

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
-
-export default () => (
-  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
-    <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
-    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
-      Tertiary
-    </TertiaryButton>
-  </HStack>
-);

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import {space} from '@workday/canvas-kit-react/tokens';
-import {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';
-import {Tabs} from '@workday/canvas-kit-react/tabs';
-
-export default () => {
-  return (
-    <Tabs>
-      <Tabs.List>
-        <Tabs.Item hasIcon>
-          <Tabs.Item.Icon icon={starIcon} />
-          <Tabs.Item.Text>First Tab</Tabs.Item.Text>
-        </Tabs.Item>
-        <Tabs.Item hasIcon>
-          <Tabs.Item.Icon icon={searchIcon} />
-          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
-        </Tabs.Item>
-        <Tabs.Item hasIcon>
-          <Tabs.Item.Icon icon={selectIcon} />
-          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
-        </Tabs.Item>
-        <Tabs.Item hasIcon>
-          <Tabs.Item.Icon icon={shareIcon} />
-          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
-        </Tabs.Item>
-      </Tabs.List>
-      <div style={{marginTop: space.m}}>
-        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
-        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
-        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
-        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
-      </div>
-    </Tabs>
-  );
-};

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
-import {HStack} from '@workday/canvas-kit-labs-react';
-import {SecondaryButton} from '../../../button';
-
-type MyTabItem = {
-  id: string;
-  text: React.ReactNode;
-  contents: string;
-};
-
-export default () => {
-  const [items] = React.useState<MyTabItem[]>([
-    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
-    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
-    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
-    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
-    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
-    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
-    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
-  ]);
-  const model = useTabsModel({
-    items,
-  });
-  const [containerWidth, setContainerWidth] = React.useState('100%');
-  return (
-    <div style={{width: containerWidth}}>
-      <Tabs model={model}>
-        <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
-          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
-        </Tabs.List>
-        <Tabs.Menu.Popper>
-          <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
-            <Tabs.Menu.List>
-              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
-            </Tabs.Menu.List>
-          </Tabs.Menu.Card>
-        </Tabs.Menu.Popper>
-        <Tabs.Panels>
-          {(item: MyTabItem) => (
-            <Tabs.Panel marginTop="m" name={item.id}>
-              {item.contents}
-            </Tabs.Panel>
-          )}
-        </Tabs.Panels>
-      </Tabs>
-      <hr />
-      <h4>Change tab container size</h4>
-      <HStack spacing="xs">
-        <SecondaryButton onClick={() => setContainerWidth('100%')}>100%</SecondaryButton>
-        <SecondaryButton onClick={() => setContainerWidth('500px')}>500px</SecondaryButton>
-        <SecondaryButton onClick={() => setContainerWidth('235px')}>235px</SecondaryButton>
-        <SecondaryButton onClick={() => setContainerWidth('150px')}>150px</SecondaryButton>
-      </HStack>
-    </div>
-  );
-};