@workday/canvas-kit-preview-react 15.0.0-alpha.0051-next.0 → 15.0.0-alpha.0056-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 (58) hide show
  1. package/dist/commonjs/index.d.ts +0 -1
  2. package/dist/commonjs/index.d.ts.map +1 -1
  3. package/dist/commonjs/index.js +0 -1
  4. package/dist/es6/index.d.ts +0 -1
  5. package/dist/es6/index.d.ts.map +1 -1
  6. package/dist/es6/index.js +0 -1
  7. package/index.ts +0 -1
  8. package/package.json +4 -4
  9. package/dist/commonjs/information-highlight/index.d.ts +0 -6
  10. package/dist/commonjs/information-highlight/index.d.ts.map +0 -1
  11. package/dist/commonjs/information-highlight/index.js +0 -21
  12. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts +0 -76
  13. package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts.map +0 -1
  14. package/dist/commonjs/information-highlight/lib/InformationHighlight.js +0 -42
  15. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +0 -23
  16. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +0 -1
  17. package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.js +0 -18
  18. package/dist/commonjs/information-highlight/lib/parts/Body.d.ts +0 -2
  19. package/dist/commonjs/information-highlight/lib/parts/Body.d.ts.map +0 -1
  20. package/dist/commonjs/information-highlight/lib/parts/Body.js +0 -17
  21. package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts +0 -6
  22. package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts.map +0 -1
  23. package/dist/commonjs/information-highlight/lib/parts/Heading.js +0 -17
  24. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts +0 -12
  25. package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts.map +0 -1
  26. package/dist/commonjs/information-highlight/lib/parts/Icon.js +0 -19
  27. package/dist/commonjs/information-highlight/lib/parts/Link.d.ts +0 -2
  28. package/dist/commonjs/information-highlight/lib/parts/Link.d.ts.map +0 -1
  29. package/dist/commonjs/information-highlight/lib/parts/Link.js +0 -17
  30. package/dist/es6/information-highlight/index.d.ts +0 -6
  31. package/dist/es6/information-highlight/index.d.ts.map +0 -1
  32. package/dist/es6/information-highlight/index.js +0 -5
  33. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts +0 -76
  34. package/dist/es6/information-highlight/lib/InformationHighlight.d.ts.map +0 -1
  35. package/dist/es6/information-highlight/lib/InformationHighlight.js +0 -39
  36. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts +0 -23
  37. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map +0 -1
  38. package/dist/es6/information-highlight/lib/hooks/useInformationHighlightModel.js +0 -15
  39. package/dist/es6/information-highlight/lib/parts/Body.d.ts +0 -2
  40. package/dist/es6/information-highlight/lib/parts/Body.d.ts.map +0 -1
  41. package/dist/es6/information-highlight/lib/parts/Body.js +0 -14
  42. package/dist/es6/information-highlight/lib/parts/Heading.d.ts +0 -6
  43. package/dist/es6/information-highlight/lib/parts/Heading.d.ts.map +0 -1
  44. package/dist/es6/information-highlight/lib/parts/Heading.js +0 -14
  45. package/dist/es6/information-highlight/lib/parts/Icon.d.ts +0 -12
  46. package/dist/es6/information-highlight/lib/parts/Icon.d.ts.map +0 -1
  47. package/dist/es6/information-highlight/lib/parts/Icon.js +0 -16
  48. package/dist/es6/information-highlight/lib/parts/Link.d.ts +0 -2
  49. package/dist/es6/information-highlight/lib/parts/Link.d.ts.map +0 -1
  50. package/dist/es6/information-highlight/lib/parts/Link.js +0 -14
  51. package/information-highlight/index.ts +0 -5
  52. package/information-highlight/lib/InformationHighlight.tsx +0 -107
  53. package/information-highlight/lib/hooks/useInformationHighlightModel.ts +0 -16
  54. package/information-highlight/lib/parts/Body.tsx +0 -28
  55. package/information-highlight/lib/parts/Heading.tsx +0 -34
  56. package/information-highlight/lib/parts/Icon.tsx +0 -29
  57. package/information-highlight/lib/parts/Link.tsx +0 -29
  58. package/information-highlight/package.json +0 -6
@@ -1,7 +1,6 @@
1
1
  export * from './avatar';
2
2
  export * from './color-picker';
3
3
  export * from './divider';
4
- export * from './information-highlight';
5
4
  export * from './loading-sparkles';
6
5
  export * from './multi-select';
7
6
  export * from './pill';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./avatar"), exports);
18
18
  __exportStar(require("./color-picker"), exports);
19
19
  __exportStar(require("./divider"), exports);
20
- __exportStar(require("./information-highlight"), exports);
21
20
  __exportStar(require("./loading-sparkles"), exports);
22
21
  __exportStar(require("./multi-select"), exports);
23
22
  __exportStar(require("./pill"), exports);
@@ -1,7 +1,6 @@
1
1
  export * from './avatar';
2
2
  export * from './color-picker';
3
3
  export * from './divider';
4
- export * from './information-highlight';
5
4
  export * from './loading-sparkles';
6
5
  export * from './multi-select';
7
6
  export * from './pill';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC"}
package/dist/es6/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  export * from './avatar';
2
2
  export * from './color-picker';
3
3
  export * from './divider';
