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

Lonely Planet's Components

"use strict";

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

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

var _extends3 = _interopRequireDefault(_extends2);

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 _typography = require("../../styles/typography");

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

var _colors2 = _interopRequireDefault(_colors);

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

var _mq2 = _interopRequireDefault(_mq);

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

var _heading2 = _interopRequireDefault(_heading);

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

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var styles = {
  heading: {
    default: (0, _defineProperty3.default)({
      display: "inline-block",
      fontSize: _typography.fontSizeHeading6 + "px",
      fontWeight: _typography.fontWeightRegular,
      lineHeight: _typography.lineHeightHeading6

    }, "@media (min-width: " + _mq2.default.min["480"] + ")", {
      marginBottom: "8px"
    }),

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

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

  child: {
    default: {
      borderBottomStyle: "solid",
      borderBottomWidth: "1px",
      paddingBottom: "16px",
      paddingTop: "16px"
    },

    light: {
      borderBottomColor: _colors2.default.borderPrimary
    },

    dark: {
      borderBottomColor: "#474747"
    }
  }
};

var ThumbnailList = function ThumbnailList(_ref) {
  var heading = _ref.heading,
      children = _ref.children,
      theme = _ref.theme,
      style = _ref.style;
  return _react2.default.createElement(
    "div",
    {
      className: "ThumbnailList",
      style: style
    },
    heading && _react2.default.createElement(
      "header",
      null,
      _react2.default.createElement(
        _heading2.default,
        {
          level: 2,
          override: (0, _extends3.default)({}, styles.heading.default, styles.heading[theme])
        },
        heading
      )
    ),
    _react2.default.Children.map(children, function (child, index) {
      return _react2.default.createElement(
        "div",
        {
          style: [styles.child.default, styles.child[theme], index === children.length - 1 ? { borderBottomWidth: "0px" } : {}]
        },
        child
      );
    })
  );
};

ThumbnailList.propTypes = {
  children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
  heading: _propTypes2.default.string,
  theme: _propTypes2.default.oneOf(["light", "dark"]),
  style: _propTypes4.default.style
};

ThumbnailList.defaultProps = {
  heading: "",
  theme: "light",
  style: null
};

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