@workday/canvas-kit-react 16.0.0-alpha.0484-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.
Files changed (96) hide show
  1. package/badge/lib/CountBadge.tsx +5 -8
  2. package/banner/lib/Banner.tsx +23 -16
  3. package/banner/lib/hooks/useBannerIcon.tsx +1 -1
  4. package/dist/commonjs/badge/lib/CountBadge.d.ts.map +1 -1
  5. package/dist/commonjs/badge/lib/CountBadge.js +5 -5
  6. package/dist/commonjs/banner/lib/Banner.d.ts +5 -1
  7. package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
  8. package/dist/commonjs/banner/lib/Banner.js +11 -7
  9. package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +1 -1
  10. package/dist/commonjs/banner/lib/hooks/useBannerIcon.js +1 -1
  11. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +83 -13
  12. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts.map +1 -1
  13. package/dist/commonjs/information-highlight/lib/InformationHighlight.js +28 -10
  14. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +26 -5
  15. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +1 -1
  16. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.js +11 -1
  17. package/dist/commonjs/information-highlight/lib/parts/Body.d.ts +8 -1
  18. package/dist/commonjs/information-highlight/lib/parts/Body.d.ts.map +1 -1
  19. package/dist/commonjs/information-highlight/lib/parts/Body.js +16 -6
  20. package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts +8 -1
  21. package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts.map +1 -1
  22. package/dist/commonjs/information-highlight/lib/parts/Heading.js +16 -6
  23. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +2 -1
  24. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts.map +1 -1
  25. package/dist/commonjs/information-highlight/lib/parts/Icon.js +3 -2
  26. package/dist/commonjs/information-highlight/lib/parts/Link.d.ts +8 -1
  27. package/dist/commonjs/information-highlight/lib/parts/Link.d.ts.map +1 -1
  28. package/dist/commonjs/information-highlight/lib/parts/Link.js +16 -6
  29. package/dist/commonjs/pill/lib/Pill.d.ts +1 -11
  30. package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
  31. package/dist/commonjs/pill/lib/Pill.js +3 -3
  32. package/dist/commonjs/pill/lib/PillIcon.js +1 -1
  33. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
  34. package/dist/commonjs/pill/lib/PillIconButton.js +2 -2
  35. package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.d.ts +10 -2
  36. package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.d.ts.map +1 -1
  37. package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js +3 -2
  38. package/dist/commonjs/skeleton/lib/parts/SkeletonShape.d.ts +16 -2
  39. package/dist/commonjs/skeleton/lib/parts/SkeletonShape.d.ts.map +1 -1
  40. package/dist/commonjs/skeleton/lib/parts/SkeletonShape.js +11 -3
  41. package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts +12 -3
  42. package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts.map +1 -1
  43. package/dist/commonjs/skeleton/lib/parts/SkeletonText.js +10 -5
  44. package/dist/es6/badge/lib/CountBadge.d.ts.map +1 -1
  45. package/dist/es6/badge/lib/CountBadge.js +5 -5
  46. package/dist/es6/banner/lib/Banner.d.ts +5 -1
  47. package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
  48. package/dist/es6/banner/lib/Banner.js +12 -8
  49. package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +1 -1
  50. package/dist/es6/banner/lib/hooks/useBannerIcon.js +1 -1
  51. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +83 -13
  52. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts.map +1 -1
  53. package/dist/es6/information-highlight/lib/InformationHighlight.js +30 -12
  54. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +26 -5
  55. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +1 -1
  56. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.js +11 -1
  57. package/dist/es6/information-highlight/lib/parts/Body.d.ts +8 -1
  58. package/dist/es6/information-highlight/lib/parts/Body.d.ts.map +1 -1
  59. package/dist/es6/information-highlight/lib/parts/Body.js +17 -7
  60. package/dist/es6/information-highlight/lib/parts/Heading.d.ts +8 -1
  61. package/dist/es6/information-highlight/lib/parts/Heading.d.ts.map +1 -1
  62. package/dist/es6/information-highlight/lib/parts/Heading.js +17 -7
  63. package/dist/es6/information-highlight/lib/parts/Icon.d.ts +2 -1
  64. package/dist/es6/information-highlight/lib/parts/Icon.d.ts.map +1 -1
  65. package/dist/es6/information-highlight/lib/parts/Icon.js +4 -3
  66. package/dist/es6/information-highlight/lib/parts/Link.d.ts +8 -1
  67. package/dist/es6/information-highlight/lib/parts/Link.d.ts.map +1 -1
  68. package/dist/es6/information-highlight/lib/parts/Link.js +17 -7
  69. package/dist/es6/pill/lib/Pill.d.ts +1 -11
  70. package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
  71. package/dist/es6/pill/lib/Pill.js +3 -3
  72. package/dist/es6/pill/lib/PillIcon.js +1 -1
  73. package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
  74. package/dist/es6/pill/lib/PillIconButton.js +3 -3
  75. package/dist/es6/skeleton/lib/parts/SkeletonHeader.d.ts +10 -2
  76. package/dist/es6/skeleton/lib/parts/SkeletonHeader.d.ts.map +1 -1
  77. package/dist/es6/skeleton/lib/parts/SkeletonHeader.js +4 -3
  78. package/dist/es6/skeleton/lib/parts/SkeletonShape.d.ts +16 -2
  79. package/dist/es6/skeleton/lib/parts/SkeletonShape.d.ts.map +1 -1
  80. package/dist/es6/skeleton/lib/parts/SkeletonShape.js +10 -2
  81. package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts +12 -3
  82. package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts.map +1 -1
  83. package/dist/es6/skeleton/lib/parts/SkeletonText.js +10 -5
  84. package/information-highlight/lib/InformationHighlight.tsx +67 -14
  85. package/information-highlight/lib/hooks/useInformationHighlightModel.ts +11 -1
  86. package/information-highlight/lib/parts/Body.tsx +32 -19
  87. package/information-highlight/lib/parts/Heading.tsx +32 -19
  88. package/information-highlight/lib/parts/Icon.tsx +4 -1
  89. package/information-highlight/lib/parts/Link.tsx +33 -18
  90. package/package.json +5 -5
  91. package/pill/lib/Pill.tsx +21 -23
  92. package/pill/lib/PillIcon.tsx +1 -1
  93. package/pill/lib/PillIconButton.tsx +21 -15
  94. package/skeleton/lib/parts/SkeletonHeader.tsx +5 -5
  95. package/skeleton/lib/parts/SkeletonShape.tsx +20 -3
  96. 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
