@kiwicom/orbit-components/lib/Modal/ModalHeader/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

"use strict";

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

var _templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n  "], ["\n    padding: ", ";\n  "]),
    _templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n  "], ["\n    display: none;\n  "]);

var _react = require("react");

var React = _interopRequireWildcard(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Text = require("../../Text");

var _Text2 = _interopRequireDefault(_Text);

var _Heading = require("../../Heading");

var _Heading2 = _interopRequireDefault(_Heading);

var _defaultTokens = require("../../defaultTokens");

var _defaultTokens2 = _interopRequireDefault(_defaultTokens);

var _media = require("../../utils/media");

var _media2 = _interopRequireDefault(_media);

var _ModalSection = require("../ModalSection");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var ModalTitle = _styledComponents2.default.div.withConfig({
  displayName: "ModalHeader__ModalTitle"
})(["margin:", ";"], function (_ref) {
  var theme = _ref.theme,
      illustration = _ref.illustration;
  return (illustration ? theme.orbit.spaceXSmall : "0") + " 0 0 0";
});

ModalTitle.defaultProps = {
  theme: _defaultTokens2.default
};

var ModalDescription = _styledComponents2.default.div.withConfig({
  displayName: "ModalHeader__ModalDescription"
})(["margin:", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.spaceXSmall + " 0 0 0";
});

ModalDescription.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledModalHeader = _styledComponents2.default.div.withConfig({
  displayName: "ModalHeader__StyledModalHeader"
})(["width:100%;display:block;padding:", ";border-top-left-radius:", ";border-top-right-radius:", ";box-sizing:border-box;background-color:", ";& ~ ", ":first-of-type{border-top:", ";margin-top:", ";}", ";"], function (_ref3) {
  var theme = _ref3.theme,
      illustration = _ref3.illustration,
      suppressed = _ref3.suppressed;
  return illustration ? theme.orbit.spaceXLarge + " " + theme.orbit.spaceMedium + " " + (suppressed ? theme.orbit.spaceLarge : "0") + " " + theme.orbit.spaceMedium : theme.orbit.spaceLarge + " " + theme.orbit.spaceMedium + " " + (suppressed ? theme.orbit.spaceLarge : "0") + " " + theme.orbit.spaceMedium;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref6) {
  var suppressed = _ref6.suppressed,
      theme = _ref6.theme;
  return suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite;
}, _ModalSection.StyledModalSection, function (_ref7) {
  var suppressed = _ref7.suppressed,
      theme = _ref7.theme;
  return suppressed && "1px solid " + theme.orbit.paletteCloudNormal;
}, function (_ref8) {
  var suppressed = _ref8.suppressed;
  return suppressed && "0!important";
}, _media2.default.desktop(_templateObject, function (_ref9) {
  var theme = _ref9.theme,
      illustration = _ref9.illustration,
      suppressed = _ref9.suppressed;
  return illustration ? theme.orbit.spaceXLarge + " " + theme.orbit.spaceXXLarge + " " + (suppressed ? theme.orbit.spaceXXLarge : "0") + " " + theme.orbit.spaceXXLarge : theme.orbit.spaceXXLarge + " " + theme.orbit.spaceXXLarge + " " + (suppressed ? theme.orbit.spaceXXLarge : "0") + " " + theme.orbit.spaceXXLarge;
}));

StyledModalHeader.defaultProps = {
  theme: _defaultTokens2.default
};

var MobileHeader = exports.MobileHeader = _styledComponents2.default.div.withConfig({
  displayName: "ModalHeader__MobileHeader"
})(["display:inline-block;position:fixed;top:16px;left:0;font-family:", ";font-weight:", ";font-size:18px;color:", ";line-height:52px;box-sizing:border-box;padding-left:", ";opacity:0;transition:top ", " ease-in-out,opacity ", " ease-in-out;z-index:1;", ";"], function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.fontFamily;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.fontWeightHeadingDisplay;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.colorHeading;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.spaceLarge;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.durationNormal;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.durationFast;
}, _media2.default.desktop(_templateObject2));

MobileHeader.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledModalHeaderContent = _styledComponents2.default.div.withConfig({
  displayName: "ModalHeader__StyledModalHeaderContent"
})(["margin-top:", ";"], function (_ref16) {
  var description = _ref16.description;
  return description ? "32px" : "16px";
});

var ModalHeader = function ModalHeader(props) {
  var title = props.title,
      illustration = props.illustration,
      description = props.description,
      children = props.children,
      suppressed = props.suppressed,
      dataTest = props.dataTest;

  return React.createElement(
    StyledModalHeader,
    { illustration: !!illustration, suppressed: suppressed, "data-test": dataTest },
    illustration,
    React.createElement(
      ModalTitle,
      { illustration: !!illustration },
      React.createElement(
        _Heading2.default,
        { type: "title1" },
        title
      ),
      description && React.createElement(
        ModalDescription,
        null,
        React.createElement(
          _Text2.default,
          { size: "large", element: "div" },
          description
        )
      )
    ),
    children && React.createElement(
      StyledModalHeaderContent,
      { description: !!description },
      children
    ),
    React.createElement(
      MobileHeader,
      null,
      title
    )
  );
};

exports.default = ModalHeader;