@workday/canvas-kit-docs 11.1.3 → 11.1.5

package/dist/es6/mdx/welcomePage.js

@@ -12,7 +12,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
 export const WelcomePage = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "s" },
+    return (React.createElement(Flex, { flexDirection: "column", gap: "s", marginBottom: "m" },
         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"),

package/dist/mdx/welcome.stories.mdx

@@ -16,20 +16,42 @@ import {version} from '../../../lerna.json';
 
 <WelcomePage />
 
-After installing Canvas Kit, you need to set up the CanvasProvider at the root of your application.
-This can be either in your `index.jsx`,`index.tsx` or `App.jsx` depending on the framework you use.
-This ensures proper styling, theming, and focus behavior on our components.
+### Canvas Provider
+
+The `<CanvasProvider>` is required for proper branding support. Furthermore, if you use Emotion for
+styling your components, the `<CanvasProvider>` ensures your styles will merge as expected. Note:
+Custom use of `<CacheProvider>` provided by Emotion is not supported. `@workday/canvas-kit-styling`
+owns the creating of the cache reference. This ensures both static styling and Emotion’s dynamic
+styling solutions work together. In most cases you'll want to wrap your application at the root
+level in `<CanvasProvider>`.
 
 ```tsx
 import * as React from 'react';
-// 1. import `CanvasProvider` component
-import {CanvasProvider} from '@workday/canvas-kit-react';
-function App() {
-  // 2. Wrap CanvasProvider at the root of your app
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+// Ensure CSS variables are defined. You Can also do this at the root index.css
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+
+export const App = () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      // Switch to `ContentDirection.RTL` to change direction
+      direction: ContentDirection.LTR,
+    },
+  });
   return (
-    <CanvasProvider>
-      <YourApp />
+    <CanvasProvider theme={canvasTheme}>
+        <main>
+          <p>Get Started With Canvas Kit</p>
+        </main>
     </CanvasProvider>
   );
-}
+};
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.1.3",
+  "version": "11.1.5",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.1.3",
-    "@workday/canvas-kit-preview-react": "^11.1.3",
-    "@workday/canvas-kit-react": "^11.1.3",
-    "@workday/canvas-kit-styling": "^11.1.3",
+    "@workday/canvas-kit-labs-react": "^11.1.5",
+    "@workday/canvas-kit-preview-react": "^11.1.5",
+    "@workday/canvas-kit-react": "^11.1.5",
+    "@workday/canvas-kit-styling": "^11.1.5",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "0ad69fbb1b6f416855fa2815f7c13ffee5deb53a"
+  "gitHead": "deb1fdc2d7f4d17c80dcc0013804c14a21133b3d"
 }