4
- export * from './information-highlight';
5
4
  export * from './loading-sparkles';
6
5
  export * from './multi-select';
7
6
  export * from './pill';
package/index.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  export * from './avatar';
2
2
  export * from './color-picker';
3
3
  export * from './divider';
4
- export * from './information-highlight';
5
4
  export * from './loading-sparkles';
6
5
  export * from './multi-select';
7
6
  export * from './pill';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "15.0.0-alpha.0051-next.0",
3
+ "version": "15.0.0-alpha.0056-next.0",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -48,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^15.0.0-alpha.0051-next.0",
52
- "@workday/canvas-kit-styling": "^15.0.0-alpha.0051-next.0",
51
+ "@workday/canvas-kit-react": "^15.0.0-alpha.0056-next.0",
52
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0056-next.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.36",
54
54
  "@workday/canvas-tokens-web": "4.0.0-alpha.3",
55
55
  "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "43b17ca56f773f10c5d1557f7875a574787288ed"
63
+ "gitHead": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
64
64
  }
@@ -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,21 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./lib/InformationHighlight"), exports);
18
- __exportStar(require("./lib/parts/Body"), exports);
19
- __exportStar(require("./lib/parts/Heading"), exports);
20
- __exportStar(require("./lib/parts/Icon"), exports);
21
- __exportStar(require("./lib/parts/Link"), exports);
@@ -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,42 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.InformationHighlight = exports.informationHighlightStencil = 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 Heading_1 = require("./parts/Heading");
9
- const Body_1 = require("./parts/Body");
10
- const Icon_1 = require("./parts/Icon");
11
- const Link_1 = require("./parts/Link");
12
- const useInformationHighlightModel_1 = require("./hooks/useInformationHighlightModel");
13
- const icon_1 = require("@workday/canvas-kit-react/icon");
14
- exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({
15
- 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;" },
16
- modifiers: {
17
- informational: {
18
- 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;}" },
19
- 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);}" }
20
- },
21
- caution: {
22
- 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;}" },
23
- 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);}" }
24
- },
25
- critical: {
26
- 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;}" },
27
- 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);}" }
28
- }
29
- }
30
- }, "information-highlight-b4c864");
31
- exports.InformationHighlight = (0, common_1.createContainer)('section')({
32
- displayName: 'InformationHighlight',
33
- modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
34
- subComponents: {
35
- Icon: Icon_1.Icon,
36
- Heading: Heading_1.InformationHighlightHeading,
37
- Body: Body_1.Body,
38
- Link: Link_1.Link,
39
- },
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 })) }));
42
- });
@@ -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,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useInformationHighlightModel = void 0;
4
- const common_1 = require("@workday/canvas-kit-react/common");
5
- exports.useInformationHighlightModel = (0, common_1.createModelHook)({
6
- defaultConfig: {
7
- variant: 'informational',
8
- emphasis: 'low',
9
- },
10
- })(config => {
11
- return {
12
- state: {
13
- variant: config.variant,
14
- emphasis: config.emphasis,
15
- },
16
- events: {},
17
- };
18
- });
@@ -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,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
- });
@@ -1,29 +0,0 @@
1
- import {SystemIcon} from '@workday/canvas-kit-react/icon';
2
- import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
3
- import {
4
- infoIcon,
5
- exclamationCircleIcon,
6
- exclamationTriangleIcon,
7
- } from '@workday/canvas-system-icons-web';
8
- import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
9
-
10
- export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {}
11
- const defaultIcons = {
12
- informational: infoIcon,
13
- caution: exclamationTriangleIcon,
14
- critical: exclamationCircleIcon,
15
- };
16
-
17
- export const Icon = createSubcomponent('span')({
18
- displayName: 'Icon',
19
- modelHook: useInformationHighlightModel,
20
- })(({icon, ...props}: IconProps, Element, model) => {
21
- return (
22
- <SystemIcon
23
- as={Element}
24
- icon={icon ? icon : defaultIcons[model.state.variant]}
25
- data-part="information-highlight-icon"
26
- {...props}
27
- />
28
- );
29
- });
@@ -1,29 +0,0 @@
1
- import {Hyperlink} from '@workday/canvas-kit-react/button';
2
- import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
3
- import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
4
- import {system} from '@workday/canvas-tokens-web';
5
-
6
- const informationHighlightLinkStencil = createStencil({
7
- base: () => {
8
- return {
9
- ...system.type.subtext.large,
10
- gridColumn: '2',
11
- justifySelf: 'start',
12
- color: system.color.text.strong,
13
- fontWeight: system.fontWeight.bold,
14
- };
15
- },
16
- });
17
-
18
- export const Link = createComponent('a')({
19
- displayName: 'Link',
20
- Component: ({...elemProps}: ExtractProps<typeof Hyperlink, never>, ref, Element) => {
21
- return (
22
- <Hyperlink
23
- as={Element}
24
- ref={ref}
25
- {...handleCsProp(elemProps, informationHighlightLinkStencil())}
26
- />
27
- );
28
- },
29
- });
@@ -1,6 +0,0 @@
1
- {
2
- "main": "../dist/commonjs/information-highlight",
3
- "module": "../dist/es6/information-highlight",
4
- "sideEffects": false,
5
- "types": "../dist/es6/information-highlight"
6
- }