@kiwicom/orbit-components/es/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"

import * as React from "react";
import styled from "styled-components";

import Text from "../../Text";
import Heading from "../../Heading";
import defaultTokens from "../../defaultTokens";
import media from "../../utils/media";
import { StyledModalSection } from "../ModalSection";

const ModalTitle = styled.div.withConfig({
  displayName: "ModalHeader__ModalTitle"
})(["margin:", ";"], ({ theme, illustration }) => `${illustration ? theme.orbit.spaceXSmall : "0"} 0 0 0`);

ModalTitle.defaultProps = {
  theme: defaultTokens
};

const ModalDescription = styled.div.withConfig({
  displayName: "ModalHeader__ModalDescription"
})(["margin:", ";"], ({ theme }) => `${theme.orbit.spaceXSmall} 0 0 0`);

ModalDescription.defaultProps = {
  theme: defaultTokens
};

const StyledModalHeader = styled.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:", ";}", ";"], ({ theme, illustration, suppressed }) => 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}`, ({ theme }) => theme.orbit.borderRadiusNormal, ({ theme }) => theme.orbit.borderRadiusNormal, ({ suppressed, theme }) => suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, StyledModalSection, ({ suppressed, theme }) => suppressed && `1px solid ${theme.orbit.paletteCloudNormal}`, ({ suppressed }) => suppressed && "0!important", media.desktop`
    padding: ${({ theme, illustration, suppressed }) => 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: defaultTokens
};

export const MobileHeader = styled.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;", ";"], ({ theme }) => theme.orbit.fontFamily, ({ theme }) => theme.orbit.fontWeightHeadingDisplay, ({ theme }) => theme.orbit.colorHeading, ({ theme }) => theme.orbit.spaceLarge, ({ theme }) => theme.orbit.durationNormal, ({ theme }) => theme.orbit.durationFast, media.desktop`
    display: none;
  `);

MobileHeader.defaultProps = {
  theme: defaultTokens
};

const StyledModalHeaderContent = styled.div.withConfig({
  displayName: "ModalHeader__StyledModalHeaderContent"
})(["margin-top:", ";"], ({ description }) => description ? "32px" : "16px");

const ModalHeader = props => {
  const { title, illustration, description, children, suppressed, dataTest } = props;
  return React.createElement(
    StyledModalHeader,
    { illustration: !!illustration, suppressed: suppressed, "data-test": dataTest },
    illustration,
    React.createElement(
      ModalTitle,
      { illustration: !!illustration },
      React.createElement(
        Heading,
        { type: "title1" },
        title
      ),
      description && React.createElement(
        ModalDescription,
        null,
        React.createElement(
          Text,
          { size: "large", element: "div" },
          description
        )
      )
    ),
    children && React.createElement(
      StyledModalHeaderContent,
      { description: !!description },
      children
    ),
    React.createElement(
      MobileHeader,
      null,
      title
    )
  );
};

export default ModalHeader;