@kiwicom/orbit-components/lib/Heading/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

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

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

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

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

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _rtl = require("../utils/rtl");

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _consts = require("./consts");

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

var _consts2 = require("../utils/mediaQuery/consts");

const getHeadingToken = (name, type) => ({
  theme
}) => {
  const tokens = {
    [_consts.TOKENS.weightHeading]: {
      [_consts.TYPE_OPTIONS.DISPLAY]: theme.orbit.fontWeightHeadingDisplay,
      [_consts.TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.fontWeightHeadingDisplaySubtitle,
      [_consts.TYPE_OPTIONS.TITLE1]: theme.orbit.fontWeightHeadingTitle1,
      [_consts.TYPE_OPTIONS.TITLE2]: theme.orbit.fontWeightHeadingTitle2,
      [_consts.TYPE_OPTIONS.TITLE3]: theme.orbit.fontWeightHeadingTitle3,
      [_consts.TYPE_OPTIONS.TITLE4]: theme.orbit.fontWeightHeadingTitle4,
      [_consts.TYPE_OPTIONS.TITLE5]: theme.orbit.fontWeightHeadingTitle5
    },
    [_consts.TOKENS.sizeHeading]: {
      [_consts.TYPE_OPTIONS.DISPLAY]: theme.orbit.fontSizeHeadingDisplay,
      [_consts.TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.fontSizeHeadingDisplaySubtitle,
      [_consts.TYPE_OPTIONS.TITLE1]: theme.orbit.fontSizeHeadingTitle1,
      [_consts.TYPE_OPTIONS.TITLE2]: theme.orbit.fontSizeHeadingTitle2,
      [_consts.TYPE_OPTIONS.TITLE3]: theme.orbit.fontSizeHeadingTitle3,
      [_consts.TYPE_OPTIONS.TITLE4]: theme.orbit.fontSizeHeadingTitle4,
      [_consts.TYPE_OPTIONS.TITLE5]: theme.orbit.fontSizeHeadingTitle5
    },
    [_consts.TOKENS.lineHeight]: {
      [_consts.TYPE_OPTIONS.DISPLAY]: theme.orbit.lineHeightHeadingDisplay,
      [_consts.TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.lineHeightHeadingDisplaySubtitle,
      [_consts.TYPE_OPTIONS.TITLE1]: theme.orbit.lineHeightHeadingTitle1,
      [_consts.TYPE_OPTIONS.TITLE2]: theme.orbit.lineHeightHeadingTitle2,
      [_consts.TYPE_OPTIONS.TITLE3]: theme.orbit.lineHeightHeadingTitle3,
      [_consts.TYPE_OPTIONS.TITLE4]: theme.orbit.lineHeightHeadingTitle4,
      [_consts.TYPE_OPTIONS.TITLE5]: theme.orbit.lineHeightHeadingTitle5
    }
  };
  return tokens[name][type];
};

exports.getHeadingToken = getHeadingToken;
const StyledHeading = (0, _styledComponents.default)(({
  element: Component,
  className,
  children,
  dataTest,
  dataA11ySection,
  id
}) => /*#__PURE__*/React.createElement(Component, {
  className: className,
  "data-test": dataTest,
  "data-a11y-section": dataA11ySection,
  id: id
}, children)).withConfig({
  displayName: "Heading__StyledHeading",
  componentId: "sc-rrd5d-0"
})(["", ""], ({
  theme,
  inverted,
  viewports,
  type,
  align
}) => (0, _styledComponents.css)(["font-family:", ";text-transform:", ";color:", ";margin:0;text-align:", ";font-size:", ";font-weight:", ";line-height:", ";margin-bottom:", ";", ""], theme.orbit.fontFamily, type === _consts.TYPE_OPTIONS.TITLE5 && "uppercase", inverted ? theme.orbit.colorHeadingInverted : theme.orbit.colorHeading, (0, _rtl.textAlign)(align), getHeadingToken(_consts.TOKENS.sizeHeading, type), getHeadingToken(_consts.TOKENS.weightHeading, type), getHeadingToken(_consts.TOKENS.lineHeight, type), _getSpacingToken.default, // temporary fix until we figure out how come `viewports` ended up being `undefined`
_consts2.DEVICES.filter(viewport => viewports && viewports[viewport]).map(viewport => {
  const {
    type: value,
    spaceAfter,
    align: txtAlign
  } = viewports[viewport];
  return _mediaQuery.default[viewport]((0, _styledComponents.css)(["font-size:", ";text-align:", ";font-weight:", ";line-height:", ";margin-bottom:", ";"], getHeadingToken(_consts.TOKENS.sizeHeading, value), (0, _rtl.textAlign)(txtAlign), getHeadingToken(_consts.TOKENS.weightHeading, value), getHeadingToken(_consts.TOKENS.lineHeight, value), (0, _getSpacingToken.default)({
    spaceAfter,
    theme
  })));
}))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

exports.StyledHeading = StyledHeading;
StyledHeading.defaultProps = {
  theme: _defaultTheme.default
};

const Heading = ({
  children,
  type = _consts.TYPE_OPTIONS.TITLE1,
  align = _consts.ALIGN.START,
  as = _consts.ELEMENT_OPTIONS.DIV,
  dataTest,
  inverted = false,
  spaceAfter,
  dataA11ySection,
  id,
  mediumMobile,
  largeMobile,
  tablet,
  desktop,
  largeDesktop
}) => {
  const viewports = {
    mediumMobile,
    largeMobile,
    tablet,
    desktop,
    largeDesktop
  };
  return /*#__PURE__*/React.createElement(StyledHeading, {
    id: id,
    align: align,
    type: type,
    element: as,
    inverted: inverted,
    dataTest: dataTest,
    spaceAfter: spaceAfter,
    dataA11ySection: dataA11ySection,
    viewports: viewports
  }, children);
};

var _default = Heading;
exports.default = _default;