@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
91 lines (90 loc) • 4.76 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { useBannerModel } from './hooks';
import { BannerIcon } from './BannerIcon';
import { BannerLabel } from './BannerLabel';
import { BannerActionText } from './BannerActionText';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
export const bannerStencil = createStencil({
base: { name: "16k72u", 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-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
modifiers: {
hasErrors: {
true: { name: "2of41i", 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-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" },
false: { name: "4aulue", styles: "background-color:var(--cnvs-brand-alert-base);color:var(--cnvs-brand-alert-accent);&:hover, &.hover{background:var(--cnvs-brand-alert-dark);}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-3a4847:currentColor;--color-system-icon-3a4847:currentColor;--backgroundColor-system-icon-3a4847:none;}" }
},
isSticky: {
true: { name: "11ceci", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
false: { name: "2lw8fo", 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>
* );
* ```
*/
export const Banner = createContainer('button')({
displayName: 'Banner',
modelHook: 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,
/**
* `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,
/**
* `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,
},
})(({ children, ...elemProps }, Element, model) => {
return (_jsx(Element, { ...mergeStyles(elemProps, bannerStencil({ hasErrors: model.state.hasError, isSticky: model.state.isSticky })), children: children }));
});