@codementor/ui-kit
Version:
283 lines (250 loc) • 13.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _Menu = require('./Menu');
var _Menu2 = _interopRequireDefault(_Menu);
var _MenuItem = require('../DropdownMenu/MenuItem');
var _MenuItem2 = _interopRequireDefault(_MenuItem);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var JuniorIcon = function JuniorIcon(props) {
return _react2.default.createElement(
'svg',
props,
_react2.default.createElement(
'g',
{
fill: 'none',
fillRule: 'evenodd',
transform: 'translate(1 3)'
},
_react2.default.createElement('path', {
fill: '#005672',
d: 'M28.227 10.486a1.594 1.594 0 0 0 1.517 1.065c2.666-.04 4.21.488 4.41 1.035.213.587-.75 2.1-3.036 3.885-2.642 2.064-6.55 4.126-10.953 5.728-4.404 1.603-8.723 2.535-12.073 2.653-2.898.102-4.61-.438-4.823-1.025-.216-.594.769-2.127 3.091-3.928.553-.429.74-1.16.513-1.796l-1.476.527c-2.738 2.124-4.156 4.205-3.6 5.733 1.104 3.033 9.571 2.736 18.913-.665 9.342-3.4 16.02-8.615 14.916-11.648-.528-1.45-2.739-2.138-5.923-2.091l-1.476.527z'
}),
_react2.default.createElement('path', {
fill: '#005672',
d: 'M29.688 11.594a1.591 1.591 0 0 1-1.514-1.065l1.473-.527c3.178-.047 5.385.642 5.911 2.092 1.102 3.033-5.563 8.248-14.886 11.648-9.323 3.4-17.774 3.697-18.875.664-.555-1.527.86-3.608 3.593-5.732l1.473-.527c.226.635.04 1.367-.512 1.795-2.318 1.802-3.3 3.335-3.085 3.928.213.588 1.92 1.127 4.813 1.026 3.344-.118 7.654-1.05 12.049-2.653s8.294-3.665 10.931-5.728c2.281-1.785 3.243-3.298 3.03-3.885-.2-.548-1.74-1.076-4.4-1.036z'
}),
_react2.default.createElement('path', {
stroke: '#005672',
strokeDasharray: '2.200000047683716,2.400000095367432',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.2',
d: 'M6.697 25.617C5.232 28.83 4.93 31.37 6.143 32.46c2.406 2.166 9.862-2.193 16.655-9.736C29.59 15.18 33.145 7.31 30.74 5.144c-1.15-1.036-3.455-.58-6.289 1.002'
}),
_react2.default.createElement('circle', {
cx: '19',
cy: '18',
r: '11.886',
stroke: '#005672',
strokeWidth: '2.229'
}),
_react2.default.createElement('path', {
stroke: '#005672',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.6',
d: 'M19 10.701c-2.055-.036-3.84.758-5.354 2.382-1.515 1.625-2.115 3.769-1.8 6.431'
}),
_react2.default.createElement('circle', {
cx: '32',
cy: '3',
r: '2.2',
stroke: '#005672',
strokeWidth: '1.6'
})
)
);
};
JuniorIcon.defaultProps = {
xmlns: 'http://www.w3.org/2000/svg',
width: '40',
height: '40',
viewBox: '0 0 40 40'
};
var SeniorIcon = function SeniorIcon(props) {
return _react2.default.createElement(
'svg',
props,
_react2.default.createElement(
'g',
{
fill: 'none',
fillRule: 'evenodd',
transform: 'translate(3 3)'
},
_react2.default.createElement('path', {
fill: '#005672',
fillRule: 'nonzero',
d: 'M17 26a9 9 0 1 1 0-18 9 9 0 0 1 0 18zm0-2.4a6.6 6.6 0 1 0 0-13.2 6.6 6.6 0 0 0 0 13.2z'
}),
_react2.default.createElement('path', {
fill: '#005672',
d: 'M17.097 12.342a.7.7 0 0 1-.194 1.386c-.913-.128-1.703.178-2.433.962-.716.768-.931 1.672-.652 2.797a.7.7 0 1 1-1.359.337c-.39-1.575-.06-2.966.987-4.089 1.032-1.107 2.27-1.587 3.651-1.393z'
}),
_react2.default.createElement('path', {
fill: '#005672',
fillRule: 'nonzero',
d: 'M17 34a.486.486 0 0 1 0-.972c.953 0 1.895-.083 2.819-.247a.486.486 0 0 1 .17.957A17.09 17.09 0 0 1 17 34zm5.907-1.055a.486.486 0 1 1-.338-.912 15.95 15.95 0 0 0 2.555-1.215.486.486 0 1 1 .493.838c-.863.508-1.77.94-2.71 1.289zm5.168-3.05a.485.485 0 1 1-.633-.738 16.135 16.135 0 0 0 1.976-2.026.485.485 0 1 1 .752.615 17.107 17.107 0 0 1-2.095 2.149zm3.773-4.616a.486.486 0 1 1-.848-.474c.46-.824.847-1.688 1.156-2.583a.486.486 0 1 1 .918.317 16.93 16.93 0 0 1-1.226 2.74zm1.959-5.718a.486.486 0 1 1-.96-.146 16.174 16.174 0 0 0 .176-2.865.486.486 0 1 1 .97-.026 17.15 17.15 0 0 1-.187 3.036zm-.156-6.021a.486.486 0 0 1-.952.196 15.922 15.922 0 0 0-.814-2.71.486.486 0 0 1 .902-.362c.371.929.66 1.89.864 2.876zm-2.232-5.568a.486.486 0 0 1-.824.516A16.102 16.102 0 0 0 28.89 6.23a.486.486 0 0 1 .72-.652 17.074 17.074 0 0 1 1.81 2.394zm-4.086-4.494a.486.486 0 0 1-.591.771 16.04 16.04 0 0 0-2.388-1.517.486.486 0 0 1 .446-.864c.89.461 1.737 1 2.533 1.61zM22.075.747a.486.486 0 0 1-.29.928 15.926 15.926 0 0 0-2.764-.6.486.486 0 0 1 .122-.965c.998.125 1.979.339 2.932.637zM16.072 0a.486.486 0 0 1 .052.97 16.01 16.01 0 0 0-2.8.4.486.486 0 1 1-.221-.946c.97-.228 1.962-.37 2.97-.424zm-5.856 1.384a.486.486 0 1 1 .388.89A15.99 15.99 0 0 0 8.12 3.633a.486.486 0 1 1-.538-.809 16.96 16.96 0 0 1 2.634-1.438zm-4.99 3.332a.485.485 0 1 1 .672.701 16.128 16.128 0 0 0-1.86 2.133.485.485 0 1 1-.785-.573 17.1 17.1 0 0 1 1.972-2.261zm-3.508 4.81a.486.486 0 1 1 .873.427 15.932 15.932 0 0 0-1.012 2.643.486.486 0 1 1-.934-.265c.274-.967.633-1.905 1.073-2.805zm-1.64 5.827a.486.486 0 1 1 .966.092 16.248 16.248 0 0 0-.02 2.855.486.486 0 1 1-.968.079 17.426 17.426 0 0 1 .021-3.026zm.486 5.994a.486.486 0 0 1 .939-.248c.242.915.564 1.805.963 2.66a.486.486 0 0 1-.88.411 16.9 16.9 0 0 1-1.022-2.823zM3.1 26.786a.486.486 0 0 1 .794-.56 16.124 16.124 0 0 0 1.828 2.16.486.486 0 0 1-.684.691 17.096 17.096 0 0 1-1.938-2.29zm4.239 4.202a.486.486 0 0 1 .552-.8c.777.538 1.6 1.007 2.46 1.4a.486.486 0 0 1-.404.884 16.974 16.974 0 0 1-2.608-1.484zm5.492 2.497a.486.486 0 0 1 .238-.943c.911.23 1.845.38 2.793.446a.486.486 0 0 1-.068.97 16.957 16.957 0 0 1-2.963-.473zM16.997 30a.51.51 0 1 1 0-1.02c.992 0 1.968-.12 2.913-.356a.51.51 0 0 1 .248.99 13.034 13.034 0 0 1-3.161.386zm6.176-1.557a.51.51 0 0 1-.485-.897 12.018 12.018 0 0 0 2.392-1.701.51.51 0 0 1 .688.752 13.038 13.038 0 0 1-2.595 1.846zm4.692-4.304a.51.51 0 0 1-.851-.56c.54-.82.976-1.703 1.3-2.63a.51.51 0 0 1 .963.336 12.95 12.95 0 0 1-1.412 2.854zm2.08-5.929a.51.51 0 0 1-1.016-.094 12.127 12.127 0 0 0-.088-2.949.51.51 0 0 1 1.008-.154 13.167 13.167 0 0 1 .095 3.197zm-.973-6.285a.51.51 0 1 1-.939.399 11.966 11.966 0 0 0-1.47-2.54.51.51 0 1 1 .814-.615 13.03 13.03 0 0 1 1.595 2.756zm-3.845-5.071a.51.51 0 1 1-.638.795 11.986 11.986 0 0 0-2.497-1.542.51.51 0 1 1 .426-.927 13.006 13.006 0 0 1 2.709 1.674zm-5.724-2.632a.51.51 0 1 1-.187 1.002 12.05 12.05 0 0 0-2.96-.182.51.51 0 1 1-.062-1.018 13.073 13.073 0 0 1 3.21.198zm-6.349.386a.51.51 0 0 1 .31.972c-.938.298-1.833.71-2.667 1.226a.51.51 0 0 1-.537-.867 12.944 12.944 0 0 1 2.894-1.33zM7.653 7.96a.51.51 0 0 1 .732.71 12.027 12.027 0 0 0-1.769 2.34.51.51 0 0 1-.883-.51 13.046 13.046 0 0 1 1.92-2.54zm-3.16 5.46a.51.51 0 0 1 .98.28 11.962 11.962 0 0 0-.453 2.9.51.51 0 0 1-1.02-.034c.036-1.074.202-2.129.493-3.146zm-.202 6.362a.51.51 0 1 1 .997-.217c.21.962.537 1.89.974 2.767a.51.51 0 1 1-.913.454c-.474-.951-.83-1.96-1.058-3.004zm2.832 5.68a.51.51 0 1 1 .774-.665 12.05 12.05 0 0 0 2.169 1.978.51.51 0 1 1-.591.832 13.073 13.073 0 0 1-2.352-2.146zm5.15 3.655a.51.51 0 1 1 .37-.95c.911.355 1.865.597 2.845.72a.51.51 0 1 1-.127 1.012 12.924 12.924 0 0 1-3.088-.782z'
}),
_react2.default.createElement('circle', {
cx: '9',
cy: '31',
r: '2',
fill: '#FFF',
stroke: '#005672',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.2'
}),
_react2.default.createElement('circle', {
cx: '29.5',
cy: '29.5',
r: '1.5',
fill: '#FFF',
stroke: '#005672',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.2'
}),
_react2.default.createElement('circle', {
cx: '29',
cy: '5',
r: '2',
fill: '#FFF',
stroke: '#005672',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '1.2'
})
)
);
};
SeniorIcon.defaultProps = {
xmlns: 'http://www.w3.org/2000/svg',
width: '40',
height: '40',
viewBox: '0 0 40 40'
};
var JobsMenu = function (_PureComponent) {
(0, _inherits3.default)(JobsMenu, _PureComponent);
function JobsMenu() {
(0, _classCallCheck3.default)(this, JobsMenu);
return (0, _possibleConstructorReturn3.default)(this, (JobsMenu.__proto__ || (0, _getPrototypeOf2.default)(JobsMenu)).apply(this, arguments));
}
(0, _createClass3.default)(JobsMenu, [{
key: 'render',
value: function render() {
var _props = this.props,
darkMode = _props.darkMode,
titleOnly = _props.titleOnly;
var title = 'Find developer jobs';
var href = '/jobs';
return titleOnly ? _react2.default.createElement(
_MenuItem2.default,
{ url: href, darkMode: darkMode },
title
) : _react2.default.createElement(
_Menu2.default,
{
darkMode: darkMode,
titleOnly: titleOnly,
title: title,
titleId: 'jobs-index-link',
href: href },
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu'
},
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu__left'
},
_react2.default.createElement(
'a',
{ href: '/jobs#junior', id: 'jobs-junior-link', className: 'jsx-3081040510' + ' ' + 'menu-item'
},
_react2.default.createElement(JuniorIcon, null),
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu-item__content'
},
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu__title'
},
'Junior developer jobs'
),
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu__description'
},
'Positions for entry-level and junior developers'
)
)
),
_react2.default.createElement(
'a',
{ href: '/jobs#experienced', id: 'jobs-experienced-link', className: 'jsx-3081040510' + ' ' + 'menu-item'
},
_react2.default.createElement(SeniorIcon, null),
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu-item__content'
},
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu__title'
},
'Experienced developer jobs'
),
_react2.default.createElement(
'div',
{
className: 'jsx-3081040510' + ' ' + 'menu__description'
},
'Positions for mid-level and senior developers'
)
)
)
)
),
_react2.default.createElement(_style2.default, {
styleId: '3081040510',
css: '.menu.jsx-3081040510{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:30px;width:320px;}.menu.jsx-3081040510 svg{width:48px;margin-right:12px;}.menu__left.jsx-3081040510>a.jsx-3081040510+a.jsx-3081040510{margin-top:31px;}.menu__left.jsx-3081040510 a.menu-item.jsx-3081040510:hover .menu__title.jsx-3081040510{color:#009fc6;}.menu__left.jsx-3081040510 a.menu-item.jsx-3081040510:hover .menu__description.jsx-3081040510{color:#999;}.menu-item.jsx-3081040510{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.menu-item__content.jsx-3081040510{-webkit-flex:1;-ms-flex:1;flex:1;}.menu-item.jsx-3081040510:hover,.menu-item.jsx-3081040510:focus{-webkit-text-decoration:none;text-decoration:none;}.menu__title.jsx-3081040510{font-size:16px;font-weight:bold;line-height:1.5;color:#003648;}.menu__description.jsx-3081040510{font-size:13px;line-height:1.6;text-align:left;color:#666;}'
})
);
}
}]);
return JobsMenu;
}(_react.PureComponent);
JobsMenu.propTypes = {
darkMode: _propTypes2.default.bool,
titleOnly: _propTypes2.default.bool
};
exports.default = JobsMenu;