backpack-ui/dist/components/listItemBookmark/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 _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

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 _albumThumbnailImage = require("../albumThumbnailImage");

var _albumThumbnailImage2 = _interopRequireDefault(_albumThumbnailImage);

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

var _categoryLabel2 = _interopRequireDefault(_categoryLabel);

var _checkbox = require("../checkbox");

var _checkbox2 = _interopRequireDefault(_checkbox);

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: {
      alignItems: "center",
      backgroundColor: "transparent",
      display: "flex",
      paddingBottom: "16px",
      paddingTop: "16px",
      textAlign: "left",
      width: "100%"
    },

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

  thumbnail: {
    default: {
      alignSelf: "flex-start",
      flexShrink: 0
    },

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

  caption: {
    default: {
      display: "flex",
      flexDirection: "column",
      marginLeft: "16px"
    },

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

  name: {
    default: {
      display: "-webkit-box",
      maxHeight: "48px",
      overflow: "hidden",
      textOverflow: "ellipsis",
      transition: "color " + _timing2.default.fast,
      WebkitBoxOrient: "vertical",
      WebkitLineClamp: 2
    },

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

  checkbox: {
    marginLeft: "auto"
  },

  meta: {
    default: {
      color: (0, _color.rgba)(_colors2.default.textPrimary, 0.5),
      fontWeight: _typography.fontWeightMedium,
      lineHeight: 18 / _typography.fontSizeUppercase
    },

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

function ListItemBookmark(_ref) {
  var name = _ref.name,
      onClick = _ref.onClick,
      checked = _ref.checked,
      thumbnail = _ref.thumbnail,
      entriesCount = _ref.entriesCount,
      visibility = _ref.visibility,
      addItem = _ref.addItem,
      large = _ref.large,
      hideDetail = _ref.hideDetail,
      style = _ref.style,
      className = _ref.className,
      qaHook = _ref.qaHook;

  var Element = onClick ? "button" : "div";
  var icon = void 0;
  if (name === "Favorites") {
    icon = "Heart";
  } else if (addItem) {
    icon = "Plus";
  } else {
    icon = "List";
  }

  return _react2.default.createElement(
    Element,
    {
      className: (0, _classnames2.default)("ListItemBookmark", className),
      name: name,
      "data-testid": qaHook ? (0, _createQAHook2.default)(name, "bookmark", "" + Element) : null,
      onClick: onClick,
      style: [styles.container.default, large && styles.container.large, style]
    },
    _react2.default.createElement(_albumThumbnailImage2.default, {
      src: thumbnail,
      icon: icon,
      alt: name,
      style: [styles.thumbnail.default, large && styles.thumbnail.large]
    }),
    _react2.default.createElement(
      "div",
      {
        style: [styles.caption.default, large && styles.caption.large]
      },
      _react2.default.createElement(
        _text.Heading,
        {
          level: 2,
          size: 7,
          weight: "medium",
          style: [styles.name.default, large && styles.name.large],
          qaHook: qaHook
        },
        name
      ),
      !hideDetail && _react2.default.createElement(
        _categoryLabel2.default,
        {
          style: [styles.meta.default, large && styles.meta.large]
        },
        visibility && visibility + " \xB7 ",
        entriesCount,
        " place",
        entriesCount !== 1 && "s"
      )
    ),
    onClick && !addItem && _react2.default.createElement(_checkbox2.default, {
      id: name.toLowerCase().replace(" ", "-"),
      name: name.toLowerCase().replace(" ", "_"),
      value: null,
      key: name,
      qaHook: qaHook,
      checked: checked,
      size: 24,
      style: styles.checkbox,
      removeBorder: true,
      rounded: true
    })
  );
}

ListItemBookmark.propTypes = {
  name: _propTypes2.default.string.isRequired,
  checked: _propTypes2.default.bool,
  entriesCount: _propTypes2.default.number,
  visibility: _propTypes2.default.oneOf(["Private", "Public"]),
  onClick: _propTypes2.default.func,
  thumbnail: _propTypes2.default.string,
  addItem: _propTypes2.default.bool,
  large: _propTypes2.default.bool,
  hideDetail: _propTypes2.default.bool,
  style: _propTypes4.default.style,
  className: _propTypes2.default.string,
  qaHook: _propTypes2.default.bool
};

ListItemBookmark.defaultProps = {
  checked: false,
  entriesCount: null,
  visibility: null,
  onClick: null,
  thumbnail: null,
  addItem: false,
  large: false,
  hideDetail: false,
  style: null,
  className: "",
  qaHook: false
};

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