Bug fixing the refactor, Modals not working nor the scroll fader.

public/components/App.jsx

@@ -38,8 +38,7 @@ const AppRoutes = (props) => {
     <React.Fragment>
       <Routes onEntering={ props.onEntering }>
         <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
-        <RouteWrapper exact path="/contact" page={ () => import('@pages/contact/ContactPage') } />
+        <RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
-
         <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
       </Routes>
     </React.Fragment>

public/components/page/boundary/PageBoundary.jsx

@@ -23,7 +23,7 @@
 
 import React from 'react';
 
-import Styles from './PageBoundary';
+import Styles from './PageBoundary.scss';
 
 export default (props) => {
   let newProps = { ...props };

public/components/page/boundary/PageBoundary.scss

@@ -7,6 +7,8 @@
  *  Version:
  *    1.0.0 - 2018/10/23
  */
+@import '~@styles/global';
+
 .c-page-boundary {
   max-width: $s-screen-boundary;
   margin: 0 auto;

public/components/section/Section.jsx

@@ -23,7 +23,7 @@
 
 import React from 'react';
 
-import Styles from './Section';
+import Styles from './Section.scss';
 
 export default (props) => {
   let newProps = {...props};

public/index.jsx

@@ -34,7 +34,7 @@ import Keyboard from './keyboard/Keyboard';
 
 
 //Import Common Elements Stylesheet
-import Styles from './styles/common';
+import Styles from './styles/common.scss';
 
 //Import Base Component
 import App from './components/App';

public/objects/animation/fade/ElementScrollFader.jsx

@@ -33,14 +33,15 @@ export default class ElementScrollFader extends React.Component {
       waiting: true,
       visible: false
     };
+
     this.onScrollBound = this.onScroll.bind(this);
-    this.updateRectangleBound = this.updateRectangle.bind(this);
     this.checkEffectBound = this.checkEffect.bind(this);
 
     this.rect = null;
   }
 
   componentDidMount() {
+    return;
     //Update rectangle
     if(this.rectTimer) clearInterval(this.rectTimer);
     this.rectTimer = setInterval(this.updateRectangleBound, 100);
@@ -54,12 +55,13 @@ export default class ElementScrollFader extends React.Component {
   }
 
   componentWillUnmount() {
+    return;
     this.detachListener();
   }
 
   //Used for rect calculation
   updateRectangle() {
-    if(!this.refs || !this.refs.fader) return;
+    if(!this.refs.fader) return;
     this.rect = this.refs.fader.getBoundingClientRect();
   }
 
@@ -77,22 +79,26 @@ export default class ElementScrollFader extends React.Component {
   }
 
   checkEffect() {
+    let { waiting, visible } = this.state;
+    let { onVisible } = this.props;
+
     if(typeof window === typeof undefined) return;
-    if(!this.refs || !this.refs.fader) return;
+    if(!this.refs.fader) return;
-    if(this.state.waiting) {
+    if(waiting) {
       this.setState({
         waiting: false
       });
     }
-    if(this.state.visible) return this.detachListener();
+    if(visible) return this.detachListener();
-
     if(!this.rect) this.updateRectangle();
 
     //Get bounds
     var rect = this.rect;
 
     //If our top is at least half way UP the page, show
-    if(rect.top > window.innerHeight / 1.5) return;
+    var doc = document.documentElement;
+    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
+    if(rect.top > top / 1.5) return;
 
     this.setState({
       visible: true
@@ -100,19 +106,20 @@ export default class ElementScrollFader extends React.Component {
 
     this.detachListener();//stop Listening
 
-    if(this.props.onVisible) {
+    if(onVisible) onVisible(this.refs.fader);
-      this.props.onVisible(this.refs.fader);
-    }
     return true;
   }
 
   render() {
     let newProps = {...this.props};
-    let { from, visible, waiting, className } = this.props;
+    let { from, className } = this.props;
+    let { visible, waiting } = this.state;
+
+    return <div {...newProps} />;
 
     from = from || "top";
 
-    ["from","visible","waiting"].forEach(e => delete newProps[e]);
+    ["from"].forEach(e => delete newProps[e]);
 
     let clazz = `o-element-scroll-fader from-${from}`;
     if(visible || waiting) clazz += " is-visible";

public/objects/content/box/ContentBox.jsx

@@ -23,7 +23,7 @@
 
 import React from 'react';
 
-import Styles from './ContentBox';
+import Styles from './ContentBox.scss';
 
 export default (props) => {
   let newProps = {...props};

public/objects/content/box/FloatingContentBox.jsx

@@ -23,7 +23,7 @@
 
 import React from 'react';
 
-import Styles from './FloatingContentBox';
+import Styles from './FloatingContentBox.scss';
 
 import ContentBox from './ContentBox';
 

public/objects/image/LoadableImage.jsx

@@ -69,7 +69,7 @@ export default class LoadableImage extends React.Component {
     let loader,imageSizer;
     let image = <Image
       {...newProps}
-      className="o-loadable-image__image"
+      className={`o-loadable-image__image ${className||""}`}
       onLoad={() => this.onLoad()}
       onError={() => this.onError()}
     />;

public/objects/input/Input.jsx

@@ -37,7 +37,7 @@ export default class Input extends React.Component {
     super(props);
 
     this.state = {
-      value: props.value,
+      value: props.value || props.children || "",
       focused: false
     };
   }
@@ -90,13 +90,14 @@ export default class Input extends React.Component {
   render() {
     let newProps = {...this.props};
     let {
-      value, className, type, children, style, error, danger, primary,
+      className, type, children, style, error, danger, primary,
       warning, manager
     } = newProps;
 
     //Clear bad props
     [
-      "error", "danger", "primary", "warning", "manager", "style", "children"
+      "error", "danger", "primary", "warning", "manager", "style", "children",
+      "value"
     ].forEach(e => delete newProps[e]);
 
     //Prop defaults
@@ -106,9 +107,6 @@ export default class Input extends React.Component {
     let clazzes = "o-input";
     let innerClazzes = "o-input__inner";
 
-    //Values
-    value = stateValue || value || children;
-
     //Style
     if(primary) style = "primary";
     if(warning) style = "warning";
@@ -128,29 +126,22 @@ export default class Input extends React.Component {
     }
 
     //Now create the element
-    let element;
-
     //First we need to switch things like submit and reset
-    if(type == "submit" || type == "reset" || type == "button") {
+    if(["submit","reset","button"].indexOf(type) !== -1) {
-      return (<Button
+      return <Button {...newProps} children={ this.state.value } />;
-        {...props}
-        className={props.className}
-        value={this.state.value}
-      />);
     }
 
-    [ "onChange", "onFocus", "onBlur"].forEach(e => newProps[e] = this[e]);
+    //Bind our event handlers for the input fields
+    [ "onChange", "onFocus", "onBlur" ].forEach(e => newProps[e] = this[e].bind(this));
+
+    let ElementType = "input";
 
     //Text areas are slightly different
-    if(type == "textarea") {
+    if(type == "textarea") ElementType = "textarea";
-      element = <textarea {...newProps} className={innerClazzes} children={value} />
-    } else {
-      element = <input {...newProps} type={type} value={ value } className={innerClazzes} />;
-    }
 
     return (
       <div className={clazzes}>
-        { element }
+        <ElementType {...newProps} type={type} className={innerClazzes} value={ this.state.value } />
       </div>
     )
   }

public/objects/input/form/Form.jsx

@@ -53,6 +53,8 @@ export default class Form extends React.Component {
 
     //Prepare our initial state
     this.state = {
+      action,
+      method,
       ajax,
       loader,
       loading: false,
@@ -88,7 +90,7 @@ export default class Form extends React.Component {
     }
 
     if(e && e.preventDefault) e.preventDefault();
-    if(!action) return console.warning("This form has no action.");
+    if(!action) return console.error("This form has no action.");
     if(submitting) return false;//Already submitting?
 
     //Start submitting!
@@ -170,9 +172,15 @@ export default class Form extends React.Component {
   }
 
   render() {
-    let { className, children } = this.props;
+    let newProps = {...this.props};
+    let { className, children } = newProps;
     let { loader, loading } = this.state;
 
+    [
+      "onSuccess", "onError", "loader", "loading", "ajax",
+      "onData", "contentType", "contenttype"
+    ].forEach(e => delete newProps[e]);
+
     let clazz = "o-form";
     if(className) clazz += ` ${className}`
 
@@ -188,7 +196,7 @@ export default class Form extends React.Component {
 
     return (
       <form
-        {...this.props}
+        {...newProps}
         ref="formDOM"
         className={ clazz }
         method={ this.state.method }

public/objects/typography/Typography.jsx

@@ -21,7 +21,7 @@
 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import Styles from './Typography';
+import Styles from './Typography.scss';
 
 import Title from './Title';
 import Subtitle from './Subtitle';