@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
94 lines (93 loc) • 5.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Banner = exports.bannerStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const hooks_1 = require("./hooks");
const BannerIcon_1 = require("./BannerIcon");
const BannerLabel_1 = require("./BannerLabel");
const BannerActionText_1 = require("./BannerActionText");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const icon_1 = require("@workday/canvas-kit-react/icon");
exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "40ungi", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-x1);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-x1);border-end-end-radius:var(--cnvs-sys-shape-x1);cursor:pointer;transition:background-color 120ms;outline:var(--cnvs-sys-space-x1) solid transparent;&:focus-visible, &.focus{outline:var(--cnvs-sys-shape-x1) double transparent;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
modifiers: {
hasErrors: {
true: { name: "3tk8r4", styles: "background-color:var(--cnvs-brand-error-base);color:var(--cnvs-brand-error-accent);&:hover, &.hover{background:var(--cnvs-brand-error-dark);}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-brand-error-accent);--color-system-icon-99ce3e:var(--cnvs-brand-error-accent);--backgroundColor-system-icon-99ce3e:none;}" },
false: { name: "3rk5p8", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-99ce3e:none;}" }
},
isSticky: {
true: { name: "hxxfr", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
false: { name: "zw1h2", styles: "width:20.5rem;" }
}
}
}, "banner-4eaf8d");
/**
* `Banner` is a container component rendered as a `<button>` element that is responsible for creating
* a `BannerModel` and sharing it with its subcomponents using React context.
*
* ```tsx
* <Banner
* isSticky={true}
* hasError={true}
* id='custom-banner-id'
* onClick={() => console.log('clicked banner')}
* >
* {Child components}
* </Banner>
* ```
*
* Alternatively, you may pass in a model using the hoisted model pattern.
*
* ```tsx
* const model = useBannerModel({
* isSticky: true,
* hasError: true,
* id: 'custom-banner-id',
* });
*
* return (
* <Banner onClick={() => console.log('clicked banner')} model={model}>
* {Child components}
* </Banner>
* );
* ```
*/
exports.Banner = (0, common_1.createContainer)('button')({
displayName: 'Banner',
modelHook: hooks_1.useBannerModel,
subComponents: {
/**
* `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
* exclamationCircleIcon when the model's hasError is true.
*
* ```tsx
* <Banner.Icon />
* ```
*/
Icon: BannerIcon_1.BannerIcon,
/**
* `Banner.Label` is a div element with flex styles. This component will get an id that will be used for
* the aria-describedby on the top level `<button>`.
*
* ```tsx
* <Banner.Label>3 Warnings</Banner.Label>
* ```
*/
Label: BannerLabel_1.BannerLabel,
/**
* `Banner.ActionText` is a span element. This component will get an id that will be used
* for the aria-labelledby on the top level `<button>`. This component will be visually hidden
* when the model's `isSticky` prop is set to true.
*
* ```tsx
* <Banner.ActionText>Custom call to action</Banner.ActionText>
* ```
*/
ActionText: BannerActionText_1.BannerActionText,
},
})(({ children, ...elemProps }, Element, model) => {
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.bannerStencil)({ hasErrors: model.state.hasError, isSticky: model.state.isSticky })), children: children }));
});