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

Lonely Planet's Components

"use strict";

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

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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

var _link2 = _interopRequireDefault(_link);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

var _bulletDescription = require("../bulletDescription");

var _bulletDescription2 = _interopRequireDefault(_bulletDescription);

var _textBubble = require("../textBubble");

var _textBubble2 = _interopRequireDefault(_textBubble);

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

var _heading2 = _interopRequireDefault(_heading);

var _coverPhoto = require("../coverPhoto");

var _coverPhoto2 = _interopRequireDefault(_coverPhoto);

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

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

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

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

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

var _time = require("../../utils/time");

var _time2 = _interopRequireDefault(_time);

var _icon3 = require("../../utils/icon");

var _icon4 = _interopRequireDefault(_icon3);

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

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var hoverStyles = {
  default: {
    ".CoverPhoto": {
      transform: "scale(1.03) !important"
    }
  },

  light: {
    ".Heading": {
      color: _colors2.default.linkPrimary + " !important"
    }
  }
};

var styles = {
  container: {
    default: {
      display: "flex",
      transition: "background-color " + _timing2.default.fast + " linear, border-color " + _timing2.default.fast + " linear"
    },
    active: {
      backgroundColor: _colors2.default.linkPrimary
    }
  },

  image: {
    flexShrink: 0,
    width: "116px"
  },

  imageAnchor: {
    backgroundColor: _colors2.default.bgOverlay,
    display: "block",
    overflow: "hidden",
    position: "relative",
    width: "100%"
  },

  coverPhoto: {
    transition: "transform " + _timing2.default.slow + " ease-in-out"
  },

  iconContainer: {
    alignItems: "center",
    backgroundColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.15),
    color: _colors2.default.textOverlay,
    display: "flex",
    fontSize: _typography.fontSizeHeading6 + "px",
    height: "100%",
    justifyContent: "center",
    left: 0,
    position: "absolute",
    top: 0,
    transition: "opacity " + _timing2.default.default + " ease",
    width: "100%"
  },

  imageText: {
    bottom: "3px",
    fontSize: _typography.fontSizeUppercase + "px",
    fontWeight: _typography.fontWeightMedium,
    position: "absolute",
    right: "3px",
    zIndex: _zIndex2.default.default
  },

  content: {
    alignItems: "center",
    display: "flex",
    flexGrow: 1,
    justifyContent: "space-between"
  },

  title: {
    default: {
      display: "-webkit-box",
      fontSize: _typography.fontSizeHeading7 + "px",
      lineHeight: _typography.lineHeightHeading7,
      overflow: "hidden",
      textOverflow: "ellipsis",
      transition: "color " + _timing2.default.default + " ease",
      WebkitBoxOrient: "vertical"
    },
    light: {
      color: _colors2.default.textPrimary
    },
    dark: {
      color: _colors2.default.textOverlay
    },
    active: {
      color: _colors2.default.textOverlay
    }
  },

  textContainer: {
    marginRight: "16px",
    width: "100%"
  },

  textAnchor: {
    display: "block",
    paddingLeft: "16px",
    width: "100%"
  },

  status: {
    default: {
      color: _colors2.default.textOverlay,
      fontFamily: (0, _font2.default)("miller"),
      fontSize: _typography.fontSizeHeading8 + "px",
      fontStyle: "italic",
      lineHeight: _typography.lineHeightHeading8
    },

    light: {
      color: _colors2.default.textPrimary
    },

    dark: {
      color: _colors2.default.textOverlay
    }
  },

  descriptionIcon: {
    backgroundColor: "transparent",
    border: 0,
    color: _colors2.default.accentGray,
    cursor: "pointer",
    fontSize: _typography.fontSizeHeading7 + "px",
    padding: 0,
    transition: "color " + _timing2.default.default + " ease-in-out",

    ":hover": {
      color: (0, _color.rgba)(_colors2.default.accentGray, 0.5)
    },

    ":active": {
      color: (0, _color.rgba)(_colors2.default.accentGray, 0.5)
    },

    ":focus": {
      color: (0, _color.rgba)(_colors2.default.accentGray, 0.5)
    }
  }
};

