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

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlagBorder = exports.Flag = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
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 CurrentPlan = styled_components_1.default.div `
  display: flex;
  align-items: center;
  padding: 6px 4px 8px;

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

  & > ${copy_1.default} {
    color: ${({ theme }) => theme.white};
    text-align: center;
  }
`;
exports.FlagBorder = styled_components_1.default.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 = (0, styled_components_1.default)(button_1.default).attrs(() => ({ variation: 'noOutline' })) `
  padding: 8px 0;
  & > ${copy_1.default} {
    color: ${({ theme }) => theme.neutral400};
  }
`;
const PlanItem = styled_components_1.default.div `
  display: grid;
  padding: 0 4px 16px 4px;
  justify-items: center;
  text-align: center;
  grid-gap: 8px;

  & > ${header_js_1.default} {
    padding-top: 8px;
  }

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