Merge pull request scorelab#163 from rijusougata13/addPropsToStorybook

Added props to storybook
ShwetKhatri2001 · Aug 4, 2021 · 62e4b93 · 62e4b93
2 parents d2bc065 + 517005c
commit 62e4b93
Show file tree

Hide file tree

Showing 12 changed files with 356 additions and 117 deletions.
diff --git a/src/components/AuthPage/ForgotPassword/index.js b/src/components/AuthPage/ForgotPassword/index.js
@@ -1,25 +1,31 @@
 import React, { useEffect, useState } from "react";
-import MailOutlineOutlinedIcon from '@material-ui/icons/MailOutlineOutlined';
+import MailOutlineOutlinedIcon from "@material-ui/icons/MailOutlineOutlined";
 import { Link } from "react-router-dom";
 import { useFirebase } from "react-redux-firebase";
 import { useDispatch, useSelector } from "react-redux";
 import { clearAuthError, sendPasswordResetEmail } from "../../../store/actions";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 import Collapse from "@material-ui/core/Collapse";
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import Grid from "@material-ui/core/Grid";
 import OutlinedInput from "@material-ui/core/OutlinedInput";
 import InputAdornment from "@material-ui/core/InputAdornment";
-import {makeStyles} from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import { makeStyles } from "@material-ui/core/styles";
+import Alert from "@material-ui/lab/Alert";
+import PropTypes from "prop-types";
 
