fk-react-ui-components/components/Card/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by abhishek.panda on 31/08/17.
 */
import React from 'react';
import styled from "styled-components";
import PropTypes from 'prop-types';
import {colors} from '../colorCodes';

const ContentWrapper = styled.div`
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    margin : 'auto';
    padding : ${props => props.contentSpacing || '20px'};
`;


const Card = (props) => {

    const style = {
        borderRadius: (props.borderRadius) || "4px",
        backgroundColor: (props.backgroundColor) || colors.whiteText,
        boxShadow: (props.boxShadow) || "0 -1px 3px 0 rgba(208,208,208,0.5)",
        height: props.height || "auto",
        margin : props.margin || "0px",
        position : props.position || "relative",
        width: (props.minWidth) ? "unset" : (props.width || "636px"),
        minWidth : (props.width) ? "unset" : (props.minWidth || "222px"),
        overflow : (props.overflow) ||"hidden",
        display : props.display || "block",
        zIndex : props.zIndex || "unset"
    };

    return (
        <div style={style} className={props.className || ""}>
            <ContentWrapper contentSpacing={props.padding}>
                {props.children}
            </ContentWrapper>
        </div>
    );


};


export default Card;

Card.propTypes = {
    borderRadius : PropTypes.string,
    backgroundColor : PropTypes.string,
    boxShadow : PropTypes.string,
    height : PropTypes.string,
    margin : PropTypes.string,
    position : PropTypes.string,
    width : PropTypes.string,
    minWidth : PropTypes.string,
    overflow : PropTypes.string,
    display : PropTypes.string,
    zIndex : PropTypes.string
};