fk-react-ui-components/components/FormElements/Input/Input.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 React from "react";
import FormElement from "../FormElement.js";
import styled from "styled-components";
import {colors} from "../../colorCodes";

let StyledInput = styled.input`
    display: ${(props) => props.display || "block"};
    padding: 7px;
    border-radius: 4px;
    border: 1px solid ${colors.inputBorder};
    width: ${(props) => props.width || "100%"};
    max-width: ${(props) => props.maxWidth || "none"};
    margin: ${(props) => props.margin} !important;
    &:disabled{
        background-color: #eeeeee75;
    }
`;

class Input extends FormElement {
 constructor(props) {
  super(props);
 }
 render() {
  return(
    <StyledInput value={this.state.value} onChange={this.handleChange} {...this.props} />
  )
 }
}

export default Input;