@workday/canvas-kit-docs 8.3.4 → 8.3.5

package/dist/commonjs/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/commonjs/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/commonjs/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/commonjs/mdx/installBlock.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstallBlock = void 0;
+var react_1 = __importDefault(require("react"));
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var button_1 = require("@workday/canvas-kit-react/button");
+var InstallBlock = function (_a) {
+    var command = _a.command, packageName = _a.packageName;
+    var commandRef = react_1.default.useRef(null);
+    var _b = react_1.default.useState(false), copied = _b[0], setCopied = _b[1];
+    react_1.default.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_1.default.createElement(layout_1.Flex, { padding: "xs", backgroundColor: tokens_1.colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap' },
+        react_1.default.createElement("pre", { ref: commandRef },
+            react_1.default.createElement("span", { style: { color: tokens_1.colors.blueberry200 } }, command),
+            ' ',
+            react_1.default.createElement("span", { style: { color: tokens_1.colors.frenchVanilla100 } }, packageName)),
+        react_1.default.createElement(button_1.PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small" }, copied ? 'Copied' : 'Copy')));
+};
+exports.InstallBlock = InstallBlock;

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

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

package/dist/commonjs/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/commonjs/mdx/welcomePage.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WelcomePage = void 0;
+var react_1 = __importDefault(require("react"));
+// @ts-ignore: Cannot find module error
+var storybook_welcome_header_png_1 = __importDefault(require("./storybook-welcome-header.png"));
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var installBlock_1 = require("./installBlock");
+var text_1 = require("@workday/canvas-kit-react/text");
+var card_1 = require("@workday/canvas-kit-react/card");
+var button_1 = require("@workday/canvas-kit-react/button");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+// @ts-ignore: Cannot find module error
+var lerna_json_1 = require("../../../lerna.json");
+var WelcomePage = function () {
+    return (react_1.default.createElement(layout_1.Flex, { flexDirection: "column", gap: "s" },
+        react_1.default.createElement(layout_1.Box, { borderRadius: "m", overflow: "hidden", position: "relative" },
+            react_1.default.createElement(layout_1.Flex, { position: "absolute", flexDirection: "column", top: "30%", left: "10%" },
+                react_1.default.createElement(text_1.Text, { typeLevel: "title.medium", color: tokens_1.colors.frenchVanilla100, fontSize: "6vmin", marginBottom: "s", style: { lineHeight: '3vmin' } }, "Canvas Kit"),
+                react_1.default.createElement(text_1.Text, { typeLevel: "body.large", fontSize: "3vmin", style: { lineHeight: '2vw' }, color: tokens_1.colors.frenchVanilla100 },
+                    "v",
+                    lerna_json_1.version)),
+            react_1.default.createElement("img", { src: storybook_welcome_header_png_1.default, alt: "test", style: { width: '100%', height: 'auto' } })),
+        react_1.default.createElement(text_1.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_1.default.createElement(button_1.ExternalHyperlink, { href: "https://canvas.workdaydesign.com/" }, "Workday Design Principles.")),
+        react_1.default.createElement(text_1.Heading, { size: "medium", borderBottom: "1px solid " + tokens_1.colors.blueberry200, paddingBottom: "xxs" }, "Quick Links"),
+        react_1.default.createElement(layout_1.Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
+            react_1.default.createElement(layout_1.Grid, { as: card_1.Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
+                react_1.default.createElement(icon_1.SystemIcon, { color: tokens_1.colors.cantaloupe400, colorHover: tokens_1.colors.cantaloupe400, icon: canvas_system_icons_web_1.rocketIcon, size: 60 }),
+                react_1.default.createElement(card_1.Card.Heading, null, "Getting Started"),
+                react_1.default.createElement(card_1.Card.Body, null,
+                    react_1.default.createElement(text_1.Text, null, "For all things getting started including helpful guides and docs.")),
+                react_1.default.createElement(layout_1.Grid.Item, { as: button_1.Hyperlink, alignSelf: "end", marginTop: "xs", href: "/?path=/docs/guides-getting-started--page" },
+                    ' ',
+                    "Getting Started Guide")),
+            react_1.default.createElement(layout_1.Grid, { as: card_1.Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
+                react_1.default.createElement(icon_1.SystemIcon, { color: tokens_1.colors.blueberry400, icon: canvas_system_icons_web_1.tokensIcon, colorHover: tokens_1.colors.blueberry400, size: 60 }),
+                react_1.default.createElement(card_1.Card.Heading, null, "Tokens"),
+                react_1.default.createElement(card_1.Card.Body, null,
+                    react_1.default.createElement(text_1.Text, null, "Tokens are the smallest pieces of our Design System with the primary function of storing UI information.")),
+                react_1.default.createElement(layout_1.Grid.Item, { alignSelf: "end", as: button_1.Hyperlink, marginTop: "xs", href: "/?path=/docs/tokens--overview" },
+                    ' ',
+                    "View Our Tokens")),
+            react_1.default.createElement(layout_1.Grid, { as: card_1.Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
+                react_1.default.createElement(icon_1.SystemIcon, { color: tokens_1.colors.greenApple400, icon: canvas_system_icons_web_1.shapesIcon, size: 60, colorHover: tokens_1.colors.greenApple400 }),
+                react_1.default.createElement(card_1.Card.Heading, null, "Assets"),
+                react_1.default.createElement(card_1.Card.Body, null,
+                    react_1.default.createElement(text_1.Text, null, "Assets are graphics which help communicate meaning or highlight areas of interaction to our users.")),
+                react_1.default.createElement(layout_1.Grid.Item, { as: button_1.Hyperlink, alignSelf: "end", marginTop: "xs", href: "/?path=/docs/assets-icons--overview" },
+                    ' ',
+                    "View Assets"))),
+        react_1.default.createElement(text_1.Heading, { size: "medium", borderBottom: "1px solid " + tokens_1.colors.blueberry200, paddingBottom: "xxs" }, "Installation"),
+        react_1.default.createElement(text_1.Text, null, "To get started using Canvas kit React first add or install the module to your existing React project"),
+        react_1.default.createElement(installBlock_1.InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
+        "or",
+        react_1.default.createElement(installBlock_1.InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" })));
+};
+exports.WelcomePage = WelcomePage;