@workday/canvas-kit-docs 7.0.5 → 7.0.8

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Icons from './examples/Icons';
+import DeleteAction from './examples/DeleteAction';
 import OverflowActionBar from './examples/OverflowActionBar';
 
 
@@ -34,11 +35,18 @@ buttons should not be used in the Action Bar.
 
 ### Icons Example
 
-`ActionBar.Item` renders a `PrimaryButton` or `SecondaryButton`, so it's possible to use other
-Button props with `ActionBar.Item` such as `icon` or `size`.
+`ActionBar.Item` renders a `SecondaryButton` as default, so it's possible to use other Button props
+with `ActionBar.Item` such as `icon` or `size`.
 
 <ExampleCodeBlock code={Icons} />
 
+### Delete Action Example
+
+`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,
+such as `DeleteButton`, by using `as` prop.
+
+<ExampleCodeBlock code={DeleteAction} />
+
 ### Overflow Example
 
 `ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3

package/dist/mdx/react/action-bar/examples/DeleteAction.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {ActionBar} from '@workday/canvas-kit-react/action-bar';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  return (
+    <ActionBar>
+      <ActionBar.List position="relative">
+        <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>
+        <ActionBar.Item>Second Action</ActionBar.Item>
+      </ActionBar.List>
+    </ActionBar>
+  );
+};

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -4,6 +4,7 @@ import Checkbox from '@workday/canvas-kit-react/checkbox/lib/Checkbox.tsx';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
+import Inverse from './examples/Inverse';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
 import Indeterminate from './examples/Indeterminate';
@@ -35,6 +36,12 @@ element.
 
 <ExampleCodeBlock code={Basic} />
 
+### Inverse
+
+Checkbox with inverse variation
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Disabled
 
 Set the `disabled` prop of the Checkbox to prevent users from interacting with it.

package/dist/mdx/react/checkbox/examples/Inverse.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {HStack} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+      <Checkbox
+        variant="inverse"
+        checked={checked}
+        label="I agree to the terms"
+        onChange={handleChange}
+      />
+    </HStack>
+  );
+};

package/dist/mdx/react/radio/Radio.mdx

@@ -5,6 +5,7 @@ import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
+import Inverse from './examples/Inverse';
 import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import NoValue from './examples/NoValue';
@@ -41,6 +42,12 @@ Set the `disabled` prop of the Radio Button to prevent users from interacting wi
 
 <ExampleCodeBlock code={Disabled} />
 
+### Inverse
+
+Radio with inverse variant
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Radio Buttons with No Values
 
 The `value` prop may be omitted from Radio Buttons, in which case the `value` prop of the Radio

package/dist/mdx/react/radio/examples/Inverse.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>('deep-dish');
+
+  const handleChange = (value: string | number) => {
+    setValue(value);
+  };
+
+  return (
+    <Box backgroundColor="blueberry400" padding="s">
+      <RadioGroup name="crust" onChange={handleChange} value={value}>
+        <Radio variant="inverse" label="Deep dish" value="deep-dish" />
+        <Radio variant="inverse" label="Thin" value="thin" />
+        <Radio variant="inverse" label="Gluten free" value="gluten-free" />
+        <Radio variant="inverse" label="Cauliflower" value="cauliflower" />
+      </RadioGroup>
+    </Box>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.5",
+  "version": "7.0.8",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.0.5"
+    "@workday/canvas-kit-react": "^7.0.8"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +49,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "1d2d2983803cf570b34a48a0c05b8e7ffe7e3956"
+  "gitHead": "5ab849b6b650a2d4b0a9ea029d2f0df62f84dd40"
 }