react-landing-page/dist/components/PricingTier.js

[](https://hermanya.github.io/react-landing-page/)

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _rebass = require('rebass');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var PricingTier = function PricingTier(_ref) {
  var tierName = _ref.tierName,
      price = _ref.price,
      billingType = _ref.billingType,
      sellingPoints = _ref.sellingPoints,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, ['tierName', 'price', 'billingType', 'sellingPoints', 'children']);

  return _react2.default.createElement(
    _rebass.Flex,
    _extends({ flexDirection: 'column', width: [1, 1 / 2, 1 / 3], my: [1, 2, 3], p: [1, 2, 3] }, props),
    _react2.default.createElement(
      _rebass.Lead,
      null,
      tierName
    ),
    _react2.default.createElement(
      _rebass.Flex,
      { alignItems: 'flex-end', my: [2] },
      _react2.default.createElement(
        _rebass.Text,
        { fontSize: 6, fontWeight: 'bold' },
        price
      ),
      _react2.default.createElement(
        _rebass.Text,
        { style: { opacity: 3 / 4 }, m: 2 },
        billingType
      )
    ),
    sellingPoints.map(function (point) {
      return _react2.default.createElement(
        _rebass.Text,
        { mb: 2, key: point },
        point
      );
    }),
    children
  );
};

PricingTier.defaultProps = {
  name: 'Premium',
  price: '$99',
  billingType: 'yearly',
  sellingPoints: ['✅ selling point']
};

PricingTier.propTypes = {
  tierName: _propTypes2.default.string,
  price: _propTypes2.default.string,
  billingType: _propTypes2.default.string,
  sellingPoints: _propTypes2.default.array,
  children: _propTypes2.default.any
};

exports.default = PricingTier;