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

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

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",
  componentId: "sc-13vyf6i-0"
})(["margin:", ";"], ({
  theme,
  illustration
}) => `${illustration ? theme.orbit.spaceXSmall : "0"} 0 0 0`);
ModalTitle.defaultProps = {
  theme: defaultTokens
};
const ModalDescription = styled.div.withConfig({
  displayName: "ModalHeader__ModalDescription",
  componentId: "sc-13vyf6i-1"
})(["margin:", ";"], ({
  theme
}) => `${theme.orbit.spaceXSmall} 0 0 0`);
ModalDescription.defaultProps = {
  theme: defaultTokens
};
const StyledModalHeader = styled.div.withConfig({
  displayName: "ModalHeader__StyledModalHeader",
  componentId: "sc-13vyf6i-2"
})(["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",
  componentId: "sc-13vyf6i-3"
})(["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",
  componentId: "sc-13vyf6i-4"
})(["margin-top:", ";"], ({
  description
}) => description ? "32px" : "16px");

const ModalHeader = props => {
  const {
    title,
    illustration,
    description,
    children,
    suppressed,
    dataTest
  } = props;
  const hasHeader = title || description;
  return React.createElement(StyledModalHeader, {
    illustration: !!illustration,
    suppressed: suppressed,
    "data-test": dataTest
  }, illustration, hasHeader && React.createElement(ModalTitle, {
    illustration: !!illustration
  }, title && 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), title && React.createElement(MobileHeader, null, title));
};

export default ModalHeader;