@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

package/lib/ExampleCodeBlock.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react';
+
+const cardStencil = createStencil({
+  base: {
+    '[data-part="example-block"]': {
+      boxShadow: system.depth[1],
+      borderRadius: system.shape.x1,
+      position: 'relative',
+    },
+    '[data-part="code-block"]': {
+      display: 'none',
+      boxShadow: system.depth[1],
+      borderRadius: system.shape.x1,
+    },
+    '[data-part="code-toggle-btn"]': {
+      position: 'absolute',
+      right: calc.negate(px2rem(1)),
+      bottom: calc.negate(px2rem(1)),
+    },
+    '[data-part="copy-btn"]': {
+      position: 'absolute',
+      bottom: system.space.zero,
+      right: system.space.zero,
+      borderRadius: system.shape.zero,
+      borderTopLeftRadius: system.shape.x1,
+    },
+  },
+  modifiers: {
+    opened: {
+      true: {
+        '[data-part="code-block"]': {
+          display: 'block',
+          borderTopLeftRadius: system.shape.zero,
+          borderTopRightRadius: system.shape.zero,
+        },
+        '[data-part="example-block"]': {
+          borderBottomLeftRadius: system.shape.zero,
+          borderBottomRightRadius: system.shape.zero,
+        },
+      },
+    },
+  },
+});
+
+export const ExampleCodeBlock = ({code}: any) => {
+  const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
+  const textInput = React.useRef(null);
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const onCopy = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+
+    setCopied(true);
+    // @ts-ignore
+    navigator.clipboard.writeText(textInput.current.textContent);
+  };
+
+  // React.useEffect(() => {
+  //   if (copied) {
+  //     const copyCodeTimeout = setTimeout(() => {
+  //       setCopied(false);
+  //     }, 2000);
+
+  //     return () => {
+  //       clearTimeout(copyCodeTimeout);
+  //     };
+  //   }
+  // }, [copied]);
+
+  return (
+    <div {...cardStencil({opened: isCodeDisplayed})}>
+      <Card data-part="example-block" className="sb-unstyled">
+        <Card.Body>
+          {React.createElement(code)}
+          {code && (
+            <TertiaryButton
+              size="extraSmall"
+              onClick={() => setCodeDisplayed(!isCodeDisplayed)}
+              data-part="code-toggle-btn"
+            >
+              {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
+            </TertiaryButton>
+          )}
+        </Card.Body>
+      </Card>
+      <Card data-part="code-block" padding={0}>
+        <Card.Body cs={{position: 'relative'}}>
+          {code && (
+            <div ref={textInput}>
+              <SyntaxHighlighter
+                className="sb-unstyled"
+                language="jsx"
+                style={vscDarkPlus}
+                customStyle={{
+                  fontSize: cssVar(system.fontSize.subtext.large),
+                  lineHeight: cssVar(system.lineHeight.subtext.large),
+                  margin: '0',
+                  padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                }}
+                children={code.__RAW__}
+              />
+            </div>
+          )}
+          <Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
+            <TertiaryButton
+              aria-label="Copy Code"
+              size="large"
+              data-part="copy-btn"
+              variant="inverse"
+              iconPosition="end"
+              icon={copied ? checkCircleIcon : copyIcon}
+              onClick={onCopy}
+            />
+          </Tooltip>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};

package/lib/MDXElements.tsx

@@ -14,7 +14,8 @@ import {HeadingLevelContext, SymbolDialog} from './widgetUtils';
 export const MDX = createComponent('div')({
   Component({children, ...elemProps}, _ref, Element) {
     const components = useMDXComponents();
-    return React.createElement(components[Element], elemProps, children);
+
+    return React.createElement(components[Element] || Element, elemProps, children);
   },
 });
 

package/lib/Value.tsx

@@ -8,6 +8,7 @@ import {MdxJSToJSX} from './MDXElements';
 import {Table} from './Table';
 import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -52,18 +53,19 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
           <React.Fragment key={index}>
             <br />
             {indent(level + 1)}
-            {p.description ? (
+            {p.description || p.tags.deprecated ? (
               <DescriptionTooltip
                 type="describe"
                 style={{maxWidth: '50em'}}
-                title={<MdxJSToJSX>{p.description}</MdxJSToJSX>}
+                title={<MdxJSToJSX>{p.description || p.tags.deprecated}</MdxJSToJSX>}
               >
                 <span
                   className="token property"
                   style={{
                     cursor: 'pointer',
-                    textDecoration: 'underline',
+                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                     textDecorationStyle: 'dotted',
+                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                   }}
                 >
                   {p.name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.862-next.0",
+  "version": "12.0.0-alpha.899-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,20 +44,21 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.862-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.862-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.862-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.899-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.899-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.899-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.899-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.0",
+    "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
     "glob": "^7.1.6",
     "mkdirp": "^1.0.3",
-    "typescript": "4.2"
+    "typescript": "4.9"
   },
-  "gitHead": "3b7726adda5b24aff4229e4ee8ca9f4f83522be3"
+  "gitHead": "56e4e94bdc7da128285ebfc3092bf95140792f9c"
 }

package/dist/mdx/changelog.stories.mdx

@@ -1,14 +0,0 @@
-import Changelog from '../../../CHANGELOG.md';
-import Markdown from '../../../utils/storybook/Markdown.tsx';
-
-<Meta
-  title="Changelog"
-  parameters={{
-    viewMode: 'docs',
-    previewTabs: {
-      canvas: {hidden: true},
-    },
-  }}
-/>
-
-<Markdown content={Changelog} />

package/dist/mdx/preview-react/_examples/SelectWithFormik.mdx

@@ -1,8 +0,0 @@
-import SelectWithFormik from './examples/SelectWithFormik';
-
-
-# Canvas Kit Examples
-
-## Select Using Formik
-
-<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithFormik.mdx

@@ -1,8 +0,0 @@
-import TextInputWithFormik from './examples/TextInputWithFormik';
-
-
-# Canvas Kit Examples
-
-## Controlled Text Inputs Using Formik
-
-<ExampleCodeBlock code={TextInputWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithReactHookForm.mdx

@@ -1,8 +0,0 @@
-import TextInputWithReactHookForm from './examples/TextInputWithReactHookForm';
-
-
-# Canvas Kit Examples
-
-## Uncontrolled Text Inputs Using React Hook Form
-
-<ExampleCodeBlock code={TextInputWithReactHookForm} />

package/dist/mdx/preview-react/form-field/FormField.mdx

@@ -1,149 +0,0 @@
-import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-import Basic from './examples/Basic';
-import Alert from './examples/Alert';
-import Error from './examples/Error';
-import Disabled from './examples/Disabled';
-import LabelPositionHorizontal from './examples/LabelPositionHorizontal';
-import RefForwarding from './examples/RefForwarding';
-import Required from './examples/Required';
-import Custom from './examples/Custom';
-import CustomId from './examples/CustomId';
-import AllFields from './examples/AllFields';
-import Hint from './examples/Hint';
-import FieldSet from './examples/FieldSet';
-import Grow from './examples/Grow';
-import ThemedError from './examples/ThemedErrors';
-
-
-# Canvas Kit Form Field
-
-FormField allows users to wrap input components to make them accessible. You can customize the field
-by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic
-
-Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
-accessibility standards. The orientation of the label by default is `vertical`.
-
-<ExampleCodeBlock code={Basic} />
-
-### Error States
-
-Set the `error` prop of the Form Field or define it in the model to indicate it has an error.
-`error` accepts the following values:
-
-`"error" | "alert" | undefined`
-
-### Alert
-
-Use the alert state when a value is valid but there is additional information.
-
-<ExampleCodeBlock code={Alert} />
-
-### Error
-
-Use the error state when the value is no longer valid.
-
-<ExampleCodeBlock code={Error} />
-
-### Disabled
-
-Set the `disabled` prop of `FormField.Input` to prevent users from interacting with it.
-
-<ExampleCodeBlock code={Disabled} />
-
-### Hint
-
-Use `FormField.Hint` to display a short message below the input component and `FormField.Container`
-to ensure proper alignment.
-
-<ExampleCodeBlock code={Hint} />
-
-### Label Position Horizontal
-
-Set the `orientation` prop of the Form Field to designate the position of the label relative to the
-input component. By default, the orientation will be set to `vertical`.
-
-<ExampleCodeBlock code={LabelPositionHorizontal} />
-
-### Grow
-
-Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
-component) to expand to the width of its container.
-
-**Note: This Prop is deprecated and will be removed in a future major version.**
-
-<ExampleCodeBlock code={Grow} />
-
-### Ref Forwarding
-
-If you need full customization you can use the `FormField` behavior hooks to build your own
-solution. It is also easy it work with custom components or third party libraries and get the CKR
-accessibility guarantees by using the `as` prop.
-
-<ExampleCodeBlock code={RefForwarding} />
-
-### Required
-
-Set the `isRequired` prop of the Form Field to `true` to indicate that the field is required. Labels
-for required fields are suffixed by a red asterisk.
-
-<ExampleCodeBlock code={Required} />
-
-### Field Set
-
-Set the `as` prop of the `FormField` to `fieldset` and the `as` prop of the `FormField.Label` to
-`legend` when using `RadioGroup` to ensure proper accessbility.
-
-<ExampleCodeBlock code={FieldSet} />
-
-### Custom
-
-If you need full customization you can use the `FormField` behavior hooks to build your own
-solution. It is also easy it work with custom components or third party libraries and get the CKR
-accessibility guarantees by using the `as` prop.
-
-<ExampleCodeBlock code={Custom} />
-
-### Custom id
-
-Form Field will automatically generate an HTML `id` for its input element to link it to the
-correponding label. Alternatively, you may set the `id` prop of the Form Field to specify a custom
-`id` for the input element. The `id` will be appended by `input-${your-unique-id}`.
-
-<ExampleCodeBlock code={CustomId} />
-
-### All Fields
-
-Form Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,
-`TextArea`, `Switch`, and `RadioGroup`.
-
-<ExampleCodeBlock code={AllFields} />
-
-### Themed Errors
-
-You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
-`focusOutline` and `error` properties on the `theme`.
-
-<ExampleCodeBlock code={ThemedError} />
-
-### Custom Styles
-
-Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
-check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
-
-## Component API
-
-<SymbolDoc name="FormField" fileName="/preview-react/" />

package/dist/mdx/preview-react/form-field/examples/Alert.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField error="alert">
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Container>
-          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-          <FormField.Hint>Cannot contain numbers</FormField.Hint>
-        </FormField.Container>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Basic.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField>
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Error.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField error="error">
-        <FormField.Label>Password</FormField.Label>
-        <FormField.Container>
-          <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
-          <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
-        </FormField.Container>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/FieldSet.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField as="fieldset">
-        <FormField.Label as="legend">Radio Group Legend</FormField.Label>
-        <FormField.Input as={RadioGroup} onChange={handleChange} value={value}>
-          <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="butter">
-            Butter - the best thing to put on bread
-          </RadioGroup.RadioButton>
-        </FormField.Input>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Grow.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField grow>
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Hint.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField orientation="horizontal">
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Container>
-          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-          <FormField.Hint>Cannot contain numbers</FormField.Hint>
-        </FormField.Container>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/LabelPositionHorizontal.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField orientation="horizontal">
-      <FormField.Label>Email</FormField.Label>
-      <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Required.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField isRequired={true}>
-      <FormField.Label>Email</FormField.Label>
-      <FormField.Input
-        as={TextInput}
-        placeholder="your@gmail.com"
-        onChange={handleChange}
-        value={value}
-      />
-    </FormField>
-  );
-};

package/dist/mdx/react/_examples/CookieBanner.mdx

@@ -1,8 +0,0 @@
-import Basic from './examples/CookieBanner';
-
-
-# Canvas Kit Examples
-
-## CookieBanner
-
-<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -1,12 +0,0 @@
-import Basic from './examples/GlobalHeader';
-
-
-# Canvas Kit Examples
-
-## GlobalHeader
-
-Developers building internal Workday applications will likely not need to create this component.
-However, if you're building components to be used outside of Workday, this is a helpful reference
-for building a global navigation header that looks like our internal `GlobalHeader`.
-
-<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/PageHeader.mdx

@@ -1,8 +0,0 @@
-import Basic from './examples/PageHeader';
-
-
-# Canvas Kit Examples
-
-## PageHeader
-
-<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/form-field/examples/AlertLabel.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField
-      alertLabel="Warning"
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
-  );
-};