broke out components for storybook

inland-empire-software-development · Jan 24, 2020 · 9556edf · 9556edf
1 parent 6234146
commit 9556edf
Show file tree

Hide file tree

Showing 21 changed files with 158 additions and 151 deletions.
diff --git a/next.config.js b/next.config.js
@@ -12,7 +12,6 @@ module.exports = withImages(withCSS(withSASS({
       fix: true,
     }));
 
-
     return config;
   },
 })));
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -6,8 +6,8 @@ import fetch from "isomorphic-unfetch";
 import {DefaultSeo} from 'next-seo';
 import SEO from '../next-seo.config';
 import Unauthorized from "../src/components/global/Unauthorized/Unauthorized";
-import Redirect from "../src/components/animation/Redirect";
-import Loader from "../src/components/animation/Loader";
+import Redirect from "../src/components/animation/Redirect/Redirect";
+import Loader from "../src/components/animation/Loader/Loader";
 import {MyAppContext} from "../";
 
 interface MyAppState extends MyAppContext {

diff --git a/pages/authenticate.tsx b/pages/authenticate.tsx
@@ -2,6 +2,7 @@ import LogIn from '../src/components/authenticate/LogIn/LogIn';
 import SignUp from '../src/components/authenticate/SignUp/SignUp';
 import Reset from '../src/components/authenticate/Reset/Reset';
 import Spinner from '../src/components/global/Spinner/Spinner';
+import ContentContainer from '../src/components/global/ContentContainer/ContentContainer';
 import SEO from "../next-seo.config";
 import {DefaultSeo} from "next-seo";
 
@@ -13,27 +14,29 @@ function Authenticate() {
       })}
       />
       <section>
-        <div id="login-container" className="uk-section uk-flex uk-flex-middle uk-animation-fade">
-          <Spinner ratio={3} classes="uk-hidden"/>
-          <div className="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body">
-            <ul className="uk-tab uk-flex-center" uk-switcher="animation: uk-animation-fade">
-              <li><a href="#">Log In</a></li>
-              <li><a href="#">Sign Up</a></li>
-              <li className="uk-hidden">Forgot Password?</li>
-            </ul>
-            <ul className="uk-switcher uk-margin">
-              <li>
-                <LogIn/>
-              </li>
-              <li>
-                <SignUp/>
-              </li>
-              <li>
-                <Reset/>
-              </li>
-            </ul>
+        <ContentContainer content={
+          <div>
+            <Spinner ratio={3} classes="uk-hidden"/>
+            <div className="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body">
+              <ul className="uk-tab uk-flex-center" uk-switcher="animation: uk-animation-fade">
+                <li><a href="#">Log In</a></li>
+                <li><a href="#">Sign Up</a></li>
+                <li className="uk-hidden">Forgot Password?</li>
+              </ul>
+              <ul className="uk-switcher uk-margin">
+                <li>
+                  <LogIn/>
+                </li>
+                <li>
+                  <SignUp/>
+                </li>
+                <li>
+                  <Reset/>
+                </li>
+              </ul>
+            </div>
           </div>
-        </div>
+        }/>
       </section>
     </main>
   );

diff --git a/pages/confirmation.tsx b/pages/confirmation.tsx
@@ -1,7 +1,7 @@
 import {NextSeo} from "next-seo";
 import {useEffect, useState} from 'react';
 import notify from "../src/components/utility/Notify";
