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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Copy } from './copy.js';
import { Icon } from './icon.js';
import { IconButton } from './icon-button';
import { Link } from './link.js';
import { CDNAsset } from './cdn-asset.js';
const styles = {
    missingInfoAction: {
        primaryColor: 'navNeutral400',
        secondaryColor: 'navNeutral100',
        defaultIcon: 'system/search',
        defaultActionIcon: 'actions/carrot-right',
    },
    improveAction: {
        primaryColor: 'navPrimary400',
        secondaryColor: 'navPrimary100',
        defaultIcon: 'actions/circle-info',
        defaultActionIcon: 'actions/carrot-right',
    },
    positiveAction: {
        primaryColor: 'navStatusPositive',
        secondaryColor: 'navStatusPositive200',
        defaultIcon: 'feedback/thumbs-up',
        defaultActionIcon: 'actions/carrot-right',
    },
    neutralAction: {
        primaryColor: 'navNeutral400',
        secondaryColor: 'navNeutral100',
        defaultIcon: 'actions/circle-info',
        defaultActionIcon: 'actions/carrot-right',
    },
    warning: {
        primaryColor: 'navSecondary600',
        secondaryColor: 'navSecondary',
        defaultIcon: 'actions/circle-warning',
        defaultActionIcon: 'actions/close',
    },
    error: {
        primaryColor: 'navStatusNegative',
        secondaryColor: 'navStatusNegative200',
        defaultIcon: 'actions/circle-warning',
        defaultActionIcon: 'actions/close',
    },
};
// ensure styles meets required type
styles;
export const StyledBanner = styled.aside.withConfig({ displayName: "brc-sc-StyledBanner", componentId: "brc-sc-14hsll" }) `
  box-shadow: 0 10px 11px -8px rgb(0 0 0 / 12%);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  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;
  }
`;
export const StyledBannerAsLink = styled(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 ? (_jsx(StyledBannerAsLink, Object.assign({}, sharedProps, { href: actionHref, children: children }))) : (_jsx(StyledBanner, Object.assign({}, sharedProps, { onClick: action, children: children })));
    }
    else
        return _jsx(StyledBanner, Object.assign({}, sharedProps, { children: children }));
};
export const TitleCopy = styled(Copy).withConfig({ displayName: "brc-sc-TitleCopy", componentId: "brc-sc-1flo442" }) `
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    margin-right: 28px; /* need to give space for the (X) */
  }
`;
const IconContainer = styled.div.withConfig({ displayName: "brc-sc-IconContainer", componentId: "brc-sc-1ymrqvt" }) `
  flex: 0 0 24px;
  height: auto;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    margin-right: 16px;
  }
`;
const Content = styled.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-1rujixh" }) `
  flex: 1 1 auto;

  & > ${Copy}, & > ${Link} {
    flex: 1 1 100%;
  }
`;
export const ActionIcon = styled(IconButton).withConfig({ displayName: "brc-sc-ActionIcon", componentId: "brc-sc-1njt6lj" }) `
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 16px;
  width: auto;
  height: 24px;
  color: ${({ theme, $currentStyles, name }) => {
    if (name === 'actions/close') {
        return theme.navNeutral500;
    }
    return theme[$currentStyles === null || $currentStyles === void 0 ? void 0 : $currentStyles.primaryColor];
}};

  &:hover,
  &:focus,
  &:active,
  &:hover:not([disabled]),
  &:hover:active,
  &:focus:active {
    color: ${({ theme, $currentStyles, name }) => {
    if (name === 'actions/close') {
        return theme.navNeutral500;
    }
    return theme[$currentStyles === null || $currentStyles === void 0 ? void 0 : $currentStyles.primaryColor];
}};
  }
`;
const ChildrenWrapper = styled.div.withConfig({ displayName: "brc-sc-ChildrenWrapper", componentId: "brc-sc-963vy7" }) `
  width: '100%';
`;
const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-vqoi4k" }) `
  color: ${({ theme, $currentStyles }) => theme[$currentStyles.primaryColor]};
`;
const _Banner = ({ action, actionHref, actionLabel, actionIcon, actionTarget = '', children, className, copy, expandedStyles, icon, onDismiss, shouldHideBorder, CDNIllustrationIcon: CDNAssetIcon, title, type = 'neutralAction', }) => {
    var _a;
    const hasLabel = !!actionLabel;
    const hasAction = !!action || !!actionHref;
    const themeStyles = styles;
    const currentStyles = (_a = Object.assign(Object.assign({}, themeStyles), expandedStyles)[type]) !== null && _a !== void 0 ? _a : styles.neutralAction;
    const { primaryColor, defaultIcon, defaultActionIcon } = currentStyles;
    const defaultDirectory = 'illustrations';
    return (_jsxs(BannerContainer, { "$currentStyles": currentStyles, action: action, actionHref: actionHref, hasLabel: hasLabel, shouldHideBorder: shouldHideBorder, className: className, "data-testid": `banner:${type}`, children: [_jsx(IconContainer, { children: CDNAssetIcon ? (_jsx(CDNAsset, { directory: defaultDirectory, filename: CDNAssetIcon })) : (_jsx(StyledIcon, { name: icon || defaultIcon, color: primaryColor, "$currentStyles": currentStyles, "data-testid": "banner-icon" })) }), _jsxs(Content, { children: [title && _jsx(TitleCopy, { bold: true, children: title }), copy && _jsx(Copy, { children: copy }), !!children && _jsx(ChildrenWrapper, { children: children }), hasLabel && hasAction && (_jsx(Link, { bold: true, href: actionHref, onClick: action, target: actionTarget, children: actionLabel }))] }), !onDismiss && !hasLabel && hasAction && (_jsx(ActionIcon, { name: actionIcon || defaultActionIcon, "$currentStyles": currentStyles, "data-testid": "action-icon" })), onDismiss && (_jsx(ActionIcon, { "$currentStyles": currentStyles, onClick: onDismiss, "data-testid": "banner-dismiss", name: "actions/close" }))] }));
};
export const Banner = styled(_Banner).withConfig({ displayName: "brc-sc-Banner", componentId: "brc-sc-1lddd2z" }) ``;
//# sourceMappingURL=banner.js.map