fk-react-ui-components/components/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};
}
`;