@dmartss/ui/lib/text.js

UI components for my projects

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

exports.A = A;
exports.P = P;
exports.BlockQuote = BlockQuote;
exports.Abbr = Abbr;
exports.Mark = Mark;

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

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _url = require('url');

var _url2 = _interopRequireDefault(_url);

var _lodash = require('lodash.memoize');

var _lodash2 = _interopRequireDefault(_lodash);

var _palette = require('@dmartss/palette');

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

/**
 * Parse a URL to get the differnt parts and memoize it for better performance
 * @function parseUrl
 * @private
 * @param {String} url A URL string to parse
 * @returns {Object} The parsed URL
 */
/** @module ui/text */
var parseUrl = (0, _lodash2.default)(_url2.default.parse);

/**
 * @function A
 * @param {Object} props
 * @param {Object} props.children
 * @param {String} [props.color=info]
 * @param {String} [props.decoration="none"]
 * @param {String} [props.hostname="noble-consult-group.now.sh"]
 * @param {Object} [props.props={}]
 */
function A(_ref) {
  var children = _ref.children,
      _ref$color = _ref.color,
      color = _ref$color === undefined ? _palette.info : _ref$color,
      _ref$decoration = _ref.decoration,
      decoration = _ref$decoration === undefined ? 'none' : _ref$decoration,
      _ref$hostname = _ref.hostname,
      hostname = _ref$hostname === undefined ? 'noble-consult-group.now.sh' : _ref$hostname,
      props = (0, _objectWithoutProperties3.default)(_ref, ['children', 'color', 'decoration', 'hostname']);

  var self = props.href.startsWith('/') && !props.href.startsWith('//') || hostname === parseUrl(props.href).hostname;

  var extraProps = self ? { target: '_self' } : { target: '_blank', rel: 'nofollow noopener' };

  return _react2.default.createElement(
    'a',
    (0, _extends3.default)({}, props, extraProps, {
      className: _style2.default.dynamic([['3104097709', [color, decoration]]]) + ' ' + (extraProps.className != null && extraProps.className || props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '3104097709',
      css: 'a.__jsx-style-dynamic-selector{color:' + color + ';-webkit-text-decoration:' + decoration + ';text-decoration:' + decoration + ';}',
      dynamic: [color, decoration]
    })
  );
}

/**
 * @function P
 * @param {Object} props
 * @param {Object} props.children
 * @param {Object} [props.props={}]
 */
function P(_ref2) {
  var children = _ref2.children,
      props = (0, _objectWithoutProperties3.default)(_ref2, ['children']);

  return _react2.default.createElement(
    'p',
    (0, _extends3.default)({}, props, {
      className: 'jsx-2274863884' + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '2274863884',
      css: 'p.jsx-2274863884{margin:1em 0;font-size:1.25em;}'
    })
  );
}

/**
 * @function BlockQuote
 * @param {Object} props
 * @param {Object} props.children
 * @param {Object} [props.props={}]
 */
function BlockQuote(_ref3) {
  var children = _ref3.children,
      props = (0, _objectWithoutProperties3.default)(_ref3, ['children']);

  return _react2.default.createElement(
    'blockquote',
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['2116423946', [_palette.primary]]]) + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '2116423946',
      css: 'blockquote.__jsx-style-dynamic-selector{border-left:3px solid ' + _palette.primary + ';box-sizing:border-box;padding-left:calc(2em - 3px);margin-left:-2em;margin-right:0;font-weight:normal;font-style:italic;font-size:1em;}blockquote.__jsx-style-dynamic-selector p{margin:0;}',
      dynamic: [_palette.primary]
    })
  );
}

/**
 * @function Abbr
 * @param {Object} props
 * @param {Object} props.children
 * @param {Object} [props.props={}]
 */
function Abbr(_ref4) {
  var children = _ref4.children,
      props = (0, _objectWithoutProperties3.default)(_ref4, ['children']);

  return _react2.default.createElement(
    'abbr',
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['3820996682', [_palette.grey]]]) + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '3820996682',
      css: 'abbr.__jsx-style-dynamic-selector{cursor:help;-webkit-text-decoration-style:dashed;text-decoration-style:dashed;-webkit-text-decoration-color:' + _palette.grey + ';text-decoration-color:' + _palette.grey + ';}',
      dynamic: [_palette.grey]
    })
  );
}

/**
 * @function Mark
 * @param {Object} props
 * @param {String} [props.backColor=pink]
 * @param {String} [props.textColor=secondary]
 * @param {Object} [props.props={}]
 */
function Mark(_ref5) {
  var children = _ref5.children,
      _ref5$backColor = _ref5.backColor,
      backColor = _ref5$backColor === undefined ? _palette.pink : _ref5$backColor,
      _ref5$textColor = _ref5.textColor,
      textColor = _ref5$textColor === undefined ? _palette.secondary : _ref5$textColor,
      props = (0, _objectWithoutProperties3.default)(_ref5, ['children', 'backColor', 'textColor']);

  return _react2.default.createElement(
    'mark',
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['1631964522', [backColor, textColor]]]) + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '1631964522',
      css: 'mark.__jsx-style-dynamic-selector{background-color:' + backColor + ';color:' + textColor + ';padding:0.125em 0.2em;}',
      dynamic: [backColor, textColor]
    })
  );
}