@workday/canvas-kit-docs 13.0.0-alpha.1011-next.0 → 13.0.0-alpha.1016-next.0

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

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,eAAO,MAAM,WAAW,yBA6IvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsD1B,eAAO,MAAM,WAAW,yBAkHvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -1,61 +1,85 @@
 import React from 'react';
 // @ts-ignore: Cannot find module error
-import headerImage from './storybook-welcome-header.png';
+import headerImage from './CK-banner-temp.jpg';
 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';
-import { system } from '@workday/canvas-tokens-web';
-import { cssVar } from '@workday/canvas-kit-styling';
+import { system, base } from '@workday/canvas-tokens-web';
+import { createStyles } from '@workday/canvas-kit-styling';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
+const parentFlexStyles = createStyles({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: system.space.x4,
+    marginBottom: system.space.x6,
+});
+const textStyles = createStyles({
+    color: system.color.text.inverse,
+    fontSize: '5vmin',
+    lineHeight: '5vmin',
+});
+const versionStyles = createStyles({
+    fontWeight: base.fontFamily100,
+    marginInlineStart: system.space.x4,
+});
+const imageStyles = createStyles({
+    width: '100%',
+    height: 'auto',
+});
+const borderStyles = createStyles({
+    borderBottom: `1px solid ${base.blueberry200}`,
+    marginBottom: system.space.x2,
+});
+const gridStyles = createStyles({
+    maxHeight: 320,
+    gridTemplateRows: '1fr 1fr 2fr 1fr',
+    display: 'grid',
+});
+const linkStyles = createStyles({
+    alignSelf: 'end',
+    marginTop: system.space.x3,
+});
 export const WelcomePage = () => {
-    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, style: { lineHeight: '3vmin', fontSize: '6vmin', marginBottom: cssVar(system.space.x4) } }, "Canvas Kit"),
-                React.createElement(Text, { typeLevel: "body.large", style: { lineHeight: '2vw', fontSize: '3vmin' }, 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/", iconLabel: "Open docs in new window" }, "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: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" },
-                    ' ',
-                    "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: "https://workday.github.io/canvas-kit/?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: "https://workday.github.io/canvas-kit/?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" })));
+    return (React.createElement("div", { className: "sb-unstyled" },
+        React.createElement("div", { className: parentFlexStyles },
+            React.createElement(Box, { cs: { overflow: 'hidden', position: 'relative' } },
+                React.createElement(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' } },
+                    React.createElement(Text, { typeLevel: "title.medium", cs: textStyles }, "Canvas Kit"),
+                    React.createElement(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles] },
+                        "v",
+                        version)),
+                React.createElement("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })),
+            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/", iconLabel: "Open docs in new window" }, "Workday Design Principles.")),
+            React.createElement(Heading, { size: "medium", className: borderStyles }, "Quick Links"),
+            React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
+                React.createElement(Grid, { as: Card, className: gridStyles },
+                    React.createElement(SystemIcon, { color: base.cantaloupe400, colorHover: base.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, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" }, "Getting Started Guide")),
+                React.createElement(Grid, { as: Card, className: gridStyles },
+                    React.createElement(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.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, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" }, "View Our Tokens")),
+                React.createElement(Grid, { as: Card, className: gridStyles },
+                    React.createElement(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.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, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" }, "View Assets"))),
+            React.createElement(Heading, { size: "medium", className: borderStyles }, "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/13.0-UPGRADE-GUIDE.mdx

@@ -90,7 +90,7 @@ yarn remove @workday/canvas-kit-codemod
 
 ### Styling API and CSS Tokens
 
-**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088)
+**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114)
 
 Several components have been refactored to use our
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -104,6 +104,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 The following components are affected:
 
 - `ExternalHyperlink`
+- `Menu`
 - `Skeleton`
 
 ## External Hyperlink

package/dist/mdx/react/_examples/Tooltips.mdx

@@ -0,0 +1,15 @@
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import ListOfUploadedFiles from './examples/Tooltips/ListOfUploadedFiles';
+
+
+# Accessible Tooltip Examples
+
+## Using descriptive tooltips for repeated text buttons
+
+In this example, the "Delete" buttons are used repeatedly to reference the multiple files that have
+been uploaded to the web app. The text buttons already have an accessible name (a.k.a. label)
+derived from the button's inner text. The `describe` tooltip can be useful for providing more
+in-context description for both low vision sighted users and screen reader users without overriding
+the button name "Delete".
+
+<ExampleCodeBlock code={ListOfUploadedFiles} />

package/dist/mdx/react/_examples/examples/Tooltips/ListOfUploadedFiles.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {trashIcon} from '@workday/canvas-system-icons-web';
+
+const files = ['Cover Letter.docx', 'Resume.docx', 'Portfolio.pptx', 'Portrait.png'];
+
+const listStyles = {
+  alignItems: 'center',
+  width: '35rem',
+};
+
+const deleteBtnStyle = {
+  marginLeft: 'auto',
+};
+
+export default () => {
+  return (
+    <>
+      <Heading size="medium">Uploaded Files:</Heading>
+      <Flex as="ul" gap="1rem" flexDirection="column">
+        {files.map(i => (
+          <Flex as="li" style={listStyles}>
+            <Text>{i}</Text>
+            <Tooltip type="description" title={i}>
+              <DeleteButton icon={trashIcon} style={deleteBtnStyle}>
+                Delete
+              </DeleteButton>
+            </Tooltip>
+          </Flex>
+        ))}
+      </Flex>
+    </>
+  );
+};

package/dist/mdx/react/menu/examples/Icons.tsx

@@ -31,7 +31,7 @@ export default () => {
             </Menu.Item>
             <Menu.Item data-text="User">
               <Menu.Item.Icon icon={userIcon} />
-              <Menu.Item.Text></Menu.Item.Text>
+              <Menu.Item.Text>User</Menu.Item.Text>
             </Menu.Item>
             <Menu.Divider />
             <Menu.Item data-text="Fifth Item (with divider)">

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,6 +1,9 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';import Default from './examples/Default';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator'import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
 import DelayedTooltip from './examples/DelayedTooltip';
+import DescriptionType from './examples/DescriptionType';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -62,6 +65,14 @@ and focus events.
 
 ### Describing an Element
 
+<InformationHighlight variant={'caution'} className='sb-unstyled'>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading> Caution: Describe type has been deprecated </InformationHighlight.Heading>
+  <InformationHighlight.Body>
+     Assistive technology may ignore <StatusIndicator variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="describe"</StatusIndicator.Label></StatusIndicator> techniques based on verbosity settings. Please use <StatusIndicator cs={{textTransform: 'lowercase'}} variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="description"</StatusIndicator.Label></StatusIndicator> on Tooltips.
+  </InformationHighlight.Body>
+</InformationHighlight>
+
 The default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to
 provide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`
 to the target element. This will allow screen reader users to hear the name of the control that is
@@ -69,6 +80,25 @@ being focused and the ancillary tooltip information.
 
 <ExampleCodeBlock code={DescribeType} />
 
+### Description of an Element
+
+The default mode for a tooltip is to assign a name to the target element with an `aria-label`
+string. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.
+This will add `aria-description` strings to the target element instead. This variant is useful on
+text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible. 
+
+> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.
+>
+> ```jsx
+> // The text will be understood as: You must accept terms and conditions
+> <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
+>
+> // This will render a string including the html and will not be properly understood by voice over.
+> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
+> <Tool
+
+<ExampleCodeBlock code={DescriptionType} />
+
 ### Muted Tooltips
 
 If a tooltip does not need to be visible to screen reader users, or you handle accessibility of the

package/dist/mdx/react/tooltip/examples/DescriptionType.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {chartConfigIcon} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  return (
+    <Flex gap="s">
+      <Tooltip type="description" title="Search using additional criteria">
+        <TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>
+      </Tooltip>
+      <Tooltip type="description" title="Create saved search">
+        <SecondaryButton>Save</SecondaryButton>
+      </Tooltip>
+      <Tooltip type="description" title="The service will restart after this action">
+        <DeleteButton>Delete</DeleteButton>
+      </Tooltip>
+    </Flex>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.1011-next.0",
+  "version": "13.0.0-alpha.1016-next.0",
   "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": "^13.0.0-alpha.1011-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1011-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1011-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1011-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1016-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1016-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1016-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1016-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.0",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "4c21bf4c331be21e4e096d8f923ed85609e42a75"
+  "gitHead": "adaf9ca63978245025920184f65b0019ee8e952d"
 }