vcc-ui/lib/components/text/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Text = exports.createBaselineAdjustments = exports.convertBaselineKeys = exports.renameBaselineKeys = exports.convertBaselineValues = exports.SUB_STYLES = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactFela = require("react-fela");

var _objectMap = require("../../object-map");

var _renameKeys = require("../../rename-keys");

var _propTypes = _interopRequireDefault(require("prop-types"));

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var SUB_STYLES = ['standard', 'inline-link', 'emphasis', 'overline'];
exports.SUB_STYLES = SUB_STYLES;
var convertBaselineValues = (0, _objectMap.objectMap)(function (value, key) {
  if (key === 'top') {
    return "".concat(value, "px 0 0");
  } else if (key === 'bottom') {
    return "0 0 ".concat(value, "px");
  }

  if (_typeof(value) === 'object') {
    return convertBaselineValues(value);
  }

  return value;
});
exports.convertBaselineValues = convertBaselineValues;
var renameBaselineKeys = (0, _renameKeys.renameKeys)({
  top: 'padding',
  bottom: 'margin'
});
exports.renameBaselineKeys = renameBaselineKeys;

var convertBaselineKeys = function convertBaselineKeys(obj) {
  return renameBaselineKeys((0, _objectMap.objectMap)(function (value) {
    if (_typeof(value) === 'object') {
      return renameBaselineKeys(value);
    }

    return value;
  })(obj));
};
/**
  	Baseline adjustments allow us to fine tune each type scale
  	so it sits on the 4px baseline. It only needs to be applied to
  	the root element. We use a combination of margin and padding
  	to prevent margin collapsing.
  */


exports.convertBaselineKeys = convertBaselineKeys;

var createBaselineAdjustments = function createBaselineAdjustments(_ref) {
  var _ref$baselineAdjustme = _ref.baselineAdjustments,
      baselineAdjustments = _ref$baselineAdjustme === void 0 ? {} : _ref$baselineAdjustme,
      isRootElement = _ref.isRootElement,
      shouldAdjustBaseline = _ref.shouldAdjustBaseline;

  if (!shouldAdjustBaseline || !isRootElement) {
    return {
      margin: 0,
      padding: 0
    };
  }

  return convertBaselineKeys(convertBaselineValues(baselineAdjustments));
};

exports.createBaselineAdjustments = createBaselineAdjustments;

var TextContext = _react.default.createContext();

var Text = _react.default.forwardRef(function (_ref2, ref) {
  var extend = _ref2.extend,
      userVariant = _ref2.variant,
      subStyle = _ref2.subStyle,
      _ref2$alignBaseline = _ref2.alignBaseline,
      shouldAdjustBaseline = _ref2$alignBaseline === void 0 ? true : _ref2$alignBaseline,
      as = _ref2.as,
      className = _ref2.className,
      children = _ref2.children,
      props = _objectWithoutProperties(_ref2, ["extend", "variant", "subStyle", "alignBaseline", "as", "className", "children"]);

  var _useFela = (0, _reactFela.useFela)(props),
      css = _useFela.css,
      theme = _useFela.theme;
  /**
  Context is used for two reasons:
  1. Allows us to derive the type scale from the context, letting us omit
  the variant name for nested styles, eg:
  <Text variant="columbus">Hello <Text subStyle="bold">World</Text></Text>
  2. Lets us know if the element is the 'root' element, and apply baseline
  adjustments if required.
  */


  return _react.default.createElement(TextContext.Consumer, null, function () {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        _ref3$parentVariant = _ref3.parentVariant,
        variant = _ref3$parentVariant === void 0 ? userVariant : _ref3$parentVariant,
        _ref3$isRootElement = _ref3.isRootElement,
        isRootElement = _ref3$isRootElement === void 0 ? true : _ref3$isRootElement;

    var typeScaleStyle = theme.typeScale[variant];
    var _typeScaleStyle$subSt = typeScaleStyle[subStyle],
        preferredElement = _typeScaleStyle$subSt.element,
        styles = _typeScaleStyle$subSt.styles,
        baselineAdjustments = _typeScaleStyle$subSt.baselineAdjustments;
    var baselineAdjustmentStyles = createBaselineAdjustments({
      baselineAdjustments: baselineAdjustments,
      isRootElement: isRootElement,
      shouldAdjustBaseline: shouldAdjustBaseline
    });
    var displayModifier = isRootElement ? {
      display: 'block'
    } : {};
    var Element = as || preferredElement || 'p';
    return _react.default.createElement(Element, _extends({
      ref: ref
    }, props, {
      className: css({
        color: theme.color.foreground.primary
      }, displayModifier, styles, baselineAdjustmentStyles, extend) + (className ? ' ' + className : '')
    }), _react.default.createElement(TextContext.Provider, {
      value: {
        parentVariant: variant,
        isRootElement: false
      }
    }, children));
  });
});

exports.Text = Text;
Text.displayName = 'Text';
Text.defaultProps = {
  variant: 'columbus',
  subStyle: 'standard'
};
Text.propTypes = {
  /** A JSX node */
  children: _propTypes.default.node,

  /** Any valid React element, function, or a string specifying a name for an HTML element */
  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element, _propTypes.default.func]),

  /** One of the available type scale styles */
  variant: _propTypes.default.string,

  /** One of the available sub-styles for a given type scale */
  subStyle: _propTypes.default.string,

  /** An object containing valid CSS style declarations */
  extend: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func, _propTypes.default.array]),

  /** Add an additional custom className to element. Warning: make sure it doesn't collide with the classNames being generated for the atomic CSS */
  className: _propTypes.default.string,

  /** Adjust padding-top/margin-bottom to the text to keep it aligned with the micro grid. */
  alignBaseline: _propTypes.default.bool
};