@navinc/base-react-components/dist/plan-item.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from 'styled-components';
import Button from './button';
import Copy from './copy';
import Header from './header.js';
const CurrentPlan = styled.div `
  display: flex;
  align-items: center;
  padding: 6px 4px 8px;

  & > ${Copy} {
    margin-left: 8px;
  }
`;
const Dot = styled.span `
  min-width: 10px;
  min-height: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: ${({ theme }) => theme.azure};
`;
const CurrentPlanIndicator = ({ text, size }) => (_jsxs(CurrentPlan, { children: [_jsx(Dot, {}, void 0), _jsx(Copy, Object.assign({ size: size, bold: true }, { children: text }), void 0)] }, void 0));
export const Flag = styled.div `
  display: inline-block;
  background-color: ${({ theme }) => theme.greenSheen400};
  padding: 4px 8px;
  border-radius: 6px;
  width: max-content;

  & > ${Copy} {
    color: ${({ theme }) => theme.white};
    text-align: center;
  }
`;
export const FlagBorder = styled.div `
  display: none;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    display: block;
    top: 0;
    width: 80%;
    margin: 0 auto;
    border-top: 5px solid ${({ theme }) => theme.greenSheen400};
  }
`;
const DetailsLink = styled(Button).attrs(() => ({ variation: 'noOutline' })) `
  padding: 8px 0;
  & > ${Copy} {
    color: ${({ theme }) => theme.neutral400};
  }
`;
const PlanItem = styled.div `
  display: grid;
  padding: 0 4px 16px 4px;
  justify-items: center;
  text-align: center;
  grid-gap: 8px;

  & > ${Header} {
    padding-top: 8px;
  }

  & > ${DetailsLink} {
    &:hover {
      background-color: ${({ theme }) => theme.white};
    }
  }
`;
export default ({ action, actionHref, actionTarget, name, isActivePlanCode, planCode, price, isMostPopular }) => (_jsxs(PlanItem, { children: [isMostPopular && (_jsx(_Fragment, { children: _jsx(Flag, Object.assign({ "data-testid": "pricing-card:is_most_popular" }, { children: _jsx(Copy, Object.assign({ size: "sm" }, { children: "Most popular" }), void 0) }), void 0) }, void 0)), _jsx(Copy, Object.assign({ size: "sm" }, { children: name }), `${name}-${planCode}`), _jsx(Copy, { children: price }, void 0), action && (_jsx(DetailsLink, Object.assign({ onClick: action }, { children: _jsx(Copy, Object.assign({ size: "sm" }, { children: "More details" }), void 0) }), void 0)), isActivePlanCode ? (_jsx(CurrentPlanIndicator, { text: "Current plan", size: "sm" }, void 0)) : (_jsx(Button, Object.assign({ href: actionHref, target: actionTarget, variation: "outline" }, { children: "Select" }), void 0))] }, void 0));
//# sourceMappingURL=plan-item.js.map