@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
109 lines (108 loc) • 4.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Banner = void 0;
/** @jsxRuntime classic */
/** @jsx jsx */
const react_1 = require("@emotion/react");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
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 styles = {
cursor: 'pointer',
transition: 'background-color 120ms',
outline: `${canvas_tokens_web_1.system.space.x1} solid transparent`,
'&:focus-visible, &.focus': {
outline: `${(0, canvas_kit_styling_1.px2rem)(4)} double transparent`,
...(0, common_1.focusRing)({ separation: 2 }),
},
};
/**
* `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 styled {@link Flex}. 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 styled {@link Box}. 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) => {
const palette = (0, hooks_1.useThemedPalette)(model.state.hasError ? 'error' : 'alert');
const themedBackgroundStyles = {
'&:hover': {
backgroundColor: palette.hover,
},
};
const isRTL = (0, common_1.useIsRTL)();
const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
const borderStyleProps = {
[borderBottomLeftRadius]: tokens_1.borderRadius.m,
[borderTopLeftRadius]: tokens_1.borderRadius.m,
[borderBottomRightRadius]: model.state.isSticky ? 0 : tokens_1.borderRadius.m,
[borderTopRightRadius]: model.state.isSticky ? 0 : tokens_1.borderRadius.m,
};
return ((0, react_1.jsx)(layout_1.Flex, { as: Element, ...tokens_1.type.levels.subtext.large, fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`, border: "0", display: "flex", alignItems: "center", ...borderStyleProps, css: [styles, themedBackgroundStyles], ...elemProps }, children));
});