@navinc/base-react-components/dist/pricing-card.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import styled from 'styled-components';
import Button from './button';
import Copy from './copy';
import Header from './header.js';
import Icon from './icon.js';
import Text from './text';
import CDNIllustration from './cdn-illustration.js';
const DetailsDrawer = styled(Button).attrs(() => ({ variation: 'noOutline' })) `
  display: flex;
  justify-content: center;
  align-items: center;

  & > ${Copy} {
    padding-right: 8px;
  }

  & > ${Icon} {
    fill: ${({ theme }) => theme.neutral400};
  }
`;
const DisclaimerAsterisk = styled(Text) `
  font-size: 12px;
  position: absolute;
`;
const Flag = styled.div `
  display: inline-block;
  background-color: ${({ theme }) => theme.azure};
  padding: 4px 8px;
  border-radius: 0 0 10px 10px;
  width: 128px;
  height: 32px;

  & > ${Copy} {
    color: ${({ theme }) => theme.white};
    text-align: center;
  }
`;
const PlanPrice = styled(Copy) `
  position: relative;
  & > ${DisclaimerAsterisk} {
    margin-left: 2px;
  }
`;
const StyledButton = styled(Button).attrs(() => ({ variation: 'outline', size: 'large' })) ``;
const SelectPlanButton = styled.div `
  width: min-content;
  margin: auto;
`;
const NoPaddingCard = styled.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.div `
  display: flex;
  &::before {
    content: '•';
    padding-right: 8px;
  }
`;
const StripedRowContent = styled(Copy).attrs(() => ({ size: 'sm' })) `
  display: inline-block;
`;
const StripedContentWrapper = styled.div `
  & > ${StripedRow} {
    padding: 16px 24px;
  }
  & > ${StripedRow}:nth-child(odd) {
    background-color: ${({ theme }) => theme.neutral100};
  }
`;
const MobileStripedContentWrapper = styled(StripedContentWrapper) `
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    display: none;
  }
`;
const DesktopStripedContentWrapper = styled(StripedContentWrapper) `
  display: none;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    display: block;
  }
`;
const PlanHeadline = styled.div `
  width: 100%;
  padding-top: 16px;
`;
const Illustration = styled.img `
  width: auto;
  height: auto;
  max-height: 100px;
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    max-height: 200px;
  }
`;
const StyledCDNIllustration = styled(CDNIllustration) `
  width: auto;
  height: auto;
  max-height: 100px;
  @media (${({ theme }) => theme.forLargerThanPhone}) {
    max-height: 200px;
  }
`;
const PricingCardContent = styled.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} {
    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} {
      text-align: center;
    }

    & > ${Copy} {
      grid-area: description;
      padding: 0 36px;
    }

    & > ${DetailsDrawer} {
      display: none;
    }

    & > ${Flag} {
      transform: none;
      top: 0;
      left: calc(50% - 64px);
    }
  }
`;
export default ({ actionHref, actionTarget, altIllustration, altIllustrationText, description, disclaimerReference, features = [], illustration, isMostPopular, isSelected, planCode, planName, planPrice, shouldBeSelectable, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const renderFeatures = () => features.map((feature, i) => (_jsx(StripedRow, { children: _jsx(StripedRowContent, { children: _jsx(Text, { children: feature }, void 0) }, void 0) }, `${feature}${i}`)));
    return (_jsxs(NoPaddingCard, Object.assign({ isSelected: isSelected }, { children: [_jsxs(PricingCardContent, { children: [isMostPopular && (_jsx(Flag, Object.assign({ "data-testid": "pricing-card:is_most_popular" }, { children: _jsx(Copy, { children: "Most popular" }, void 0) }), void 0)), altIllustration ? (_jsx(Illustration, { src: altIllustration, alt: altIllustrationText }, void 0)) : (!!illustration && _jsx(StyledCDNIllustration, { filename: illustration, "data-testid": "pricing-card:illustration" }, void 0)), _jsxs(PlanHeadline, { children: [_jsx(Header, Object.assign({ size: "lg", "data-testid": "pricing-card:plan_name" }, { children: planName }), void 0), _jsxs(PlanPrice, Object.assign({ "data-testid": "pricing-card:plan_price" }, { children: [_jsx("strong", { children: planPrice }, void 0), _jsx(DisclaimerAsterisk, { children: '*'.repeat(disclaimerReference) }, void 0)] }), void 0)] }, void 0), actionHref && shouldBeSelectable && (_jsx(SelectPlanButton, { children: isSelected ? (_jsx(StyledButton, Object.assign({ disabled: true, "data-testid": "pricing-card:is_selected" }, { children: "Current Plan" }), void 0)) : (_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)), _jsx(Copy, Object.assign({ bold: true }, { children: description }), void 0), !!features.length && (_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: [_jsx(Copy, Object.assign({ size: "sm", light: true }, { children: "See more details" }), void 0), _jsx(Icon, { name: isOpen ? 'actions/carrot-up' : 'actions/carrot-down' }, void 0)] }), void 0))] }, void 0), isOpen && (_jsx(MobileStripedContentWrapper, Object.assign({ "data-testid": "pricing-card-mobile-features" }, { children: renderFeatures() }), void 0)), _jsx(DesktopStripedContentWrapper, Object.assign({ "data-testid": "pricing-card-desktop-features" }, { children: renderFeatures() }), void 0)] }), void 0));
};
//# sourceMappingURL=pricing-card.js.map