@workday/canvas-kit-docs 8.3.4 → 8.3.6

package/dist/es6/lib/specs.js

@@ -51,7 +51,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "name": "given the [Components/Indicators/Banner, Error] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -73,7 +73,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "name": "given the [Components/Indicators/Banner, Sticky] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -107,7 +107,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Navigation/Breadcrumbs/React, Basic] example is rendered",
+            "name": "given the [Components/Navigation/Breadcrumbs, Basic] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -171,7 +171,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Navigation/Breadcrumbs/React, Overflow Breadcrumbs] example is rendered",
+            "name": "given the [Components/Navigation/Breadcrumbs, Overflow Breadcrumbs] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -203,7 +203,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Navigation/Breadcrumbs/React, Overflow Breadcrumbs] menu is rendered",
+            "name": "given the [Components/Navigation/Breadcrumbs, Overflow Breadcrumbs] menu is rendered",
             "children": [
               {
                 "type": "it",
@@ -1225,7 +1225,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Labs/Expandable/React, Long Title] story is rendered",
+            "name": "given the [Labs/Expandable, Long Title] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -1401,7 +1401,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Menu/React, Basic] story is rendered",
+            "name": "given the [Components/Popups/Menu, Basic] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -1546,7 +1546,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Preview/Menu/React, Basic] example is rendered",
+            "name": "given the [Preview/Menu, Basic] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -1584,7 +1584,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Modal/React, Basic] story is rendered",
+            "name": "given the [Components/Popups/Modal, Basic] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -1704,7 +1704,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Modal, With Tooltips] story is rendered",
+            "name": "given the [Testing/Popups/Modal, With Tooltips] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -1820,7 +1820,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Modal, With Radio buttons] story is rendered",
+            "name": "given the [Testing/Popups/Modal, With Radio buttons] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -1840,7 +1840,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Modal/React, Without close icon] story is rendered",
+            "name": "given the [Components/Popups/Modal, Without close icon] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -1940,7 +1940,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Modal/React, Custom focus] story is rendered",
+            "name": "given the [Components/Popups/Modal, Custom focus] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2020,7 +2020,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Modal, StackedModals] story is rendered",
+            "name": "given the [Testing/Popups/Modal, StackedModals] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2064,7 +2064,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Modal, ModalWithPopup] story is rendered",
+            "name": "given the [Testing/Popups/Modal, ModalWithPopup] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2094,7 +2094,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Modal/React, CustomTarget] example is rendered",
+            "name": "given the [Components/Popups/Modal, CustomTarget] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2416,7 +2416,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Popup/React, Basic] example is rendered",
+            "name": "given the [Components/Popups/Popup, Basic] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2484,7 +2484,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Popup/React, MultiplePopups] example is rendered",
+            "name": "given the [Components/Popups/Popup, MultiplePopups] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2514,7 +2514,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Popup, PopupWithNonHidablePopup] example is rendered",
+            "name": "given the [Testing/Popups/Popup, PopupWithNonHidablePopup] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2554,7 +2554,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Popup, MixedPopupTypes] story is rendered",
+            "name": "given the [Testing/Popups/Popup, MixedPopupTypes] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -2710,7 +2710,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Popup/React, CustomTarget] example is rendered",
+            "name": "given the [Components/Popups/Popup, CustomTarget] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2740,7 +2740,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Popup/React, FocusRedirect] example is rendered",
+            "name": "given the [Components/Popups/Popup, FocusRedirect] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2770,7 +2770,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Popup, ReturnFocusTest] story is rendered",
+            "name": "given the [Testing/Popups/Popup, ReturnFocusTest] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2781,7 +2781,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Popup, CloseOnTargetHiddenTest] story is rendered",
+            "name": "given the [Testing/Popups/Popup, CloseOnTargetHiddenTest] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2792,7 +2792,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Popup, TooltipReturnFocus] example is rendered",
+            "name": "given the [Testing/Popups/Popup, TooltipReturnFocus] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -2962,7 +2962,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Preview/Segmented Control/React, Basic] story is rendered",
+            "name": "given the [Preview/Segmented Control, Basic] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -3074,7 +3074,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Preview/Segmented Control/React, Vertical] story is rendered",
+            "name": "given the [Preview/Segmented Control, Vertical] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -3186,7 +3186,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Preview/Segmented Control/React, Disabled] story is rendered",
+            "name": "given the [Preview/Segmented Control, Disabled] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -3216,7 +3216,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Preview/Segmented Control/React, rtl] story is rendered",
+            "name": "given the [Preview/Segmented Control, rtl] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -5140,7 +5140,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "it",
-            "name": "should render the Getting Started page"
+            "name": "should render the Welcome page"
           },
           {
             "type": "describe",
@@ -5252,7 +5252,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Containers/Tabs/React, Basic] story is rendered",
+            "name": "given the [Components/Containers/Tabs, Basic] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -5442,7 +5442,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Containers/Tabs/React, Named Tabs] story is rendered",
+            "name": "given the [Components/Containers/Tabs, Named Tabs] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -5632,7 +5632,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Containers/Tabs/React, DisabledTab] story is rendered",
+            "name": "given the [Components/Containers/Tabs, DisabledTab] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -5682,7 +5682,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Containers/Tabs/React, DynamicTabs] story is rendered",
+            "name": "given the [Components/Containers/Tabs, DynamicTabs] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -5800,7 +5800,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Containers/Tabs/React, LeftToRight] story is rendered",
+            "name": "given the [Components/Containers/Tabs, LeftToRight] story is rendered",
             "children": [
               {
                 "type": "describe",
@@ -5872,7 +5872,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "when [Components/Containers/Tabs/React, OverflowTabs] story is rendered",
+            "name": "when [Components/Containers/Tabs, OverflowTabs] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -6660,7 +6660,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Tooltip/React, DefaultStory] example is rendered",
+            "name": "given the [Components/Popups/Tooltip, DefaultStory] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -6758,7 +6758,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Tooltip/React, Describe Type] example is rendered",
+            "name": "given the [Components/Popups/Tooltip, Describe Type] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -6790,7 +6790,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Tooltip/React, Muted] example is rendered",
+            "name": "given the [Components/Popups/Tooltip, Muted] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -6830,7 +6830,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Popups/Tooltip/React, Ellipsis] example is rendered",
+            "name": "given the [Components/Popups/Tooltip, Ellipsis] example is rendered",
             "children": [
               {
                 "type": "it",
@@ -6904,7 +6904,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Tooltip, Non Interactive] example is rendered",
+            "name": "given the [Testing/Popups/Tooltip, Non Interactive] example is rendered",
             "children": [
               {
                 "type": "describe",
@@ -6930,7 +6930,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Testing/React/Popups/Tooltip, Overflow] example is rendered",
+            "name": "given the [Testing/Popups/Tooltip, Overflow] example is rendered",
             "children": [
               {
                 "type": "describe",

package/dist/es6/mdx/installBlock.d.ts

@@ -0,0 +1,6 @@
+export interface InstallBlockProps {
+    command?: string;
+    packageName?: string;
+}
+export declare const InstallBlock: ({ command, packageName }: InstallBlockProps) => JSX.Element;
+//# sourceMappingURL=installBlock.d.ts.map

package/dist/es6/mdx/installBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,gBA8BrE,CAAC"}

package/dist/es6/mdx/installBlock.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { PrimaryButton } from '@workday/canvas-kit-react/button';
+export var InstallBlock = function (_a) {
+    var command = _a.command, packageName = _a.packageName;
+    var commandRef = React.useRef(null);
+    var _b = React.useState(false), copied = _b[0], setCopied = _b[1];
+    React.useEffect(function () {
+        setTimeout(function () { return setCopied(false); }, 600);
+    }, [copied]);
+    var handleCopy = function () {
+        setCopied(true);
+        if (commandRef.current) {
+            navigator.clipboard.writeText(commandRef.current.innerText);
+        }
+    };
+    return (React.createElement(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap' },
+        React.createElement("pre", { ref: commandRef },
+            React.createElement("span", { style: { color: colors.blueberry200 } }, command),
+            ' ',
+            React.createElement("span", { style: { color: colors.frenchVanilla100 } }, packageName)),
+        React.createElement(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small" }, copied ? 'Copied' : 'Copy')));
+};

package/dist/es6/mdx/welcomePage.d.ts

@@ -0,0 +1,2 @@
+export declare const WelcomePage: () => JSX.Element;
+//# sourceMappingURL=welcomePage.d.ts.map

package/dist/es6/mdx/welcomePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,WAAW,mBA6IvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -0,0 +1,59 @@
+import React from 'react';
+// @ts-ignore: Cannot find module error
+import headerImage from './storybook-welcome-header.png';
+import { Flex, Grid, Box } from '@workday/canvas-kit-react/layout';
+import { InstallBlock } from './installBlock';
+import { Text, Heading } from '@workday/canvas-kit-react/text';
+import { Card } from '@workday/canvas-kit-react/card';
+import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+// @ts-ignore: Cannot find module error
+import { version } from '../../../lerna.json';
+export var WelcomePage = function () {
+    return (React.createElement(Flex, { flexDirection: "column", gap: "s" },
+        React.createElement(Box, { borderRadius: "m", overflow: "hidden", position: "relative" },
+            React.createElement(Flex, { position: "absolute", flexDirection: "column", top: "30%", left: "10%" },
+                React.createElement(Text, { typeLevel: "title.medium", color: colors.frenchVanilla100, fontSize: "6vmin", marginBottom: "s", style: { lineHeight: '3vmin' } }, "Canvas Kit"),
+                React.createElement(Text, { typeLevel: "body.large", fontSize: "3vmin", style: { lineHeight: '2vw' }, color: colors.frenchVanilla100 },
+                    "v",
+                    version)),
+            React.createElement("img", { src: headerImage, alt: "test", style: { width: '100%', height: 'auto' } })),
+        React.createElement(Text, { typeLevel: "body.medium" },
+            ' ',
+            "This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with",
+            ' ',
+            React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/" }, "Workday Design Principles.")),
+        React.createElement(Heading, { size: "medium", borderBottom: "1px solid " + colors.blueberry200, paddingBottom: "xxs" }, "Quick Links"),
+        React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
+            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
+                React.createElement(SystemIcon, { color: colors.cantaloupe400, colorHover: colors.cantaloupe400, icon: rocketIcon, size: 60 }),
+                React.createElement(Card.Heading, null, "Getting Started"),
+                React.createElement(Card.Body, null,
+                    React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
+                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "/?path=/docs/guides-getting-started--page" },
+                    ' ',
+                    "Getting Started Guide")),
+            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
+                React.createElement(SystemIcon, { color: colors.blueberry400, icon: tokensIcon, colorHover: colors.blueberry400, size: 60 }),
+                React.createElement(Card.Heading, null, "Tokens"),
+                React.createElement(Card.Body, null,
+                    React.createElement(Text, null, "Tokens are the smallest pieces of our Design System with the primary function of storing UI information.")),
+                React.createElement(Grid.Item, { alignSelf: "end", as: Hyperlink, marginTop: "xs", href: "/?path=/docs/tokens--overview" },
+                    ' ',
+                    "View Our Tokens")),
+            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
+                React.createElement(SystemIcon, { color: colors.greenApple400, icon: shapesIcon, size: 60, colorHover: colors.greenApple400 }),
+                React.createElement(Card.Heading, null, "Assets"),
+                React.createElement(Card.Body, null,
+                    React.createElement(Text, null, "Assets are graphics which help communicate meaning or highlight areas of interaction to our users.")),
+                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "/?path=/docs/assets-icons--overview" },
+                    ' ',
+                    "View Assets"))),
+        React.createElement(Heading, { size: "medium", borderBottom: "1px solid " + colors.blueberry200, paddingBottom: "xxs" }, "Installation"),
+        React.createElement(Text, null, "To get started using Canvas kit React first add or install the module to your existing React project"),
+        React.createElement(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
+        "or",
+        React.createElement(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" })));
+};

package/dist/mdx/4.0-UPGRADE-GUIDE.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Upgrade Guides/v4.0"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
+
 # Canvas Kit 4.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v4. Please reach out if you have any questions

package/dist/mdx/5.0-UPGRADE-GUIDE.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Upgrade Guides/v5.0"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
+
 # Canvas Kit 5.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v5. Please

package/dist/mdx/6.0-UPGRADE-GUIDE.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Upgrade Guides/v6.0"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
 # Canvas Kit 6.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v6. Please
@@ -80,8 +90,8 @@ warning.
 #### Hard Deprecation
 
 A hard-deprecated component or package is no longer available. You will need to follow the method
-prescribed in our upgrade guide to update your application. Please reach out to our team directly
-if you need additional help.
+prescribed in our upgrade guide to update your application. Please reach out to our team directly if
+you need additional help.
 
 ### Cookie Banner
 

package/dist/mdx/7.0-UPGRADE-GUIDE.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Upgrade Guides/v7.0"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
+
 # Canvas Kit 7.0 Upgrade Guide
 
 This guide contains breaking changes in Canvas Kit v7. Please
@@ -453,9 +463,9 @@ const model = useActionBarModel({
 
 #### Responsive Container Support
 
-The `ActionBar` component can now handle responsive containers, but the support is not automatic. You
-must use the dynamic API and provide an overflow menu subcomponent. The dynamic API doesn't know the
-shape of your object, so render props must be used to instruct React how to render each item.
+The `ActionBar` component can now handle responsive containers, but the support is not automatic.
+You must use the dynamic API and provide an overflow menu subcomponent. The dynamic API doesn't know
+the shape of your object, so render props must be used to instruct React how to render each item.
 
 ```tsx
 const [items] = React.useState<MyActionItem[]>([

package/dist/mdx/8.0-UPGRADE-GUIDE.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Upgrade Guides/v8.0"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
+
 # Canvas Kit 8.0 Upgrade Guide
 
 This guide contains an overview of the changes in Canvas Kit v8. Please
@@ -311,7 +321,8 @@ changes have been made:
 
 ### Utility Deprecations
 
-The following utility functions are being deprecated and will be removed in a later version of Canvas Kit.
+The following utility functions are being deprecated and will be removed in a later version of
+Canvas Kit.
 
 - Types:
   - `Model`
@@ -892,9 +903,8 @@ button, it is still a breaking change. This change effects the following compone
 ### Loading Animation
 
 `LoadingAnimation` is being renamed to `LoadingDots` and is moving from of
-`@workday/canvas-kit-react/loading-animation` to
-`@workday/canvas-kit-react/loading-dots`. The component has not been modified and you may
-continue to use this component exactly as you did in v7.
+`@workday/canvas-kit-react/loading-animation` to `@workday/canvas-kit-react/loading-dots`. The
+component has not been modified and you may continue to use this component exactly as you did in v7.
 
 The CSS package has been similarly updated for consistency, but is still in maintenance mode.
 
@@ -909,9 +919,7 @@ The CSS package has been similarly updated for consistency, but is still in main
 
 ```tsx
 // v7
-import {
-  LoadingAnimation
-} from '@workday/canvas-kit-react/loading-animation';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 const MyComponent = (props: MyComponentProps) => {
   return <LoadingAnimation />;
@@ -920,9 +928,7 @@ const MyComponent = (props: MyComponentProps) => {
 const StyledLoadingAnimation = styled(LoadingAnimation)({});
 
 // v8
-import {
-  LoadingDots
-} from '@workday/canvas-kit-react/loading-dots';
+import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 
 const MyComponent = (props: MyComponentProps) => {
   return <LoadingDots />;

package/dist/mdx/API_PATTERN_GUIDELINES.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/API & Pattern Guidelines"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
 # API & Pattern Guidelines
 
 Note: This repo hasn't seen a full audit, so you may find examples that contradict these guidelines.
@@ -40,7 +50,7 @@ Some of the below rules are inspired by painpoints we've encountered in this pro
 - Use the provided types (e.g. `CanvasSpaceValues`, `CanvasSpaceNumbers`, etc.) to restrict prop
   values
 - Check out the
-  [`@workday/canvas-kit-react/tokens` README](https://github.com/Workday/canvas-kit/blob/master/modules/tokens/react/README.md)
+  [`@workday/canvas-kit-react/tokens` README](https://github.com/Workday/canvas-kit/blob/master/modules/react/tokens/README.md)
   for the latest and greatest Canvas helpers.
 
 ## Naming

package/dist/mdx/COMPOUND_COMPONENTS.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Compound Components"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
 # Compound Components
 
 ## What is a compound component?