@workday/canvas-kit-react 16.0.0-alpha.0485-next.0 → 16.0.0-alpha.0486-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/badge/lib/CountBadge.tsx +5 -8
- package/banner/lib/Banner.tsx +23 -16
- package/banner/lib/hooks/useBannerIcon.tsx +1 -1
- package/dist/commonjs/badge/lib/CountBadge.d.ts.map +1 -1
- package/dist/commonjs/badge/lib/CountBadge.js +5 -5
- package/dist/commonjs/banner/lib/Banner.d.ts +5 -1
- package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
- package/dist/commonjs/banner/lib/Banner.js +11 -7
- package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +1 -1
- package/dist/commonjs/banner/lib/hooks/useBannerIcon.js +1 -1
- package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +83 -13
- package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts.map +1 -1
- package/dist/commonjs/information-highlight/lib/InformationHighlight.js +28 -10
- package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +26 -5
- package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +1 -1
- package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.js +11 -1
- package/dist/commonjs/information-highlight/lib/parts/Body.d.ts +8 -1
- package/dist/commonjs/information-highlight/lib/parts/Body.d.ts.map +1 -1
- package/dist/commonjs/information-highlight/lib/parts/Body.js +16 -6
- package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts +8 -1
- package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts.map +1 -1
- package/dist/commonjs/information-highlight/lib/parts/Heading.js +16 -6
- package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +2 -1
- package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts.map +1 -1
- package/dist/commonjs/information-highlight/lib/parts/Icon.js +3 -2
- package/dist/commonjs/information-highlight/lib/parts/Link.d.ts +8 -1
- package/dist/commonjs/information-highlight/lib/parts/Link.d.ts.map +1 -1
- package/dist/commonjs/information-highlight/lib/parts/Link.js +16 -6
- package/dist/commonjs/pill/lib/Pill.d.ts +1 -11
- package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/Pill.js +3 -3
- package/dist/commonjs/pill/lib/PillIcon.js +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +2 -2
- package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.d.ts +10 -2
- package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.d.ts.map +1 -1
- package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js +3 -2
- package/dist/commonjs/skeleton/lib/parts/SkeletonShape.d.ts +16 -2
- package/dist/commonjs/skeleton/lib/parts/SkeletonShape.d.ts.map +1 -1
- package/dist/commonjs/skeleton/lib/parts/SkeletonShape.js +11 -3
- package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts +12 -3
- package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts.map +1 -1
- package/dist/commonjs/skeleton/lib/parts/SkeletonText.js +10 -5
- package/dist/es6/badge/lib/CountBadge.d.ts.map +1 -1
- package/dist/es6/badge/lib/CountBadge.js +5 -5
- package/dist/es6/banner/lib/Banner.d.ts +5 -1
- package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
- package/dist/es6/banner/lib/Banner.js +12 -8
- package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +1 -1
- package/dist/es6/banner/lib/hooks/useBannerIcon.js +1 -1
- package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +83 -13
- package/dist/es6/information-highlight/lib/InformationHighlight.d.ts.map +1 -1
- package/dist/es6/information-highlight/lib/InformationHighlight.js +30 -12
- package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +26 -5
- package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +1 -1
- package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.js +11 -1
- package/dist/es6/information-highlight/lib/parts/Body.d.ts +8 -1
- package/dist/es6/information-highlight/lib/parts/Body.d.ts.map +1 -1
- package/dist/es6/information-highlight/lib/parts/Body.js +17 -7
- package/dist/es6/information-highlight/lib/parts/Heading.d.ts +8 -1
- package/dist/es6/information-highlight/lib/parts/Heading.d.ts.map +1 -1
- package/dist/es6/information-highlight/lib/parts/Heading.js +17 -7
- package/dist/es6/information-highlight/lib/parts/Icon.d.ts +2 -1
- package/dist/es6/information-highlight/lib/parts/Icon.d.ts.map +1 -1
- package/dist/es6/information-highlight/lib/parts/Icon.js +4 -3
- package/dist/es6/information-highlight/lib/parts/Link.d.ts +8 -1
- package/dist/es6/information-highlight/lib/parts/Link.d.ts.map +1 -1
- package/dist/es6/information-highlight/lib/parts/Link.js +17 -7
- package/dist/es6/pill/lib/Pill.d.ts +1 -11
- package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
- package/dist/es6/pill/lib/Pill.js +3 -3
- package/dist/es6/pill/lib/PillIcon.js +1 -1
- package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillIconButton.js +3 -3
- package/dist/es6/skeleton/lib/parts/SkeletonHeader.d.ts +10 -2
- package/dist/es6/skeleton/lib/parts/SkeletonHeader.d.ts.map +1 -1
- package/dist/es6/skeleton/lib/parts/SkeletonHeader.js +4 -3
- package/dist/es6/skeleton/lib/parts/SkeletonShape.d.ts +16 -2
- package/dist/es6/skeleton/lib/parts/SkeletonShape.d.ts.map +1 -1
- package/dist/es6/skeleton/lib/parts/SkeletonShape.js +10 -2
- package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts +12 -3
- package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts.map +1 -1
- package/dist/es6/skeleton/lib/parts/SkeletonText.js +10 -5
- package/information-highlight/lib/InformationHighlight.tsx +67 -14
- package/information-highlight/lib/hooks/useInformationHighlightModel.ts +11 -1
- package/information-highlight/lib/parts/Body.tsx +32 -19
- package/information-highlight/lib/parts/Heading.tsx +32 -19
- package/information-highlight/lib/parts/Icon.tsx +4 -1
- package/information-highlight/lib/parts/Link.tsx +33 -18
- package/package.json +4 -4
- package/pill/lib/Pill.tsx +21 -23
- package/pill/lib/PillIcon.tsx +1 -1
- package/pill/lib/PillIconButton.tsx +21 -15
- package/skeleton/lib/parts/SkeletonHeader.tsx +5 -5
- package/skeleton/lib/parts/SkeletonShape.tsx +20 -3
- package/skeleton/lib/parts/SkeletonText.tsx +24 -14
|
@@ -1,17 +1,30 @@
|
|
|
1
1
|
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
2
|
interface InformationHighlightProps extends CSProps {
|
|
3
|
+
children?: React.ReactNode;
|
|
3
4
|
}
|
|
4
5
|
export declare const informationHighlightStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
6
|
+
default: {
|
|
7
|
+
low: {
|
|
8
|
+
backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
|
|
9
|
+
'& [data-part="information-highlight-icon"]': {
|
|
10
|
+
[x: string]: "--cnvs-sys-color-fg-default";
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
high: {
|
|
14
|
+
backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
|
|
15
|
+
'& [data-part="information-highlight-icon"]': {
|
|
16
|
+
[x: string]: "--cnvs-sys-color-fg-default";
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
};
|
|
5
20
|
informational: {
|
|
6
21
|
low: {
|
|
7
|
-
borderInlineStartColor: "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))";
|
|
8
22
|
backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
|
|
9
23
|
'& [data-part="information-highlight-icon"]': {
|
|
10
24
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))";
|
|
11
25
|
};
|
|
12
26
|
};
|
|
13
27
|
high: {
|
|
14
|
-
borderInlineStartColor: "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))";
|
|
15
28
|
backgroundColor: "var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)))";
|
|
16
29
|
'& [data-part="information-highlight-icon"]': {
|
|
17
30
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))";
|
|
@@ -20,14 +33,12 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
|
|
|
20
33
|
};
|
|
21
34
|
caution: {
|
|
22
35
|
low: {
|
|
23
|
-
borderInlineStartColor: "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))";
|
|
24
36
|
backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
|
|
25
37
|
'& [data-part="information-highlight-icon"]': {
|
|
26
38
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))";
|
|
27
39
|
};
|
|
28
40
|
};
|
|
29
41
|
high: {
|
|
30
|
-
borderInlineStartColor: "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))";
|
|
31
42
|
backgroundColor: "var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)))";
|
|
32
43
|
'& [data-part="information-highlight-icon"]': {
|
|
33
44
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))";
|
|
@@ -36,41 +47,100 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
|
|
|
36
47
|
};
|
|
37
48
|
critical: {
|
|
38
49
|
low: {
|
|
39
|
-
borderInlineStartColor: "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))";
|
|
40
50
|
backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
|
|
41
51
|
'& [data-part="information-highlight-icon"]': {
|
|
42
52
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))";
|
|
43
53
|
};
|
|
44
54
|
};
|
|
45
55
|
high: {
|
|
46
|
-
borderInlineStartColor: "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))";
|
|
47
56
|
backgroundColor: "var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04))";
|
|
48
57
|
'& [data-part="information-highlight-icon"]': {
|
|
49
58
|
[x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))";
|
|
50
59
|
};
|
|
51
60
|
};
|
|
52
61
|
};
|
|
53
|
-
|
|
62
|
+
actionPlacement: {
|
|
63
|
+
bottom: {};
|
|
64
|
+
end: {
|
|
65
|
+
width: string;
|
|
66
|
+
minWidth: number;
|
|
67
|
+
containerType: string;
|
|
68
|
+
gridTemplateColumns: string;
|
|
69
|
+
gridTemplateAreas: string;
|
|
70
|
+
'& [data-part="information-highlight-icon"]': {
|
|
71
|
+
gridArea: string;
|
|
72
|
+
alignSelf: string;
|
|
73
|
+
};
|
|
74
|
+
'& [data-part="information-highlight-heading"]': {
|
|
75
|
+
gridArea: string;
|
|
76
|
+
};
|
|
77
|
+
'& [data-part="information-highlight-body"]': {
|
|
78
|
+
gridArea: string;
|
|
79
|
+
};
|
|
80
|
+
'& [data-part="information-highlight-link"]': {
|
|
81
|
+
gridArea: string;
|
|
82
|
+
justifySelf: string;
|
|
83
|
+
marginBlockStart: "var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem))";
|
|
84
|
+
};
|
|
85
|
+
'@container (min-width: 28rem)': {
|
|
86
|
+
gridTemplateColumns: string;
|
|
87
|
+
gridTemplateAreas: string;
|
|
88
|
+
'& [data-part="information-highlight-link"]': {
|
|
89
|
+
alignSelf: string;
|
|
90
|
+
marginBlockStart: number;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
|
|
96
|
+
shape: string;
|
|
97
|
+
}, never>, {}, {
|
|
98
|
+
shape: string;
|
|
99
|
+
}, never, never>, never>;
|
|
54
100
|
export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
|
|
55
|
-
variant: "caution" | "critical" | "informational";
|
|
101
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
56
102
|
emphasis: "high" | "low";
|
|
103
|
+
actionPlacement: "bottom" | "end";
|
|
57
104
|
}> & {} & {}, {
|
|
58
105
|
state: {
|
|
59
|
-
variant: "caution" | "critical" | "informational";
|
|
106
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
60
107
|
emphasis: "high" | "low";
|
|
108
|
+
actionPlacement: "bottom" | "end";
|
|
61
109
|
};
|
|
62
110
|
events: {};
|
|
63
111
|
}> & {
|
|
64
112
|
Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
|
|
65
113
|
state: {
|
|
66
|
-
variant: "caution" | "critical" | "informational";
|
|
114
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
115
|
+
emphasis: "high" | "low";
|
|
116
|
+
actionPlacement: "bottom" | "end";
|
|
117
|
+
};
|
|
118
|
+
events: {};
|
|
119
|
+
}>;
|
|
120
|
+
Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h3", import("./parts/Heading").InformationHighlightHeadingProps, {
|
|
121
|
+
state: {
|
|
122
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
123
|
+
emphasis: "high" | "low";
|
|
124
|
+
actionPlacement: "bottom" | "end";
|
|
125
|
+
};
|
|
126
|
+
events: {};
|
|
127
|
+
}>;
|
|
128
|
+
Body: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").TextProps, {
|
|
129
|
+
state: {
|
|
130
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
131
|
+
emphasis: "high" | "low";
|
|
132
|
+
actionPlacement: "bottom" | "end";
|
|
133
|
+
};
|
|
134
|
+
events: {};
|
|
135
|
+
}>;
|
|
136
|
+
Link: import("@workday/canvas-kit-react/common").ElementComponentM<"a", import("../..").HyperlinkProps, {
|
|
137
|
+
state: {
|
|
138
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
67
139
|
emphasis: "high" | "low";
|
|
140
|
+
actionPlacement: "bottom" | "end";
|
|
68
141
|
};
|
|
69
142
|
events: {};
|
|
70
143
|
}>;
|
|
71
|
-
Heading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", import("./parts/Heading").InformationHighlightHeadingProps>;
|
|
72
|
-
Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../..").TextProps>;
|
|
73
|
-
Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("../..").HyperlinkProps>;
|
|
74
144
|
};
|
|
75
145
|
export {};
|
|
76
146
|
//# sourceMappingURL=InformationHighlight.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AASzF,UAAU,yBAA0B,SAAQ,OAAO;
|
|
1
|
+
{"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AASzF,UAAU,yBAA0B,SAAQ,OAAO;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgHtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuB/B,CAAC"}
|
|
@@ -1,30 +1,45 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContainer } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { cornerShapeStencil, createContainer } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
4
4
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
5
|
-
import {
|
|
5
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { useInformationHighlightModel } from './hooks/useInformationHighlightModel';
|
|
7
7
|
import { Body } from './parts/Body';
|
|
8
8
|
import { InformationHighlightHeading } from './parts/Heading';
|
|
9
9
|
import { Icon } from './parts/Icon';
|
|
10
10
|
import { Link } from './parts/Link';
|
|
11
|
+
const defaultVariantStyles = {
|
|
12
|
+
backgroundColor: system.legacy.color.surface.alt.default,
|
|
13
|
+
'& [data-part="information-highlight-icon"]': {
|
|
14
|
+
[systemIconStencil.vars.color]: system.color.fg.default,
|
|
15
|
+
},
|
|
16
|
+
};
|
|
11
17
|
export const informationHighlightStencil = createStencil({
|
|
12
|
-
|
|
18
|
+
extends: cornerShapeStencil,
|
|
19
|
+
base: { name: "397viu", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;gap:0 0.75rem;padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));outline:0.0625rem solid transparent;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));" },
|
|
13
20
|
modifiers: {
|
|
21
|
+
default: {
|
|
22
|
+
low: defaultVariantStyles,
|
|
23
|
+
high: defaultVariantStyles
|
|
24
|
+
},
|
|
14
25
|
informational: {
|
|
15
|
-
low: { name: "
|
|
16
|
-
high: { name: "
|
|
26
|
+
low: { name: "1ic6ql", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" },
|
|
27
|
+
high: { name: "1ai682", styles: "background-color:var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" }
|
|
17
28
|
},
|
|
18
29
|
caution: {
|
|
19
|
-
low: { name: "
|
|
20
|
-
high: { name: "
|
|
30
|
+
low: { name: "432crp", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" },
|
|
31
|
+
high: { name: "qaivq", styles: "background-color:var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" }
|
|
21
32
|
},
|
|
22
33
|
critical: {
|
|
23
|
-
low: { name: "
|
|
24
|
-
high: { name: "
|
|
34
|
+
low: { name: "228ks8", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" },
|
|
35
|
+
high: { name: "1qmpm8", styles: "background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" }
|
|
36
|
+
},
|
|
37
|
+
actionPlacement: {
|
|
38
|
+
bottom: { name: "qfe7l", styles: "" },
|
|
39
|
+
end: { name: "u9iuc", styles: "width:100%;min-width:0;container-type:inline-size;grid-template-columns:min-content minmax(0, 1fr);grid-template-areas:\n \"icon heading\"\n \"icon body\"\n \"icon link\"\n ;& [data-part=\"information-highlight-icon\"]{grid-area:icon;align-self:start;}& [data-part=\"information-highlight-heading\"]{grid-area:heading;}& [data-part=\"information-highlight-body\"]{grid-area:body;}& [data-part=\"information-highlight-link\"]{grid-area:link;justify-self:end;margin-block-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));}@container (min-width: 28rem){grid-template-columns:min-content minmax(0, 1fr) minmax(0, max-content);grid-template-areas:\n \"icon heading link\"\n \"icon body link\"\n ;& [data-part=\"information-highlight-link\"]{align-self:center;margin-block-start:0;}}" }
|
|
25
40
|
}
|
|
26
41
|
}
|
|
27
|
-
}, "information-highlight-
|
|
42
|
+
}, "information-highlight-ad98bb");
|
|
28
43
|
export const InformationHighlight = createContainer('section')({
|
|
29
44
|
displayName: 'InformationHighlight',
|
|
30
45
|
modelHook: useInformationHighlightModel,
|
|
@@ -34,6 +49,9 @@ export const InformationHighlight = createContainer('section')({
|
|
|
34
49
|
Body: Body,
|
|
35
50
|
Link: Link,
|
|
36
51
|
},
|
|
37
|
-
})(({ ...elemProps }, Element, model) => {
|
|
38
|
-
return (_jsx(Element, { ...handleCsProp(elemProps, informationHighlightStencil({
|
|
52
|
+
})(({ children, ...elemProps }, Element, model) => {
|
|
53
|
+
return (_jsx(Element, { ...handleCsProp(elemProps, informationHighlightStencil({
|
|
54
|
+
[model.state.variant]: model.state.emphasis,
|
|
55
|
+
actionPlacement: model.state.actionPlacement,
|
|
56
|
+
})), children: children }));
|
|
39
57
|
});
|
|
@@ -1,22 +1,43 @@
|
|
|
1
1
|
export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
2
|
-
variant: "caution" | "critical" | "informational";
|
|
2
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
3
3
|
emphasis: "high" | "low";
|
|
4
|
+
/**
|
|
5
|
+
* Controls where `InformationHighlight.Link` is placed relative to heading and body.
|
|
6
|
+
* - `bottom` (default): link stacks below heading and body.
|
|
7
|
+
* - `end`: link is visually placed at the inline end beside content when the container is wide
|
|
8
|
+
* enough; in narrower containers it stacks below the body. Placement uses CSS Grid
|
|
9
|
+
* only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
|
|
10
|
+
* @default 'bottom'
|
|
11
|
+
*/
|
|
12
|
+
actionPlacement: "bottom" | "end";
|
|
4
13
|
}> & {} & {}) | undefined) => {
|
|
5
14
|
state: {
|
|
6
|
-
variant: "caution" | "critical" | "informational";
|
|
15
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
7
16
|
emphasis: "high" | "low";
|
|
17
|
+
actionPlacement: "bottom" | "end";
|
|
8
18
|
};
|
|
9
19
|
events: {};
|
|
10
20
|
}) & import("@workday/canvas-kit-react/common").ModelExtras<{
|
|
11
|
-
variant: "caution" | "critical" | "informational";
|
|
21
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
12
22
|
emphasis: "high" | "low";
|
|
23
|
+
/**
|
|
24
|
+
* Controls where `InformationHighlight.Link` is placed relative to heading and body.
|
|
25
|
+
* - `bottom` (default): link stacks below heading and body.
|
|
26
|
+
* - `end`: link is visually placed at the inline end beside content when the container is wide
|
|
27
|
+
* enough; in narrower containers it stacks below the body. Placement uses CSS Grid
|
|
28
|
+
* only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
|
|
29
|
+
* @default 'bottom'
|
|
30
|
+
*/
|
|
31
|
+
actionPlacement: "bottom" | "end";
|
|
13
32
|
}, {}, {
|
|
14
|
-
variant: "caution" | "critical" | "informational";
|
|
33
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
15
34
|
emphasis: "high" | "low";
|
|
35
|
+
actionPlacement: "bottom" | "end";
|
|
16
36
|
}, {}, {
|
|
17
37
|
state: {
|
|
18
|
-
variant: "caution" | "critical" | "informational";
|
|
38
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
19
39
|
emphasis: "high" | "low";
|
|
40
|
+
actionPlacement: "bottom" | "end";
|
|
20
41
|
};
|
|
21
42
|
events: {};
|
|
22
43
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B
|
|
1
|
+
{"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B;;;IAIrC;;;;;;;OAOG;;;;;;;;;;;;IAPH;;;;;;;OAOG;;;;;;;;;;;;;EAYL,CAAC"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import { createModelHook } from '@workday/canvas-kit-react/common';
|
|
2
2
|
export const useInformationHighlightModel = createModelHook({
|
|
3
3
|
defaultConfig: {
|
|
4
|
-
variant: '
|
|
4
|
+
variant: 'default',
|
|
5
5
|
emphasis: 'low',
|
|
6
|
+
/**
|
|
7
|
+
* Controls where `InformationHighlight.Link` is placed relative to heading and body.
|
|
8
|
+
* - `bottom` (default): link stacks below heading and body.
|
|
9
|
+
* - `end`: link is visually placed at the inline end beside content when the container is wide
|
|
10
|
+
* enough; in narrower containers it stacks below the body. Placement uses CSS Grid
|
|
11
|
+
* only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
|
|
12
|
+
* @default 'bottom'
|
|
13
|
+
*/
|
|
14
|
+
actionPlacement: 'bottom',
|
|
6
15
|
},
|
|
7
16
|
})(config => {
|
|
8
17
|
return {
|
|
9
18
|
state: {
|
|
10
19
|
variant: config.variant,
|
|
11
20
|
emphasis: config.emphasis,
|
|
21
|
+
actionPlacement: config.actionPlacement,
|
|
12
22
|
},
|
|
13
23
|
events: {},
|
|
14
24
|
};
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
export declare const Body: import("@workday/canvas-kit-react/common").
|
|
1
|
+
export declare const Body: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-react/text").TextProps, {
|
|
2
|
+
state: {
|
|
3
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
4
|
+
emphasis: "high" | "low";
|
|
5
|
+
actionPlacement: "bottom" | "end";
|
|
6
|
+
};
|
|
7
|
+
events: {};
|
|
8
|
+
}>;
|
|
2
9
|
//# sourceMappingURL=Body.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,IAAI;;;;;;;EAcf,CAAC"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { Text } from '@workday/canvas-kit-react/text';
|
|
4
4
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
|
|
6
7
|
const informationHighlightBodyStencil = createStencil({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export const Body = createComponent('div')({
|
|
10
|
-
displayName: 'Body',
|
|
11
|
-
Component: ({ ...elemProps }, ref, Element) => {
|
|
12
|
-
return (_jsx(Text, { as: Element, ref: ref, ...handleCsProp(elemProps, informationHighlightBodyStencil()) }));
|
|
8
|
+
parts: {
|
|
9
|
+
body: 'information-highlight-body',
|
|
13
10
|
},
|
|
11
|
+
base: { name: "3p0bg5", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);color:var(--cnvs-sys-color-fg-muted-default);margin-block-end:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" },
|
|
12
|
+
modifiers: {
|
|
13
|
+
actionPlacement: {
|
|
14
|
+
bottom: { name: "27df9y", styles: "grid-column:2;" },
|
|
15
|
+
end: { name: "42blca", styles: "margin-block-end:0;" }
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}, "information-highlight-body-41e02e");
|
|
19
|
+
export const Body = createSubcomponent('div')({
|
|
20
|
+
displayName: 'Body',
|
|
21
|
+
modelHook: useInformationHighlightModel,
|
|
22
|
+
})(({ ...elemProps }, Element, model) => {
|
|
23
|
+
return (_jsx(Text, { as: Element, ...informationHighlightBodyStencil.parts.body, ...handleCsProp(elemProps, informationHighlightBodyStencil({ actionPlacement: model.state.actionPlacement })) }));
|
|
14
24
|
});
|
|
@@ -2,5 +2,12 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
|
2
2
|
import { Heading } from '@workday/canvas-kit-react/text';
|
|
3
3
|
export interface InformationHighlightHeadingProps extends Partial<ExtractProps<typeof Heading, never>> {
|
|
4
4
|
}
|
|
5
|
-
export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").
|
|
5
|
+
export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").ElementComponentM<"h3", InformationHighlightHeadingProps, {
|
|
6
|
+
state: {
|
|
7
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
8
|
+
emphasis: "high" | "low";
|
|
9
|
+
actionPlacement: "bottom" | "end";
|
|
10
|
+
};
|
|
11
|
+
events: {};
|
|
12
|
+
}>;
|
|
6
13
|
//# sourceMappingURL=Heading.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AA6BvD,MAAM,WAAW,gCACf,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC;CAAG;AAEzD,eAAO,MAAM,2BAA2B;;;;;;;EAetC,CAAC"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { Heading } from '@workday/canvas-kit-react/text';
|
|
4
4
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
|
|
6
7
|
const informationHighlightHeadingStencil = createStencil({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export const InformationHighlightHeading = createComponent('h3')({
|
|
10
|
-
displayName: 'Heading',
|
|
11
|
-
Component: ({ size = 'small', ...elemProps }, ref, Element) => {
|
|
12
|
-
return (_jsx(Heading, { as: Element, ref: ref, size: size, ...handleCsProp(elemProps, informationHighlightHeadingStencil()) }));
|
|
8
|
+
parts: {
|
|
9
|
+
heading: 'information-highlight-heading',
|
|
13
10
|
},
|
|
11
|
+
base: { name: "44cies", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);color:var(--cnvs-sys-color-fg-strong);margin:0;margin-block-end:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
|
|
12
|
+
modifiers: {
|
|
13
|
+
actionPlacement: {
|
|
14
|
+
bottom: { name: "1n5jqu", styles: "grid-column:2;" },
|
|
15
|
+
end: { name: "2ajbn3", styles: "" }
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}, "information-highlight-heading-109fd6");
|
|
19
|
+
export const InformationHighlightHeading = createSubcomponent('h3')({
|
|
20
|
+
displayName: 'Heading',
|
|
21
|
+
modelHook: useInformationHighlightModel,
|
|
22
|
+
})(({ size = 'small', ...elemProps }, Element, model) => {
|
|
23
|
+
return (_jsx(Heading, { as: Element, size: size, ...informationHighlightHeadingStencil.parts.heading, ...handleCsProp(elemProps, informationHighlightHeadingStencil({ actionPlacement: model.state.actionPlacement })) }));
|
|
14
24
|
});
|
|
@@ -4,8 +4,9 @@ export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never
|
|
|
4
4
|
}
|
|
5
5
|
export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
|
|
6
6
|
state: {
|
|
7
|
-
variant: "caution" | "critical" | "informational";
|
|
7
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
8
8
|
emphasis: "high" | "low";
|
|
9
|
+
actionPlacement: "bottom" | "end";
|
|
9
10
|
};
|
|
10
11
|
events: {};
|
|
11
12
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAU1D,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;CAAG;AAQrF,eAAO,MAAM,IAAI;;;;;;;EAaf,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
4
|
-
import { exclamationCircleIcon, exclamationTriangleIcon, infoIcon, } from '@workday/canvas-system-icons-web';
|
|
4
|
+
import { exclamationCircleIcon, exclamationTriangleIcon, infoIcon, layersIcon, } from '@workday/canvas-system-icons-web';
|
|
5
5
|
import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
|
|
6
6
|
const defaultIcons = {
|
|
7
|
+
default: layersIcon,
|
|
7
8
|
informational: infoIcon,
|
|
8
9
|
caution: exclamationTriangleIcon,
|
|
9
10
|
critical: exclamationCircleIcon,
|
|
@@ -11,6 +12,6 @@ const defaultIcons = {
|
|
|
11
12
|
export const Icon = createSubcomponent('span')({
|
|
12
13
|
displayName: 'Icon',
|
|
13
14
|
modelHook: useInformationHighlightModel,
|
|
14
|
-
})(({ icon, ...props }, Element, model) => {
|
|
15
|
-
return (_jsx(SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], "data-part": "information-highlight-icon", ...props }));
|
|
15
|
+
})(({ icon, size = 'md', ...props }, Element, model) => {
|
|
16
|
+
return (_jsx(SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], size: size, "data-part": "information-highlight-icon", ...props }));
|
|
16
17
|
});
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
export declare const Link: import("@workday/canvas-kit-react/common").
|
|
1
|
+
export declare const Link: import("@workday/canvas-kit-react/common").ElementComponentM<"a", import("@workday/canvas-kit-react/button").HyperlinkProps, {
|
|
2
|
+
state: {
|
|
3
|
+
variant: "caution" | "default" | "critical" | "informational";
|
|
4
|
+
emphasis: "high" | "low";
|
|
5
|
+
actionPlacement: "bottom" | "end";
|
|
6
|
+
};
|
|
7
|
+
events: {};
|
|
8
|
+
}>;
|
|
2
9
|
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"AA+BA,eAAO,MAAM,IAAI;;;;;;;EAef,CAAC"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Hyperlink } from '@workday/canvas-kit-react/button';
|
|
3
|
-
import {
|
|
3
|
+
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
4
4
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
|
|
6
7
|
const informationHighlightLinkStencil = createStencil({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export const Link = createComponent('a')({
|
|
10
|
-
displayName: 'Link',
|
|
11
|
-
Component: ({ ...elemProps }, ref, Element) => {
|
|
12
|
-
return (_jsx(Hyperlink, { as: Element, ref: ref, ...handleCsProp(elemProps, informationHighlightLinkStencil()) }));
|
|
8
|
+
parts: {
|
|
9
|
+
link: 'information-highlight-link',
|
|
13
10
|
},
|
|
11
|
+
base: { name: "3n3dpi", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);color:var(--cnvs-sys-color-fg-default);" },
|
|
12
|
+
modifiers: {
|
|
13
|
+
actionPlacement: {
|
|
14
|
+
bottom: { name: "46odf0", styles: "grid-column:2;justify-self:start;" },
|
|
15
|
+
end: { name: "188vb8", styles: "margin:0;max-width:100%;" }
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}, "information-highlight-link-56e571");
|
|
19
|
+
export const Link = createSubcomponent('a')({
|
|
20
|
+
displayName: 'Link',
|
|
21
|
+
modelHook: useInformationHighlightModel,
|
|
22
|
+
})(({ ...elemProps }, Element, model) => {
|
|
23
|
+
return (_jsx(Hyperlink, { as: Element, ...informationHighlightLinkStencil.parts.link, ...handleCsProp(elemProps, informationHighlightLinkStencil({ actionPlacement: model.state.actionPlacement })), variant: "secondary" }));
|
|
14
24
|
});
|
|
@@ -71,17 +71,7 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
|
|
|
71
71
|
medium: {
|
|
72
72
|
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
|
|
73
73
|
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
|
|
74
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
|
|
75
|
-
* This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
|
|
76
|
-
* providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
|
|
77
|
-
*
|
|
78
|
-
* ```tsx
|
|
79
|
-
* <Pill onClick={() => console.warn('clicked')}>
|
|
80
|
-
* <Pill.Icon aria-label='Add user' />
|
|
81
|
-
* <Pill.Label>Regina Skeltor</Pill.Label>
|
|
82
|
-
* </Pill>
|
|
83
|
-
* ```
|
|
84
|
-
*/
|
|
74
|
+
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
|
|
85
75
|
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
|
|
86
76
|
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
|
|
87
77
|
gap: "var(--cnvs-base-size-75, 0.375rem)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuItB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}
|
|
@@ -16,11 +16,11 @@ export const pillStencil = createStencil({
|
|
|
16
16
|
vars: {
|
|
17
17
|
maxWidth: '',
|
|
18
18
|
},
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "32jtf8", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));position:relative;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:var(--maxWidth-pill-4e10dd);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0392 * 100%));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0745 * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--color-system-icon-c9acc3:currentColor;box-shadow:0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--borderColor-pill-count-d41635:transparent;}" },
|
|
20
20
|
modifiers: {
|
|
21
21
|
variant: {
|
|
22
|
-
readOnly: { name: "
|
|
23
|
-
removable: { name: "
|
|
22
|
+
readOnly: { name: "3lsndq", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));cursor:default;--background-button-a19f67:var(--cnvs-sys-color-bg-default);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}" },
|
|
23
|
+
removable: { name: "1ldmjv", styles: "&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0392 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0745 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
}, "pill-4e10dd");
|
|
@@ -8,7 +8,7 @@ import { component, system } from '@workday/canvas-tokens-web';
|
|
|
8
8
|
import { usePillModel } from './usePillModel';
|
|
9
9
|
export const pillIconStencil = createStencil({
|
|
10
10
|
extends: systemIconStencil,
|
|
11
|
-
base: { name: "81wkb", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);--size-svg-bca693:var(--cnvs-component-system-icon-size-
|
|
11
|
+
base: { name: "81wkb", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));flex:0 0 auto;" }
|
|
12
12
|
}, "pill-icon-ded2a2");
|
|
13
13
|
export const PillIcon = createSubcomponent('span')({
|
|
14
14
|
modelHook: usePillModel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAkDhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
|