@zenkit/typography/text.js

ZenKit components for impliments typography

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = void 0;

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _styles = require("@zenkit/styles");

var styles = function styles(theme) {
  return {
    family: {
      fontFamily: function fontFamily(props) {
        return theme.fontFamily[props.family] || props.family;
      }
    },
    size: {
      fontSize: function fontSize(props) {
        return props.size;
      }
    },
    height: {
      lineHeight: function lineHeight(props) {
        return props.height;
      }
    },
    weight: {
      fontWeight: function fontWeight(props) {
        return props.weight;
      }
    },
    italic: {
      fontStyle: 'italic'
    },
    align: {
      textAlign: function textAlign(props) {
        return props.align;
      }
    },
    verticalAlign: {
      verticalAlign: function verticalAlign(props) {
        return props.verticalAlign;
      }
    },
    color: {
      color: function color(props) {
        return props.color;
      }
    },
    background: {
      background: function background(props) {
        return props.background;
      }
    },
    opacity: {
      opacity: function opacity(props) {
        return props.opacity;
      }
    },
    shadow: {
      textShadow: function textShadow(props) {
        return props.shadow;
      }
    },
    indent: {
      textIndent: function textIndent(props) {
        return props.indent;
      }
    },
    letterSpacing: {
      letterSpacing: function letterSpacing(props) {
        return props.letterSpacing;
      }
    },
    wordSpacing: {
      wordSpacing: function wordSpacing(props) {
        return props.wordSpacing;
      }
    },
    decoration: {
      textDecoration: function textDecoration(props) {
        if (props.noDecorate) {
          return 'none';
        }

        var decoration = [];

        if (props.underline) {
          decoration = decoration.push('underline');
        }

        if (props.overline) {
          decoration = decoration.push('overline');
        }

        if (props.lineThrough) {
          decoration = decoration.push('line-through');
        }

        return decoration.join(' ');
      }
    },
    transform: {
      textTransform: function textTransform(props) {
        if (props.noCapitalize) {
          return 'none';
        }

        if (props.capitalize) {
          return 'capitalize';
        }

        if (props.uppercase) {
          return 'uppercase';
        }

        if (props.lowercase) {
          return 'lowercase';
        }
      }
    },
    variant: {
      fontVariant: function fontVariant(props) {
        if (props.normalCaps) {
          return 'normal';
        }

        if (props.smallCaps) {
          return 'small-caps';
        }
      }
    },
    noWrap: {
      whiteSpace: 'nowrap'
    },
    truncate: {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    },
    visible: {
      visibility: function visibility(props) {
        if (props.visible === true) {
          return 'visible';
        }

        if (props.invisible) {
          return 'hidden';
        }
      }
    },
    hide: {
      font: '0/0 a',
      color: 'transparent',
      textShadow: 'none',
      backgroundColor: 'transparent',
      border: 0
    }
  };
};

exports.styles = styles;

function Text(props) {
  var _cn;

  var Component = props.is,
      children = props.children,
      family = props.family,
      size = props.size,
      height = props.height,
      weight = props.weight,
      italic = props.italic,
      align = props.align,
      verticalAlign = props.verticalAlign,
      color = props.color,
      background = props.background,
      opacity = props.opacity,
      shadow = props.shadow,
      indent = props.indent,
      letterSpacing = props.letterSpacing,
      wordSpacing = props.wordSpacing,
      noDecorate = props.noDecorate,
      underline = props.underline,
      overline = props.overline,
      lineThrough = props.lineThrough,
      noCapitalize = props.noCapitalize,
      capitalize = props.capitalize,
      uppercase = props.uppercase,
      lowercase = props.lowercase,
      normalCaps = props.normalCaps,
      smallCaps = props.smallCaps,
      noWrap = props.noWrap,
      truncate = props.truncate,
      visible = props.visible,
      invisible = props.invisible,
      hide = props.hide,
      theme = props.theme,
      classes = props.classes,
      classNameProps = props.className,
      otherProps = (0, _objectWithoutProperties2.default)(props, ["is", "children", "family", "size", "height", "weight", "italic", "align", "verticalAlign", "color", "background", "opacity", "shadow", "indent", "letterSpacing", "wordSpacing", "noDecorate", "underline", "overline", "lineThrough", "noCapitalize", "capitalize", "uppercase", "lowercase", "normalCaps", "smallCaps", "noWrap", "truncate", "visible", "invisible", "hide", "theme", "classes", "className"]);
  return React.createElement(Component, (0, _extends2.default)({
    className: (0, _classnames.default)((_cn = {}, (0, _defineProperty2.default)(_cn, classes.family, family), (0, _defineProperty2.default)(_cn, classes.size, size), (0, _defineProperty2.default)(_cn, classes.height, height), (0, _defineProperty2.default)(_cn, classes.weight, weight), (0, _defineProperty2.default)(_cn, classes.italic, italic), (0, _defineProperty2.default)(_cn, classes.align, align), (0, _defineProperty2.default)(_cn, classes.verticalAlign, verticalAlign), (0, _defineProperty2.default)(_cn, classes.color, color), (0, _defineProperty2.default)(_cn, classes.background, background), (0, _defineProperty2.default)(_cn, classes.opacity, opacity), (0, _defineProperty2.default)(_cn, classes.shadow, shadow), (0, _defineProperty2.default)(_cn, classes.indent, indent), (0, _defineProperty2.default)(_cn, classes.letterSpacing, letterSpacing), (0, _defineProperty2.default)(_cn, classes.wordSpacing, wordSpacing), (0, _defineProperty2.default)(_cn, classes.decoration, noDecorate || underline || overline || lineThrough), (0, _defineProperty2.default)(_cn, classes.transform, noCapitalize || capitalize || uppercase || lowercase), (0, _defineProperty2.default)(_cn, classes.variant, normalCaps || smallCaps), (0, _defineProperty2.default)(_cn, classes.noWrap, noWrap), (0, _defineProperty2.default)(_cn, classes.truncate, truncate), (0, _defineProperty2.default)(_cn, classes.visible, visible || invisible), (0, _defineProperty2.default)(_cn, classes.hide, hide), _cn), classNameProps)
  }, otherProps), children);
}

Text.defaultProps = {
  is: 'span'
};

var _default = (0, _styles.withStyles)(styles)(Text);

exports.default = _default;