twreporter-react-index-page/lib/components/common-utils/bottom-link.js

twreporter index page version 2

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global React*/


var _commonVariables = require('../../styles/common-variables');

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var LinkIcon = function LinkIcon(props) {
  return React.createElement(
    'svg',
    _extends({
      viewBox: '0 0 7 12',
      xmlns: 'http://www.w3.org/2000/svg',
      fillRule: 'evenodd',
      clipRule: 'evenodd',
      strokeLinecap: 'round',
      strokeLinejoin: 'round'
    }, props),
    React.createElement('path', {
      d: 'M.5.01l4.937 4.983-4.93 5.017',
      fill: 'none',
      stroke: '#56a2e6',
      strokeDasharray: '20,20',
      transform: 'translate(.532 .99)',
      id: 'Path.-3'
    })
  );
};

var DarkBgIcon = function DarkBgIcon(props) {
  return React.createElement(
    'svg',
    _extends({
      width: '7',
      height: '11',
      viewBox: '0 0 7 11',
      xmlns: 'http://www.w3.org/2000/svg'
    }, props),
    React.createElement(
      'title',
      null,
      'HYPERLINK Dark BG'
    ),
    React.createElement(
      'g',
      {
        id: 'Welcome',
        fill: 'none',
        fillRule: 'evenodd',
        strokeLinecap: 'round',
        strokeDasharray: '20',
        strokeLinejoin: 'round'
      },
      React.createElement(
        'g',
        {
          id: 'Desktop-061217',
          transform: 'translate(-245 -2754)',
          stroke: '#5EB2FE'
        },
        React.createElement(
          'g',
          {
            id: 'Catagory',
            transform: 'translate(0 2629)'
          },
          React.createElement(
            'g',
            {
              id: '1',
              transform: 'translate(167 120)'
            },
            React.createElement(
              'g',
              {
                id: 'Title-Copy-3'
              },
              React.createElement(
                'g',
                {
                  id: 'HYPERLINK-Dark-BG',
                  transform: 'translate(78 5)'
                },
                React.createElement(
                  'g',
                  {
                    id: 'HYPERLINK',
                    transform: 'translate(.47)'
                  },
                  React.createElement('path', {
                    id: 'Path-3',
                    d: 'M.5.01l4.937 4.983-4.93 5.017'
                  })
                )
              )
            )
          )
        )
      )
    )
  );
};

var Wrapper = _styledComponents2.default.div.withConfig({
  displayName: 'bottom-link__Wrapper',
  componentId: 's36e86m-0'
})(['font-size: ', ';color: ', ';cursor: pointer;> span {padding-right: 7px;}svg {width: 7px;margin-bottom: -1px;transition: 0.3s all ease-out;}&:hover {> svg {transform: translateX(8px);}}'], _commonVariables.fonts.size.base, function (props) {
  return props.isDarkBg ? _commonVariables.colors.lightBlue : _commonVariables.colors.blue;
});

var BottomLink = function BottomLink(props) {
  return React.createElement(
    Wrapper,
    { isDarkBg: props.isDarkBg },
    React.createElement(
      'span',
      null,
      props.text
    ),
    props.isDarkBg ? React.createElement(LinkIcon, null) : React.createElement(DarkBgIcon, null)
  );
};

BottomLink.propTypes = {
  isDarkBg: _propTypes2.default.bool,
  text: _propTypes2.default.string.isRequired
};

BottomLink.defaultProps = {
  isDarkBg: false
};

exports.default = BottomLink;