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>;
+  let { error, pastDelay } = props;
-  if(props.pastDelay) return <span>Loading...</span>;
+  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) {
+export default props => {
-  let image;
+  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) {
+  if(className) clazz += ` ${className}`;
-    image = props.image;
+  if(background) clazz += " is-background";
-  } 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";
-  }
 
   return (
-    <Section
+    <Section {...sectionProps} className={ clazz }>
-      full={props.full}
-      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);
+  width = parseInt(width) || undefined;
-  maxWidth = parseInt(maxWidth);
+  maxWidth = parseInt(maxWidth) || undefined;
-  height = parseInt(height);
+  height = parseInt(height) || undefined;
-  maxHeight = parseInt(maxHeight);
+  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,25 +74,28 @@ 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;
 
-      for(let scale = 1; scale <= 4; scale++) {//4 = max scales
+    for(let scale = 1; scale <= DPI_RATIOS; scale++) {//4 = max scales
       let scaledWidth = Math.round(width / scale);
       let o = {...source};
-        o.scale = scale;
+      o.scale = scale;//Inject scale (DPI ratio)
-        o.isLast = isLast;
+      o.isLast = isLast;//Is Last used for min-width rather than max-width
-        sources[scaledWidth] = sources[scaledWidth] || [];
+
-        sources[scaledWidth].push(o);
+      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(sources);
+  let keys = Object.keys(sourcesByWidth);
   keys.sort((l, r) => {
     return parseInt(l) - parseInt(r);
   });
@@ -97,8 +105,8 @@ export default (props) => {
     if(breakNext) break;
     let k = keys[i];//The pixel size
 
-      let ss = sources[k];//Sources at this pixel resolution
+    let ss = sourcesByWidth[k];//Sources at this pixel resolution (array of sources)
-      let mediaQuery = `(max-width:${k}px)`;
+    let mediaQuery = `(max-width:${k}px)`;//Media query
     let sss = [];
 
     let isNextBreak = false;
@@ -123,7 +131,6 @@ export default (props) => {
 
     sourceElements.push(<source media={mediaQuery} srcSet={sss.join(", ")} key={i} />);
   }
-  }
 
   return (
     <picture>

public/objects/image/LoadableImage.jsx

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

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}%` }} />
   );
 };