UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

github.com/Workday/canvas-kit

Workday/canvas-kit

61 lines (60 loc) • 6.77 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.InformationHighlight = exports.informationHighlightStencil = void 0; const jsx_runtime_1 = require("react/jsx-runtime"); const common_1 = require("@workday/canvas-kit-react/common"); const icon_1 = require("@workday/canvas-kit-react/icon"); const canvas_kit_styling_1 = require("@workday/canvas-kit-styling"); const canvas_tokens_web_1 = require("@workday/canvas-tokens-web"); const useInformationHighlightModel_1 = require("./hooks/useInformationHighlightModel"); const Body_1 = require("./parts/Body"); const Heading_1 = require("./parts/Heading"); const Icon_1 = require("./parts/Icon"); const Link_1 = require("./parts/Link"); const defaultVariantStyles = { backgroundColor: canvas_tokens_web_1.system.legacy.color.surface.alt.default, '& [data-part="information-highlight-icon"]': { [icon_1.systemIconStencil.vars.color]: canvas_tokens_web_1.system.color.fg.default, }, }; exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({ extends: common_1.cornerShapeStencil, base: { name: "1nrk8x", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;gap:0 0.75rem;padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));outline:0.0625rem solid transparent;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));" }, modifiers: { default: { low: defaultVariantStyles, high: defaultVariantStyles }, informational: { low: { name: "j9rdx", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" }, high: { name: "18sn0o", styles: "background-color:var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" } }, caution: { low: { name: "1e47yi", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" }, high: { name: "3t5xzj", styles: "background-color:var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" } }, critical: { low: { name: "12gzbo", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" }, high: { name: "1fbku8", styles: "background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" } }, actionPlacement: { bottom: { name: "18j0h6", styles: "" }, end: { name: "1vn5xy", styles: "width:100%;min-width:0;container-type:inline-size;grid-template-columns:min-content minmax(0, 1fr);grid-template-areas:\n \"icon heading\"\n \"icon body\"\n \"icon link\"\n ;& [data-part=\"information-highlight-icon\"]{grid-area:icon;align-self:start;}& [data-part=\"information-highlight-heading\"]{grid-area:heading;}& [data-part=\"information-highlight-body\"]{grid-area:body;}& [data-part=\"information-highlight-link\"]{grid-area:link;justify-self:end;margin-block-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));}@container (min-width: 28rem){grid-template-columns:min-content minmax(0, 1fr) minmax(0, max-content);grid-template-areas:\n \"icon heading link\"\n \"icon body link\"\n ;& [data-part=\"information-highlight-link\"]{align-self:center;margin-block-start:0;}}" } } } }, "information-highlight-ad98bb"); exports.InformationHighlight = (0, common_1.createContainer)('section')({ displayName: 'InformationHighlight', modelHook: useInformationHighlightModel_1.useInformationHighlightModel, subComponents: { Icon: Icon_1.Icon, Heading: Heading_1.InformationHighlightHeading, Body: Body_1.Body, Link: Link_1.Link, }, })(({ children, ...elemProps }, Element, model) => { return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.informationHighlightStencil)({ [model.state.variant]: model.state.emphasis, actionPlacement: model.state.actionPlacement, })), children: children })); });