@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
package/badge/lib/CountBadge.tsx
CHANGED
|
@@ -44,16 +44,13 @@ const countBadgeStencil = createStencil({
|
|
|
44
44
|
animation: `${grow} 0.2s ease`,
|
|
45
45
|
borderRadius: system.legacy.shape.full,
|
|
46
46
|
display: 'inline-flex',
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
fontWeight: system.fontWeight.bold,
|
|
47
|
+
...system.legacy.type.subtext.md,
|
|
48
|
+
fontWeight: system.fontWeight.medium,
|
|
50
49
|
height: px2rem(20),
|
|
51
50
|
justifyContent: 'center',
|
|
52
|
-
lineHeight: system.legacy.lineHeight.subtext.lg,
|
|
53
|
-
letterSpacing: system.legacy.letterSpacing.subtext.md,
|
|
54
51
|
minWidth: system.legacy.size.xxs,
|
|
55
|
-
padding: `0 ${
|
|
56
|
-
background: system.legacy.color.accent.
|
|
52
|
+
padding: `0 ${system.legacy.padding.xxs}`,
|
|
53
|
+
background: system.legacy.color.brand.accent.primary,
|
|
57
54
|
color: system.color.fg.inverse,
|
|
58
55
|
},
|
|
59
56
|
modifiers: {
|
|
@@ -61,7 +58,7 @@ const countBadgeStencil = createStencil({
|
|
|
61
58
|
// .cnvs-count-badge--variant-inverse
|
|
62
59
|
inverse: {
|
|
63
60
|
background: system.legacy.color.surface.inverse,
|
|
64
|
-
color: system.
|
|
61
|
+
color: system.color.fg.strong,
|
|
65
62
|
},
|
|
66
63
|
},
|
|
67
64
|
emphasis: {
|
package/banner/lib/Banner.tsx
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
ExtractProps,
|
|
5
|
+
cornerShapeStencil,
|
|
6
|
+
createContainer,
|
|
7
|
+
focusRing,
|
|
8
|
+
} from '@workday/canvas-kit-react/common';
|
|
4
9
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
5
10
|
import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
6
11
|
import {colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
|
|
@@ -19,30 +24,29 @@ export interface BannerProps extends ExtractProps<typeof Flex, never> {
|
|
|
19
24
|
}
|
|
20
25
|
|
|
21
26
|
export const bannerStencil = createStencil({
|
|
27
|
+
extends: cornerShapeStencil,
|
|
22
28
|
base: {
|
|
23
29
|
// TODO: Need to update fontFamily token [#3221](https://github.com/Workday/canvas-kit/issues/3221).
|
|
24
30
|
fontFamily: `${system.fontFamily.default}, Helvetica Neue, Helvetica, Arial, sans-serif`,
|
|
25
|
-
fontWeight: system.fontWeight.
|
|
31
|
+
fontWeight: system.fontWeight.bold,
|
|
26
32
|
lineHeight: system.legacy.lineHeight.subtext.lg,
|
|
27
33
|
fontSize: system.legacy.fontSize.subtext.lg,
|
|
28
34
|
letterSpacing: system.legacy.letterSpacing.subtext.lg,
|
|
29
|
-
|
|
35
|
+
paddingInline: `${system.legacy.padding.sm} ${system.legacy.padding.md}`,
|
|
36
|
+
paddingBlock: px2rem(10),
|
|
30
37
|
border: '0',
|
|
31
38
|
display: 'flex',
|
|
32
39
|
alignItems: 'center',
|
|
33
40
|
textAlign: 'left',
|
|
34
|
-
|
|
35
|
-
borderStartEndRadius: system.legacy.shape.sm,
|
|
36
|
-
borderEndStartRadius: system.legacy.shape.sm,
|
|
37
|
-
borderEndEndRadius: system.legacy.shape.sm,
|
|
38
|
-
boxShadow: system.depth[5],
|
|
41
|
+
[cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
|
|
39
42
|
gap: system.legacy.gap.sm,
|
|
40
43
|
cursor: 'pointer',
|
|
41
44
|
transition: 'background-color 120ms linear',
|
|
42
45
|
outline: `${system.legacy.gap.xs} solid transparent`,
|
|
46
|
+
boxShadow: system.depth[5],
|
|
43
47
|
'&:focus-visible, &.focus': {
|
|
44
48
|
outline: `${system.legacy.gap.xs} double transparent`,
|
|
45
|
-
...focusRing({separation: 2}),
|
|
49
|
+
...focusRing({separation: 2, outerColor: system.legacy.color.brand.border.primary}),
|
|
46
50
|
},
|
|
47
51
|
},
|
|
48
52
|
modifiers: {
|
|
@@ -51,10 +55,10 @@ export const bannerStencil = createStencil({
|
|
|
51
55
|
backgroundColor: system.legacy.color.brand.accent.critical,
|
|
52
56
|
color: system.color.fg.inverse,
|
|
53
57
|
'&:hover, &.hover': {
|
|
54
|
-
background: colorSpace.
|
|
58
|
+
background: colorSpace.hover({
|
|
55
59
|
color: system.legacy.color.brand.accent.critical,
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
fallback: system.legacy.color.brand.accent.critical,
|
|
61
|
+
colorType: 'accent',
|
|
58
62
|
}),
|
|
59
63
|
},
|
|
60
64
|
'& [data-part="exclamation-circle-icon"]': {
|
|
@@ -67,10 +71,10 @@ export const bannerStencil = createStencil({
|
|
|
67
71
|
backgroundColor: system.legacy.color.brand.accent.caution,
|
|
68
72
|
color: system.color.fg.contrast.default,
|
|
69
73
|
'&:hover, &.hover': {
|
|
70
|
-
background: colorSpace.
|
|
74
|
+
background: colorSpace.hover({
|
|
71
75
|
color: system.legacy.color.brand.accent.caution,
|
|
72
|
-
|
|
73
|
-
|
|
76
|
+
fallback: system.legacy.color.brand.accent.caution,
|
|
77
|
+
colorType: 'accent',
|
|
74
78
|
}),
|
|
75
79
|
},
|
|
76
80
|
'& [data-part="exclamation-triangle-icon"]': {
|
|
@@ -162,7 +166,10 @@ export const Banner = createContainer('button')({
|
|
|
162
166
|
<Element
|
|
163
167
|
{...mergeStyles(
|
|
164
168
|
elemProps,
|
|
165
|
-
bannerStencil({
|
|
169
|
+
bannerStencil({
|
|
170
|
+
hasErrors: model.state.hasError ? 'true' : 'false',
|
|
171
|
+
isSticky: model.state.isSticky ? 'true' : 'false',
|
|
172
|
+
})
|
|
166
173
|
)}
|
|
167
174
|
>
|
|
168
175
|
{children}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6CD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
|
|
@@ -8,21 +8,21 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
8
8
|
const grow = (0, canvas_kit_styling_1.keyframes)({ name: "2wns1w", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
9
9
|
// .cnvs-count-badge
|
|
10
10
|
const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "43syuc", styles: "box-sizing:border-box;align-items:center;animation:animation-2wns1w 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;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-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);height:1.25rem;justify-content:center;min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));background:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
variant: {
|
|
14
14
|
// .cnvs-count-badge--variant-inverse
|
|
15
|
-
inverse: { name: "
|
|
15
|
+
inverse: { name: "2y791n", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);" }
|
|
16
16
|
},
|
|
17
17
|
emphasis: {
|
|
18
|
-
high: { name: "
|
|
19
|
-
low: { name: "
|
|
18
|
+
high: { name: "405v33", styles: "" },
|
|
19
|
+
low: { name: "1bgy87", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
22
|
compound: [
|
|
23
23
|
{
|
|
24
24
|
modifiers: { variant: 'inverse', emphasis: 'low' },
|
|
25
|
-
styles: { name: "
|
|
25
|
+
styles: { name: "13bf4h", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
26
26
|
}
|
|
27
27
|
]
|
|
28
28
|
}, "count-badge-524876");
|
|
@@ -40,7 +40,11 @@ export declare const bannerStencil: import("@workday/canvas-kit-styling").Stenci
|
|
|
40
40
|
width: string;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
}, {}, {},
|
|
43
|
+
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
|
|
44
|
+
shape: string;
|
|
45
|
+
}, never>, {}, {
|
|
46
|
+
shape: string;
|
|
47
|
+
}, never, never>, never>;
|
|
44
48
|
/**
|
|
45
49
|
* `Banner` is a container component rendered as a `<button>` element that is responsible for creating
|
|
46
50
|
* a `BannerModel` and sharing it with its subcomponents using React context.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AASnE,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CAiBL,CAAC"}
|
|
@@ -12,18 +12,19 @@ const BannerIcon_1 = require("./BannerIcon");
|
|
|
12
12
|
const BannerLabel_1 = require("./BannerLabel");
|
|
13
13
|
const hooks_1 = require("./hooks");
|
|
14
14
|
exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
15
|
-
|
|
15
|
+
extends: common_1.cornerShapeStencil,
|
|
16
|
+
base: { name: "2md52q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
|
|
16
17
|
modifiers: {
|
|
17
18
|
hasErrors: {
|
|
18
|
-
true: { name: "
|
|
19
|
-
false: { name: "
|
|
19
|
+
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
|
|
20
|
+
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
|
|
20
21
|
},
|
|
21
22
|
isSticky: {
|
|
22
|
-
true: { name: "
|
|
23
|
-
false: { name: "
|
|
23
|
+
true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
|
|
24
|
+
false: { name: "1bd139", styles: "width:20.5rem;" }
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
|
-
}, "banner-
|
|
27
|
+
}, "banner-5b2eb3");
|
|
27
28
|
/**
|
|
28
29
|
* `Banner` is a container component rendered as a `<button>` element that is responsible for creating
|
|
29
30
|
* a `BannerModel` and sharing it with its subcomponents using React context.
|
|
@@ -89,5 +90,8 @@ exports.Banner = (0, common_1.createContainer)('button')({
|
|
|
89
90
|
ActionText: BannerActionText_1.BannerActionText,
|
|
90
91
|
},
|
|
91
92
|
})(({ children, ...elemProps }, Element, model) => {
|
|
92
|
-
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.bannerStencil)({
|
|
93
|
+
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.bannerStencil)({
|
|
94
|
+
hasErrors: model.state.hasError ? 'true' : 'false',
|
|
95
|
+
isSticky: model.state.isSticky ? 'true' : 'false',
|
|
96
|
+
})), children: children }));
|
|
93
97
|
});
|
|
@@ -12,6 +12,6 @@ exports.useBannerIcon = (0, common_1.createElemPropsHook)(useBannerModel_1.useBa
|
|
|
12
12
|
const icon = state.hasError ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon;
|
|
13
13
|
return {
|
|
14
14
|
icon: icon,
|
|
15
|
-
size:
|
|
15
|
+
size: 20,
|
|
16
16
|
};
|
|
17
17
|
});
|
|
@@ -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"}
|
|
@@ -11,23 +11,38 @@ const Body_1 = require("./parts/Body");
|
|
|
11
11
|
const Heading_1 = require("./parts/Heading");
|
|
12
12
|
const Icon_1 = require("./parts/Icon");
|
|
13
13
|
const Link_1 = require("./parts/Link");
|
|
14
|
+
const defaultVariantStyles = {
|
|
15
|
+
backgroundColor: canvas_tokens_web_1.system.legacy.color.surface.alt.default,
|
|
16
|
+
'& [data-part="information-highlight-icon"]': {
|
|
17
|
+
[icon_1.systemIconStencil.vars.color]: canvas_tokens_web_1.system.color.fg.default,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
14
20
|
exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
15
|
-
|
|
21
|
+
extends: common_1.cornerShapeStencil,
|
|
22
|
+
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));" },
|
|
16
23
|
modifiers: {
|
|
24
|
+
default: {
|
|
25
|
+
low: defaultVariantStyles,
|
|
26
|
+
high: defaultVariantStyles
|
|
27
|
+
},
|
|
17
28
|
informational: {
|
|
18
|
-
low: { name: "
|
|
19
|
-
high: { name: "
|
|
29
|
+
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)));}" },
|
|
30
|
+
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)));}" }
|
|
20
31
|
},
|
|
21
32
|
caution: {
|
|
22
|
-
low: { name: "
|
|
23
|
-
high: { name: "
|
|
33
|
+
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));}" },
|
|
34
|
+
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));}" }
|
|
24
35
|
},
|
|
25
36
|
critical: {
|
|
26
|
-
low: { name: "
|
|
27
|
-
high: { name: "
|
|
37
|
+
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)));}" },
|
|
38
|
+
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)));}" }
|
|
39
|
+
},
|
|
40
|
+
actionPlacement: {
|
|
41
|
+
bottom: { name: "qfe7l", styles: "" },
|
|
42
|
+
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;}}" }
|
|
28
43
|
}
|
|
29
44
|
}
|
|
30
|
-
}, "information-highlight-
|
|
45
|
+
}, "information-highlight-ad98bb");
|
|
31
46
|
exports.InformationHighlight = (0, common_1.createContainer)('section')({
|
|
32
47
|
displayName: 'InformationHighlight',
|
|
33
48
|
modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
|
|
@@ -37,6 +52,9 @@ exports.InformationHighlight = (0, common_1.createContainer)('section')({
|
|
|
37
52
|
Body: Body_1.Body,
|
|
38
53
|
Link: Link_1.Link,
|
|
39
54
|
},
|
|
40
|
-
})(({ ...elemProps }, Element, model) => {
|
|
41
|
-
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.informationHighlightStencil)({
|
|
55
|
+
})(({ children, ...elemProps }, Element, model) => {
|
|
56
|
+
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.informationHighlightStencil)({
|
|
57
|
+
[model.state.variant]: model.state.emphasis,
|
|
58
|
+
actionPlacement: model.state.actionPlacement,
|
|
59
|
+
})), children: children }));
|
|
42
60
|
});
|
|
@@ -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"}
|
|
@@ -4,14 +4,24 @@ exports.useInformationHighlightModel = void 0;
|
|
|
4
4
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
5
|
exports.useInformationHighlightModel = (0, common_1.createModelHook)({
|
|
6
6
|
defaultConfig: {
|
|
7
|
-
variant: '
|
|
7
|
+
variant: 'default',
|
|
8
8
|
emphasis: 'low',
|
|
9
|
+
/**
|
|
10
|
+
* Controls where `InformationHighlight.Link` is placed relative to heading and body.
|
|
11
|
+
* - `bottom` (default): link stacks below heading and body.
|
|
12
|
+
* - `end`: link is visually placed at the inline end beside content when the container is wide
|
|
13
|
+
* enough; in narrower containers it stacks below the body. Placement uses CSS Grid
|
|
14
|
+
* only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
|
|
15
|
+
* @default 'bottom'
|
|
16
|
+
*/
|
|
17
|
+
actionPlacement: 'bottom',
|
|
9
18
|
},
|
|
10
19
|
})(config => {
|
|
11
20
|
return {
|
|
12
21
|
state: {
|
|
13
22
|
variant: config.variant,
|
|
14
23
|
emphasis: config.emphasis,
|
|
24
|
+
actionPlacement: config.actionPlacement,
|
|
15
25
|
},
|
|
16
26
|
events: {},
|
|
17
27
|
};
|
|
@@ -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"}
|
|
@@ -6,12 +6,22 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
6
6
|
const text_1 = require("@workday/canvas-kit-react/text");
|
|
7
7
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
8
8
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
9
|
+
const useInformationHighlightModel_1 = require("../hooks/useInformationHighlightModel");
|
|
9
10
|
const informationHighlightBodyStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
exports.Body = (0, common_1.createComponent)('div')({
|
|
13
|
-
displayName: 'Body',
|
|
14
|
-
Component: ({ ...elemProps }, ref, Element) => {
|
|
15
|
-
return ((0, jsx_runtime_1.jsx)(text_1.Text, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightBodyStencil()) }));
|
|
11
|
+
parts: {
|
|
12
|
+
body: 'information-highlight-body',
|
|
16
13
|
},
|
|
14
|
+
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));" },
|
|
15
|
+
modifiers: {
|
|
16
|
+
actionPlacement: {
|
|
17
|
+
bottom: { name: "27df9y", styles: "grid-column:2;" },
|
|
18
|
+
end: { name: "42blca", styles: "margin-block-end:0;" }
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}, "information-highlight-body-41e02e");
|
|
22
|
+
exports.Body = (0, common_1.createSubcomponent)('div')({
|
|
23
|
+
displayName: 'Body',
|
|
24
|
+
modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
|
|
25
|
+
})(({ ...elemProps }, Element, model) => {
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(text_1.Text, { as: Element, ...informationHighlightBodyStencil.parts.body, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightBodyStencil({ actionPlacement: model.state.actionPlacement })) }));
|
|
17
27
|
});
|