var ThumbnailListItem = function ThumbnailListItem(_ref) {
  var title = _ref.title,
      subtitle = _ref.subtitle,
      href = _ref.href,
      onClick = _ref.onClick,
      imagePath = _ref.imagePath,
      imageIcon = _ref.imageIcon,
      imageIconLabel = _ref.imageIconLabel,
      description = _ref.description,
      descriptionIcon = _ref.descriptionIcon,
      descriptionIconLabel = _ref.descriptionIconLabel,
      onDescriptionIconClick = _ref.onDescriptionIconClick,
      runtime = _ref.runtime,
      status = _ref.status,
      lineClamp = _ref.lineClamp,
      theme = _ref.theme,
      style = _ref.style,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "div",
    {
      className: (0, _classnames2.default)("ListItem-thumbnail", theme && "ListItem-thumbnail--" + theme),
      style: [styles.container.default, styles.container[theme], style]
    },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".ListItem-thumbnail:hover",
      rules: hoverStyles.default
    }),
    theme === "light" && _react2.default.createElement(_radium.Style, {
      scopeSelector: ".ListItem-thumbnail--light:hover",
      rules: hoverStyles.light
    }),
    _react2.default.createElement(
      "div",
      { style: styles.image },
      _react2.default.createElement(
        _link2.default,
        {
          to: href,
          onClick: onClick,
          style: styles.imageAnchor,
          qaHook: qaHook ? (0, _createQAHook2.default)("cover-image", "external", "link") : null
        },
        _react2.default.createElement(_coverPhoto2.default, {
          src: imagePath,
          width: 116,
          height: 64,
          style: styles.coverPhoto
        }),
        _react2.default.createElement(
          "div",
          {
            style: [styles.iconContainer, { opacity: imageIcon ? 1 : 0 }]
          },
          imageIcon && (0, _icon4.default)(imageIcon, { label: imageIconLabel })
        ),
        typeof runtime === "number" && _react2.default.createElement(
          _textBubble2.default,
          { style: styles.imageText },
          (0, _time2.default)(runtime)
        )
      )
    ),
    _react2.default.createElement(
      "div",
      { style: styles.content },
      _react2.default.createElement(
        "div",
        { style: styles.textContainer },
        _react2.default.createElement(
          _link2.default,
          {
            to: href,
            onClick: onClick,
            style: styles.textAnchor,
            qaHook: qaHook ? (0, _createQAHook2.default)(title, "external", "link") : null
          },
          status && _react2.default.createElement(
            "div",
            {
              style: [styles.status.default, styles.status[theme]]
            },
            status
          ),
          description && _react2.default.createElement(_bulletDescription2.default, { description: description }),
          _react2.default.createElement(
            _heading2.default,
            {
              level: 5,
              weight: "thin",
              override: (0, _extends3.default)({}, styles.title.default, styles.title[theme], lineClamp ? { WebkitLineClamp: lineClamp } : {})
            },
            title
          ),
          subtitle && _react2.default.createElement(_bulletDescription2.default, { description: subtitle })
        )
      ),
      descriptionIcon && onDescriptionIconClick && _react2.default.createElement(
        "button",
        {
          style: styles.descriptionIcon,
          onClick: onDescriptionIconClick
        },
        (0, _icon4.default)(descriptionIcon, { label: descriptionIconLabel })
      )
    )
  );
};

ThumbnailListItem.propTypes = {
  title: _propTypes2.default.string,
  subtitle: _propTypes2.default.arrayOf(_propTypes2.default.string),
  href: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  imagePath: _propTypes2.default.string,
  imageIcon: _propTypes2.default.oneOf((0, _keys2.default)(_icon2.default)),
  imageIconLabel: _propTypes2.default.string,
  runtime: _propTypes2.default.number,
  description: _propTypes2.default.arrayOf(_propTypes2.default.string),
  descriptionIcon: _propTypes2.default.oneOf((0, _keys2.default)(_icon2.default)),
  descriptionIconLabel: _propTypes2.default.string,
  onDescriptionIconClick: _propTypes2.default.func,
  status: _propTypes2.default.string,
  lineClamp: _propTypes2.default.number,
  theme: _propTypes2.default.oneOf(["light", "dark", "active"]),
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

ThumbnailListItem.defaultProps = {
  theme: "light",
  lineClamp: 1,
  qaHook: false
};

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