Merge branch 'feature/shreenidhi/progressbar' into 'feature/dushyanth'

textarea

See merge request prajakta.sathwane/sample_argon!14

src/components/ProgressBar/ProgressBar.scss

+.d-flex {
+    display: flex!important;
+}
+.align-items-center {
+    align-items: center!important;
+}
+.mr-2 {
+    margin-right: 0.5rem!important;
+    font-size: .8125rem;
+    white-space: nowrap;
+}
+
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+element.style {
+    width: 60%;
+}
+.progress {
+    display: flex;
+    height: 1rem;
+    overflow: hidden;
+    font-size: 0.75rem;
+    background-color: #e9ecef;
+    border-radius: 0.375rem;
+    width: 10%;
+    width: 120px;
+    height: 3px;
+    margin: 0;
+}
+
+.bg-warning {
+    background-color: #fb6340!important;
+}
+.progress-bar {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    transition: width .6s ease;
+    text-align: center;
+    white-space: nowrap;
+    color: #fff;
+    background-color: #5e72e4;
+    justify-content: center;
+    height: 8px;
+    margin-bottom: 1rem;
+    border-radius: 0.25rem;
+    background-color: #e9ecef;
+    padding: 10px;
+    width: 60%;
+}
\ No newline at end of file

src/components/ProgressBar/index.jsx

+import React from "react";
+import PropTypes from "prop-types";
+import './ProgressBar.scss';
+
+
+function ProgressBar(props) {
+    const{number,customClass,value}=props;
+    
+    return (
+    
+    <div className="d-flex align-items-center">
+    <span className="completion mr-2">{number} </span>
+   
+      <div className="progress">
+        <div className={`${customClass}`} role="progressbar" aria-valuenow={value}
+         aria-valuemin="0" aria-valuemax="100" style={{width: `${60}%`}}></div>
+      </div>
+      </div>
+  
+    )
+    }
+    
+    export default ProgressBar;
+   
\ No newline at end of file

src/components/TextArea/TextArea.scss

+
+.form-control {
+    display: block;
+    width: 46%;
+    height: calc(1.5em + 1.25rem + 2px);
+    padding: 0.625rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #8898aa;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+  .form-control {
+    font-size: .875rem;
+    height: calc(1.5em + 1.25rem + 5px);
+    transition: all .15s ease-in-out;
+  }
+  .form-control:focus {
+    color: #8898aa;
+    border-color: #5e72e4;
+    outline: 0;
+    background-color: #fff;
+    
+  
+  }
\ No newline at end of file

src/components/TextArea/index.jsx

+import { type } from '@testing-library/user-event/dist/type';
+import React from 'react'
+import PropTypes from "prop-types";
+import "./TextArea.scss";
+
+
+function TextArea(props) {
+  const{customClass,value,handleChange,placeholder}=props;
+
+    return (
+    <div>
+    <input className={`${customClass}`} value={value} onChange={handleChange} placeholder={placeholder}/>
+    </div>
+    )
+    }
+
+
+export default TextArea

src/containers/Login/index.jsx

 import React from "react";
-
+import PropTypes from "prop-types";
+import ProgressBar from '../../components/ProgressBar';
 
 function Login(props) {
+
 return (
+<>
+  <ProgressBar customClass="progress-bar bg-warning" number="60%" value="60"/>
+</> 
  
-     <div>
-     Login
-     </div>
 )
-  
 }
 export default Login;
+
+