fk-react-ui-components/lib/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 React.createElement(
        'div',
        { style: style, className: props.className || "" },
        React.createElement(
            ContentWrapper,
            { contentSpacing: props.padding },
            props.children
        )
    );
};

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
};
//# sourceMappingURL=index.js.map