@navinc/base-react-components
Version:
Nav's Pattern Library
231 lines (230 loc) • 11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 styled_components_1 = __importStar(require("styled-components"));
const copy_js_1 = __importDefault(require("./copy.js"));
const icon_js_1 = __importDefault(require("./icon.js"));
const icon_button_1 = __importDefault(require("./icon-button"));
const link_js_1 = __importDefault(require("./link.js"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const cdn_asset_js_1 = require("./cdn-asset.js");
const olderStyles = {
missingInfoAction: {
primaryColor: 'mermaidGreen500',
secondaryColor: 'mermaidGreen100',
defaultIcon: 'system/search',
defaultActionIcon: 'actions/carrot-right',
},
improveAction: {
primaryColor: 'bubbleBlue500',
secondaryColor: 'bubbleBlue100',
defaultIcon: 'actions/circle-info',
defaultActionIcon: 'actions/carrot-right',
},
positiveAction: {
primaryColor: 'seaturtleGreen200',
secondaryColor: 'seaturtleGreen100',
defaultIcon: 'feedback/thumbs-up',
defaultActionIcon: 'actions/carrot-right',
},
neutralAction: {
primaryColor: 'mermaidGreen400',
secondaryColor: 'mermaidGreen100',
defaultIcon: 'actions/circle-info',
defaultActionIcon: 'actions/carrot-right',
},
warning: {
primaryColor: 'flounderYellow200',
secondaryColor: 'flounderYellow100',
defaultIcon: 'actions/circle-warning',
defaultActionIcon: 'actions/close',
},
error: {
primaryColor: 'sebastianRed200',
secondaryColor: 'sebastianRed100',
defaultIcon: 'actions/circle-warning',
defaultActionIcon: 'actions/close',
},
};
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
olderStyles;
styles;
exports.StyledBanner = styled_components_1.default.aside.withConfig({ displayName: "brc-sc-StyledBanner", componentId: "brc-sc-14hsll" }) `
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 }))) : ((0, jsx_runtime_1.jsx)(exports.StyledBanner, Object.assign({}, sharedProps, { onClick: action }, { children: children })));
}
else
return (0, jsx_runtime_1.jsx)(exports.StyledBanner, Object.assign({}, sharedProps, { children: children }));
};
exports.TitleCopy = (0, styled_components_1.default)(copy_js_1.default).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_components_1.default.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_components_1.default.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-1rujixh" }) `
flex: 1 1 auto;
& > ${copy_js_1.default}, & > ${link_js_1.default} {
flex: 1 1 100%;
}
`;
exports.ActionIcon = (0, styled_components_1.default)(icon_button_1.default).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 (0, is_rebrand_js_1.default)(theme) ? theme.navNeutral500 : theme.neutral500;
}
return theme[currentStyles === null || currentStyles === void 0 ? void 0 : currentStyles.primaryColor];
}};
&:hover,
&:hover:not([disabled]),
&:hover:active,
&:focus,
&:focus:active,
&:active {
color: ${({ theme, currentStyles, name }) => {
if (name === 'actions/close') {
return (0, is_rebrand_js_1.default)(theme) ? theme.navNeutral500 : theme.neutral500;
}
return theme[currentStyles === null || currentStyles === void 0 ? void 0 : currentStyles.primaryColor];
}};
}
`;
const ChildrenWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-ChildrenWrapper", componentId: "brc-sc-963vy7" }) `
width: '100%';
`;
const StyledIcon = (0, styled_components_1.default)(icon_js_1.default).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 theme = (0, styled_components_1.useTheme)();
const themeStyles = (0, is_rebrand_js_1.default)(theme) ? styles : olderStyles;
const currentStyles = (_a = Object.assign(Object.assign({}, themeStyles), expandedStyles)[type]) !== null && _a !== void 0 ? _a : styles.neutralAction;
const { primaryColor, defaultIcon, defaultActionIcon } = currentStyles;
const defaultDirectory = (0, is_rebrand_js_1.default)(theme) ? 'illustrations' : 'design-assets/illustrations';
return ((0, jsx_runtime_1.jsxs)(BannerContainer, Object.assign({ currentStyles: currentStyles, action: action, actionHref: actionHref, hasLabel: hasLabel, shouldHideBorder: shouldHideBorder, className: className, "data-testid": `banner:${type}` }, { children: [(0, jsx_runtime_1.jsx)(IconContainer, { children: CDNAssetIcon ? ((0, jsx_runtime_1.jsx)(cdn_asset_js_1.CDNAsset, { directory: defaultDirectory, filename: CDNAssetIcon })) : ((0, jsx_runtime_1.jsx)(StyledIcon, { name: icon || defaultIcon, color: primaryColor, currentStyles: currentStyles, "data-testid": "banner-icon" })) }), (0, jsx_runtime_1.jsxs)(Content, { children: [title && (0, jsx_runtime_1.jsx)(exports.TitleCopy, Object.assign({ bold: true }, { children: title })), copy && (0, jsx_runtime_1.jsx)(copy_js_1.default, { children: copy }), !!children && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), hasLabel && hasAction && ((0, jsx_runtime_1.jsx)(link_js_1.default, Object.assign({ bold: true, href: actionHref, onClick: action, target: actionTarget }, { children: actionLabel })))] }), !onDismiss && !hasLabel && hasAction && ((0, jsx_runtime_1.jsx)(exports.ActionIcon, { name: actionIcon || defaultActionIcon, currentStyles: currentStyles, "data-testid": "action-icon" })), onDismiss && ((0, jsx_runtime_1.jsx)(exports.ActionIcon, { currentStyles: currentStyles, onClick: onDismiss, "data-testid": "banner-dismiss", name: "actions/close" }))] })));
};
exports.Banner = Banner;
const StyledBannerExp = (0, styled_components_1.default)(exports.Banner).withConfig({ displayName: "brc-sc-StyledBannerExp", componentId: "brc-sc-vu3d5h" }) ``;
exports.default = StyledBannerExp;
//# sourceMappingURL=banner.js.map