backpack-ui/dist/components/listItemBookmarkEntry/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 _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 _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _typography = require("../../styles/typography");

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

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

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _categoryLabel = require("../categoryLabel");

var _categoryLabel2 = _interopRequireDefault(_categoryLabel);

var _priceRangeLabel = require("../priceRangeLabel");

var _priceRangeLabel2 = _interopRequireDefault(_priceRangeLabel);

var _text = require("../text");

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  container: {
    default: {
      paddingBottom: "16px",
      paddingTop: "16px"
    },

    large: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[720] + ")", {
      paddingBottom: "24px",
      paddingTop: "24px"
    })
  },

  name: {
    default: {
      fontSize: _typography.fontSizeHeading7 + "px",
      lineHeight: _typography.lineHeightHeading7
    },

    large: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[720] + ")", {
      fontSize: _typography.fontSizeHeading6 + "px",
      lineHeight: _typography.lineHeightHeading6
    })
  },

  category: {
    default: {
      color: (0, _color.rgba)(_colors2.default.textPrimary, 0.5),
      display: "block",
      fontWeight: _typography.fontWeightMedium,
      marginTop: "4px"
    },

    large: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[720] + ")", {
      fontSize: _typography.fontSizeBodySmall + "px",
      marginTop: "8px"
    })
  },

  topChoiceLabel: {
    default: {
      color: _colors2.default.accentRed,
      fontStyle: "normal",
      paddingLeft: "8px"
    }
  },

  note: {
    default: {
      letterSpacing: ".4px",
      marginTop: "16px"
    },

    large: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[720] + ")", {
      fontSize: _typography.fontSizeBodyArticle + "px",
      lineHeight: _typography.lineHeightBodyArticle
    })
  },

  noteLink: {
    color: _colors2.default.linkPrimary,
    backgroundColor: "transparent",
    transition: "color " + _timing2.default.default + " ease",
    ":hover": {
      color: _colors2.default.linkPrimaryHover
    }
  },

  priceRange: {
    default: {
      float: "right"
    }
  }
};

var ListItemBookmarkEntry = function ListItemBookmarkEntry(_ref) {
  var name = _ref.name,
      category = _ref.category,
      priceRange = _ref.priceRange,
      city = _ref.city,
      topChoice = _ref.topChoice,
      note = _ref.note,
      large = _ref.large,
      handleNoteAction = _ref.handleNoteAction,
      showNoteAction = _ref.showNoteAction,
      style = _ref.style,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "article",
    {
      className: "ListItemBookmarkEntry",
      style: [styles.container.default, large && styles.container.large, style]
    },
    priceRange && _react2.default.createElement(_priceRangeLabel2.default, {
      value: priceRange,
      style: styles.priceRange.default
    }),
    _react2.default.createElement(
      _text.Heading,
      {
        level: 2,
        size: 5,
        weight: "medium",
        style: [styles.name.default, large && styles.name.large]
      },
      name
    ),
    category && _react2.default.createElement(
      _categoryLabel2.default,
      {
        style: [styles.category.default, large && styles.category.large]
      },
      category,
      city && " in " + city,
      " ",
      topChoice && _react2.default.createElement(
        "em",
        { style: styles.topChoiceLabel.default },
        "Top choice"
      )
    ),
    note && _react2.default.createElement(
      _text.TextAccent,
      {
        style: [styles.note.default, large && styles.note.large]
      },
      note
    ),
    showNoteAction && handleNoteAction && _react2.default.createElement(
      _text.TextAccent,
      null,
      _react2.default.createElement(
        "button",
        {
          "data-testid": qaHook ? (0, _createQAHook2.default)("add or edit note", "note", "btn") : null,
          onClick: handleNoteAction,
          style: [styles.note.default, large && styles.note.large, styles.noteLink]
        },
        note ? "Edit note" : "Add note..."
      )
    )
  );
};

ListItemBookmarkEntry.propTypes = {
  name: _propTypes2.default.string.isRequired,
  category: _propTypes2.default.string,
  priceRange: _propTypes2.default.oneOf(["$", "$$", "$$$", "", null]),
  city: _propTypes2.default.string,
  topChoice: _propTypes2.default.bool,
  note: _propTypes2.default.string,
  large: _propTypes2.default.bool,
  showNoteAction: _propTypes2.default.bool,
  handleNoteAction: _propTypes2.default.func,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

ListItemBookmarkEntry.defaultProps = {
  category: null,
  priceRange: null,
  city: null,
  topChoice: false,
  note: null,
  large: false,
  style: null,
  qaHook: false
};
exports.default = (0, _radium2.default)(ListItemBookmarkEntry);