@navinc/base-react-components
Version:
Nav's Pattern Library
196 lines (181 loc) • 8.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const button_1 = __importDefault(require("./button"));
const copy_1 = __importDefault(require("./copy"));
const header_js_1 = __importDefault(require("./header.js"));
const icon_js_1 = __importDefault(require("./icon.js"));
const text_1 = __importDefault(require("./text"));
const cdn_illustration_js_1 = __importDefault(require("./cdn-illustration.js"));
const DetailsDrawer = (0, styled_components_1.default)(button_1.default).attrs(() => ({ variation: 'noOutline' })) `
display: flex;
justify-content: center;
align-items: center;
& > ${copy_1.default} {
padding-right: 8px;
}
& > ${icon_js_1.default} {
fill: ${({ theme }) => theme.neutral400};
}
`;
const DisclaimerAsterisk = (0, styled_components_1.default)(text_1.default) `
font-size: 12px;
position: absolute;
`;
const Flag = styled_components_1.default.div `
display: inline-block;
background-color: ${({ theme }) => theme.azure};
padding: 4px 8px;
border-radius: 0 0 10px 10px;
width: 128px;
height: 32px;
& > ${copy_1.default} {
color: ${({ theme }) => theme.white};
text-align: center;
}
`;
const PlanPrice = (0, styled_components_1.default)(copy_1.default) `
position: relative;
& > ${DisclaimerAsterisk} {
margin-left: 2px;
}
`;
const StyledButton = (0, styled_components_1.default)(button_1.default).attrs(() => ({ variation: 'outline', size: 'large' })) ``;
const SelectPlanButton = styled_components_1.default.div `
width: min-content;
margin: auto;
`;
const NoPaddingCard = styled_components_1.default.div `
background-color: ${({ theme }) => theme.white};
opacity: ${({ isSelected }) => (isSelected ? 0.5 : 1)};
border-radius: 4px;
width: 100%;
box-shadow: 0 0 3px 0 ${({ theme }) => theme.neutral300}, 0 1px 2px 0 ${({ theme }) => theme.neutral300};
`;
const StripedRow = styled_components_1.default.div `
display: flex;
&::before {
content: '•';
padding-right: 8px;
}
`;
const StripedRowContent = (0, styled_components_1.default)(copy_1.default).attrs(() => ({ size: 'sm' })) `
display: inline-block;
`;
const StripedContentWrapper = styled_components_1.default.div `
& > ${StripedRow} {
padding: 16px 24px;
}
& > ${StripedRow}:nth-child(odd) {
background-color: ${({ theme }) => theme.neutral100};
}
`;
const MobileStripedContentWrapper = (0, styled_components_1.default)(StripedContentWrapper) `
@media (${({ theme }) => theme.forLargerThanPhone}) {
display: none;
}
`;
const DesktopStripedContentWrapper = (0, styled_components_1.default)(StripedContentWrapper) `
display: none;
@media (${({ theme }) => theme.forLargerThanPhone}) {
display: block;
}
`;
const PlanHeadline = styled_components_1.default.div `
width: 100%;
padding-top: 16px;
`;
const Illustration = styled_components_1.default.img `
width: auto;
height: auto;
max-height: 100px;
@media (${({ theme }) => theme.forLargerThanPhone}) {
max-height: 200px;
}
`;
const StyledCDNIllustration = (0, styled_components_1.default)(cdn_illustration_js_1.default) `
width: auto;
height: auto;
max-height: 100px;
@media (${({ theme }) => theme.forLargerThanPhone}) {
max-height: 200px;
}
`;
const PricingCardContent = styled_components_1.default.div `
display: grid;
position: relative;
padding: 24px;
grid-gap: 16px;
grid-template:
'image plan plan'
'image plan plan'
'image description description'
'button button button'
'details details details' / auto auto auto;
& > ${StyledCDNIllustration}, ${Illustration} {
grid-area: image;
margin: auto;
padding-top: 24px;
}
& > ${PlanHeadline} {
grid-area: plan;
padding-bottom: ${({ shouldBeSelectable }) => (shouldBeSelectable ? '0px' : '24px')};
}
& > ${SelectPlanButton} {
grid-area: button;
}
& > ${copy_1.default} {
grid-area: description;
}
& > ${DetailsDrawer} {
grid-area: details;
&:hover {
background-color: ${({ theme }) => theme.white};
}
}
& > ${Flag} {
position: absolute;
transform: rotateZ(-90deg);
top: 44%;
left: -48px;
}
@media (${({ theme }) => theme.forLargerThanPhone}) {
grid-template-areas:
'image image image'
'plan plan plan'
'button button button'
'description description description';
& > ${PlanHeadline}, & > ${copy_1.default} {
text-align: center;
}
& > ${copy_1.default} {
grid-area: description;
padding: 0 36px;
}
& > ${DetailsDrawer} {
display: none;
}
& > ${Flag} {
transform: none;
top: 0;
left: calc(50% - 64px);
}
}
`;
exports.default = ({ actionHref, actionTarget, altIllustration, altIllustrationText, description, disclaimerReference, features = [], illustration, isMostPopular, isSelected, planCode, planName, planPrice, shouldBeSelectable, }) => {
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const renderFeatures = () => features.map((feature, i) => ((0, jsx_runtime_1.jsx)(StripedRow, { children: (0, jsx_runtime_1.jsx)(StripedRowContent, { children: (0, jsx_runtime_1.jsx)(text_1.default, { children: feature }, void 0) }, void 0) }, `${feature}${i}`)));
return ((0, jsx_runtime_1.jsxs)(NoPaddingCard, Object.assign({ isSelected: isSelected }, { children: [(0, jsx_runtime_1.jsxs)(PricingCardContent, { children: [isMostPopular && ((0, jsx_runtime_1.jsx)(Flag, Object.assign({ "data-testid": "pricing-card:is_most_popular" }, { children: (0, jsx_runtime_1.jsx)(copy_1.default, { children: "Most popular" }, void 0) }), void 0)), altIllustration ? ((0, jsx_runtime_1.jsx)(Illustration, { src: altIllustration, alt: altIllustrationText }, void 0)) : (!!illustration && (0, jsx_runtime_1.jsx)(StyledCDNIllustration, { filename: illustration, "data-testid": "pricing-card:illustration" }, void 0)), (0, jsx_runtime_1.jsxs)(PlanHeadline, { children: [(0, jsx_runtime_1.jsx)(header_js_1.default, Object.assign({ size: "lg", "data-testid": "pricing-card:plan_name" }, { children: planName }), void 0), (0, jsx_runtime_1.jsxs)(PlanPrice, Object.assign({ "data-testid": "pricing-card:plan_price" }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: planPrice }, void 0), (0, jsx_runtime_1.jsx)(DisclaimerAsterisk, { children: '*'.repeat(disclaimerReference) }, void 0)] }), void 0)] }, void 0), actionHref && shouldBeSelectable && ((0, jsx_runtime_1.jsx)(SelectPlanButton, { children: isSelected ? ((0, jsx_runtime_1.jsx)(StyledButton, Object.assign({ disabled: true, "data-testid": "pricing-card:is_selected" }, { children: "Current Plan" }), void 0)) : ((0, jsx_runtime_1.jsx)(StyledButton, Object.assign({ href: actionHref, target: actionTarget, trackingContext: {
type: 'interaction_upgrade_page',
payload: { category: 'upgrade_page_click', label: `select_${planCode}`, name: `select_${planCode}` },
}, "data-testid": `pricing-card:select_this_plan_${planCode}` }, { children: "Select this plan" }), void 0)) }, void 0)), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ bold: true }, { children: description }), void 0), !!features.length && ((0, jsx_runtime_1.jsxs)(DetailsDrawer, Object.assign({ trackingContext: {
type: 'interaction_upgrade_page',
payload: { category: 'upgrade_page_click', label: `select_${planCode}`, name: `select_${planCode}` },
}, onClick: () => setIsOpen((isOpen) => !isOpen), "data-testid": "pricing-card:mobile_see_more_details" }, { children: [(0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ size: "sm", light: true }, { children: "See more details" }), void 0), (0, jsx_runtime_1.jsx)(icon_js_1.default, { name: isOpen ? 'actions/carrot-up' : 'actions/carrot-down' }, void 0)] }), void 0))] }, void 0), isOpen && ((0, jsx_runtime_1.jsx)(MobileStripedContentWrapper, Object.assign({ "data-testid": "pricing-card-mobile-features" }, { children: renderFeatures() }), void 0)), (0, jsx_runtime_1.jsx)(DesktopStripedContentWrapper, Object.assign({ "data-testid": "pricing-card-desktop-features" }, { children: renderFeatures() }), void 0)] }), void 0));
};
//# sourceMappingURL=pricing-card.js.map