@kiwicom/orbit-components/es/Modal/ModalSection/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 defaultTokens from "../../defaultTokens";
import media from "../../utils/media";
import { StyledModalFooter } from "../ModalFooter";
export const StyledModalSection = styled.section.withConfig({
  displayName: "ModalSection__StyledModalSection",
  componentId: "sc-1ayrdn8-0"
})(["width:100%;padding:", ";background-color:", ";border-bottom:1px solid ", ";box-sizing:border-box;&:first-of-type{border-top:", ";border-top-left-radius:", ";border-top-right-radius:", ";margin:", ";}&:last-of-type{border-bottom:", ";& ~ ", "{margin:", ";}}", ";"], ({
  theme
}) => `${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium}`, ({
  theme,
  suppressed
}) => suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, ({
  theme
}) => theme.orbit.paletteCloudNormal, ({
  suppressed,
  theme
}) => suppressed && `1px solid ${theme.orbit.paletteCloudNormal}`, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  suppressed,
  theme
}) => suppressed && `${theme.orbit.spaceLarge} 0 0 0`, ({
  suppressed,
  theme
}) => suppressed ? `1px solid ${theme.orbit.paletteCloudNormal}` : "0", StyledModalFooter, ({
  theme,
  suppressed
}) => suppressed && `${theme.orbit.spaceMedium} 0 0 0`, media.desktop`
    padding: ${({
  theme
}) => theme.orbit.spaceXXLarge};
    
    &:first-of-type {
      margin: ${({
  suppressed,
  theme
}) => suppressed && `${theme.orbit.spaceXXLarge} 0 0 0`};
    }
    &:last-of-type {
      border-bottom-left-radius: ${({
  theme
}) => theme.orbit.borderRadiusNormal};
      border-bottom-right-radius: ${({
  theme
}) => theme.orbit.borderRadiusNormal};
      & ~ ${StyledModalFooter} {
        margin: ${({
  suppressed,
  theme
}) => suppressed && `${theme.orbit.spaceXXLarge} 0 0 0`};
      }
    }
  `);
StyledModalSection.defaultProps = {
  theme: defaultTokens
};

const ModalSection = props => {
  const {
    suppressed,
    children,
    dataTest
  } = props;
  return React.createElement(StyledModalSection, {
    suppressed: suppressed,
    "data-test": dataTest
  }, children);
};

export default ModalSection;