Cleaned Content Boxes, removed Background Object (unused)

public/components/App.jsx

@@ -32,8 +32,6 @@ import Footer from './footer/Footer';
 import Routes, { RouteWrapper } from './page/route/Routes';
 import Favicon from './Favicon';
 
-import Background from '@objects/background/Background';
-
 //Routes Definitions
 const AppRoutes = (props) => {
   return (

public/objects/background/Background.jsx

@@ -1,40 +0,0 @@
-// 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 Styles from './Background.scss';
-
-export default function(props) {
-  let style = props.style || "test";
-  let styleClassPrefix = "o-background--style-"+style;
-  let inners = [];
-
-  return (
-    <div className={"o-background "+styleClassPrefix}>
-      <div className={"o-background__inner " + styleClassPrefix + "__inner" }>
-        { inners }
-      </div>
-    </div>
-  );
-}

public/objects/content/box/ContentBox.jsx

@@ -23,15 +23,17 @@
 
 import React from 'react';
 
+import Styles from './ContentBox';
+
 export default (props) => {
+  let newProps = {...props};
+  let { className, box } = props;
+  
+  delete newProps.box;
+
   let clazz = "o-content-box";
+  if(box) clazz += " is-box"
+  if(className) clazz += ` ${className}`;
 
-  if(props.box) clazz += " is-box"
-  if(props.className) clazz += " " + props.className;
-
-  return (
-    <div className={clazz}>
-      {props.children}
-    </div>
-  );
+  return <div {...newProps} className={clazz} />;
 };

public/objects/content/box/ContentBox.scss

@@ -9,6 +9,7 @@
  *  Version:
  *    1.0.0 - 2018/06/19
  */
+@import '~@styles/global';
 $o-content-box--padding: 1em;
 
 .o-content-box {

public/objects/content/box/FloatingContentBox.jsx

@@ -22,28 +22,34 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './FloatingContentBox';
+
 import ContentBox from './ContentBox';
 
-export default function(props) {
+export default (props) => {
+  let newProps = {...props};
+  let { position, size, children, className } = props;
+
+  ["position","size","children"].forEach(e => delete newProps[e]);
+
   let clazzes = "o-floating-content-box";
 
   //Positions
-  let position = "middle center";
-  if(props.position) position = props.position;
+  position = position || "middle center";
   clazzes += " " + position.split(" ").map(i => 'is-'+i).join(" ");
 
   //Sizes`
-  let size = "medium";
-  if(props.size) size = props.size;
-  clazzes += " is-"+size;
+  size = size || "medium";
+  clazzes += ` is-${size}`;
 
   //Custom Classes
-  if(props.className) clazzes += " " + props.className;
+  if(className) clazzes += ` ${className}`;
 
   return (
-    <ContentBox {...props} className={ clazzes }>
+    <ContentBox {...newProps} className={ clazzes }>
       <div className="o-floating-content-box__inner">
-        { props.children }
+        { children }
       </div>
     </ContentBox>
   );

public/objects/content/box/FloatingContentBox.scss

@@ -10,6 +10,8 @@
  *  Version:
  *    1.0.0 - 2018/05/11
  */
+@import '~@styles/global';
+
 $o-floating--inset: 5%;
 
 .o-floating-content-box {

public/pages/contact/ContactPage.jsx

@@ -42,7 +42,7 @@ import Section, {
 
 //Objects
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
-import ContentBox from '@objects/content/ContentBox';
+import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Heading1, Paragraph } from '@objects/typography/Typography';
 import Input, {
   Form,

public/pages/home/sections/BannerSection.jsx

@@ -25,7 +25,7 @@ import React from 'react';
 import Language from '@public/language/Language';
 import { PageBoundary } from '@components/page/Page';
 import { ImageSection } from '@components/section/Section';
-import FloatingContentBox from '@objects/content/FloatingContentBox';
+import FloatingContentBox from '@objects/content/box/FloatingContentBox';
 import { Title, Subtitle } from '@objects/typography/Typography';
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
 

public/pages/home/sections/ExistingWorkSection.jsx

@@ -25,7 +25,7 @@ import React from 'react';
 import Language from '@public/language/Language';
 import { PageBoundary } from '@components/page/Page';
 import { ImageSection, SplitSection, Split, ClearSection } from '@components/section/Section';
-import ContentBox from '@objects/content/ContentBox';
+import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Subtitle, Paragraph, Heading1, Heading2 } from '@objects/typography/Typography';
 import { Button } from '@objects/input/Input';
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';

public/pages/home/sections/PlatformsSection.jsx

@@ -25,8 +25,8 @@ import React from 'react';
 import Language from '@public/language/Language';
 import { PageBoundary } from '@components/page/Page';
 import { ImageSection, SplitSection, Split } from '@components/section/Section';
-import FloatingContentBox from '@objects/content/FloatingContentBox';
-import ContentBox from '@objects/content/ContentBox';
+import FloatingContentBox from '@objects/content/box/FloatingContentBox';
+import ContentBox from '@objects/content/box/ContentBox';
 import Image from '@objects/image/Image';
 import Video from '@objects/video/Video';
 import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';

public/pages/home/sections/ProgrammingSection.jsx

@@ -26,7 +26,7 @@ import { connect } from 'react-redux';
 import Language from '@public/language/Language';
 import { PageBoundary } from '@components/page/Page';
 import { ImageSection } from '@components/section/Section';
-import ContentBox from '@objects/content/ContentBox';
+import ContentBox from '@objects/content/box/ContentBox';
 import { Title, Paragraph, Heading1 } from '@objects/typography/Typography';
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
 

public/pages/home/sections/PromoVideoSection.jsx

@@ -25,8 +25,8 @@ import React from 'react';
 import Language from '@public/language/Language';
 import Page, { PageBoundary } from '@components/page/Page';
 import Section, {  SplitSection, Split } from '@components/section/Section';
-import FloatingContentBox from '@objects/content/FloatingContentBox';
-import ContentBox from '@objects/content/ContentBox';
+import ContentBox from '@objects/content/box/ContentBox';
+import FloatingContentBox from '@objects/content/box/FloatingContentBox';
 import Video from '@objects/video/Video';
 import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
 import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';