Refactored more image based code

public/image/Image.jsx

@@ -32,6 +32,9 @@ export default class Image extends React.Component {
     let sourceElements = [];
     let sources = {};
 
+    let defaultSrc = this.props.src;
+    let defaultAlt = this.props.alt;
+
     if(this.props.sources) {
       //Iterate over supplied sources
       for(let i = 0; i < this.props.sources.length; i++) {
@@ -39,6 +42,9 @@ export default class Image extends React.Component {
         let w = x.size;
         sources[w] = sources[w] || [];
         sources[w].push(x);
+
+        defaultSrc = defaultSrc || x.src;
+        defaultAlt = defaultAlt || x.alt;
       }
 
       //Now map to components I guess
@@ -55,7 +61,7 @@ export default class Image extends React.Component {
         }
 
         sourceElements.push(
-          <source media={mediaQuery} srcset={ sss.join(", ") } key={i} />
+          <source media={mediaQuery} srcSet={ sss.join(", ") } key={i} />
         );
       }
     }

public/page/home/Homepage.jsx

@@ -23,23 +23,34 @@
 
 import React from 'react';
 import Page, { PageBoundary } from './../Page';
-import Section, { VideoSection } from './../../section/Section';
+import Section, { ImageSection } from './../../section/Section';
 import FloatingContentBox from './../../content/FloatingContentBox';
 import { Button } from './../../input/Inputs';
+import Image from './../../image/Image';
 import { Title, Subtitle } from './../../typography/Typography';
 
 export default function() {
   return (
     <Page style="home-page" className="p-home-page">
-      <VideoSection full mp4={require('./../../videos/about/programming/programming.mp4')} >
+      <ImageSection
-        <PageBoundary>
+        full
-          <FloatingContentBox position="middle right" size="medium" className="u-text-center p-home-page__video-content">
+        src={ require('./../../images/test/img_red.png') }
+        sources={[
+          { src: require('./../../images/test/320x320.png'), size: 320 },
+          { src: require('./../../images/test/320x320x2.png'), size: 320, scale: 2 },
+          { src: require('./../../images/test/640x640.png'), size: 640 },
+          { src: require('./../../images/test/1280x1280.png'), size: 640, scale: 2 },
+          { src: require('./../../images/test/1280x1280.png'), size: 1280 }
+        ]}
+      >
+        <PageBoundary fill>
+          <FloatingContentBox position="middle right" size="small" className="u-text-center p-home-page__video-content">
             <Title>My Cool Page</Title>
             <Subtitle>Lorem ipsum dolor</Subtitle>
             <Button>Hello</Button>
           </FloatingContentBox>
         </PageBoundary>
-      </VideoSection>
+      </ImageSection>
 
       <Section full>
         Lorem

public/section/Section.jsx

@@ -32,7 +32,7 @@ export default class Section extends React.Component {
     return (
       <section className={
           "c-section" +
-          (this.props.full?" c-section--full":"") +
+          (this.props.full?" is-full":"") +
           (this.props.className ? " "+this.props.className : "")
       }>
         { this.props.children }
@@ -41,8 +41,10 @@ export default class Section extends React.Component {
   }
 }
 
+import ImageSection from './image/ImageSection';
 import VideoSection from './video/VideoSection';
 
 export {
+  ImageSection,
   VideoSection
 }

public/section/image/ImageSection.jsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// 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 React from 'react';
+import Section from './../Section';
+import Image from './../../image/Image';
+
+export default function(props) {
+  let image;
+  if(props.image) {
+    image = props.image;
+  } else {
+    image = <Image
+      src={ props.src }
+      alt={ props.alt }
+      sources={ props.sources }
+      className="c-image-section__image"
+    />;
+  }
+
+  return (
+    <Section
+      full={props.full}
+      className={"c-image-section" + (props.className ? " " + props.className : "" ) }
+    >
+      { image }
+      {props.children}
+    </Section>
+  );
+}

public/styles/components/_image-section.scss

@@ -0,0 +1,22 @@
+/*
+ *  Image Section
+ *    Styles for Image Sections, usually contains videos (hmmmm).
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/11
+ */
+.c-image-section {
+  position: relative;
+
+  &__image {
+    width: 100%;
+  }
+
+  &.is-full {
+    .c-image-section__image {
+      @include t-absolute-fill();
+    }
+  }
+}

public/styles/components/_section.scss

@@ -11,7 +11,7 @@
   //border: 1px solid red;
   width: 100%;
 
-  &--full {
+  &.is-full {
     height: 100vh;
   }
 }

public/styles/components/_video-section.scss

@@ -3,6 +3,7 @@
  *    Styles for Video Sections, usually contains videos.
  *
  *  Dependencies:
+ *    styles/tools/_absolute-centering.scss
  *
  *  Version:
  *    1.0.0 - 2018/05/03
@@ -11,11 +12,7 @@
   position: relative;
 
   &__video {
-    position: absolute;
+    @include t-absolute-fill();
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
     object-fit: cover;
     object-position: center;
   }

public/styles/elements/button.scss

@@ -10,4 +10,5 @@ button {
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
+  color: inherit;
 }

public/styles/index.scss

@@ -64,6 +64,7 @@
 @import './objects/_video.scss';
 
 //Components
+@import './components/_image-section.scss';
 @import './components/_page.scss';
 @import './components/_section.scss';
 @import './components/_video-section.scss';

public/styles/pages/_home-page.scss

@@ -12,6 +12,8 @@
 .p-home-page {
 
   &__video-content {
-    background: white;
+    padding: 1em 4em;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
   }
 }

public/styles/tools/_absolute-centering.scss

@@ -28,6 +28,14 @@
   @include t-translate-y(-50%);
 }
 
+@mixin t-absolute-fill() {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
 @mixin t-absolute-position-options($inset: 0) {
   position: absolute;