UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

109 lines (108 loc) 4.45 kB
"use strict"; 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)); });