@codementor/ui-kit/HeaderNavigation/CategoryGroups.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FREELANCER_MODE = exports.MENTOR_MODE = undefined;

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var MENTOR_MODE = exports.MENTOR_MODE = 'mentor';
var FREELANCER_MODE = exports.FREELANCER_MODE = 'freelancer';

var CategoryGroups = function (_PureComponent) {
  (0, _inherits3.default)(CategoryGroups, _PureComponent);

  function CategoryGroups() {
    (0, _classCallCheck3.default)(this, CategoryGroups);
    return (0, _possibleConstructorReturn3.default)(this, (CategoryGroups.__proto__ || (0, _getPrototypeOf2.default)(CategoryGroups)).apply(this, arguments));
  }

  (0, _createClass3.default)(CategoryGroups, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          groups = _props.groups,
          mode = _props.mode;

      return _react2.default.createElement(
        'ul',
        {
          className: 'jsx-3904456103' + ' ' + ((0, _classnames2.default)('category-groups', {
            'category-groups--mentor': mode === MENTOR_MODE,
            'category-groups--freelancer': mode === FREELANCER_MODE
          }) || '')
        },
        groups.map(function (group) {
          return _react2.default.createElement(
            'li',
            { key: group.name, className: 'jsx-3904456103'
            },
            _react2.default.createElement(
              'div',
              {
                className: 'jsx-3904456103' + ' ' + 'group-name'
              },
              group.name
            ),
            _react2.default.createElement(
              'ul',
              { style: { width: group.width || 'initial' }, className: 'jsx-3904456103'
              },
              group.categories.map(function (category) {
                return _react2.default.createElement(
                  'li',
                  {
                    key: category.urlString,
                    className: 'jsx-3904456103' + ' ' + 'category'
                  },
                  _react2.default.createElement(
                    'a',
                    { href: '/' + category.urlString, className: 'jsx-3904456103'
                    },
                    category.name
                  )
                );
              })
            )
          );
        }),
        _react2.default.createElement(_style2.default, {
          styleId: '3904456103',
          css: '.category-groups.jsx-3904456103{padding:30px 6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.category-groups.jsx-3904456103>li.jsx-3904456103+li.jsx-3904456103{border-left:solid 1px #e6e6e6;}.category-groups.jsx-3904456103>li.jsx-3904456103{padding:0px 8px 0px 24px;}.category-groups.jsx-3904456103>li.jsx-3904456103 ul.jsx-3904456103{padding:0;margin-top:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:80px;max-height:210px;}.category-groups.jsx-3904456103>li.jsx-3904456103 ul.jsx-3904456103>li.jsx-3904456103{display:inline-block;white-space:nowrap;margin-right:16px;}.category-groups.jsx-3904456103>li.jsx-3904456103 ul.jsx-3904456103>li.jsx-3904456103 a.jsx-3904456103{font-size:13px;line-height:1.62;text-align:left;color:#005672;}.category-groups.jsx-3904456103>li.jsx-3904456103 ul.jsx-3904456103>li.jsx-3904456103 a.jsx-3904456103:hover,.category-groups.jsx-3904456103>li.jsx-3904456103 ul.jsx-3904456103>li.jsx-3904456103 a.jsx-3904456103:focus{color:#0095bf;-webkit-text-decoration:none;text-decoration:none;}.category-groups--freelancer.jsx-3904456103>li.jsx-3904456103 ul.jsx-3904456103{max-height:126px;}.category-groups--mentor.jsx-3904456103 .group-name.jsx-3904456103{height:40px;}.category-groups.jsx-3904456103 .group-name.jsx-3904456103{font-size:16px;font-weight:bold;line-height:1.25;color:#003648;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}'
        })
      );
    }
  }]);
  return CategoryGroups;
}(_react.PureComponent);

CategoryGroups.defaultProps = {
  mode: MENTOR_MODE
};

CategoryGroups.propTypes = {
  groups: _propTypes2.default.array.isRequired,
  mode: _propTypes2.default.string.isRequired
};

exports.default = CategoryGroups;