@kiwicom/orbit-components/es/Modal/ModalFooter/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 media from "../../utils/media";
import defaultTokens from "../../defaultTokens";
import { StyledButton } from "../../Button";

const StyledChild = styled.div.withConfig({
  displayName: "ModalFooter__StyledChild"
})(["flex:", ";box-sizing:border-box;padding-right:", ";", ";"], ({ flex }) => flex, ({ theme }) => theme.orbit.spaceMedium, media.desktop`
    flex: none;
  `);

StyledChild.defaultProps = {
  theme: defaultTokens
};

export const StyledModalFooter = styled.div.withConfig({
  displayName: "ModalFooter__StyledModalFooter"
})(["display:flex;bottom:0;width:100%;background-color:", ";padding:", ";box-sizing:border-box;@media (max-width:599px){", "{font-size:", ";height:", ";}}", ";", ":last-of-type{padding-right:0;}"], ({ theme }) => theme.orbit.paletteWhite, ({ theme }) => `0 ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`, StyledButton, ({ theme }) => theme.orbit.fontSizeButtonNormal, ({ theme }) => theme.orbit.heightButtonNormal, media.desktop`
    justify-content: ${({ children }) => children.length > 1 ? "space-between" : "flex-end"};
    // TODO: create token paddingModalFooterDesktop
    border-bottom-left-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
    border-bottom-right-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
  `, StyledChild);

StyledModalFooter.defaultProps = {
  theme: defaultTokens
};

const ModalFooter = props => {
  const { flex = "0 1 auto", children, dataTest } = props;
  return React.createElement(
    StyledModalFooter,
    { "data-test": dataTest },
    React.Children.map(children, (item, key) => {
      const childFlex = Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;
      return React.createElement(
        StyledChild,
        { flex: childFlex },
        React.createElement(item.type, item.props)
      );
    })
  );
};

export default ModalFooter;