@workday/canvas-kit-docs 16.0.8 → 16.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
18
18
  "@emotion/react": "11.11.4",
19
19
  "@types/react": "18.2.60",
20
20
  "@types/react-dom": "18.2.19",
21
- "@workday/canvas-kit-labs-react": "16.0.8",
22
- "@workday/canvas-kit-preview-react": "16.0.8",
23
- "@workday/canvas-kit-react": "16.0.8",
24
- "@workday/canvas-kit-react-fonts": "^16.0.8",
25
- "@workday/canvas-kit-styling": "16.0.8",
21
+ "@workday/canvas-kit-labs-react": "16.0.10",
22
+ "@workday/canvas-kit-preview-react": "16.0.10",
23
+ "@workday/canvas-kit-react": "16.0.10",
24
+ "@workday/canvas-kit-react-fonts": "^16.0.10",
25
+ "@workday/canvas-kit-styling": "16.0.10",
26
26
  "@workday/canvas-system-icons-web": "^5.0.3",
27
27
  "@workday/canvas-expressive-icons-web": "1.0.1",
28
28
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
19
19
  "@emotion/react": "11.11.4",
20
20
  "@types/react": "18.2.60",
21
21
  "@types/react-dom": "18.2.19",
22
- "@workday/canvas-kit-labs-react": "16.0.8",
23
- "@workday/canvas-kit-preview-react": "16.0.8",
24
- "@workday/canvas-kit-react": "16.0.8",
25
- "@workday/canvas-kit-react-fonts": "^16.0.8",
26
- "@workday/canvas-kit-styling": "16.0.8",
22
+ "@workday/canvas-kit-labs-react": "16.0.10",
23
+ "@workday/canvas-kit-preview-react": "16.0.10",
24
+ "@workday/canvas-kit-react": "16.0.10",
25
+ "@workday/canvas-kit-react-fonts": "^16.0.10",
26
+ "@workday/canvas-kit-styling": "16.0.10",
27
27
  "@workday/canvas-system-icons-web": "^5.0.3",
28
28
  "@workday/canvas-expressive-icons-web": "1.0.1",
29
29
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
@@ -1,6 +1,7 @@
1
1
  import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
  import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
3
3
  import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
4
+ import AIDisclosure from './examples/AIDisclosure';
4
5
  import CustomContent from './examples/CustomContent';
5
6
  import Default from './examples/Default';
6
7
  import DelayedTooltip from './examples/DelayedTooltip';
@@ -141,6 +142,15 @@ a dialog instead.
141
142
 
142
143
  <ExampleCodeBlock code={CustomContent} />
143
144
 
145
+ ### AI Disclosure
146
+
147
+ Use a tooltip to disclose when content or functionality is powered by AI. Pair an icon button with a
148
+ tooltip near the content it describes so users understand how it was produced before they act on it.
149
+ The tooltip labels the button, making the disclosure available to both sighted and screen reader
150
+ users.
151
+
152
+ <ExampleCodeBlock code={AIDisclosure} />
153
+
144
154
  ### Delayed Tooltip
145
155
 
146
156
  The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
@@ -0,0 +1,38 @@
1
+ import {ExternalHyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
2
+ import {Card} from '@workday/canvas-kit-react/card';
3
+ import {Tooltip} from '@workday/canvas-kit-react/tooltip';
4
+ import {createStyles} from '@workday/canvas-kit-styling';
5
+ import {infoSparkleIcon} from '@workday/canvas-system-icons-web';
6
+ import {system} from '@workday/canvas-tokens-web';
7
+
8
+ const containerStyles = createStyles({
9
+ background: system.color.bg.alt.default,
10
+ padding: system.padding.xl,
11
+ });
12
+
13
+ export default () => {
14
+ return (
15
+ <div className={containerStyles}>
16
+ <Card>
17
+ <Card.Heading>
18
+ Giant Pacific Octopus
19
+ <Tooltip title="This content is generated by AI" variant="alt" placement="right-end">
20
+ <TertiaryButton
21
+ size="extraSmall"
22
+ icon={infoSparkleIcon}
23
+ aria-label="This functionality is powered by AI"
24
+ />
25
+ </Tooltip>
26
+ </Card.Heading>
27
+ <Card.Body>
28
+ The giant Pacific octopus (Enteroctopus dofleini), also known as the North Pacific giant
29
+ octopus, is a large marine cephalopod belonging to the genus Enteroctopus and
30
+ Enteroctopodidae family. –{' '}
31
+ <ExternalHyperlink href="https://en.wikipedia.org/wiki/Giant_Pacific_octopus">
32
+ View Source
33
+ </ExternalHyperlink>
34
+ </Card.Body>
35
+ </Card>
36
+ </div>
37
+ );
38
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "16.0.8",
3
+ "version": "16.0.10",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -47,10 +47,10 @@
47
47
  "@stackblitz/sdk": "^1.11.0",
48
48
  "@storybook/csf": "0.0.1",
49
49
  "@workday/canvas-expressive-icons-web": "1.0.2",
50
- "@workday/canvas-kit-labs-react": "^16.0.8",
51
- "@workday/canvas-kit-preview-react": "^16.0.8",
52
- "@workday/canvas-kit-react": "^16.0.8",
53
- "@workday/canvas-kit-styling": "^16.0.8",
50
+ "@workday/canvas-kit-labs-react": "^16.0.10",
51
+ "@workday/canvas-kit-preview-react": "^16.0.10",
52
+ "@workday/canvas-kit-react": "^16.0.10",
53
+ "@workday/canvas-kit-styling": "^16.0.10",
54
54
  "@workday/canvas-system-icons-web": "^5.0.3",
55
55
  "@workday/canvas-tokens-web": "^4.4.0",
56
56
  "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
63
63
  "mkdirp": "^1.0.3",
64
64
  "typescript": "5.0"
65
65
  },
66
- "gitHead": "19b3f139f43842cf3d23a14afd175ef177471536"
66
+ "gitHead": "e77be87cfbf4620e2e9f02fa722c489061833d66"
67
67
  }