@navinc/base-react-components
Version:
Nav's Pattern Library
213 lines (201 loc) • 10.8 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StandardCard = exports.StandardCardTermsFooter = exports.StandardCardFocusedContent = exports.StandardCardFooter = exports.StandardCardHighlightedHeader = exports.StandardCardHeader = exports.StandardCardBackButton = exports.StandardCardLoadingContent = exports.StyledCDNAsset = exports.StyledBackButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const button_js_1 = require("./button.js");
const icon_js_1 = require("./icon.js");
const banner_js_1 = require("./banner.js");
const copy_js_1 = require("./copy.js");
const loading_dots_js_1 = require("./loading-dots.js");
const header_js_1 = require("./header.js");
const cdn_asset_js_1 = require("./cdn-asset.js");
exports.StyledBackButton = (0, styled_components_1.default)(button_js_1.Button).attrs(() => ({
variation: 'noOutline',
})).withConfig({ displayName: "brc-sc-StyledBackButton", componentId: "brc-sc-1uycx6s" }) `
margin-right: auto;
padding: 8px;
color: ${({ theme }) => theme.neutral400};
`;
exports.StyledCDNAsset = (0, styled_components_1.default)(cdn_asset_js_1.CDNAsset).withConfig({ displayName: "brc-sc-StyledCDNAsset", componentId: "brc-sc-1cjvaow" }) `
margin-top: 16px;
height: 180px;
width: 180px;
`;
const Content = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-1zat2q" }) `
align-items: center;
display: flex;
flex-direction: column;
${({ hasImage }) => !hasImage &&
`
height: 400px;
justify-content: center;
`}
& > ${loading_dots_js_1.LoadingDots} {
color: ${({ theme }) => theme.azure};
}
`;
const StandardCardLoadingContent = (_a) => {
var { imageFilename, directory, title } = _a, props = __rest(_a, ["imageFilename", "directory", "title"]);
const defaultDirectory = 'illustrations';
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!title && (0, jsx_runtime_1.jsx)(header_js_1.Header, { children: title }), (0, jsx_runtime_1.jsxs)(Content, Object.assign({ hasImage: !!imageFilename }, props, { children: [(0, jsx_runtime_1.jsx)(loading_dots_js_1.LoadingDots, {}), imageFilename && ((0, jsx_runtime_1.jsx)(exports.StyledCDNAsset, { directory: directory || defaultDirectory, filename: imageFilename, "data-testid": "card:loading-image" }))] }))] }));
};
exports.StandardCardLoadingContent = StandardCardLoadingContent;
exports.StandardCardLoadingContent.displayName = 'LoadingContent';
exports.StandardCardBackButton = (0, styled_components_1.default)((_a) => {
var { onClick, href } = _a, props = __rest(_a, ["onClick", "href"]);
return !(onClick || href) ? null : ((0, jsx_runtime_1.jsx)(exports.StyledBackButton, Object.assign({ onClick: onClick, href: href }, props, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "actions/arrow-back" }) })));
}).withConfig({ displayName: "brc-sc-StandardCardBackButton", componentId: "brc-sc-2lt2ig" }) ``;
exports.StandardCardBackButton.displayName = 'BackButton';
const StyledHeader = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StyledHeader", componentId: "brc-sc-1bsodrf" }) `
position: relative;
padding-bottom: 16px;
margin-bottom: 16px;
& > *:not(:first-child) {
margin-top: 4px;
}
&::before {
content: '';
width: 100%;
height: 4px;
position: absolute;
bottom: 0;
background: ${({ theme }) => theme.navNeutral200};
border-radius: 100px;
}
`;
const Label = (0, styled_components_1.default)(copy_js_1.Copy).attrs(() => ({ size: 'sm' })).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1sg6ijh" }) `
color: ${({ theme }) => theme.neutral400};
`;
const Title = (0, styled_components_1.default)(header_js_1.Header).withConfig({ displayName: "brc-sc-Title", componentId: "brc-sc-ih9z6m" }) ``;
const StyledFooter = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StyledFooter", componentId: "brc-sc-t18l6q" }) `
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 32px;
padding-top: 16px;
background: ${({ theme }) => theme.navSecondary100};
&::before {
content: '';
width: 100%;
height: 4px;
position: absolute;
top: 0;
background: ${({ theme }) => theme.navNeutral200};
border-radius: 100px;
}
/* For button spacing when there are multiple buttons */
& > *:not(${exports.StandardCardBackButton}) {
margin: 0 8px;
}
& > *:first-child:not(${exports.StandardCardBackButton}) {
margin-left: 0;
}
& > *:last-child:not(${exports.StandardCardBackButton}) {
margin-right: 0;
}
`;
const StyledFooterV2 = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StyledFooterV2", componentId: "brc-sc-1c4igmn" }) `
display: flex;
width: fit-content;
gap: 16px;
margin: auto;
padding-top: 16px;
padding-bottom: 8px;
background: ${({ theme }) => theme.navSecondary100};
flex-wrap: wrap-reverse;
justify-content: center;
`;
exports.StandardCardHeader = (0, styled_components_1.default)((_a) => {
var { children, label, title } = _a, remainingProps = __rest(_a, ["children", "label", "title"]);
return ((0, jsx_runtime_1.jsxs)(StyledHeader, Object.assign({}, remainingProps, { children: [label && (0, jsx_runtime_1.jsx)(Label, { children: label }), title && (0, jsx_runtime_1.jsx)(Title, { children: title }), children] })));
}).withConfig({ displayName: "brc-sc-StandardCardHeader", componentId: "brc-sc-beps57" }) ``;
exports.StandardCardHeader.displayName = 'Header';
const highlightVariation = {
default: null,
positive: 'navStatusPositive',
neutral: 'navSecondary600',
negative: 'navStatusNegative',
};
const getHighlightColor = (highlightColor, theme) => {
return highlightVariation[highlightColor] ? theme[highlightVariation[highlightColor]] : highlightColor;
};
exports.StandardCardHighlightedHeader = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StandardCardHighlightedHeader", componentId: "brc-sc-t81f2f" }) `
margin: -24px -24px 12px;
padding: 8px 24px;
${({ highlightColor, theme }) => highlightColor && `background: ${getHighlightColor(highlightColor, theme)}`}
`;
exports.StandardCardHighlightedHeader.displayName = 'HighlightedHeader';
exports.StandardCardFooter = (0, styled_components_1.default)((_a) => {
var { actionText = 'Next', actionForm, actionButtonType, actionDataTestId, onAction, actionHref, isActionDisabled, isLoading, onBack, backText = 'Go back', backHref, actionTarget, v2Footer, children, buttonProps } = _a, remainingProps = __rest(_a, ["actionText", "actionForm", "actionButtonType", "actionDataTestId", "onAction", "actionHref", "isActionDisabled", "isLoading", "onBack", "backText", "backHref", "actionTarget", "v2Footer", "children", "buttonProps"]);
const FooterVersion = v2Footer ? StyledFooterV2 : StyledFooter;
return ((0, jsx_runtime_1.jsxs)(FooterVersion, Object.assign({}, remainingProps, { children: [(!!onBack || !!backHref) &&
(v2Footer ? ((0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ "data-testid": "card:back", type: "button", onClick: onBack, href: backHref, size: "cardButton", variation: "noOutline" }, buttonProps, { children: backText }))) : ((0, jsx_runtime_1.jsx)(exports.StandardCardBackButton, { "data-testid": "card:back", type: "button", onClick: onBack, href: backHref }))), children, (!!onAction || !!actionHref || !!actionForm) && ((0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ "data-testid": actionDataTestId || 'card:next', onClick: onAction, form: actionForm, href: actionHref, isLoading: isLoading, disabled: isLoading || isActionDisabled, size: !v2Footer && 'cardButton', variation: !v2Footer && 'noOutline', target: actionTarget }, (actionButtonType && { type: actionButtonType }), buttonProps, { children: actionText })))] })));
}).withConfig({ displayName: "brc-sc-StandardCardFooter", componentId: "brc-sc-53wmpt" }) ``;
exports.StandardCardFooter.displayName = 'Footer';
const focusedCSS = `
text-align: center;
width: 100%;
& ${exports.StandardCardHeader} {
display: flex;
justify-content: center;
padding-bottom: 8px;
text-align: center;
}
& ${Title} {
max-width: 400px;
}
`;
exports.StandardCardFocusedContent = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StandardCardFocusedContent", componentId: "brc-sc-13bbdxm" }) `
align-items: center;
display: flex;
flex-direction: column;
& > * {
max-width: 400px;
}
`;
exports.StandardCardTermsFooter = styled_components_1.default.section.withConfig({ displayName: "brc-sc-StandardCardTermsFooter", componentId: "brc-sc-1pwfp23" }) `
padding: 16px 32px;
margin: 24px -24px -24px -24px;
background-color: ${({ theme }) => theme.navNeutral100};
`;
const Card = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Card", componentId: "brc-sc-x88qp3" }) `
position: relative;
padding: 24px;
border-radius: 16px;
background-color: ${({ theme }) => theme.navSecondary100};
box-shadow: 0 24px 16px -16px rgba(0, 0, 0, 0.05);
overflow: hidden;
${({ highlightColor, theme }) => highlightColor && `border: solid 2px ${getHighlightColor(highlightColor, theme)};`}
& ${banner_js_1.Banner} {
margin: 0 0 16px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
${({ isFocused }) => isFocused && focusedCSS}
`;
Card.displayName = 'StandardCard';
exports.StandardCard = Card;
exports.StandardCard.Header = exports.StandardCardHeader;
exports.StandardCard.HighlightedHeader = exports.StandardCardHighlightedHeader;
exports.StandardCard.Footer = exports.StandardCardFooter;
exports.StandardCard.BackButton = exports.StandardCardBackButton;
exports.StandardCard.FocusedContent = exports.StandardCardFocusedContent;
exports.StandardCard.LoadingContent = exports.StandardCardLoadingContent;
exports.StandardCard.TermsFooter = exports.StandardCardTermsFooter;
//# sourceMappingURL=standard-card.js.map