Cleaned Content Boxes, removed Background Object (unused)

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

@@ -0,0 +1,23 @@
+/*
+ *  Content Box
+ *    Simple box to hold content, comes with great settings!
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/tools/_shadow.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/19
+ */
+@import '~@styles/global';
+$o-content-box--padding: 1em;
+
+.o-content-box {
+  position: relative;
+
+  &.is-box {
+    @extend %t-dp--shadow;
+    background: $s-color--background;
+    padding: $o-content-box--padding;
+  }
+}

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

@@ -0,0 +1,51 @@
+/*
+ *  Floating Content Box
+ *    Simple Floating Box, designed to sit content inside it.
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_absolute-centering.scss
+ *    styles/tools/_responsive.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/11
+ */
+@import '~@styles/global';
+
+$o-floating--inset: 5%;
+
+.o-floating-content-box {
+  @include t-absolute-position-options($o-floating--inset);
+  max-width: 100% - ($o-floating--inset * 2);
+
+  &.is-medium,&.is-large {
+    width: 100%;
+  }
+
+  &__inner {
+    position: relative;
+  }
+
+  //Media Queries
+  @include t-media-query($s-xsmall-up) {
+    &.is-medium {
+      width: 450px;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &.is-large {
+      width: 700px;
+    }
+  }
+
+  @include t-media-query($s-large-up) {
+    &.is-medium {
+      width: 550px;
+    }
+
+    &.is-large {
+      width: 750px;
+    }
+  }
+}