From be8e66e682964f1e0848216b55e8ebbf06d1faf0 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Fri, 8 Jun 2018 12:45:19 +1000
Subject: [PATCH] Added more options for split sections

---
 public/section/layout/SplitSection.jsx       | 15 +++++++++++++--
 public/styles/components/_split-section.scss | 17 +++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/public/section/layout/SplitSection.jsx b/public/section/layout/SplitSection.jsx
index 12b4f94..146edfd 100644
--- a/public/section/layout/SplitSection.jsx
+++ b/public/section/layout/SplitSection.jsx
@@ -25,17 +25,28 @@ import React from 'react';
 import Section from './../Section';
 
 export default (props) => {
-  let clazz = "c-split-section";
+  let aligned = "stretched";
+  if(props.align) {
+    aligned = props.align;
+  }
+
+  let clazz = "c-split-section is-" + aligned;
   if(props.className) clazz += " " + props.className;
 
+
   return (
     <Section {...props} className={clazz} />
   )
 };
 
 const Split = function(props) {
+  let clazz = "c-split-section__split";
+
+  if(props.padded) clazz += " is-padded";
+  if(props.className) clazz += " "+props.className;
+
   return (
-    <div className="c-split-section__split">
+    <div className={clazz}>
       { props.children }
     </div>
   );
diff --git a/public/styles/components/_split-section.scss b/public/styles/components/_split-section.scss
index 3567642..0fba54b 100644
--- a/public/styles/components/_split-section.scss
+++ b/public/styles/components/_split-section.scss
@@ -8,16 +8,29 @@
  *  Version:
  *    1.0.0 - 2018/05/28
  */
+$c-split-section__split--padding: 1em;
+
 .c-split-section {
   @extend %t-flexbox;
-  @include t-align-items(stretch);
   @include t-flex-wrap(wrap);
 
+  &.is-stretched {
+    @include t-align-items(stretch);
+  }
+
+  &.is-center {
+    @include t-align-items(center);
+  }
+
   &__split {
     width: 100%;
+
+    &.is-padded {
+      padding: $c-split-section__split--padding;
+    }
   }
 
   @include t-media-query($s-small-up) {
-    @include t-flex-wrap(nowrap);  
+    @include t-flex-wrap(nowrap);
   }
 }