@workday/canvas-kit-preview-react 15.0.0-alpha.0051-next.0 → 15.0.0-alpha.0060-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 (120) hide show
  1. package/dist/commonjs/avatar/lib/Avatar.js +13 -13
  2. package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
  3. package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
  4. package/dist/commonjs/avatar/lib/BaseAvatar.js +12 -12
  5. package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
  6. package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
  7. package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
  8. package/dist/commonjs/divider/lib/Divider.js +1 -1
  9. package/dist/commonjs/index.d.ts +0 -1
  10. package/dist/commonjs/index.d.ts.map +1 -1
  11. package/dist/commonjs/index.js +0 -1
  12. package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
  13. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
  14. package/dist/commonjs/pill/lib/Pill.js +3 -3
  15. package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
  16. package/dist/commonjs/pill/lib/PillCount.js +1 -1
  17. package/dist/commonjs/pill/lib/PillIcon.js +1 -1
  18. package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
  19. package/dist/commonjs/pill/lib/PillLabel.js +1 -1
  20. package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
  21. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  22. package/dist/commonjs/radio/lib/RadioText.js +4 -4
  23. package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
  24. package/dist/commonjs/side-panel/lib/SidePanel.d.ts +15 -0
  25. package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
  26. package/dist/commonjs/side-panel/lib/SidePanel.js +14 -8
  27. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
  28. package/dist/commonjs/side-panel/lib/hooks.d.ts +9 -0
  29. package/dist/commonjs/side-panel/lib/hooks.d.ts.map +1 -1
  30. package/dist/commonjs/side-panel/lib/hooks.js +1 -0
  31. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +15 -15
  32. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  33. package/dist/commonjs/version/lib/version.js +1 -1
  34. package/dist/es6/avatar/lib/Avatar.js +13 -13
  35. package/dist/es6/avatar/lib/AvatarImage.js +1 -1
  36. package/dist/es6/avatar/lib/AvatarName.js +1 -1
  37. package/dist/es6/avatar/lib/BaseAvatar.js +12 -12
  38. package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
  39. package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
  40. package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
  41. package/dist/es6/divider/lib/Divider.js +1 -1
  42. package/dist/es6/index.d.ts +0 -1
  43. package/dist/es6/index.d.ts.map +1 -1
  44. package/dist/es6/index.js +0 -1
  45. package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
  46. package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
  47. package/dist/es6/pill/lib/Pill.js +3 -3
  48. package/dist/es6/pill/lib/PillAvatar.js +1 -1
  49. package/dist/es6/pill/lib/PillCount.js +1 -1
  50. package/dist/es6/pill/lib/PillIcon.js +1 -1
  51. package/dist/es6/pill/lib/PillIconButton.js +1 -1
  52. package/dist/es6/pill/lib/PillLabel.js +1 -1
  53. package/dist/es6/radio/lib/RadioGroup.js +3 -3
  54. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  55. package/dist/es6/radio/lib/RadioText.js +4 -4
  56. package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
  57. package/dist/es6/side-panel/lib/SidePanel.d.ts +15 -0
  58. package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
  59. package/dist/es6/side-panel/lib/SidePanel.js +14 -8
  60. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
  61. package/dist/es6/side-panel/lib/hooks.d.ts +9 -0
  62. package/dist/es6/side-panel/lib/hooks.d.ts.map +1 -1
  63. package/dist/es6/side-panel/lib/hooks.js +1 -0
  64. package/dist/es6/status-indicator/lib/StatusIndicator.js +15 -15
  65. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  66. package/dist/es6/version/lib/version.js +1 -1
  67. package/index.ts +0 -1
  68. package/package.json +4 -4
  69. package/side-panel/lib/SidePanel.tsx +15 -0
  70. package/side-panel/lib/hooks.ts +9 -0
  71. package/dist/commonjs/information-highlight/index.d.ts +0 -6
  72. package/dist/commonjs/information-highlight/index.d.ts.map +0 -1
  73. package/dist/commonjs/information-highlight/index.js +0 -21
  74. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +0 -76
  75. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts.map +0 -1
  76. package/dist/commonjs/information-highlight/lib/InformationHighlight.js +0 -42
  77. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +0 -23
  78. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +0 -1
  79. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.js +0 -18
  80. package/dist/commonjs/information-highlight/lib/parts/Body.d.ts +0 -2
  81. package/dist/commonjs/information-highlight/lib/parts/Body.d.ts.map +0 -1
  82. package/dist/commonjs/information-highlight/lib/parts/Body.js +0 -17
  83. package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts +0 -6
  84. package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts.map +0 -1
  85. package/dist/commonjs/information-highlight/lib/parts/Heading.js +0 -17
  86. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +0 -12
  87. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts.map +0 -1
  88. package/dist/commonjs/information-highlight/lib/parts/Icon.js +0 -19
  89. package/dist/commonjs/information-highlight/lib/parts/Link.d.ts +0 -2
  90. package/dist/commonjs/information-highlight/lib/parts/Link.d.ts.map +0 -1
  91. package/dist/commonjs/information-highlight/lib/parts/Link.js +0 -17
  92. package/dist/es6/information-highlight/index.d.ts +0 -6
  93. package/dist/es6/information-highlight/index.d.ts.map +0 -1
  94. package/dist/es6/information-highlight/index.js +0 -5
  95. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +0 -76
  96. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts.map +0 -1
  97. package/dist/es6/information-highlight/lib/InformationHighlight.js +0 -39
  98. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +0 -23
  99. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +0 -1
  100. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.js +0 -15
  101. package/dist/es6/information-highlight/lib/parts/Body.d.ts +0 -2
  102. package/dist/es6/information-highlight/lib/parts/Body.d.ts.map +0 -1
  103. package/dist/es6/information-highlight/lib/parts/Body.js +0 -14
  104. package/dist/es6/information-highlight/lib/parts/Heading.d.ts +0 -6
  105. package/dist/es6/information-highlight/lib/parts/Heading.d.ts.map +0 -1
  106. package/dist/es6/information-highlight/lib/parts/Heading.js +0 -14
  107. package/dist/es6/information-highlight/lib/parts/Icon.d.ts +0 -12
  108. package/dist/es6/information-highlight/lib/parts/Icon.d.ts.map +0 -1
  109. package/dist/es6/information-highlight/lib/parts/Icon.js +0 -16
  110. package/dist/es6/information-highlight/lib/parts/Link.d.ts +0 -2
  111. package/dist/es6/information-highlight/lib/parts/Link.d.ts.map +0 -1
  112. package/dist/es6/information-highlight/lib/parts/Link.js +0 -14
  113. package/information-highlight/index.ts +0 -5
  114. package/information-highlight/lib/InformationHighlight.tsx +0 -107
  115. package/information-highlight/lib/hooks/useInformationHighlightModel.ts +0 -16
  116. package/information-highlight/lib/parts/Body.tsx +0 -28
  117. package/information-highlight/lib/parts/Heading.tsx +0 -34
  118. package/information-highlight/lib/parts/Icon.tsx +0 -29
  119. package/information-highlight/lib/parts/Link.tsx +0 -29
  120. package/information-highlight/package.json +0 -6
