@navinc/base-react-components
Version:
Nav's Pattern Library
190 lines (182 loc) • 8.91 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled, css } from 'styled-components';
import { Copy } from './copy.js';
import { Icon } from './icon.js';
import { IconButton } from './icon-button.js';
import { Link } from './link.js';
import { CDNAsset } from './cdn-asset.js';
import { isKeyOf } from '@navinc/utils';
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',
},
};
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- ensure styles meets required type
styles;
const styledBannerCss = css `
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 }) => isKeyOf($currentStyles.secondaryColor, theme.colors) && theme.colors[$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: ${isKeyOf($currentStyles.primaryColor, theme) && 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;
}
`;
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export const StyledBanner = styled.aside.withConfig({ displayName: "brc-sc-StyledBanner", componentId: "brc-sc-jpri22" }) `
${styledBannerCss}
`;
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export const StyledBannerAsLink = styled.a.withConfig({ displayName: "brc-sc-StyledBannerAsLink", componentId: "brc-sc-qb4wru" }) `
${styledBannerCss}
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 }));
};
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export const TitleCopy = styled(Copy).withConfig({ displayName: "brc-sc-TitleCopy", componentId: "brc-sc-1u024mh" }) `
@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-15908up" }) `
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-1wxjtk8" }) `
flex: 1 1 auto;
& > ${Copy}, & > ${Link} {
flex: 1 1 100%;
}
`;
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export const ActionIcon = styled(IconButton).withConfig({ displayName: "brc-sc-ActionIcon", componentId: "brc-sc-u2gvwg" }) `
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.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.primaryColor];
}};
}
`;
const ChildrenWrapper = styled.div.withConfig({ displayName: "brc-sc-ChildrenWrapper", componentId: "brc-sc-3uougy" }) `
width: '100%';
`;
const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-e5eoue" }) `
color: ${({ theme, $currentStyles }) => isKeyOf($currentStyles.primaryColor, theme.colors) && 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" }))] }));
};
/**
* @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead
Use when you want users to take an action after reading the banner.
#### Props
- type: (string) determines the colors and default icons.
- `missingInfoAction|improveAction|positiveAction|neutralAction|warning`
- icon: (IconComponent) determines the icon next to the text. If no icon is provided it will use the default icon for the type specified
- Any react component that returns an svg
- actionIcon: (IconComponent) OPTIONAL - Overrides the icon used if there is no actionLabel
- Any react component that returns an svg
- copy: (string) the copy inside the banner
- action: (function()) function that fires when the banner/link is clicked on
- actionHref: (string) the link the user is take to when the banner/link is clicked on
- actionLabel: (string) The label of the link. If there is no actionLabel it will show a the actionIcon
- expandedStyles: (object) An object that expands the types available to the banner
- onDismiss: (function()) function that fires when you click the close button
**/
export const Banner = styled(_Banner).withConfig({ displayName: "brc-sc-Banner", componentId: "brc-sc-jnh6qs" }) ``;
//# sourceMappingURL=banner.js.map