@axeptio/design-system/src/Core/Layout/Flex/index.jsx

Design System for Axeptio

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.div`
  display: flex;
  gap: ${props => props.gap || '20px'};
  flex: ${props => props.flex || 'auto'};
  flex-direction: ${props => props.direction || 'row'};
  justify-content: ${props => props.justifyContent || 'start'};
  align-items: ${props => props.alignItems || 'start'};
  align-content: ${props => props.alignContent || 'start'};

  ${props =>
    props.width &&
    `
    width: ${props.width};
  `};

  ${props =>
    props.height &&
    `
    height: ${props.height};
  `};

  ${props =>
    props.padding &&
    `
    padding: ${props.padding};
  `};

  ${props =>
    props.margin &&
    `
    margin: ${props.margin};
  `};

  ${props =>
    props.overflow &&
    `
    overflow: ${props.overflow};
  `};
`;

const Flex = ({
  gap,
  flex,
  alignItems,
  direction,
  justifyContent,
  alignContent,
  width,
  height,
  padding,
  margin,
  overflow,
  children
}) => (
  <Root
    gap={gap}
    flex={flex}
    alignItems={alignItems}
    direction={direction}
    justifyContent={justifyContent}
    alignContent={alignContent}
    width={width}
    height={height}
    padding={padding}
    margin={margin}
    overflow={overflow}
  >
    {children}
  </Root>
);

Flex.propTypes = {
  gap: PropTypes.string,
  flex: PropTypes.string,
  alignItems: PropTypes.string,
  direction: PropTypes.string,
  justifyContent: PropTypes.string,
  alignContent: PropTypes.string,
  width: PropTypes.string,
  height: PropTypes.string,
  padding: PropTypes.string,
  margin: PropTypes.string,
  overflow: PropTypes.string,
  children: PropTypes.any
};

export default Flex;