backpack-ui/dist/components/callout/index.js

Lonely Planet's Components

"use strict";

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

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _base2;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _color = require("../../utils/color");

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

var _moreLink = require("../moreLink");

var _moreLink2 = _interopRequireDefault(_moreLink);

var _price = require("../price");

var _price2 = _interopRequireDefault(_price);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

function calculateContentWidth(imageWidth) {
  return (630 - 60 - imageWidth - 30) / (630 - 60) * 100 + "%";
}

var styles = {
  container: {
    base: (0, _defineProperty3.default)({
      backgroundColor: _colors2.default.bgPrimary,
      boxShadow: "0 0 20px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .05)",
      overflow: "hidden"

    }, "@media (min-width: " + _mq2.default.min[600] + ")", {
      padding: 30 / 630 * 100 + "%"
    })
  },

  content: {
    base: (_base2 = {}, (0, _defineProperty3.default)(_base2, "@media (max-width: " + _mq2.default.max[600] + ")", {
      padding: "25px"
    }), (0, _defineProperty3.default)(_base2, "@media (min-width: " + _mq2.default.min[600] + ")", {
      float: "right"
    }), _base2),

    align: {
      center: {
        alignSelf: "center"
      }
    },

    type: {
      activity: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[600] + ")", {
        width: calculateContentWidth(300)
      }),
      book: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[600] + ")", {
        width: calculateContentWidth(80)
      })
    }
  },

  heading: {
    base: {
      fontSize: "20px",
      lineHeight: 26 / 20
    }
  },

  description: {
    base: {
      color: _colors2.default.textPrimary,
      fontSize: "14px",
      lineHeight: 1.5,
      marginTop: "1em",
      paddingRight: 40 / 14 + "em"
    }
  },

  image: {
    base: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[600] + ")", {
      float: "left",
      marginRight: 30 / 630 * 100 + "%"
    }),

    type: {
      activity: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[600] + ")", {
        width: 300 / (630 - 60) * 100 + "%"
      }),

      book: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[600] + ")", {
        width: 80 / (630 - 60) * 100 + "%"
      })
    },

    anchor: {
      display: "block"
    },

    img: {
      display: "block"
    }
  },

  category: {
    base: {
      color: _colors2.default.textSecondary,
      fontSize: "11px",
      lineHeight: 1,
      marginBottom: 4 / 11 + "em",
      textTransform: "uppercase"
    }
  },

  price: {
    base: {
      marginTop: "12px"
    }
  },

  moreLink: {
    base: {
      marginTop: "16px"
    }
  }
};

function Callout(_ref) {
  var type = _ref.type,
      heading = _ref.heading,
      slug = _ref.slug,
      image = _ref.image,
      price = _ref.price,
      description = _ref.description,
      category = _ref.category,
      align = _ref.align,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "div",
    {
      className: "Callout",
      style: styles.container.base,
      "data-type": type,
      "data-testid": (0, _createQAHook2.default)("" + heading, "callout overview", "div")
    },
    _react2.default.createElement(
      "div",
      {
        className: "Callout-image",
        style: [styles.image.base, type && styles.image.type[type]]
      },
      _react2.default.createElement(
        "a",
        { href: slug, style: styles.image.anchor, "data-testid": qaHook ? (0, _createQAHook2.default)(heading + "-image", "callout-image", "link") : null },
        _react2.default.createElement("img", {
          style: styles.image.img,
          src: image,
          alt: ""
        })
      )
    ),
    _react2.default.createElement(
      "div",
      {
        className: "Callout-content",
        style: [styles.content.base, type && styles.content.type[type], align && styles.content.align[align]]
      },
      category && _react2.default.createElement(
        "div",
        { style: styles.category.base },
        category,
        " ",
        type
      ),
      _react2.default.createElement(
        _heading2.default,
        {
          size: "medium",
          weight: "thick",
          override: styles.heading.base
        },
        _react2.default.createElement(
          "a",
          { href: slug, style: { color: "inherit" }, "data-testid": qaHook ? (0, _createQAHook2.default)(heading + "-header", "callout-header", "link") : null },
          heading
        )
      ),
      price && price.amount && _react2.default.createElement(
        "div",
        {
          className: "Callout-price",
          style: styles.price.base
        },
        _react2.default.createElement(_price2.default, {
          amount: price.amount,
          currency: price.currency,
          thin: true
        })
      ),
      description && _react2.default.createElement(
        "p",
        { style: styles.description.base },
        description
      ),
      _react2.default.createElement(
        "div",
        {
          className: "Callout-moreLink",
          style: styles.moreLink.base
        },
        _react2.default.createElement(
          _moreLink2.default,
          {
            href: slug,
            size: "small",
            caps: true,
            qaHook: qaHook ? type + "-more" : null
          },
          "Learn more"
        )
      )
    )
  );
}

Callout.propTypes = {
  type: _propTypes2.default.oneOf(["activity", "book"]).isRequired,

  heading: _propTypes2.default.string.isRequired,

  slug: _propTypes2.default.string.isRequired,

  image: _propTypes2.default.string.isRequired,

  price: _propTypes2.default.shape(_price2.default.propTypes),

  description: _propTypes2.default.string,

  category: _propTypes2.default.string,

  align: _propTypes2.default.oneOf(["", "center"]),

  qaHook: _propTypes2.default.bool
};

Callout.defaultProps = {
  type: "",
  heading: "",
  slug: "",
  image: "",
  price: {},
  description: "",
  category: "",
  align: "",
  qaHook: false
};

Callout.styles = styles;

exports.default = (0, _radium2.default)(Callout);