Fixed some objects that don't like the new props.

public/components/page/route/Routes.jsx

@@ -29,17 +29,16 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 import Loadable from 'react-loadable';
 
 const PageLoading = (props) => {
-  if(props.error) return <span>Loading Error</span>;
-  if(props.pastDelay) return <span>Loading...</span>;
+  let { error, pastDelay } = props;
+  if(error) return <span>Loading Error</span>;
+  if(pastDelay) return <span>Loading...</span>;
   return null;
 };
 
 export const RouteWrapper = (props) => {
-  let { page } = props.page;
-
   let render = () => {
     let CustomLoadable = Loadable({
-      loader: page,
+      loader: props.page,
       loading: PageLoading
     });
     return <CustomLoadable />
@@ -49,7 +48,7 @@ export const RouteWrapper = (props) => {
 };
 
 export default withRouter((props) => {
-  const { match, location, history, children } = this.props;
+  const { match, location, history, children } = props;
 
   return (
     <Route>

public/components/section/image/ImageSection.jsx

@@ -28,36 +28,27 @@ import Section from './../Section';
 
 import Image from '@objects/image/Image';
 
-export default function(props) {
-  let image;
+export default props => {
+  let sectionProps = {...props};
+  let imageProps = {...props};
+
+  let { image, background, children, className } = props;
+
+  ["children", "background", "loadable"].forEach(e => delete sectionProps[e]);
+  ["image", "full", "children", "background"].forEach(e => delete imageProps[e]);
+
   let clazz = "c-image-section";
+  image = image || <Image {...imageProps} className="c-image-section__image" />;
 
-  if(props.image) {
-    image = props.image;
-  } else {
-    image = <Image
-      {...props}
-      children={null}
-      className="c-image-section__image"
-    />;
-  }
-
-  if(props.className) clazz += " " + props.className;
-
-  if(props.background) {
-    //Background Image Effect
-    clazz += " is-background";
-  }
+  if(className) clazz += ` ${className}`;
+  if(background) clazz += " is-background";
 
   return (
-    <Section
-      full={props.full}
-      className={ clazz }
-    >
+    <Section {...sectionProps} className={ clazz }>
       { image }
       <div className="c-image-section__content">
         <div className="c-image-section__content-inner">
-          { props.children }
+          { children }
         </div>
       </div>
     </Section>

public/objects/image/Image.jsx

@@ -24,28 +24,31 @@
 import React from 'react';
 import LoadableImage from './LoadableImage';
 
+const DPI_RATIOS = 4;
+
 export default (props) => {
   let newProps = {...props};
 
+  //Local Scope props
   let {
     loadable, image, src, alt, width, height, sources, onLoad, onError,
     maxWidth, maxHeight, images
   } = props;
 
-
+  //Delete bad props
   [
     "loadable", "image", "src", "alt", "width", "height", "sources", "onLoad",
     "onError", "maxWidth", "maxHeight", "images"
   ].forEach(e => delete newProps[e]);
 
-  width = parseInt(width);
-  maxWidth = parseInt(maxWidth);
-  height = parseInt(height);
-  maxHeight = parseInt(maxHeight);
+  width = parseInt(width) || undefined;
+  maxWidth = parseInt(maxWidth) || undefined;
+  height = parseInt(height) || undefined;
+  maxHeight = parseInt(maxHeight) || undefined;
 
   if(loadable) return <LoadableImage {...props} />;
 
-  //Prop Manipulation
+  //Has image prop? Image prop may be either an array of sources of a image.
   if(image) {
     if(Array.isArray(image)) {
       sources = sources || image;
@@ -61,7 +64,9 @@ export default (props) => {
   }
 
   //Image
-  sources = sources || {};
+  sources = sources || [];
+
+  let sourcesByWidth = {};
   let sourceElements = [];
 
   let defaultSrc = src;
@@ -69,60 +74,62 @@ export default (props) => {
   let defaultWidth = width;
   let defaultHeight = height;
 
-  if(sources) {
-    //Iterate over supplied sources
-    for(let i = 0; i < sources.length; i++) {
-      let source = sources[i];
-      let width = source.size || source.width;
-      let isLast = (i+1) === sources.length;
+  //Iterate over supplied sources
+  for(let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    let width = source.size || source.width;
+    let isLast = (i+1) === sources.length;
 
-      for(let scale = 1; scale <= 4; scale++) {//4 = max scales
-        let scaledWidth = Math.round(width / scale);
-        let o = {...source};
-        o.scale = scale;
-        o.isLast = isLast;
-        sources[scaledWidth] = sources[scaledWidth] || [];
-        sources[scaledWidth].push(o);
-      }
+    for(let scale = 1; scale <= DPI_RATIOS; scale++) {//4 = max scales
+      let scaledWidth = Math.round(width / scale);
+      let o = {...source};
+      o.scale = scale;//Inject scale (DPI ratio)
+      o.isLast = isLast;//Is Last used for min-width rather than max-width
+
+      let widthKey = `${scaledWidth}`;
+
+      //Create an array for this screen width
+      sourcesByWidth[widthKey] = sourcesByWidth[widthKey] || [];
+      sourcesByWidth[widthKey].push(o);//Add this source
+    }
+  }
+
+  //Sort by size in descending order
+  let keys = Object.keys(sourcesByWidth);
+  keys.sort((l, r) => {
+    return parseInt(l) - parseInt(r);
+  });
+
+  let breakNext = false;
+  for(let i = 0; i < keys.length; i++) {
+    if(breakNext) break;
+    let k = keys[i];//The pixel size
+
+    let ss = sourcesByWidth[k];//Sources at this pixel resolution (array of sources)
+    let mediaQuery = `(max-width:${k}px)`;//Media query
+    let sss = [];
+
+    let isNextBreak = false;
+    if(maxWidth && (i+1 < keys.length)) {
+      if(keys[i+1] > parseInt(maxWidth)) isNextBreak = true;
+    }
+    if(isNextBreak) {
+      breakNext = true;
+      mediaQuery = `(min-width:${k}px)`;
     }
 
-    //Sort by size in descending order
-    let keys = Object.keys(sources);
-    keys.sort((l, r) => {
-      return parseInt(l) - parseInt(r);
-    });
-
-    let breakNext = false;
-    for(let i = 0; i < keys.length; i++) {
-      if(breakNext) break;
-      let k = keys[i];//The pixel size
-
-      let ss = sources[k];//Sources at this pixel resolution
-      let mediaQuery = `(max-width:${k}px)`;
-      let sss = [];
-
-      let isNextBreak = false;
-      if(maxWidth && (i+1 < keys.length)) {
-        if(keys[i+1] > parseInt(maxWidth)) isNextBreak = true;
-      }
-      if(isNextBreak) {
-        breakNext = true;
-        mediaQuery = `(min-width:${k}px)`;
-      }
-
-      if(ss.length && ss[0].isLast) {
-        let prev = i > 0 ? keys[i-1] : 0;
-        mediaQuery = `(min-width:${prev}px)`;
-      }
-
-      for(let x = 0; x < ss.length; x++) {
-        let scale = ss[x];
-        let source = scale.src || scale.path;
-        sss.push( source + (scale.scale && scale.scale!=1 ? " "+scale.scale+"x" : "") );
-      }
-
-      sourceElements.push(<source media={mediaQuery} srcSet={sss.join(", ")} key={i} />);
+    if(ss.length && ss[0].isLast) {
+      let prev = i > 0 ? keys[i-1] : 0;
+      mediaQuery = `(min-width:${prev}px)`;
     }
+
+    for(let x = 0; x < ss.length; x++) {
+      let scale = ss[x];
+      let source = scale.src || scale.path;
+      sss.push( source + (scale.scale && scale.scale!=1 ? " "+scale.scale+"x" : "") );
+    }
+
+    sourceElements.push(<source media={mediaQuery} srcSet={sss.join(", ")} key={i} />);
   }
 
   return (

public/objects/image/LoadableImage.jsx

@@ -63,6 +63,8 @@ export default class LoadableImage extends React.Component {
     let newProps = {...this.props};
     let { loading } = this.state;
     let { className, width, height } = this.props;
+    
+    ["loadable"].forEach(e => delete newProps[e]);
 
     let loader,imageSizer;
     let image = <Image

public/objects/input/button/Button.jsx

@@ -77,7 +77,7 @@ export default props => {
   return (
     <ElementType {...newProps} className={clazzes}>
       <span className={"o-btn__inner"+(style?` o-btn--style-${style}__inner`:"")}>
-        {contents}
+        { children }
       </span>
     </ElementType>
   );

public/objects/layout/BoxSizer.jsx

@@ -28,6 +28,7 @@ import Styles from './BoxSizer.scss';
 export default props => {
   let newProps = {...props};
   let { ratioWidth, ratioHeight, className } = props;
+  ["ratioWidth","ratioHeight"].forEach(e => delete newProps[e]);
 
   let clazzes = "o-box-sizer";
   if(className) clazzes += ` ${className}`;
@@ -41,6 +42,6 @@ export default props => {
 
   //Box Sizer
   return (
-    <div {...props} className={classes} style={{ paddingBottom: `${height}%` }} />
+    <div {...newProps} className={clazzes} style={{ paddingBottom: `${height}%` }} />
   );
 };