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

Lonely Planet's Components

"use strict";

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

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 _color = require("../../utils/color");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _authorName = require("../authorName");

var _authorName2 = _interopRequireDefault(_authorName);

var _italicText = require("../italicText");

var _italicText2 = _interopRequireDefault(_italicText);

var _timestamp = require("../timestamp");

var _timestamp2 = _interopRequireDefault(_timestamp);

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

var styles = {
  line: {
    backgroundColor: _colors2.default.accentRed,
    content: "``",
    display: "block",
    height: "2px",
    width: "48px"
  },

  container: {
    alignItems: "baseline",
    display: "flex",
    justifyContent: "space-between",
    flexDirection: "row",
    flexWrap: "wrap"
  },

  author: {
    alignItems: "baseline",
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-start",
    marginTop: "16px"
  },

  authorName: {
    marginRight: "8px",
    marginTop: "10px"
  },

  italicText: {
    marginRight: "8px",
    marginTop: "8px"
  },

  timestamp: {
    display: "block",
    marginTop: "25px"
  }
};

var NewsArticleAuthor = function NewsArticleAuthor(_ref) {
  var name = _ref.name,
      title = _ref.title,
      absoluteTime = _ref.absoluteTime,
      relativeTime = _ref.relativeTime,
      theme = _ref.theme,
      style = _ref.style;
  return _react2.default.createElement(
    "div",
    {
      className: "NewsArticleAuthor",
      style: style
    },
    _react2.default.createElement("div", {
      style: [styles.line, theme === "dark" && {
        backgroundColor: (0, _color.rgba)(_colors2.default.bgPrimary, 0.5)
      }]
    }),
    _react2.default.createElement(
      "div",
      { style: styles.container },
      _react2.default.createElement(
        "div",
        {
          style: [styles.author, theme === "dark" && {
            color: _colors2.default.bgPrimary
          }]
        },
        _react2.default.createElement(
          _authorName2.default,
          { style: styles.authorName },
          name
        ),
        _react2.default.createElement(
          _italicText2.default,
          { style: styles.italicText },
          title
        )
      ),
      relativeTime && _react2.default.createElement(
        _timestamp2.default,
        {
          dateTime: absoluteTime,
          style: styles.timestamp
        },
        relativeTime
      )
    )
  );
};

NewsArticleAuthor.propTypes = {
  name: _propTypes2.default.string,
  title: _propTypes2.default.string,
  absoluteTime: _propTypes2.default.string,
  relativeTime: _propTypes2.default.string,
  theme: _propTypes2.default.oneOf(["light", "dark"]),
  style: _propTypes4.default.style
};

NewsArticleAuthor.defaultProps = {
  theme: "light"
};

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