pricing-table-react/lib/index.js

A simple pricing plan for react

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ":root {\r\n  --Oblue: #0066ff;\r\n  --OlightBlue: #1a8efd;\r\n  --OgrayText: #555555;\r\n  --OLightGray: #919191;\r\n}\r\n\r\n.OPlan_Group {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.OPlan_Group p, .OPlan_Group span {\r\n  font-size: 1em;\r\n  color: black;\r\n}\r\n\r\n.OPlanPrice {\r\n  height: 70px;\r\n  text-align: center;\r\n}\r\n\r\n.OPlanContainer {\r\n  padding: 0 10px;\r\n  margin: 10px 0;\r\n}\r\n\r\n.OPlanContainer, .OPlanContainer * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  font-family: Helvetica;\r\n}\r\n\r\n.OPlanPrice * {\r\n  display: inline-block;\r\n}\r\n\r\n.OCurrency {\r\n  font-size: 0.8em !important;\r\n  vertical-align: top;\r\n  line-height: 60px;\r\n  margin-right: 5px;\r\n  color: var(--OLightGray);\r\n  direction: ltr;\r\n}\r\n\r\n.OPlanDuration {\r\n  color: var(--OLightGray);\r\n  vertical-align: middle;\r\n  font-size: 1.3rem !important;\r\n}\r\n\r\n.OGuarantee {\r\n  text-align: center;\r\n  font-size: 0.7em !important;\r\n  margin-top: 5px;\r\n  color: var(--OgrayText);\r\n}\r\n\r\n.OPrice {\r\n  font-size: 2em !important;\r\n  font-weight: bold;\r\n  direction: ltr;\r\n  line-height: 70px;\r\n}\r\n\r\n.OSelect {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.OSelect a {\r\n  margin: auto;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  padding: 7px 35px;\r\n  background-color: var(--OlightBlue);\r\n  color: white;\r\n  border: 0;\r\n  border-radius: 5px;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.OSelect button:hover {\r\n  background-color: var(--Oblue);\r\n}\r\n\r\n.OPlan {\r\n  flex: 1 0 31%;\r\n  min-width: 300px;\r\n  height: 500px;\r\n  margin: 20px 10px;\r\n  box-shadow: 3px 3px 3px 3px #dddddd;\r\n  max-width: 300px;\r\n  border-radius: 5px;\r\n  overflow: hidden;\r\n  position: relative;\r\n  background-color: white;\r\n  transition: all 0.1s ease;\r\n}\r\n\r\n.OChoices {\r\n  padding: 20px 10px;\r\n}\r\n\r\n.OChoices p {\r\n  font-size: 0.85em;\r\n  float: left;\r\n  width: calc(100% - 35px);\r\n}\r\n\r\n.OChoiceGroup {\r\n  display: block;\r\n  overflow: hidden;\r\n  padding: 5px 0;\r\n}\r\n.OChoiceGroup p {\r\n  text-align: left;\r\n}\r\n.OChoiceGroup svg {\r\n  margin-right: 5px;\r\n  font-size: 1em;\r\n  width: 30px !important;\r\n  color: var(--OlightBlue);\r\n  height: 1em;\r\n  float: left;\r\n}\r\n\r\n.OPlanHeader {\r\n  height: 100px;\r\n  background-color: var(--OlightBlue);\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  padding-top: 30px;\r\n  justify-content: center;\r\n}\r\n\r\n.OHighlight {\r\n  width: 150px;\r\n  height: 30px;\r\n  position: absolute;\r\n  background-color: white;\r\n  top: 20px;\r\n  right: -40px;\r\n  transform: rotate(45deg);\r\n}\r\n\r\n.OHighlightText {\r\n  text-align: center;\r\n  line-height: 30px;\r\n  color: var(--OgrayText) !important;\r\n  font-size: 0.8rem !important;\r\n}\r\n\r\n.OPlanHeader p:nth-of-type(1) {\r\n  color: #ececec;\r\n  font-size: 1.3rem;\r\n}\r\n\r\n.OPlanHeader p:nth-of-type(2) {\r\n  color: #ececec;\r\n  font-size: 0.85rem;\r\n}\r\n";
styleInject(css_248z);

const Plan = (props) => {
    var _a;
    return (React__default["default"].createElement("section", { className: "OPlanContainer" },
        React__default["default"].createElement("div", { className: "OPlan_Group" }, (_a = props.Plans) === null || _a === void 0 ? void 0 : _a.map((data, index) => {
            var _a;
            return (React__default["default"].createElement("div", { className: "OPlan", key: index },
                props.BackColor ? (React__default["default"].createElement("div", { className: "OPlanHeader", style: { backgroundColor: props.BackColor } },
                    data.highlightText ? (React__default["default"].createElement("div", { className: "OHighlight" },
                        React__default["default"].createElement("p", { className: "OHighlightText" }, data.highlightText))) : null,
                    React__default["default"].createElement("p", { style: { color: props.Color } }, data.title),
                    data.titleDescription ? (React__default["default"].createElement("p", { style: { color: props.Color } }, data.titleDescription)) : null)) : (React__default["default"].createElement("div", { className: "OPlanHeader" },
                    data.highlightText ? (React__default["default"].createElement("div", { className: "OHighlight" },
                        React__default["default"].createElement("p", { className: "OHighlightText" }, data.highlightText))) : null,
                    React__default["default"].createElement("p", { style: { color: props.Color } }, data.title),
                    data.titleDescription ? (React__default["default"].createElement("p", { style: { color: props.Color } }, data.titleDescription)) : null)),
                React__default["default"].createElement("div", { className: "OPlanPrice" },
                    React__default["default"].createElement("span", { className: "OCurrency" }, props.Currency),
                    React__default["default"].createElement("p", { className: "OPrice" },
                        data.price,
                        data.duration ? (React__default["default"].createElement("span", { className: "OPlanDuration" },
                            "/",
                            data.duration)) : null)),
                props.BackColor ? (React__default["default"].createElement("div", { className: "OSelect" },
                    React__default["default"].createElement("a", { href: data.href, style: {
                            backgroundColor: props.BackColor,
                            color: props.Color,
                        } }, "Select"),
                    data.guarantee ? (React__default["default"].createElement("p", { className: "OGuarantee" }, data.guarantee)) : null)) : (React__default["default"].createElement("div", { className: "OSelect" },
                    React__default["default"].createElement("a", { href: data.href, style: { color: props.Color } }, "Select"),
                    data.guarantee ? (React__default["default"].createElement("p", { className: "OGuarantee" }, data.guarantee)) : null)),
                React__default["default"].createElement("div", { className: "OChoices" }, (_a = data.advantages) === null || _a === void 0 ? void 0 : _a.map((advantage, key) => {
                    return (React__default["default"].createElement("div", { key: key, className: "OChoiceGroup" },
                        React__default["default"].createElement("svg", { viewBox: "0 0 512 512", xmlns: "http://www.w3.org/2000/svg", style: { color: props.BackColor } },
                            React__default["default"].createElement("path", { fill: "currentColor", d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })),
                        React__default["default"].createElement("p", null, advantage.text)));
                }))));
        }))));
};

exports.Plan = Plan;
//# sourceMappingURL=index.js.map