-import Redirect from "../src/components/animation/Redirect";
+import Redirect from "../src/components/animation/Redirect/Redirect";
 
 /**
  * Check provided input - activate account if valid.

diff --git a/pages/reset-password.tsx b/pages/reset-password.tsx
@@ -1,4 +1,4 @@
-import Redirect from "../src/components/animation/Redirect";
+import Redirect from "../src/components/animation/Redirect/Redirect";
 // import {NextSeo} from "next-seo";
 import {useState, useEffect, FormEvent} from "react";
 import notify from "../src/components/utility/Notify";
@@ -118,7 +118,7 @@ function ResetPassword(props: any) {
       <div className="uk-container uk-margin-large-top">
         {confirmation.status &&
           (
-            <div id="login-container" className="uk-section uk-flex uk-flex-middle uk-animation-fade">
+            <div className="content-container uk-section uk-flex uk-flex-middle uk-animation-fade">
               <Spinner ratio={3} classes="uk-hidden"/>
               <form onSubmit={(event) => handlePasswordReset(event)}>
                 <div className="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body">

diff --git a/src/style/components/animation/_loader.scss → src/components/animation/Loader/Loader.scss b/src/style/components/animation/_loader.scss → src/components/animation/Loader/Loader.scss
diff --git a/src/components/animation/Loader.tsx → src/components/animation/Loader/Loader.tsx b/src/components/animation/Loader.tsx → src/components/animation/Loader/Loader.tsx
diff --git a/...style/components/animation/_redirect.scss → ...mponents/animation/Redirect/Redirect.scss b/...style/components/animation/_redirect.scss → ...mponents/animation/Redirect/Redirect.scss
diff --git a/src/components/animation/Redirect.tsx → ...omponents/animation/Redirect/Redirect.tsx b/src/components/animation/Redirect.tsx → ...omponents/animation/Redirect/Redirect.tsx
@@ -1,6 +1,6 @@
 // Animated loader when redirecting a user to another page.
 import {DefaultSeo} from "next-seo";
-import SEO from "../../../next-seo.config";
+import SEO from "../../../../next-seo.config";
 
 export default function Redirect(): JSX.Element {
   return (

diff --git a/src/components/authenticate/LogIn/LogIn.stories.tsx b/src/components/authenticate/LogIn/LogIn.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {withA11y} from '@storybook/addon-a11y';
 
-import './../../../style/pages/_authenticate.scss';
 import LogIn from './LogIn';
 import Spinner from "../../global/Spinner/Spinner";
+import ContentContainer from '../../global/ContentContainer/ContentContainer';
 
 export default {
   title: 'Log in',
@@ -12,20 +12,22 @@ export default {
 
 export const LogInForm = () => {
   return (
-    <section>
-      <div id="login-container" className="uk-section uk-flex uk-flex-middle uk-animation-fade">
-        <Spinner ratio={3} classes="uk-hidden"/>
-        <div className="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body">
-          <ul className="uk-tab uk-flex-center">
-            <li><a>Log In</a></li>
-          </ul>
-          <ul className="uk-list uk-margin">
-            <li>
-              <LogIn/>
-            </li>
-          </ul>
+    <section className="uk-position-center">
+      <ContentContainer content={
+        <div>
+          <Spinner ratio={3} classes="uk-hidden"/>
+          <div className="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body">
+            <ul className="uk-tab uk-flex-center">
+              <li><a>Log In</a></li>
+            </ul>
+            <ul className="uk-list uk-margin">
+              <li>
+                <LogIn/>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
+      }/>
     </section>
   );
 };

diff --git a/src/components/authenticate/LogIn/LogIn.tsx b/src/components/authenticate/LogIn/LogIn.tsx
@@ -3,6 +3,8 @@ import React, {FormEvent} from 'react';
 import notify from '../../utility/Notify';
 import {Message} from '../../../../index';
 
+import './Login.scss';
+
 function LogIn(): JSX.Element {
   const handleLogin = (event: FormEvent) => {
     event.preventDefault();
@@ -65,7 +67,7 @@ function LogIn(): JSX.Element {
         </div>
         <div className="uk-margin">
           <div className="uk-inline uk-width-1-1">
-            <i className="uk-form-icon fal fa-lock" />
+            <i className="uk-form-icon fal fa-lock-alt" />
             <input className="uk-input uk-form-large" name="login-password" type="password"
               autoComplete="current-password" placeholder="password" required />
           </div>

diff --git a/src/components/authenticate/LogIn/Login.scss b/src/components/authenticate/LogIn/Login.scss
@@ -0,0 +1,11 @@
+@import '../../../style/_variables.scss';
+
+.auth-login {
+  .fa-user,
+  .fa-lock-alt {
+    position: relative;
+    top: 40px;
+    font-size: 18px;
+    left: 15px;
+  }
+}
diff --git a/src/components/authenticate/Password/Password.scss b/src/components/authenticate/Password/Password.scss
@@ -0,0 +1,29 @@
+@import './../../../style/variables.scss';
+
+.password-requirements {
+  font-size: 12px;
+
+  .show-password {
+    margin: 0 0 -10px 0;
+  }
+
+  ul {
+    margin-top: 0;
+  }
+
+  .fa-check {
+    margin-left: 5px;
+  }
+
+  .fa-lock-alt {
+    font-size: 18px;
+    position: relative;
+    left: 15px;
+    top: 40px;
+  }
+}
+
+.password-valid {
+  border: 1px solid $green;
+  background-color: rgba(2, 174, 114, 0.05);
+}
diff --git a/src/components/authenticate/Password/Password.tsx b/src/components/authenticate/Password/Password.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import './Password.scss';
 interface PasswordCheck {
     [property: string]: boolean;
   }
@@ -73,10 +74,10 @@ function Password(): JSX.Element {
     <div className="uk-margin password-requirements uk-margin-remove-top">
       <p className="uk-margin-remove-bottom"><strong>Password Requirements</strong></p>
       <ul className="uk-margin-remove-bottom">
-        <li>At least one numeric character <i className="uk-hidden fa fa-check green" data-check="number"/></li>
-        <li>At least one lowercase character <i className="uk-hidden fa fa-check green" data-check="lower"/></li>
-        <li>At least one uppercase character <i className="uk-hidden fa fa-check green" data-check="upper"/></li>
-        <li>At least 10 characters in length <i className="uk-hidden fa fa-check green" data-check="length"/></li>
+        <li>At least one numeric character <i className="uk-hidden fal fa-check green" data-check="number"/></li>
+        <li>At least one lowercase character <i className="uk-hidden fal fa-check green" data-check="lower"/></li>
+        <li>At least one uppercase character <i className="uk-hidden fal fa-check green" data-check="upper"/></li>
+        <li>At least 10 characters in length <i className="uk-hidden fal fa-check green" data-check="length"/></li>
       </ul>
       <a href="#" className="show-password uk-align-right" onClick={(event) => showPassword(event)}>show password</a>
 

diff --git a/src/components/authenticate/Reset/Reset.scss b/src/components/authenticate/Reset/Reset.scss
@@ -0,0 +1,8 @@
+.auth-recovery {
+  .fa-envelope {
+    font-size: 18px;
+    position: relative;
+    top: 40px;
+    left: 15px;
+  }
+}
diff --git a/src/components/authenticate/Reset/Reset.tsx b/src/components/authenticate/Reset/Reset.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import notify from '../../utility/Notify';
+import './Reset.scss';
 
 function Reset(): JSX.Element {
   const handleReset = (e: any) => {
@@ -48,7 +49,7 @@ function Reset(): JSX.Element {
       <form onSubmit={(event) => handleReset(event)}>
         <div className="uk-margin">
           <div className="uk-inline uk-width-1-1">
-            <i className="uk-form-icon fa fa-envelope"/>
+            <i className="uk-form-icon fal fa-envelope"/>
             <input id="email" className="uk-input uk-form-large" type="email" placeholder="Email address" required/>
           </div>
         </div>

diff --git a/src/components/authenticate/SignUp/SignUp.scss b/src/components/authenticate/SignUp/SignUp.scss
@@ -1,11 +1,6 @@
-.auth-signup {
-  .fa-check {
-    position: relative;
-    top: -38px;
-    left: -30px;
-    color: green;
-  }
+@import '../../../style/_variables.scss';
 
+.auth-signup {
   .fa-exclamation-triangle {
     position: relative;
     top: 0 !important;
@@ -14,4 +9,45 @@
     height: 12px;
     color: white;
   }
+
+  .fa-user,
+  .fa-envelope {
+    position: relative;
+    top: 40px;
+    left: 15px;
+    font-size: 18px;
+  }
+
+  .input-spinner,
+  .uk-spinner,
+  .fa-check {
+    position: relative;
+    top: -40px;
+    left: -30px;
+    width: 20px;
+  }
+
+  .fa-check {
+    color: $green;
+  }
+}
+
+.user-message {
+  display: block;
+  width: 100%;
+  color: $snow;
+  height: 30px;
+  padding: 10px;
+  line-height: 10px;
+  background-color: $yellow;
+  box-sizing: border-box;
+  visibility: hidden;
+
+  i {
+    width: 15px;
+    position: relative;
+    color: $snow;
+    float: right;
+    font-size: 12px;
+  }
 }
diff --git a/src/components/authenticate/SignUp/SignUp.stories.tsx b/src/components/authenticate/SignUp/SignUp.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {withA11y} from '@storybook/addon-a11y';
 
-import './../../../style/pages/_authenticate.scss';
 import SignUp from './SignUp';
 
 export default {

diff --git a/src/components/global/ContentContainer/ContentContainer.tsx b/src/components/global/ContentContainer/ContentContainer.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+function ContentContainer(props: {content: JSX.Element}): JSX.Element {
+  // only render page if user, token found in query
+
+  return (
+    <div className="content-container uk-section uk-flex uk-flex-middle uk-animation-fade">
+      {props.content}
+    </div>
+  );
+}
+
+export default ContentContainer;
diff --git a/src/style/index.scss b/src/style/index.scss
@@ -16,6 +16,5 @@
 
 // Pages
 @import
-  'pages/_authenticate',
   'pages/_index',
   'pages/_welcome';