backpack-ui/dist/components/heading/index.js

Lonely Planet's Components

"use strict";

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _typography = require("../../styles/typography");

var _color = require("../../utils/color");

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  base: {
    fontFamily: (0, _font2.default)("benton"),
    lineHeight: 1,
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0
  },

  size: {
    tiny: {
      fontSize: _typography.fontSizeUppercase + "px"
    },
    small: (0, _defineProperty3.default)({
      fontSize: _typography.fontSizeUppercase + "px"

    }, "@media (min-width: " + _mq2.default.min[600] + ")", {
      fontSize: _typography.fontSizeUppercase + 2 + "px"
    }),
    medium: {
      fontSize: _typography.fontSizeHeading5 + 2 + "px",
      lineHeight: 40 / 26
    },
    large: (0, _defineProperty3.default)({
      fontSize: _typography.fontSizeHeading2 - 8 + "px"

    }, "@media (min-width: " + _mq2.default.min[600] + ")", {
      fontSize: _typography.fontSizeHeading2 - 3 + "px"
    }),
    huge: (0, _defineProperty3.default)({
      fontSize: _typography.fontSizeHeading4 + 2 + "px",
      letterSpacing: "-1px",
      lineHeight: 36 / 30

    }, "@media (min-width: " + _mq2.default.min[600] + ")", {
      fontSize: _typography.fontSizeHeading1 + "px",
      lineHeight: 70 / 64
    })
  },

  weight: {
    extraThin: {
      fontWeight: _typography.fontWeightLight
    },
    thin: {
      fontWeight: _typography.fontWeightLight
    },
    normal: {
      fontWeight: _typography.fontWeightRegular
    },
    thick: {
      fontWeight: _typography.fontWeightMedium
    }
  },

  importance: {
    low: {
      color: (0, _color.rgba)(_colors2.default.textPrimary, 0.35)
    },
    normal: {
      color: _colors2.default.textPrimary
    },
    high: {
      color: _colors2.default.textPrimary
    },
    alert: {
      color: _colors2.default.accentRed
    }
  },

  variant: {
    caps: {
      textTransform: "uppercase"
    },

    truncate: {
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap"
    }
  },

  tracking: {
    tight: {
      letterSpacing: "-1px"
    },
    loose: {
      letterSpacing: "1px"
    }
  }
};

/**
 * Heading component
 */
function Heading(_ref) {
  var children = _ref.children,
      level = _ref.level,
      size = _ref.size,
      weight = _ref.weight,
      importance = _ref.importance,
      tracking = _ref.tracking,
      truncate = _ref.truncate,
      caps = _ref.caps,
      override = _ref.override,
      qaHook = _ref.qaHook;

  var Component = "h" + level;

  return _react2.default.createElement(
    Component,
    {
      className: "Heading",
      "data-testid": qaHook ? (0, _createQAHook2.default)(children, "heading", "" + Component) : null,
      style: [styles.base, size && styles.size[size], weight && styles.weight[weight], importance && styles.importance[importance], tracking && styles.tracking[tracking], truncate && styles.variant.truncate, caps && styles.variant.caps, override]
    },
    children
  );
}

Heading.propTypes = {
  /**
   * Text for the heading
   */
  children: _propTypes2.default.node.isRequired,

  /**
   * Creates the heading element
   */
  level: _propTypes2.default.oneOf([1, 2, 3, 4, 5, 6]).isRequired,

  /**
   * Declares the font size of the heading
   */
  size: _propTypes2.default.oneOf(["huge", "large", "medium", "small", "tiny"]).isRequired,

  /**
   * Adjusts the font weight of the heading
   */
  weight: _propTypes2.default.oneOf(["thick", "normal", "thin", "extraThin"]),

  /**
   * The heading color changes based on importance
   */
  importance: _propTypes2.default.oneOf(["alert", "high", "normal", "low"]),

  /**
   * Controls the letter spacing
   */
  tracking: _propTypes2.default.oneOf(["tight", "normal", "loose"]),

  /**
   * Whether or not to hide the text overflow with an ellipsis
   */
  truncate: _propTypes2.default.bool,

  /**
   * Whether or not to set the heading in all caps
   */
  caps: _propTypes2.default.bool,

  /**
   * Override styles
   */
  override: _propTypes4.default.style,

  /**
   * Boolean value for qa hook
   */
  qaHook: _propTypes2.default.bool
};

Heading.defaultProps = {
  level: 2,
  size: "medium",
  weight: "normal",
  importance: "normal",
  tracking: "normal",
  truncate: false,
  caps: false,
  override: {},
  qaHook: false
};

Heading.styles = styles;

exports.default = (0, _radium2.default)(Heading);