@@ -1 +0,0 @@
1
- {"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,IAAI,wHAWf,CAAC"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Body = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const common_1 = require("@workday/canvas-kit-react/common");
6
- const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
- const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
- const text_1 = require("@workday/canvas-kit-react/text");
9
- const informationHighlightBodyStencil = (0, canvas_kit_styling_1.createStencil)({
10
- base: { name: "3lgkkv", 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-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-block-end:var(--cnvs-sys-space-x2);" }
11
- }, "information-highlight-body-0931ed");
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()) }));
16
- },
17
- });
@@ -1,6 +0,0 @@
1
- import { ExtractProps } from '@workday/canvas-kit-react/common';
2
- import { Heading } from '@workday/canvas-kit-react/text';
3
- export interface InformationHighlightHeadingProps extends Partial<ExtractProps<typeof Heading, never>> {
4
- }
5
- export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", InformationHighlightHeadingProps>;
6
- //# sourceMappingURL=Heading.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAevD,MAAM,WAAW,gCACf,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC;CAAG;AAEzD,eAAO,MAAM,2BAA2B,qGAYtC,CAAC"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.InformationHighlightHeading = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const common_1 = require("@workday/canvas-kit-react/common");
6
- const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
- const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
- const text_1 = require("@workday/canvas-kit-react/text");
9
- const informationHighlightHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
10
- base: { name: "28v7wn", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
11
- }, "information-highlight-heading-1080eb");
12
- exports.InformationHighlightHeading = (0, common_1.createComponent)('h3')({
13
- displayName: 'Heading',
14
- Component: ({ size = 'small', ...elemProps }, ref, Element) => {
15
- return ((0, jsx_runtime_1.jsx)(text_1.Heading, { as: Element, ref: ref, size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightHeadingStencil()) }));
16
- },
17
- });
@@ -1,12 +0,0 @@
1
- import { SystemIcon } from '@workday/canvas-kit-react/icon';
2
- import { ExtractProps } from '@workday/canvas-kit-react/common';
3
- export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {
4
- }
5
- export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
6
- state: {
7
- variant: "caution" | "informational" | "critical";
8
- emphasis: "high" | "low";
9
- };
10
- events: {};
11
- }>;
12
- //# sourceMappingURL=Icon.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAQlF,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;CAAG;AAOrF,eAAO,MAAM,IAAI;;;;;;EAYf,CAAC"}
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Icon = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const icon_1 = require("@workday/canvas-kit-react/icon");
6
- const common_1 = require("@workday/canvas-kit-react/common");
7
- const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
8
- const useInformationHighlightModel_1 = require("../hooks/useInformationHighlightModel");
9
- const defaultIcons = {
10
- informational: canvas_system_icons_web_1.infoIcon,
11
- caution: canvas_system_icons_web_1.exclamationTriangleIcon,
12
- critical: canvas_system_icons_web_1.exclamationCircleIcon,
13
- };
14
- exports.Icon = (0, common_1.createSubcomponent)('span')({
15
- displayName: 'Icon',
16
- modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
17
- })(({ icon, ...props }, Element, model) => {
18
- return ((0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], "data-part": "information-highlight-icon", ...props }));
19
- });
@@ -1,2 +0,0 @@
1
- export declare const Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("@workday/canvas-kit-react/button").HyperlinkProps>;
2
- //# sourceMappingURL=Link.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,IAAI,6HAWf,CAAC"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Link = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const button_1 = require("@workday/canvas-kit-react/button");
6
- const common_1 = require("@workday/canvas-kit-react/common");
7
- const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
8
- const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
9
- const informationHighlightLinkStencil = (0, canvas_kit_styling_1.createStencil)({
10
- base: { name: "3t8p96", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);grid-column:2;justify-self:start;color:var(--cnvs-sys-color-text-strong);" }
11
- }, "information-highlight-link-aef704");
12
- exports.Link = (0, common_1.createComponent)('a')({
13
- displayName: 'Link',
14
- Component: ({ ...elemProps }, ref, Element) => {
15
- return ((0, jsx_runtime_1.jsx)(button_1.Hyperlink, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightLinkStencil()) }));
16
- },
17
- });
@@ -1,6 +0,0 @@
1
- export * from './lib/InformationHighlight';
2
- export * from './lib/parts/Body';
3
- export * from './lib/parts/Heading';
4
- export * from './lib/parts/Icon';
5
- export * from './lib/parts/Link';
6
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../information-highlight/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
@@ -1,5 +0,0 @@
1
- export * from './lib/InformationHighlight';
2
- export * from './lib/parts/Body';
3
- export * from './lib/parts/Heading';
4
- export * from './lib/parts/Icon';
5
- export * from './lib/parts/Link';
@@ -1,76 +0,0 @@
1
- import { CSProps } from '@workday/canvas-kit-styling';
2
- interface InformationHighlightProps extends CSProps {
3
- }
4
- export declare const informationHighlightStencil: import("@workday/canvas-kit-styling").Stencil<{
5
- informational: {
6
- low: {
7
- borderInlineStartColor: "--cnvs-sys-color-border-info-default";
8
- backgroundColor: "--cnvs-sys-color-bg-alt-soft";
9
- '& [data-part="information-highlight-icon"]': {
10
- [x: string]: string;
11
- };
12
- };
13
- high: {
14
- borderInlineStartColor: "--cnvs-sys-color-border-info-default";
15
- backgroundColor: "--cnvs-sys-color-bg-info-softest";
16
- '& [data-part="information-highlight-icon"]': {
17
- [x: string]: "--cnvs-sys-color-icon-info-default" | "--cnvs-sys-color-icon-inverse";
18
- };
19
- };
20
- };
21
- caution: {
22
- low: {
23
- borderInlineStartColor: "--cnvs-sys-color-border-caution-default";
24
- backgroundColor: "--cnvs-sys-color-bg-alt-soft";
25
- '& [data-part="information-highlight-icon"]': {
26
- [x: string]: string;
27
- };
28
- };
29
- high: {
30
- borderInlineStartColor: "--cnvs-sys-color-border-caution-default";
31
- backgroundColor: "--cnvs-sys-color-bg-caution-softest";
32
- '& [data-part="information-highlight-icon"]': {
33
- [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-icon-caution-softer";
34
- };
35
- };
36
- };
37
- critical: {
38
- low: {
39
- borderInlineStartColor: "--cnvs-sys-color-border-critical-default";
40
- backgroundColor: "--cnvs-sys-color-bg-alt-soft";
41
- '& [data-part="information-highlight-icon"]': {
42
- [x: string]: string;
43
- };
44
- };
45
- high: {
46
- borderInlineStartColor: "--cnvs-sys-color-border-critical-default";
47
- backgroundColor: "--cnvs-sys-color-bg-critical-softest";
48
- '& [data-part="information-highlight-icon"]': {
49
- [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-icon-critical-default";
50
- };
51
- };
52
- };
53
- }, {}, {}, never, never>;
54
- export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
55
- variant: "caution" | "informational" | "critical";
56
- emphasis: "high" | "low";
57
- }> & {} & {}, {
58
- state: {
59
- variant: "caution" | "informational" | "critical";
60
- emphasis: "high" | "low";
61
- };
62
- events: {};
63
- }> & {
64
- Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
65
- state: {
66
- variant: "caution" | "informational" | "critical";
67
- emphasis: "high" | "low";
68
- };
69
- events: {};
70
- }>;
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("@workday/canvas-kit-react/text").TextProps>;
73
- Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("@workday/canvas-kit-react/button").HyperlinkProps>;
74
- };
75
- export {};
76
- //# sourceMappingURL=InformationHighlight.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAUzF,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyEtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
@@ -1,39 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createContainer } from '@workday/canvas-kit-react/common';
3
- import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
- import { system } from '@workday/canvas-tokens-web';
5
- import { InformationHighlightHeading } from './parts/Heading';
6
- import { Body } from './parts/Body';
7
- import { Icon } from './parts/Icon';
8
- import { Link } from './parts/Link';
9
- import { useInformationHighlightModel } from './hooks/useInformationHighlightModel';
10
- import { systemIconStencil } from '@workday/canvas-kit-react/icon';
11
- export const informationHighlightStencil = createStencil({
12
- base: { name: "1nwuzt", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;border-inline-start:var(--cnvs-sys-space-x1) solid transparent;" },
13
- modifiers: {
14
- informational: {
15
- low: { name: "40lvkn", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--backgroundColor-system-icon-3a4847:transparent;}" },
16
- high: { name: "30nc0r", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default);background-color:var(--cnvs-sys-color-bg-info-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);}" }
17
- },
18
- caution: {
19
- low: { name: "1099b7", styles: "border-inline-start-color:var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-system-icon-3a4847:transparent;}" },
20
- high: { name: "3aebkl", styles: "border-inline-start-color:var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-caution-softer);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-caution-softer);}" }
21
- },
22
- critical: {
23
- low: { name: "41bjzp", styles: "border-inline-start-color:var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--backgroundColor-system-icon-3a4847:transparent;}" },
24
- high: { name: "8jboh", styles: "border-inline-start-color:var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);}" }
25
- }
26
- }
27
- }, "information-highlight-b4c864");
28
- export const InformationHighlight = createContainer('section')({
29
- displayName: 'InformationHighlight',
30
- modelHook: useInformationHighlightModel,
31
- subComponents: {
32
- Icon: Icon,
33
- Heading: InformationHighlightHeading,
34
- Body: Body,
35
- Link: Link,
36
- },
37
- })(({ ...elemProps }, Element, model) => {
38
- return (_jsx(Element, { ...handleCsProp(elemProps, informationHighlightStencil({ [model.state.variant]: model.state.emphasis })) }));
39
- });
@@ -1,23 +0,0 @@
1
- export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
2
- variant: "caution" | "informational" | "critical";
3
- emphasis: "high" | "low";
4
- }> & {} & {}) | undefined) => {
5
- state: {
6
- variant: "caution" | "informational" | "critical";
7
- emphasis: "high" | "low";
8
- };
9
- events: {};
10
- }) & import("@workday/canvas-kit-react/common").ModelExtras<{
11
- variant: "caution" | "informational" | "critical";
12
- emphasis: "high" | "low";
13
- }, {}, {
14
- variant: "caution" | "informational" | "critical";
15
- emphasis: "high" | "low";
16
- }, {}, {
17
- state: {
18
- variant: "caution" | "informational" | "critical";
19
- emphasis: "high" | "low";
20
- };
21
- events: {};
22
- }>;
23
- //# sourceMappingURL=useInformationHighlightModel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;EAavC,CAAC"}
@@ -1,15 +0,0 @@
1
- import { createModelHook } from '@workday/canvas-kit-react/common';
2
- export const useInformationHighlightModel = createModelHook({
3
- defaultConfig: {
4
- variant: 'informational',
5
- emphasis: 'low',
6
- },
7
- })(config => {
8
- return {
9
- state: {
10
- variant: config.variant,
11
- emphasis: config.emphasis,
12
- },
13
- events: {},
14
- };
15
- });
@@ -1,2 +0,0 @@
1
- export declare const Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/text").TextProps>;
2
- //# sourceMappingURL=Body.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,IAAI,wHAWf,CAAC"}
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
4
- import { system } from '@workday/canvas-tokens-web';
5
- import { Text } from '@workday/canvas-kit-react/text';
6
- const informationHighlightBodyStencil = createStencil({
7
- base: { name: "3lgkkv", 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-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-block-end:var(--cnvs-sys-space-x2);" }
8
- }, "information-highlight-body-0931ed");
9
- export const Body = createComponent('div')({
10
- displayName: 'Body',
11
- Component: ({ ...elemProps }, ref, Element) => {
12
- return (_jsx(Text, { as: Element, ref: ref, ...handleCsProp(elemProps, informationHighlightBodyStencil()) }));
13
- },
14
- });
@@ -1,6 +0,0 @@
1
- import { ExtractProps } from '@workday/canvas-kit-react/common';
2
- import { Heading } from '@workday/canvas-kit-react/text';
3
- export interface InformationHighlightHeadingProps extends Partial<ExtractProps<typeof Heading, never>> {
4
- }
5
- export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", InformationHighlightHeadingProps>;
6
- //# sourceMappingURL=Heading.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAevD,MAAM,WAAW,gCACf,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC;CAAG;AAEzD,eAAO,MAAM,2BAA2B,qGAYtC,CAAC"}
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
4
- import { system } from '@workday/canvas-tokens-web';
5
- import { Heading } from '@workday/canvas-kit-react/text';
6
- const informationHighlightHeadingStencil = createStencil({
7
- base: { name: "28v7wn", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
8
- }, "information-highlight-heading-1080eb");
9
- export const InformationHighlightHeading = createComponent('h3')({
10
- displayName: 'Heading',
11
- Component: ({ size = 'small', ...elemProps }, ref, Element) => {
12
- return (_jsx(Heading, { as: Element, ref: ref, size: size, ...handleCsProp(elemProps, informationHighlightHeadingStencil()) }));
13
- },
14
- });
@@ -1,12 +0,0 @@
1
- import { SystemIcon } from '@workday/canvas-kit-react/icon';
2
- import { ExtractProps } from '@workday/canvas-kit-react/common';
3
- export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {
4
- }
5
- export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
6
- state: {
7
- variant: "caution" | "informational" | "critical";
8
- emphasis: "high" | "low";
9
- };
10
- events: {};
11
- }>;
12
- //# sourceMappingURL=Icon.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAQlF,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;CAAG;AAOrF,eAAO,MAAM,IAAI;;;;;;EAYf,CAAC"}
@@ -1,16 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { SystemIcon } from '@workday/canvas-kit-react/icon';
3
- import { createSubcomponent } from '@workday/canvas-kit-react/common';
4
- import { infoIcon, exclamationCircleIcon, exclamationTriangleIcon, } from '@workday/canvas-system-icons-web';
5
- import { useInformationHighlightModel } from '../hooks/useInformationHighlightModel';
6
- const defaultIcons = {
7
- informational: infoIcon,
8
- caution: exclamationTriangleIcon,
9
- critical: exclamationCircleIcon,
10
- };
11
- export const Icon = createSubcomponent('span')({
12
- displayName: 'Icon',
13
- modelHook: useInformationHighlightModel,
14
- })(({ icon, ...props }, Element, model) => {
15
- return (_jsx(SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], "data-part": "information-highlight-icon", ...props }));
16
- });
@@ -1,2 +0,0 @@
1
- export declare const Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("@workday/canvas-kit-react/button").HyperlinkProps>;
2
- //# sourceMappingURL=Link.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,IAAI,6HAWf,CAAC"}
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Hyperlink } from '@workday/canvas-kit-react/button';
3
- import { createComponent } from '@workday/canvas-kit-react/common';
4
- import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
5
- import { system } from '@workday/canvas-tokens-web';
6
- const informationHighlightLinkStencil = createStencil({
7
- base: { name: "3t8p96", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);grid-column:2;justify-self:start;color:var(--cnvs-sys-color-text-strong);" }
8
- }, "information-highlight-link-aef704");
9
- export const Link = createComponent('a')({
10
- displayName: 'Link',
11
- Component: ({ ...elemProps }, ref, Element) => {
12
- return (_jsx(Hyperlink, { as: Element, ref: ref, ...handleCsProp(elemProps, informationHighlightLinkStencil()) }));
13
- },
14
- });
@@ -1,5 +0,0 @@
1
- export * from './lib/InformationHighlight';
2
- export * from './lib/parts/Body';
3
- export * from './lib/parts/Heading';
4
- export * from './lib/parts/Icon';
5
- export * from './lib/parts/Link';
@@ -1,107 +0,0 @@
1
- import {createContainer} from '@workday/canvas-kit-react/common';
2
- import {createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
3
- import {system} from '@workday/canvas-tokens-web';
4
-
5
- import {InformationHighlightHeading} from './parts/Heading';
6
- import {Body} from './parts/Body';
7
- import {Icon} from './parts/Icon';
8
- import {Link} from './parts/Link';
9
- import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
10
- import {systemIconStencil} from '@workday/canvas-kit-react/icon';
11
-
12
- interface InformationHighlightProps extends CSProps {}
13
-
14
- export const informationHighlightStencil = createStencil({
15
- base: {
16
- display: 'grid',
17
- gridTemplateColumns: 'min-content',
18
- columnGap: system.space.x4,
19
- rowGap: system.space.x2,
20
- padding: system.space.x4,
21
- borderRadius: system.shape.x1,
22
- outline: `${px2rem(1)} solid transparent`,
23
- borderInlineStart: `${system.space.x1} solid transparent`,
24
- },
25
- modifiers: {
26
- informational: {
27
- low: {
28
- borderInlineStartColor: system.color.border.info.default,
29
- backgroundColor: system.color.bg.alt.soft,
30
- '& [data-part="information-highlight-icon"]': {
31
- [systemIconStencil.vars.accentColor]: system.color.icon.info.default,
32
- [systemIconStencil.vars.color]: system.color.icon.info.default,
33
- [systemIconStencil.vars.backgroundColor]: 'transparent',
34
- },
35
- },
36
- high: {
37
- borderInlineStartColor: system.color.border.info.default,
38
- backgroundColor: system.color.bg.info.softest,
39
- '& [data-part="information-highlight-icon"]': {
40
- [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
41
- [systemIconStencil.vars.color]: system.color.icon.info.default,
42
- [systemIconStencil.vars.backgroundColor]: system.color.icon.info.default,
43
- },
44
- },
45
- },
46
- caution: {
47
- low: {
48
- borderInlineStartColor: system.color.border.caution.default,
49
- backgroundColor: system.color.bg.alt.soft,
50
- '& [data-part="information-highlight-icon"]': {
51
- [systemIconStencil.vars.accentColor]: system.color.icon.strong,
52
- [systemIconStencil.vars.color]: system.color.icon.strong,
53
- [systemIconStencil.vars.backgroundColor]: 'transparent',
54
- },
55
- },
56
- high: {
57
- borderInlineStartColor: system.color.border.caution.default,
58
- backgroundColor: system.color.bg.caution.softest,
59
- '& [data-part="information-highlight-icon"]': {
60
- [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
61
- [systemIconStencil.vars.color]: system.color.icon.caution.softer,
62
- [systemIconStencil.vars.backgroundColor]: system.color.icon.caution.softer,
63
- },
64
- },
65
- },
66
- critical: {
67
- low: {
68
- borderInlineStartColor: system.color.border.critical.default,
69
- backgroundColor: system.color.bg.alt.soft,
70
- '& [data-part="information-highlight-icon"]': {
71
- [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
72
- [systemIconStencil.vars.color]: system.color.icon.critical.default,
73
- [systemIconStencil.vars.backgroundColor]: 'transparent',
74
- },
75
- },
76
- high: {
77
- borderInlineStartColor: system.color.border.critical.default,
78
- backgroundColor: system.color.bg.critical.softest,
79
- '& [data-part="information-highlight-icon"]': {
80
- [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
81
- [systemIconStencil.vars.color]: system.color.icon.critical.default,
82
- [systemIconStencil.vars.backgroundColor]: system.color.icon.critical.default,
83
- },
84
- },
85
- },
86
- },
87
- });
88
-
89
- export const InformationHighlight = createContainer('section')({
90
- displayName: 'InformationHighlight',
91
- modelHook: useInformationHighlightModel,
92
- subComponents: {
93
- Icon: Icon,
94
- Heading: InformationHighlightHeading,
95
- Body: Body,
96
- Link: Link,
97
- },
98
- })(({...elemProps}: InformationHighlightProps, Element, model) => {
99
- return (
100
- <Element
101
- {...handleCsProp(
102
- elemProps,
103
- informationHighlightStencil({[model.state.variant]: model.state.emphasis})
104
- )}
105
- />
106
- );
107
- });
@@ -1,16 +0,0 @@
1
- import {createModelHook} from '@workday/canvas-kit-react/common';
2
-
3
- export const useInformationHighlightModel = createModelHook({
4
- defaultConfig: {
5
- variant: 'informational' as 'informational' | 'caution' | 'critical',
6
- emphasis: 'low' as 'low' | 'high',
7
- },
8
- })(config => {
9
- return {
10
- state: {
11
- variant: config.variant,
12
- emphasis: config.emphasis,
13
- },
14
- events: {},
15
- };
16
- });
@@ -1,28 +0,0 @@
1
- import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
2
- import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
3
- import {system} from '@workday/canvas-tokens-web';
4
- import {Text} from '@workday/canvas-kit-react/text';
5
-
6
- const informationHighlightBodyStencil = createStencil({
7
- base: () => {
8
- return {
9
- ...system.type.subtext.large,
10
- color: system.color.text.strong,
11
- gridColumn: '2',
12
- marginBlockEnd: system.space.x2,
13
- };
14
- },
15
- });
16
-
17
- export const Body = createComponent('div')({
18
- displayName: 'Body',
19
- Component: ({...elemProps}: ExtractProps<typeof Text, never>, ref, Element) => {
20
- return (
21
- <Text
22
- as={Element}
23
- ref={ref}
24
- {...handleCsProp(elemProps, informationHighlightBodyStencil())}
25
- />
26
- );
27
- },
28
- });
@@ -1,34 +0,0 @@
1
- import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
2
- import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
3
- import {system} from '@workday/canvas-tokens-web';
4
- import {Heading} from '@workday/canvas-kit-react/text';
5
-
6
- const informationHighlightHeadingStencil = createStencil({
7
- base: () => {
8
- return {
9
- ...system.type.body.small,
10
- color: system.color.text.strong,
11
- gridColumn: '2',
12
- fontWeight: system.fontWeight.bold,
13
- marginTop: system.space.zero,
14
- marginBottom: system.space.zero,
15
- };
16
- },
17
- });
18
-
19
- export interface InformationHighlightHeadingProps
20
- extends Partial<ExtractProps<typeof Heading, never>> {}
21
-
22
- export const InformationHighlightHeading = createComponent('h3')({
23
- displayName: 'Heading',
24
- Component: ({size = 'small', ...elemProps}: InformationHighlightHeadingProps, ref, Element) => {
25
- return (
26
- <Heading
27
- as={Element}
28
- ref={ref}
29
- size={size}
30
- {...handleCsProp(elemProps, informationHighlightHeadingStencil())}
31
- />
32
- );
33
- },
34
- });