-const ForgotPassword = () => {
+const ForgotPassword = ({
+  rootBackground = "rgba(0,0,0,.01)",
+  confirmationText = "We have sent you an email containing the link to reset your password .Please check your inbox including spams",
+  fontweight = "800",
+  buttonColor = "blue",
+}) => {
   const firebase = useFirebase();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
-  const [email,setEmail]=useState("");
+  const [email, setEmail] = useState("");
   const [open, setOpen] = React.useState(true);
   const errorProps = useSelector(({ auth }) => auth.profile.error);
   const loadingProps = useSelector(({ auth }) => auth.profile.loading);
@@ -53,19 +59,24 @@ const ForgotPassword = () => {
   const useStyles = makeStyles({
     root: {
       padding: "2rem",
-      background: "rgba(0,0,0,.01)",
+      background: rootBackground,
       border: "none",
       boxShadow: "none",
     },
-    heading:{
-      fontWeight:600,
-    }
-  })
+    heading: {
+      fontWeight: fontweight,
+    },
+  });
   const classes = useStyles();
- 
+
   return (
     <Card className={classes.root}>
-    <Typography variant="h4" className={"mb-24 text-center "+classes.heading}>Trouble logging in?</Typography>
+      <Typography
+        variant="h4"
+        className={"mb-24 text-center " + classes.heading}
+      >
+        Trouble logging in?
+      </Typography>
       <p className="mb-24 text-center">
         Don't worry, we got it covered. <br />
         Enter the email address registered with us and
@@ -74,41 +85,64 @@ const ForgotPassword = () => {
 
       {error && (
         <Collapse in={open}>
-        <Alert 
-        severity="error"
-        className="mb-16"
-        onClose={() => {setOpen(false);}}
-        message={""}>{error}
-        </Alert>
+          <Alert
+            severity="error"
+            className="mb-16"
+            onClose={() => {
+              setOpen(false);
+            }}
+            message={""}
+          >
+            {error}
+          </Alert>
         </Collapse>
       )}
 
       {success && (
         <Collapse in={open}>
-        <Alert 
-        severity="success"
-        className="mb-16"
-        onClose={() => {setOpen(false);}}
-        message={""}>We have sent you an email containing the link to reset your password. Please check your inbox including spams.
-        </Alert>
+          <Alert
+            severity="success"
+            className="mb-16"
+            onClose={() => {
+              setOpen(false);
+            }}
+            message={""}
+          >
+            {confirmationText}
+          </Alert>
         </Collapse>
       )}
 
       <form onSubmit={onSubmit}>
-            <OutlinedInput
-              placeholder="Email"
-              autoComplete="email"
-              onChange={e=>setEmail(e.target.value)}
-              className="mb-32"
-              fullWidth
-              height="10rem"
-              startAdornment={<InputAdornment sposition="start"><MailOutlineOutlinedIcon style={{ color: "rgba(0,0,0,.25)" }} />&nbsp;</InputAdornment>}
-            />
-          <Button variant="contained" color="primary" loading={loading} className="mt-10" type="submit" fullWidth >
+        <OutlinedInput
+          placeholder="Email"
+          autoComplete="email"
+          onChange={(e) => setEmail(e.target.value)}
+          className="mb-32"
+          fullWidth
+          height="10rem"
+          startAdornment={
+            <InputAdornment sposition="start">
+              <MailOutlineOutlinedIcon style={{ color: "rgba(0,0,0,.25)" }} />
+              &nbsp;
+            </InputAdornment>
+          }
+        />
+        <Button
+          variant="contained"
+          color="primary"
+          style={{ background: buttonColor }}
+          loading={loading}
+          className="mt-10"
+          type="submit"
+          fullWidth
+        >
           {loading ? "Sending..." : "Send me the link"}
-          </Button>
+        </Button>
       </form>
-          <Grid justify="center" align="center" className="mt-16">or</Grid>
+      <Grid justify="center" align="center" className="mt-16">
+        or
+      </Grid>
       <Grid justify="center" align="center" className="mt-24">
         <Grid sm={24} className="center">
           <Link to={"/login"}>Back to Sign in</Link>
@@ -124,4 +158,11 @@ const ForgotPassword = () => {
   );
 };
 
+ForgotPassword.propTypes = {
+  rootBackground: PropTypes.string,
+  confirmationText: PropTypes.string,
+  fontweight: PropTypes.string,
+  buttonColor: PropTypes.string,
+};
+
 export default ForgotPassword;
diff --git a/src/components/AuthPage/Login/index.js b/src/components/AuthPage/Login/index.js
@@ -23,8 +23,13 @@ import { clearAuthError, signIn } from "../../../store/actions";
 import SmButtons from "../smButton/smButtons";
 import ViewAlerts from "./ViewAlerts";
 import useStyles from "./styles";
+import PropTypes from "prop-types";
 
-const Login = () => {
+const Login = ({
+  loginButton = "blue",
+  background = "white",
+  loginText = "Welcome Back",
+}) => {
   const firebase = useFirebase();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
@@ -105,13 +110,17 @@ const Login = () => {
   };
 
   return (
-    <Card raised className={`${classes.card}   `}>
+    <Card
+      raised
+      className={`${classes.card}`}
+      style={{ background: background }}
+    >
       <CardContent>
         <Typography
           variant="h4"
           style={{ textAlign: "center", marginBottom: "40px" }}
         >
-          Welcome back!
+          {loginText}
         </Typography>
         <ViewAlerts error={error} email={email} />
         <div>
@@ -198,6 +207,7 @@ const Login = () => {
             fullWidth
             onClick={onSubmit}
             disabled={loading}
+            style={{ background: loginButton }}
             className="loginButton"
           >
             {loading ? "Logging in..." : "Log in"}
@@ -216,4 +226,10 @@ const Login = () => {
   );
 };
 
+Login.propTypes = {
+  loginButton: PropTypes.string,
+  background: PropTypes.string,
+  loginText: PropTypes.string,
+};
+
 export default Login;
diff --git a/src/components/AuthPage/SignUp/index.js b/src/components/AuthPage/SignUp/index.js
@@ -8,11 +8,16 @@ import Divider from "../../../globalComponents/Divider";
 import SmButtons from "../smButton/smButtons";
 import SignupForm from "./signupForm";
 import useStyles from "./styles";
+import PropTypes from "prop-types";
 
-const SignUp = () => {
+const SignUp = ({ background = "white" }) => {
   const classes = useStyles();
   return (
-    <Card raised className={`${classes.card}   `}>
+    <Card
+      raised
+      className={`${classes.card}`}
+      style={{ background: background }}
+    >
       <CardContent>
         <Typography
           variant="h4"
@@ -34,5 +39,8 @@ const SignUp = () => {
     </Card>
   );
 };
+SignUp.prototype = {
+  background: PropTypes.string,
+};
 
 export default SignUp;