@navinc/base-react-components/cjs/banner.js

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Banner = exports.ActionIcon = exports.TitleCopy = exports.StyledBannerAsLink = exports.StyledBanner = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const prop_types_1 = __importDefault(require("prop-types"));
const styled_components_1 = __importDefault(require("styled-components"));
const copy_1 = __importDefault(require("./copy"));
const icon_js_1 = __importDefault(require("./icon.js"));
const link_js_1 = __importDefault(require("./link.js"));
const cdn_illustration_js_1 = __importDefault(require("./cdn-illustration.js"));
const styles = {
    missingInfoAction: {
        primaryColor: 'paleGold500',
        secondaryColor: 'paleGold100',
        defaultIcon: 'system/search',
        defultActionIcon: 'actions/carrot-right',
    },
    improveAction: {
        primaryColor: 'rose500',
        secondaryColor: 'rose100',
        defaultIcon: 'actions/circle-info',
        defultActionIcon: 'actions/carrot-right',
    },
    positiveAction: {
        primaryColor: 'greenSheen500',
        secondaryColor: 'greenSheen100',
        defaultIcon: 'feedback/thumbs-up',
        defultActionIcon: 'actions/carrot-right',
    },
    neutralAction: {
        primaryColor: 'lightBlue400',
        secondaryColor: 'lightBlue100',
        defaultIcon: 'actions/circle-info',
        defultActionIcon: 'actions/carrot-right',
    },
    warning: {
        primaryColor: 'tuscan200',
        secondaryColor: 'tuscan100',
        defaultIcon: 'actions/circle-warning',
        defultActionIcon: 'actions/close',
    },
    error: {
        primaryColor: 'copperRed200',
        secondaryColor: 'copperRed100',
        defaultIcon: 'actions/circle-warning',
        defultActionIcon: 'actions/close',
    },
};
exports.StyledBanner = styled_components_1.default.aside `
  box-shadow: 0 10px 11px -8px rgba(0, 0, 0, 0.12);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: ${({ currentStyles, theme }) => theme[currentStyles.secondaryColor]};
  cursor: ${({ hasLabel, onDismiss, hasAction }) => hasAction && !hasLabel && !onDismiss && 'pointer'};

  &::before {
    ${({ currentStyles, shouldHideBorder, theme }) => !shouldHideBorder &&
    `content: '';
    width: 100%;
    height: 8px;
    position: absolute;
    left: 0;
    top: 0;
    background: ${theme[currentStyles.primaryColor]};
    border-radius: 14px 14px 0 0;`}
  }
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-template-rows: auto;
    grid-template-columns: auto 1fr;
    padding-right: ${({ hasLabel }) => !hasLabel && '64px'};
    text-align: left;
  }
`;
exports.StyledBannerAsLink = (0, styled_components_1.default)(exports.StyledBanner).attrs(() => ({
    as: 'a',
})) `
  text-decoration: none;
`;
const BannerContainer = ({ currentStyles, action = () => { }, actionHref, hasLabel, children, className, shouldHideBorder, 'data-testid': dataTestId, }) => {
    const sharedProps = {
        className,
        currentStyles,
        hasLabel,
        shouldHideBorder,
        'data-testid': dataTestId,
    };
    if (!hasLabel) {
        return actionHref ? ((0, jsx_runtime_1.jsx)(exports.StyledBannerAsLink, Object.assign({}, sharedProps, { href: actionHref }, { children: children }), void 0)) : ((0, jsx_runtime_1.jsx)(exports.StyledBanner, Object.assign({}, sharedProps, { onClick: action }, { children: children }), void 0));
    }
    else
        return (0, jsx_runtime_1.jsx)(exports.StyledBanner, Object.assign({}, sharedProps, { children: children }), void 0);
};
exports.TitleCopy = (0, styled_components_1.default)(copy_1.default) `
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    margin-right: 28px; /* need to give space for the (X) */
  }
`;
const IconContainer = styled_components_1.default.div `
  flex: 0 0 24px;
  height: auto;
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    margin-right: 16px;
  }
`;
const Content = styled_components_1.default.div `
  flex: 1 1 auto;

  & > ${copy_1.default}, & > ${link_js_1.default} {
    flex: 1 1 100%;
  }
`;
exports.ActionIcon = (0, styled_components_1.default)(icon_js_1.default) `
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 16px;
  width: auto;
  height: 24px;
  color: ${({ theme, defaultcolor = theme.neutral500, name }) => (name === 'close' ? theme.neutral500 : defaultcolor)};
`;
const ChildrenWrapper = styled_components_1.default.div `
  width: '100%';
`;
const StyledIcon = (0, styled_components_1.default)(icon_js_1.default) `
  color: ${({ theme, color }) => theme[color]};
`;
const Banner = ({ action, actionHref, actionLabel, actionIcon, actionTarget = '', actionTrackingContext = {}, children, className, copy, expandedStyles = {}, icon, onDismiss, shouldHideBorder, CDNIllustrationIcon, title, type = 'neutralAction', }) => {
    var _a;
    const hasLabel = !!actionLabel;
    const hasAction = !!action || !!actionHref;
    const currentStyles = (_a = Object.assign(Object.assign({}, styles), expandedStyles)[type]) !== null && _a !== void 0 ? _a : styles.neutralAction;
    const { primaryColor, defaultIcon, defultActionIcon } = currentStyles;
    return ((0, jsx_runtime_1.jsxs)(BannerContainer, Object.assign({ currentStyles: currentStyles, action: action, actionHref: actionHref, hasLabel: hasLabel, shouldHideBorder: shouldHideBorder, onDismiss: onDismiss, className: className, "data-testid": `banner:${type}` }, { children: [(0, jsx_runtime_1.jsx)(IconContainer, { children: CDNIllustrationIcon ? ((0, jsx_runtime_1.jsx)(cdn_illustration_js_1.default, { filename: CDNIllustrationIcon }, void 0)) : ((0, jsx_runtime_1.jsx)(StyledIcon, { name: icon || defaultIcon, color: primaryColor, "data-testid": "banner-icon" }, void 0)) }, void 0), (0, jsx_runtime_1.jsxs)(Content, { children: [title && (0, jsx_runtime_1.jsx)(exports.TitleCopy, Object.assign({ bold: true }, { children: title }), void 0), copy && (0, jsx_runtime_1.jsx)(copy_1.default, { children: copy }, void 0), !!children && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }, void 0), hasLabel && hasAction && ((0, jsx_runtime_1.jsx)(link_js_1.default, Object.assign({ bold: true, href: actionHref, onClick: action, target: actionTarget, trackingContext: actionTrackingContext }, { children: actionLabel }), void 0))] }, void 0), !onDismiss && !hasLabel && hasAction && ((0, jsx_runtime_1.jsx)(exports.ActionIcon, { name: actionIcon || defultActionIcon, defaultcolor: primaryColor, "data-testid": "action-icon" }, void 0)), onDismiss && (0, jsx_runtime_1.jsx)(exports.ActionIcon, { onClick: onDismiss, "data-testid": "banner-dismiss", name: "actions/close" }, void 0)] }), void 0));
};
exports.Banner = Banner;
exports.Banner.propTypes = {
    action: prop_types_1.default.func,
    actionHref: prop_types_1.default.string,
    actionLabel: prop_types_1.default.node,
    type: prop_types_1.default.string,
    icon: prop_types_1.default.string,
    actionIcon: prop_types_1.default.string,
    title: prop_types_1.default.node,
    copy: prop_types_1.default.node,
    onDismiss: prop_types_1.default.func,
    expandedStyles: prop_types_1.default.object,
    shouldHideBorder: prop_types_1.default.bool,
};
const StyledBannerExp = (0, styled_components_1.default)(exports.Banner) ``;
exports.default = StyledBannerExp;
//# sourceMappingURL=banner.js.map