- fontFamily: system.fontFamily.default,
48
- fontSize: system.legacy.fontSize.subtext.md,
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 ${px2rem(6.5)}`,
56
- background: system.legacy.color.accent.danger,
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.legacy.color.fg.info.strong,
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 {ExtractProps, createContainer, focusRing} from '@workday/canvas-kit-react/common';
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.medium,
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
- padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,
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
- borderStartStartRadius: system.legacy.shape.sm,
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.darken({
58
+ background: colorSpace.hover({
55
59
  color: system.legacy.color.brand.accent.critical,
56
- mixinColor: system.legacy.color.accent.overlay.mixin,
57
- mixinValue: system.legacy.opacity.accent.hover,
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.darken({
74
+ background: colorSpace.hover({
71
75
  color: system.legacy.color.brand.accent.caution,
72
- mixinColor: system.legacy.color.accent.overlay.mixin,
73
- mixinValue: system.legacy.opacity.accent.hover,
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({hasErrors: model.state.hasError, isSticky: model.state.isSticky})
169
+ bannerStencil({
170
+ hasErrors: model.state.hasError ? 'true' : 'false',
171
+ isSticky: model.state.isSticky ? 'true' : 'false',
172
+ })
166
173
  )}
167
174
  >
168
175
  {children}
package/banner/lib/hooks/useBannerIcon.tsx CHANGED
@@ -13,6 +13,6 @@ export const useBannerIcon = createElemPropsHook(useBannerModel)(({state}) => {
13
13
 
14
14
  return {
15
15
  icon: icon as CanvasSystemIcon,
16
- size: 24,
16
+ size: 20,
17
17
  };
18
18
  });
package/dist/commonjs/badge/lib/CountBadge.d.ts.map CHANGED
@@ -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;AAgDD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
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"}
package/dist/commonjs/badge/lib/CountBadge.js CHANGED
@@ -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: "397246", 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);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 0.40625rem;background:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
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: "49jrld", 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-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
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: "4cpkxf", styles: "" },
19
- low: { name: "1csyfk", 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)));" }
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: "1k5xsi", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
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");
package/dist/commonjs/banner/lib/Banner.d.ts CHANGED
@@ -40,7 +40,11 @@ export declare const bannerStencil: import("@workday/canvas-kit-styling").Stenci
40
40
  width: string;
41
41
  };
42
42
  };
43
- }, {}, {}, never, never>;
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.
package/dist/commonjs/banner/lib/Banner.d.ts.map CHANGED
@@ -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,EAAC,YAAY,EAA6B,MAAM,kCAAkC,CAAC;AAE1F,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAIf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CAcL,CAAC"}
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"}
package/dist/commonjs/banner/lib/Banner.js CHANGED
@@ -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
- base: { name: "1ooz34", 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-medium);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:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));box-shadow:var(--cnvs-sys-depth-5);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;&: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-brand-common-focus-outline, rgba(8,117,225,1));}" },
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: "1yy13f", 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-mixin, oklch(0 0 0 / 1)) 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);}" },
19
- false: { name: "31cnpr", 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-mixin, oklch(0 0 0 / 1)) 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));}" }
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: "2hgqx3", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
23
- false: { name: "4be9bg", styles: "width:20.5rem;" }
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-1de0cd");
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)({ hasErrors: model.state.hasError, isSticky: model.state.isSticky })), children: children }));
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
  });
package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts CHANGED
@@ -12,6 +12,6 @@ export declare const useBannerIcon: import("@workday/canvas-kit-react/common").B
12
12
  events: {};
13
13
  }, {
14
14
  readonly icon: CanvasSystemIcon;
15
- readonly size: 24;
15
+ readonly size: 20;
16
16
  }>;
17
17
  //# sourceMappingURL=useBannerIcon.d.ts.map
package/dist/commonjs/banner/lib/hooks/useBannerIcon.js CHANGED
@@ -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: 24,
15
+ size: 20,
16
16
  };
17
17
  });
package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts CHANGED
@@ -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
- }, {}, {}, never, never>;
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
package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts.map CHANGED
@@ -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;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyEtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
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"}
package/dist/commonjs/information-highlight/lib/InformationHighlight.js CHANGED
@@ -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
- base: { name: "2ly4x1", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));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;border-inline-start:var(--cnvs-base-size-50, 0.25rem) solid transparent;" },
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: "3mlrml", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));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)));}" },
19
- high: { name: "3zd15a", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));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)));}" }
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: "490z9y", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));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));}" },
23
- high: { name: "2bqtk", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));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));}" }
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: "13aq42", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));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)));}" },
27
- high: { name: "4ahmsw", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));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)));}" }
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-689af3");
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)({ [model.state.variant]: model.state.emphasis })) }));
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
  });
package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts CHANGED
@@ -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
  }>;
package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;EAavC,CAAC"}
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"}
package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.js CHANGED
@@ -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: 'informational',
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
  };
package/dist/commonjs/information-highlight/lib/parts/Body.d.ts CHANGED
@@ -1,2 +1,9 @@
1
- export declare const Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/text").TextProps>;
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
package/dist/commonjs/information-highlight/lib/parts/Body.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,IAAI,wHAWf,CAAC"}
1
+ {"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,IAAI;;;;;;;EAcf,CAAC"}
package/dist/commonjs/information-highlight/lib/parts/Body.js CHANGED
@@ -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
- base: { name: "3d0l76", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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));color:var(--cnvs-sys-color-fg-default);grid-column:2;margin-block-end:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
11
- }, "information-highlight-body-86f4c5");
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
  });