@workday/canvas-kit-labs-react 14.0.0-alpha.1213-next.0 → 14.0.0-alpha.1214-next.0
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.
- package/ai-ingress-button/index.ts +2 -0
- package/{ai-assistant-ingress-button/lib/AIAssistantIngressButton.tsx → ai-ingress-button/lib/AIIngressButton.tsx} +15 -15
- package/ai-ingress-button/lib/AIIngressIcon.tsx +20 -0
- package/ai-ingress-button/package.json +6 -0
- package/dist/commonjs/ai-ingress-button/index.d.ts +3 -0
- package/dist/commonjs/ai-ingress-button/index.d.ts.map +1 -0
- package/dist/commonjs/{ai-assistant-ingress-button → ai-ingress-button}/index.js +2 -2
- package/dist/commonjs/{ai-assistant-ingress-button/lib/AIAssistantIngressButton.d.ts → ai-ingress-button/lib/AIIngressButton.d.ts} +11 -11
- package/dist/commonjs/{ai-assistant-ingress-button/lib/AIAssistantIngressButton.d.ts.map → ai-ingress-button/lib/AIIngressButton.d.ts.map} +1 -1
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +57 -0
- package/dist/commonjs/ai-ingress-button/lib/AIIngressIcon.d.ts +3 -0
- package/dist/commonjs/ai-ingress-button/lib/AIIngressIcon.d.ts.map +1 -0
- package/dist/commonjs/ai-ingress-button/lib/AIIngressIcon.js +23 -0
- package/dist/commonjs/index.d.ts +1 -1
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -1
- package/dist/es6/ai-ingress-button/index.d.ts +3 -0
- package/dist/es6/ai-ingress-button/index.d.ts.map +1 -0
- package/dist/es6/ai-ingress-button/index.js +2 -0
- package/dist/es6/{ai-assistant-ingress-button/lib/AIAssistantIngressButton.d.ts → ai-ingress-button/lib/AIIngressButton.d.ts} +11 -11
- package/dist/es6/{ai-assistant-ingress-button/lib/AIAssistantIngressButton.d.ts.map → ai-ingress-button/lib/AIIngressButton.d.ts.map} +1 -1
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +54 -0
- package/dist/es6/ai-ingress-button/lib/AIIngressIcon.d.ts +3 -0
- package/dist/es6/ai-ingress-button/lib/AIIngressIcon.d.ts.map +1 -0
- package/dist/es6/ai-ingress-button/lib/AIIngressIcon.js +19 -0
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -1
- package/index.ts +1 -1
- package/package.json +4 -4
- package/ai-assistant-ingress-button/index.ts +0 -2
- package/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.tsx +0 -20
- package/ai-assistant-ingress-button/package.json +0 -6
- package/dist/commonjs/ai-assistant-ingress-button/index.d.ts +0 -3
- package/dist/commonjs/ai-assistant-ingress-button/index.d.ts.map +0 -1
- package/dist/commonjs/ai-assistant-ingress-button/lib/AIAssistantIngressButton.js +0 -57
- package/dist/commonjs/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.d.ts +0 -3
- package/dist/commonjs/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.d.ts.map +0 -1
- package/dist/commonjs/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.js +0 -23
- package/dist/es6/ai-assistant-ingress-button/index.d.ts +0 -3
- package/dist/es6/ai-assistant-ingress-button/index.d.ts.map +0 -1
- package/dist/es6/ai-assistant-ingress-button/index.js +0 -2
- package/dist/es6/ai-assistant-ingress-button/lib/AIAssistantIngressButton.js +0 -54
- package/dist/es6/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.d.ts +0 -3
- package/dist/es6/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.d.ts.map +0 -1
- package/dist/es6/ai-assistant-ingress-button/lib/AIAssistantIngressIcon.js +0 -19
|
@@ -3,11 +3,11 @@ import {BaseButton, BaseButtonProps, buttonStencil} from '@workday/canvas-kit-re
|
|
|
3
3
|
import {createStencil, handleCsProp, calc} from '@workday/canvas-kit-styling';
|
|
4
4
|
import {system, base} from '@workday/canvas-tokens-web';
|
|
5
5
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
6
|
-
import {
|
|
7
|
-
export interface
|
|
6
|
+
import {getAIIngressIcon} from './AIIngressIcon';
|
|
7
|
+
export interface AIIngressButtonProps
|
|
8
8
|
extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon'> {
|
|
9
9
|
/**
|
|
10
|
-
* When true, indicates that the
|
|
10
|
+
* When true, indicates that the AI Ingress button is toggled.
|
|
11
11
|
*/
|
|
12
12
|
toggled?: boolean;
|
|
13
13
|
/**
|
|
@@ -34,7 +34,7 @@ const glowLunchBreak = base.amber300; //'#FEC10B';
|
|
|
34
34
|
const glowHappyHour = base.orange400; //'#FD7E00';
|
|
35
35
|
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
36
36
|
|
|
37
|
-
export const
|
|
37
|
+
export const AIIngressButtonStencil = createStencil({
|
|
38
38
|
extends: buttonStencil,
|
|
39
39
|
base: {
|
|
40
40
|
[buttonStencil.vars.background]: system.color.bg.ai.strongest,
|
|
@@ -43,7 +43,7 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
43
43
|
width: calc.add(system.space.x10, system.space.x1),
|
|
44
44
|
transition: 'box-shadow 300ms ease-out, background 300ms ease-out',
|
|
45
45
|
|
|
46
|
-
'.wd-icon-ai-
|
|
46
|
+
'.wd-icon-ai-ingress-button': {
|
|
47
47
|
'.wd-icon-fill': {
|
|
48
48
|
transition: 'fill 300ms ease-out',
|
|
49
49
|
},
|
|
@@ -54,7 +54,7 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
54
54
|
},
|
|
55
55
|
|
|
56
56
|
'&:is(:hover, .hover):not(:disabled, .disabled)': {
|
|
57
|
-
'.wd-icon-ai-
|
|
57
|
+
'.wd-icon-ai-ingress-button': {
|
|
58
58
|
'linearGradient > stop:first-child': {
|
|
59
59
|
stopColor: illuminateStopColor1,
|
|
60
60
|
},
|
|
@@ -83,7 +83,7 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
83
83
|
variant: {
|
|
84
84
|
inverse: {
|
|
85
85
|
[buttonStencil.vars.background]: system.color.bg.default,
|
|
86
|
-
'.wd-icon-ai-
|
|
86
|
+
'.wd-icon-ai-ingress-button': {
|
|
87
87
|
'.wd-icon-fill': {
|
|
88
88
|
transition: 'fill 300ms ease-out',
|
|
89
89
|
},
|
|
@@ -93,7 +93,7 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
93
93
|
},
|
|
94
94
|
},
|
|
95
95
|
'&:is(:hover, .hover):not(:disabled, .disabled)': {
|
|
96
|
-
'.wd-icon-ai-
|
|
96
|
+
'.wd-icon-ai-ingress-button': {
|
|
97
97
|
'linearGradient > stop:first-child': {
|
|
98
98
|
stopColor: illuminateStopColor1,
|
|
99
99
|
},
|
|
@@ -123,7 +123,7 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
123
123
|
transition: 'box-shadow 300ms ease-out, background 300ms ease-out',
|
|
124
124
|
|
|
125
125
|
boxShadow: `0px 0px 4.9px 0px ${glowEraser}, 0px 0px 0.98px 0px ${glowHighlighter}, 0px 0px 1.96px 0px ${glowLunchBreak}, 0px 0px 2.94px 0px ${glowLunchBreak}, 0px 0px 4.9px 0px ${glowHappyHour}, 0px 0px 7.36px 0px ${glowThumbtack}, 0px 0px 9.81px 0px ${glowEraser}, 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50)`,
|
|
126
|
-
'.wd-icon-ai-
|
|
126
|
+
'.wd-icon-ai-ingress-button': {
|
|
127
127
|
'.wd-icon-fill': {
|
|
128
128
|
transition: 'fill 300ms ease-out',
|
|
129
129
|
},
|
|
@@ -151,7 +151,7 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
151
151
|
modifiers: {toggled: true, variant: 'inverse'},
|
|
152
152
|
styles: {
|
|
153
153
|
[buttonStencil.vars.background]: system.color.bg.ai.strongest,
|
|
154
|
-
'.wd-icon-ai-
|
|
154
|
+
'.wd-icon-ai-ingress-button': {
|
|
155
155
|
'.wd-icon-fill': {
|
|
156
156
|
transition: 'fill 300ms ease-out',
|
|
157
157
|
},
|
|
@@ -169,22 +169,22 @@ export const AIAssistantIngressButtonStencil = createStencil({
|
|
|
169
169
|
],
|
|
170
170
|
});
|
|
171
171
|
|
|
172
|
-
export const
|
|
173
|
-
displayName: '
|
|
174
|
-
Component: ({toggled, variant, ...elemProps}:
|
|
172
|
+
export const AIIngressButton = createComponent('button')({
|
|
173
|
+
displayName: 'AIIngressButton',
|
|
174
|
+
Component: ({toggled, variant, ...elemProps}: AIIngressButtonProps, ref, Element) => {
|
|
175
175
|
const svgGradientId = useUniqueId();
|
|
176
176
|
return (
|
|
177
177
|
<BaseButton
|
|
178
178
|
ref={ref}
|
|
179
179
|
as={Element}
|
|
180
180
|
{...handleCsProp(elemProps, [
|
|
181
|
-
|
|
181
|
+
AIIngressButtonStencil({toggled, variant}),
|
|
182
182
|
{
|
|
183
183
|
[systemIconStencil.vars.color]: `url(#${svgGradientId})`,
|
|
184
184
|
},
|
|
185
185
|
])}
|
|
186
186
|
>
|
|
187
|
-
<BaseButton.Icon size="large" icon={
|
|
187
|
+
<BaseButton.Icon size="large" icon={getAIIngressIcon(svgGradientId)} />
|
|
188
188
|
</BaseButton>
|
|
189
189
|
);
|
|
190
190
|
},
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
|
|
2
|
+
|
|
3
|
+
export const getAIIngressIcon = (svgId: string): CanvasSystemIcon => {
|
|
4
|
+
return {
|
|
5
|
+
name: 'AIIngressButton',
|
|
6
|
+
type: CanvasIconTypes.System,
|
|
7
|
+
svg: `<svg class="wd-icon-ai-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
8
|
+
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
9
|
+
<stop />
|
|
10
|
+
<stop offset="0.25"/>
|
|
11
|
+
<stop offset="0.5"/>
|
|
12
|
+
<stop offset="0.75"/>
|
|
13
|
+
<stop offset="1"/>
|
|
14
|
+
</linearGradient>
|
|
15
|
+
<path class="wd-icon-fill wd-icon-ai-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
16
|
+
<path class="wd-icon-fill wd-icon-ai-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
17
|
+
</svg>`,
|
|
18
|
+
filename: 'wd-icon-ai-ingress-button.svg',
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../ai-ingress-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
|
|
@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./lib/
|
|
18
|
-
__exportStar(require("./lib/
|
|
17
|
+
__exportStar(require("./lib/AIIngressButton"), exports);
|
|
18
|
+
__exportStar(require("./lib/AIIngressIcon"), exports);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseButtonProps } from '@workday/canvas-kit-react/button';
|
|
2
|
-
export interface
|
|
2
|
+
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon'> {
|
|
3
3
|
/**
|
|
4
|
-
* When true, indicates that the
|
|
4
|
+
* When true, indicates that the AI Ingress button is toggled.
|
|
5
5
|
*/
|
|
6
6
|
toggled?: boolean;
|
|
7
7
|
/**
|
|
@@ -9,7 +9,7 @@ export interface AIAssistantIngressButtonProps extends Omit<BaseButtonProps, 'si
|
|
|
9
9
|
*/
|
|
10
10
|
variant?: 'inverse';
|
|
11
11
|
}
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
13
13
|
variant: {
|
|
14
14
|
inverse: {
|
|
15
15
|
[x: string]: "--cnvs-sys-color-bg-default" | {
|
|
@@ -20,9 +20,9 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
20
20
|
transition: "300ms ease-out";
|
|
21
21
|
stopColor: "--cnvs-sys-color-fg-ai";
|
|
22
22
|
};
|
|
23
|
-
'.wd-icon-ai-
|
|
23
|
+
'.wd-icon-ai-ingress-button'?: undefined;
|
|
24
24
|
} | {
|
|
25
|
-
'.wd-icon-ai-
|
|
25
|
+
'.wd-icon-ai-ingress-button': {
|
|
26
26
|
'linearGradient > stop:first-child': {
|
|
27
27
|
stopColor: "--cnvs-base-palette-red-200";
|
|
28
28
|
};
|
|
@@ -953,9 +953,9 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
953
953
|
":visited"?: import("@emotion/serialize").CSSObject | undefined;
|
|
954
954
|
'.wd-icon-fill'?: undefined;
|
|
955
955
|
'> linearGradient > stop'?: undefined;
|
|
956
|
-
'.wd-icon-ai-
|
|
956
|
+
'.wd-icon-ai-ingress-button'?: undefined;
|
|
957
957
|
};
|
|
958
|
-
'.wd-icon-ai-
|
|
958
|
+
'.wd-icon-ai-ingress-button': {
|
|
959
959
|
'.wd-icon-fill': {
|
|
960
960
|
transition: "fill 300ms ease-out";
|
|
961
961
|
};
|
|
@@ -965,7 +965,7 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
965
965
|
};
|
|
966
966
|
};
|
|
967
967
|
'&:is(:hover, .hover):not(:disabled, .disabled)': {
|
|
968
|
-
'.wd-icon-ai-
|
|
968
|
+
'.wd-icon-ai-ingress-button': {
|
|
969
969
|
'linearGradient > stop:first-child': {
|
|
970
970
|
stopColor: "--cnvs-base-palette-red-200";
|
|
971
971
|
};
|
|
@@ -2828,7 +2828,7 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
2828
2828
|
};
|
|
2829
2829
|
transition: "box-shadow 300ms ease-out, background 300ms ease-out";
|
|
2830
2830
|
boxShadow: "0px 0px 4.9px 0px --cnvs-base-palette-magenta-200, 0px 0px 0.98px 0px --cnvs-base-palette-amber-100, 0px 0px 1.96px 0px --cnvs-base-palette-amber-300, 0px 0px 2.94px 0px --cnvs-base-palette-amber-300, 0px 0px 4.9px 0px --cnvs-base-palette-orange-400, 0px 0px 7.36px 0px --cnvs-base-palette-coral-500, 0px 0px 9.81px 0px --cnvs-base-palette-magenta-200, 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50)";
|
|
2831
|
-
'.wd-icon-ai-
|
|
2831
|
+
'.wd-icon-ai-ingress-button': {
|
|
2832
2832
|
'.wd-icon-fill': {
|
|
2833
2833
|
transition: "fill 300ms ease-out";
|
|
2834
2834
|
};
|
|
@@ -3824,5 +3824,5 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
3824
3824
|
opacity: string;
|
|
3825
3825
|
borderRadius: string;
|
|
3826
3826
|
}, never, never>, never>;
|
|
3827
|
-
export declare const
|
|
3828
|
-
//# sourceMappingURL=
|
|
3827
|
+
export declare const AIIngressButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", AIIngressButtonProps>;
|
|
3828
|
+
//# sourceMappingURL=AIIngressButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"AIIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,kBAAkB,CAAC;IAC/F;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAoBD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqIjC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAmB1B,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AIIngressButton = exports.AIIngressButtonStencil = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const button_1 = require("@workday/canvas-kit-react/button");
|
|
7
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
8
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
9
|
+
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
10
|
+
const AIIngressIcon_1 = require("./AIIngressIcon");
|
|
11
|
+
/**
|
|
12
|
+
* Icon gradient colors
|
|
13
|
+
*/
|
|
14
|
+
const illuminateStopColor1 = canvas_tokens_web_1.base.red200; //'#FFA198'
|
|
15
|
+
const illuminateStopColor2 = canvas_tokens_web_1.base.orange200; //'#FFCAA0'
|
|
16
|
+
const illuminateStopColor3 = canvas_tokens_web_1.base.orange200; //'#FFCA79'
|
|
17
|
+
const illuminateStopColor4 = canvas_tokens_web_1.base.amber200; //'#FDCA44'
|
|
18
|
+
const illuminateStopColor5 = canvas_tokens_web_1.base.amber300; //'#FFB74D';
|
|
19
|
+
/**
|
|
20
|
+
* Box shadow glow colors
|
|
21
|
+
*/
|
|
22
|
+
const glowEraser = canvas_tokens_web_1.base.magenta200; //'#FFC2FD';
|
|
23
|
+
const glowHighlighter = canvas_tokens_web_1.base.amber100; //'#FFF3A8';
|
|
24
|
+
const glowLunchBreak = canvas_tokens_web_1.base.amber300; //'#FEC10B';
|
|
25
|
+
const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
26
|
+
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
|
+
exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
|
+
extends: button_1.buttonStencil,
|
|
29
|
+
base: { name: "1op3m8", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
30
|
+
modifiers: {
|
|
31
|
+
variant: {
|
|
32
|
+
inverse: { name: "3hin01", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
33
|
+
},
|
|
34
|
+
toggled: {
|
|
35
|
+
true: { name: "kusqi", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
36
|
+
false: { name: "2pzmtt", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
compound: [
|
|
40
|
+
{
|
|
41
|
+
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
+
styles: { name: "1ljlh", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
}, "a-i-ingress-button-523614");
|
|
46
|
+
exports.AIIngressButton = (0, common_1.createComponent)('button')({
|
|
47
|
+
displayName: 'AIIngressButton',
|
|
48
|
+
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
49
|
+
const svgGradientId = (0, common_1.useUniqueId)();
|
|
50
|
+
return ((0, jsx_runtime_1.jsx)(button_1.BaseButton, { ref: ref, as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
|
|
51
|
+
(0, exports.AIIngressButtonStencil)({ toggled, variant }),
|
|
52
|
+
{
|
|
53
|
+
[icon_1.systemIconStencil.vars.color]: `url(#${svgGradientId})`,
|
|
54
|
+
},
|
|
55
|
+
]), children: (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { size: "large", icon: (0, AIIngressIcon_1.getAIIngressIcon)(svgGradientId) }) }));
|
|
56
|
+
},
|
|
57
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AIIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,gBAAgB,UAAW,MAAM,KAAG,gBAiBhD,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getAIIngressIcon = void 0;
|
|
4
|
+
const design_assets_types_1 = require("@workday/design-assets-types");
|
|
5
|
+
const getAIIngressIcon = (svgId) => {
|
|
6
|
+
return {
|
|
7
|
+
name: 'AIIngressButton',
|
|
8
|
+
type: design_assets_types_1.CanvasIconTypes.System,
|
|
9
|
+
svg: `<svg class="wd-icon-ai-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
10
|
+
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
11
|
+
<stop />
|
|
12
|
+
<stop offset="0.25"/>
|
|
13
|
+
<stop offset="0.5"/>
|
|
14
|
+
<stop offset="0.75"/>
|
|
15
|
+
<stop offset="1"/>
|
|
16
|
+
</linearGradient>
|
|
17
|
+
<path class="wd-icon-fill wd-icon-ai-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
18
|
+
<path class="wd-icon-fill wd-icon-ai-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
19
|
+
</svg>`,
|
|
20
|
+
filename: 'wd-icon-ai-ingress-button.svg',
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
exports.getAIIngressIcon = getAIIngressIcon;
|
package/dist/commonjs/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -14,6 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./ai-
|
|
17
|
+
__exportStar(require("./ai-ingress-button"), exports);
|
|
18
18
|
__exportStar(require("./combobox"), exports);
|
|
19
19
|
__exportStar(require("./search-form"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../ai-ingress-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseButtonProps } from '@workday/canvas-kit-react/button';
|
|
2
|
-
export interface
|
|
2
|
+
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon'> {
|
|
3
3
|
/**
|
|
4
|
-
* When true, indicates that the
|
|
4
|
+
* When true, indicates that the AI Ingress button is toggled.
|
|
5
5
|
*/
|
|
6
6
|
toggled?: boolean;
|
|
7
7
|
/**
|
|
@@ -9,7 +9,7 @@ export interface AIAssistantIngressButtonProps extends Omit<BaseButtonProps, 'si
|
|
|
9
9
|
*/
|
|
10
10
|
variant?: 'inverse';
|
|
11
11
|
}
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
13
13
|
variant: {
|
|
14
14
|
inverse: {
|
|
15
15
|
[x: string]: "--cnvs-sys-color-bg-default" | {
|
|
@@ -20,9 +20,9 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
20
20
|
transition: "300ms ease-out";
|
|
21
21
|
stopColor: "--cnvs-sys-color-fg-ai";
|
|
22
22
|
};
|
|
23
|
-
'.wd-icon-ai-
|
|
23
|
+
'.wd-icon-ai-ingress-button'?: undefined;
|
|
24
24
|
} | {
|
|
25
|
-
'.wd-icon-ai-
|
|
25
|
+
'.wd-icon-ai-ingress-button': {
|
|
26
26
|
'linearGradient > stop:first-child': {
|
|
27
27
|
stopColor: "--cnvs-base-palette-red-200";
|
|
28
28
|
};
|
|
@@ -953,9 +953,9 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
953
953
|
":visited"?: import("@emotion/serialize").CSSObject | undefined;
|
|
954
954
|
'.wd-icon-fill'?: undefined;
|
|
955
955
|
'> linearGradient > stop'?: undefined;
|
|
956
|
-
'.wd-icon-ai-
|
|
956
|
+
'.wd-icon-ai-ingress-button'?: undefined;
|
|
957
957
|
};
|
|
958
|
-
'.wd-icon-ai-
|
|
958
|
+
'.wd-icon-ai-ingress-button': {
|
|
959
959
|
'.wd-icon-fill': {
|
|
960
960
|
transition: "fill 300ms ease-out";
|
|
961
961
|
};
|
|
@@ -965,7 +965,7 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
965
965
|
};
|
|
966
966
|
};
|
|
967
967
|
'&:is(:hover, .hover):not(:disabled, .disabled)': {
|
|
968
|
-
'.wd-icon-ai-
|
|
968
|
+
'.wd-icon-ai-ingress-button': {
|
|
969
969
|
'linearGradient > stop:first-child': {
|
|
970
970
|
stopColor: "--cnvs-base-palette-red-200";
|
|
971
971
|
};
|
|
@@ -2828,7 +2828,7 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
2828
2828
|
};
|
|
2829
2829
|
transition: "box-shadow 300ms ease-out, background 300ms ease-out";
|
|
2830
2830
|
boxShadow: "0px 0px 4.9px 0px --cnvs-base-palette-magenta-200, 0px 0px 0.98px 0px --cnvs-base-palette-amber-100, 0px 0px 1.96px 0px --cnvs-base-palette-amber-300, 0px 0px 2.94px 0px --cnvs-base-palette-amber-300, 0px 0px 4.9px 0px --cnvs-base-palette-orange-400, 0px 0px 7.36px 0px --cnvs-base-palette-coral-500, 0px 0px 9.81px 0px --cnvs-base-palette-magenta-200, 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50)";
|
|
2831
|
-
'.wd-icon-ai-
|
|
2831
|
+
'.wd-icon-ai-ingress-button': {
|
|
2832
2832
|
'.wd-icon-fill': {
|
|
2833
2833
|
transition: "fill 300ms ease-out";
|
|
2834
2834
|
};
|
|
@@ -3824,5 +3824,5 @@ export declare const AIAssistantIngressButtonStencil: import("@workday/canvas-ki
|
|
|
3824
3824
|
opacity: string;
|
|
3825
3825
|
borderRadius: string;
|
|
3826
3826
|
}, never, never>, never>;
|
|
3827
|
-
export declare const
|
|
3828
|
-
//# sourceMappingURL=
|
|
3827
|
+
export declare const AIIngressButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", AIIngressButtonProps>;
|
|
3828
|
+
//# sourceMappingURL=AIIngressButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"AIIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,kBAAkB,CAAC;IAC/F;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAoBD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqIjC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAmB1B,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
|
|
4
|
+
import { createStencil, handleCsProp, calc } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { system, base } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
7
|
+
import { getAIIngressIcon } from './AIIngressIcon';
|
|
8
|
+
/**
|
|
9
|
+
* Icon gradient colors
|
|
10
|
+
*/
|
|
11
|
+
const illuminateStopColor1 = base.red200; //'#FFA198'
|
|
12
|
+
const illuminateStopColor2 = base.orange200; //'#FFCAA0'
|
|
13
|
+
const illuminateStopColor3 = base.orange200; //'#FFCA79'
|
|
14
|
+
const illuminateStopColor4 = base.amber200; //'#FDCA44'
|
|
15
|
+
const illuminateStopColor5 = base.amber300; //'#FFB74D';
|
|
16
|
+
/**
|
|
17
|
+
* Box shadow glow colors
|
|
18
|
+
*/
|
|
19
|
+
const glowEraser = base.magenta200; //'#FFC2FD';
|
|
20
|
+
const glowHighlighter = base.amber100; //'#FFF3A8';
|
|
21
|
+
const glowLunchBreak = base.amber300; //'#FEC10B';
|
|
22
|
+
const glowHappyHour = base.orange400; //'#FD7E00';
|
|
23
|
+
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
|
+
export const AIIngressButtonStencil = createStencil({
|
|
25
|
+
extends: buttonStencil,
|
|
26
|
+
base: { name: "1op3m8", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
|
+
modifiers: {
|
|
28
|
+
variant: {
|
|
29
|
+
inverse: { name: "3hin01", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
|
+
},
|
|
31
|
+
toggled: {
|
|
32
|
+
true: { name: "kusqi", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
+
false: { name: "2pzmtt", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
compound: [
|
|
37
|
+
{
|
|
38
|
+
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
+
styles: { name: "1ljlh", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
}, "a-i-ingress-button-523614");
|
|
43
|
+
export const AIIngressButton = createComponent('button')({
|
|
44
|
+
displayName: 'AIIngressButton',
|
|
45
|
+
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
46
|
+
const svgGradientId = useUniqueId();
|
|
47
|
+
return (_jsx(BaseButton, { ref: ref, as: Element, ...handleCsProp(elemProps, [
|
|
48
|
+
AIIngressButtonStencil({ toggled, variant }),
|
|
49
|
+
{
|
|
50
|
+
[systemIconStencil.vars.color]: `url(#${svgGradientId})`,
|
|
51
|
+
},
|
|
52
|
+
]), children: _jsx(BaseButton.Icon, { size: "large", icon: getAIIngressIcon(svgGradientId) }) }));
|
|
53
|
+
},
|
|
54
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AIIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,gBAAgB,UAAW,MAAM,KAAG,gBAiBhD,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CanvasIconTypes } from '@workday/design-assets-types';
|
|
2
|
+
export const getAIIngressIcon = (svgId) => {
|
|
3
|
+
return {
|
|
4
|
+
name: 'AIIngressButton',
|
|
5
|
+
type: CanvasIconTypes.System,
|
|
6
|
+
svg: `<svg class="wd-icon-ai-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
7
|
+
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
8
|
+
<stop />
|
|
9
|
+
<stop offset="0.25"/>
|
|
10
|
+
<stop offset="0.5"/>
|
|
11
|
+
<stop offset="0.75"/>
|
|
12
|
+
<stop offset="1"/>
|
|
13
|
+
</linearGradient>
|
|
14
|
+
<path class="wd-icon-fill wd-icon-ai-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
15
|
+
<path class="wd-icon-fill wd-icon-ai-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
16
|
+
</svg>`,
|
|
17
|
+
filename: 'wd-icon-ai-ingress-button.svg',
|
|
18
|
+
};
|
|
19
|
+
};
|
package/dist/es6/index.d.ts
CHANGED
package/dist/es6/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}
|
package/dist/es6/index.js
CHANGED
package/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1214-next.0",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1214-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1214-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
52
52
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
53
53
|
"@workday/design-assets-types": "^0.2.10",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@types/lodash.flatten": "^4.4.6"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "59a0288d16c936e52b30b160c1862bfcf2f8e1c2"
|
|
62
62
|
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
|
|
2
|
-
|
|
3
|
-
export const getAIAssistantIngressIcon = (svgId: string): CanvasSystemIcon => {
|
|
4
|
-
return {
|
|
5
|
-
name: 'aiAssistantIngressButton',
|
|
6
|
-
type: CanvasIconTypes.System,
|
|
7
|
-
svg: `<svg class="wd-icon-ai-assistant-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
8
|
-
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
9
|
-
<stop />
|
|
10
|
-
<stop offset="0.25"/>
|
|
11
|
-
<stop offset="0.5"/>
|
|
12
|
-
<stop offset="0.75"/>
|
|
13
|
-
<stop offset="1"/>
|
|
14
|
-
</linearGradient>
|
|
15
|
-
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
16
|
-
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
17
|
-
</svg>`,
|
|
18
|
-
filename: 'wd-icon-ai-assistant-ingress-button.svg',
|
|
19
|
-
};
|
|
20
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../ai-assistant-ingress-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC"}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.AIAssistantIngressButton = exports.AIAssistantIngressButtonStencil = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
const button_1 = require("@workday/canvas-kit-react/button");
|
|
7
|
-
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
8
|
-
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
9
|
-
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
10
|
-
const AIAssistantIngressIcon_1 = require("./AIAssistantIngressIcon");
|
|
11
|
-
/**
|
|
12
|
-
* Icon gradient colors
|
|
13
|
-
*/
|
|
14
|
-
const illuminateStopColor1 = canvas_tokens_web_1.base.red200; //'#FFA198'
|
|
15
|
-
const illuminateStopColor2 = canvas_tokens_web_1.base.orange200; //'#FFCAA0'
|
|
16
|
-
const illuminateStopColor3 = canvas_tokens_web_1.base.orange200; //'#FFCA79'
|
|
17
|
-
const illuminateStopColor4 = canvas_tokens_web_1.base.amber200; //'#FDCA44'
|
|
18
|
-
const illuminateStopColor5 = canvas_tokens_web_1.base.amber300; //'#FFB74D';
|
|
19
|
-
/**
|
|
20
|
-
* Box shadow glow colors
|
|
21
|
-
*/
|
|
22
|
-
const glowEraser = canvas_tokens_web_1.base.magenta200; //'#FFC2FD';
|
|
23
|
-
const glowHighlighter = canvas_tokens_web_1.base.amber100; //'#FFF3A8';
|
|
24
|
-
const glowLunchBreak = canvas_tokens_web_1.base.amber300; //'#FEC10B';
|
|
25
|
-
const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
26
|
-
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
|
-
exports.AIAssistantIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
|
-
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "18pjyo", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
30
|
-
modifiers: {
|
|
31
|
-
variant: {
|
|
32
|
-
inverse: { name: "2pfa2e", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
33
|
-
},
|
|
34
|
-
toggled: {
|
|
35
|
-
true: { name: "3s1rc", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
36
|
-
false: { name: "22893x", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
compound: [
|
|
40
|
-
{
|
|
41
|
-
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
-
styles: { name: "1ibu72", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
43
|
-
}
|
|
44
|
-
]
|
|
45
|
-
}, "a-i-assistant-ingress-button-9a9b1c");
|
|
46
|
-
exports.AIAssistantIngressButton = (0, common_1.createComponent)('button')({
|
|
47
|
-
displayName: 'AIAssistantIngressButton',
|
|
48
|
-
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
49
|
-
const svgGradientId = (0, common_1.useUniqueId)();
|
|
50
|
-
return ((0, jsx_runtime_1.jsx)(button_1.BaseButton, { ref: ref, as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
|
|
51
|
-
(0, exports.AIAssistantIngressButtonStencil)({ toggled, variant }),
|
|
52
|
-
{
|
|
53
|
-
[icon_1.systemIconStencil.vars.color]: `url(#${svgGradientId})`,
|
|
54
|
-
},
|
|
55
|
-
]), children: (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { size: "large", icon: (0, AIAssistantIngressIcon_1.getAIAssistantIngressIcon)(svgGradientId) }) }));
|
|
56
|
-
},
|
|
57
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AIAssistantIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-assistant-ingress-button/lib/AIAssistantIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,yBAAyB,UAAW,MAAM,KAAG,gBAiBzD,CAAC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getAIAssistantIngressIcon = void 0;
|
|
4
|
-
const design_assets_types_1 = require("@workday/design-assets-types");
|
|
5
|
-
const getAIAssistantIngressIcon = (svgId) => {
|
|
6
|
-
return {
|
|
7
|
-
name: 'aiAssistantIngressButton',
|
|
8
|
-
type: design_assets_types_1.CanvasIconTypes.System,
|
|
9
|
-
svg: `<svg class="wd-icon-ai-assistant-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
10
|
-
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
11
|
-
<stop />
|
|
12
|
-
<stop offset="0.25"/>
|
|
13
|
-
<stop offset="0.5"/>
|
|
14
|
-
<stop offset="0.75"/>
|
|
15
|
-
<stop offset="1"/>
|
|
16
|
-
</linearGradient>
|
|
17
|
-
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
18
|
-
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
19
|
-
</svg>`,
|
|
20
|
-
filename: 'wd-icon-ai-assistant-ingress-button.svg',
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
exports.getAIAssistantIngressIcon = getAIAssistantIngressIcon;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../ai-assistant-ingress-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
|
|
4
|
-
import { createStencil, handleCsProp, calc } from '@workday/canvas-kit-styling';
|
|
5
|
-
import { system, base } from '@workday/canvas-tokens-web';
|
|
6
|
-
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
7
|
-
import { getAIAssistantIngressIcon } from './AIAssistantIngressIcon';
|
|
8
|
-
/**
|
|
9
|
-
* Icon gradient colors
|
|
10
|
-
*/
|
|
11
|
-
const illuminateStopColor1 = base.red200; //'#FFA198'
|
|
12
|
-
const illuminateStopColor2 = base.orange200; //'#FFCAA0'
|
|
13
|
-
const illuminateStopColor3 = base.orange200; //'#FFCA79'
|
|
14
|
-
const illuminateStopColor4 = base.amber200; //'#FDCA44'
|
|
15
|
-
const illuminateStopColor5 = base.amber300; //'#FFB74D';
|
|
16
|
-
/**
|
|
17
|
-
* Box shadow glow colors
|
|
18
|
-
*/
|
|
19
|
-
const glowEraser = base.magenta200; //'#FFC2FD';
|
|
20
|
-
const glowHighlighter = base.amber100; //'#FFF3A8';
|
|
21
|
-
const glowLunchBreak = base.amber300; //'#FEC10B';
|
|
22
|
-
const glowHappyHour = base.orange400; //'#FD7E00';
|
|
23
|
-
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
|
-
export const AIAssistantIngressButtonStencil = createStencil({
|
|
25
|
-
extends: buttonStencil,
|
|
26
|
-
base: { name: "18pjyo", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
|
-
modifiers: {
|
|
28
|
-
variant: {
|
|
29
|
-
inverse: { name: "2pfa2e", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-assistant-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
|
-
},
|
|
31
|
-
toggled: {
|
|
32
|
-
true: { name: "3s1rc", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
-
false: { name: "22893x", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
compound: [
|
|
37
|
-
{
|
|
38
|
-
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
-
styles: { name: "1ibu72", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
|
-
}
|
|
41
|
-
]
|
|
42
|
-
}, "a-i-assistant-ingress-button-9a9b1c");
|
|
43
|
-
export const AIAssistantIngressButton = createComponent('button')({
|
|
44
|
-
displayName: 'AIAssistantIngressButton',
|
|
45
|
-
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
46
|
-
const svgGradientId = useUniqueId();
|
|
47
|
-
return (_jsx(BaseButton, { ref: ref, as: Element, ...handleCsProp(elemProps, [
|
|
48
|
-
AIAssistantIngressButtonStencil({ toggled, variant }),
|
|
49
|
-
{
|
|
50
|
-
[systemIconStencil.vars.color]: `url(#${svgGradientId})`,
|
|
51
|
-
},
|
|
52
|
-
]), children: _jsx(BaseButton.Icon, { size: "large", icon: getAIAssistantIngressIcon(svgGradientId) }) }));
|
|
53
|
-
},
|
|
54
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AIAssistantIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-assistant-ingress-button/lib/AIAssistantIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,yBAAyB,UAAW,MAAM,KAAG,gBAiBzD,CAAC"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { CanvasIconTypes } from '@workday/design-assets-types';
|
|
2
|
-
export const getAIAssistantIngressIcon = (svgId) => {
|
|
3
|
-
return {
|
|
4
|
-
name: 'aiAssistantIngressButton',
|
|
5
|
-
type: CanvasIconTypes.System,
|
|
6
|
-
svg: `<svg class="wd-icon-ai-assistant-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
7
|
-
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
8
|
-
<stop />
|
|
9
|
-
<stop offset="0.25"/>
|
|
10
|
-
<stop offset="0.5"/>
|
|
11
|
-
<stop offset="0.75"/>
|
|
12
|
-
<stop offset="1"/>
|
|
13
|
-
</linearGradient>
|
|
14
|
-
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
15
|
-
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
16
|
-
</svg>`,
|
|
17
|
-
filename: 'wd-icon-ai-assistant-ingress-button.svg',
|
|
18
|
-
};
|
|
19
|
-
};
|