fk-react-ui-components/lib/Fields/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

import styled from "styled-components";
import { colors } from "../colorCodes";

export const SearchInput = styled.input`
    color : ${props => props.color || colors.searchInputTextColor};
    font-size: ${props => props.fontSize || '13px'};
    display: ${props => props.display || "block"};
    border: ${props => props.border || '1px solid ' + colors.inputBorder};
    background-color: ${props => props.backgroundColor || 'rgba(234,234,234,0.6)'};
    width: ${props => props.width || '100%'};
    max-width: ${props => props.maxWidth || "none"};
    height: ${props => props.height || '40px'};
    margin: ${props => props.margin || '0px'};
    padding: ${props => props.padding || '7px'};
    border-radius: ${props => props.borderRadius || '4px'};
    box-shadow: ${props => props.boxShadow || 'inset 0 1px 3px 0 rgba(63,63,63,0.15)'};
    &:focus { outline: none; }
    &:focus::-webkit-input-placeholder{ color: transparent; }
    &:focus::-moz-placeholder { color: transparent; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &.active {
        border-color: ${colors.btnBorder};
    }
`;

export const SecondaryBtn = styled.button`
float: ${props => props.float || 'none'};
padding:${props => props.padding || '8px 15px'};
margin: ${props => props.margin || '0px'};
top: ${props => props.top || '0px'};
width:${props => props.width || 'auto'};
height:${props => props.height || 'auto'};
background-color: ${colors.whiteText};
border-radius: ${props => props.borderRadius || '4px'};
position : ${props => props.position || 'relative'};
border: 1px solid ${colors.btnBorder};
color: ${colors.brandBlue};
font-size:${props => props.fontSize || '12px'};
font-family: Arial;
vertical-align:${props => props.verticalALign || 'middle'};
text-align:${props => props.textALign || 'center'};
cursor: ${props => props.cursor || 'default'};
&:focus {
    outline: none;
}
&:disabled, &[disabled] {
    background-color: ${colors.greyBorder};
    border: 1px solid ${colors.inputBorder};
    color: ${colors.inputBorder};
}
`;

export const PrimaryBtn = styled.button`
float: ${props => props.float || 'none'};
padding:${props => props.padding || '8px 15px'};
margin: ${props => props.margin || '0px'};
top: ${props => props.top || '0px'};
width:${props => props.width || 'auto'};
height:${props => props.height || 'auto'};
background-color: ${colors.brandBlue};
border-radius: ${props => props.borderRadius || '4px'};
position : ${props => props.position || 'relative'};
border: 1px solid ${colors.brandBlue};
color: ${colors.whiteText};
font-size:${props => props.fontSize || '12px'};
font-family: Arial;
vertical-align: middle;
&:focus {
    outline: none;
}
&:disabled, &[disabled] {
    background-color: ${colors.greyBorder};
    border: 1px solid ${colors.inputBorder};
    color: ${colors.inputBorder};
}
`;
//# sourceMappingURL=index.js.map