v1.0.6

ojguru · Apr 29, 2021 · 64562cf · 64562cf
1 parent 42b2b87
commit 64562cf
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 16 deletions.
diff --git a/col.js b/col.js
@@ -4,9 +4,44 @@ import mq from "./mq";
 
 const colSize = size => (parseInt(size)>0 && parseInt(size)<=12 ?(100/12*parseInt(size))+"%": `100%`);
 
-const ColComponent = (props) => {
-
-    return <Col {...props }>{props.children}</Col>
+const ColComponent = ({
+    size, sizeSM, sizeMD, sizeLG, sizeXL,
+    order, orderSM, orderMD, orderLG, orderXL,
+    noGutters, noGuttersSM, noGuttersMD, noGuttersLG, noGuttersXL,
+    noLGutters, noLGuttersSM, noLGuttersMD, noLGuttersLG, noLGuttersXL,
+    noRGutters, noRGuttersSM, noRGuttersMD, noRGuttersLG, noRGuttersXL,
+    gutters, guttersSM, guttersMD, guttersLG, guttersXL,
+    lGutters, lGuttersSM, lGuttersMD, lGuttersLG, lGuttersXL,
+    rGutters, rGuttersSM, rGuttersMD, rGuttersLG, rGuttersXL,
+    mxAuto, mxSMAuto, mxMDAuto, mxLGAuto, mxXLAuto,
+    mlAuto, mlSMAuto, mlMDAuto, mlLGAuto, mlXLAuto,
+    mrAuto, mrSMAuto, mrMDAuto, mrLGAuto, mrXLAuto,
+    hidden, hiddenSM, hiddenMD, hiddenLG, hiddenXL,
+    visible, visibleSM, visibleMD, visibleLG, visibleXL,
+    alignSelf, alignSMSelf, alignMDSelf, alignLGSelf, alignXLSelf,
+    alignCenter, alignSMCenter, alignMDCenter, alignLGCenter, alignXLCenter,
+    zIndex, zIndexSM, zIndexMD, zIndexLG, zIndexXL, className, children
+}) => {
+
+    return <Col {...{
+        size, sizeSM, sizeMD, sizeLG, sizeXL,
+        order, orderSM, orderMD, orderLG, orderXL,
+        noGutters, noGuttersSM, noGuttersMD, noGuttersLG, noGuttersXL,
+        noLGutters, noLGuttersSM, noLGuttersMD, noLGuttersLG, noLGuttersXL,
+        noRGutters, noRGuttersSM, noRGuttersMD, noRGuttersLG, noRGuttersXL,
+        gutters, guttersSM, guttersMD, guttersLG, guttersXL,
+        lGutters, lGuttersSM, lGuttersMD, lGuttersLG, lGuttersXL,
+        rGutters, rGuttersSM, rGuttersMD, rGuttersLG, rGuttersXL,
+        mxAuto, mxSMAuto, mxMDAuto, mxLGAuto, mxXLAuto,
+        mlAuto, mlSMAuto, mlMDAuto, mlLGAuto, mlXLAuto,
+        mrAuto, mrSMAuto, mrMDAuto, mrLGAuto, mrXLAuto,
+        hidden, hiddenSM, hiddenMD, hiddenLG, hiddenXL,
+        visible, visibleSM, visibleMD, visibleLG, visibleXL,
+        alignSelf, alignSMSelf, alignMDSelf, alignLGSelf, alignXLSelf,
+        alignCenter, alignSMCenter, alignMDCenter, alignLGCenter, alignXLCenter,
+        zIndex, zIndexSM, zIndexMD, zIndexLG, zIndexXL, className
+    }}>{children}</Col>
+
 }
 
 export default connect(ColComponent);

diff --git a/container.js b/container.js
@@ -2,10 +2,16 @@ import React from "react";
 import {css, styled, connect} from "frontity";
 import mq from "./mq";
 
-const ContainerComponent = (props) =>{
+const ContainerComponent = ({
+  fluid=false, fluidMD=false, fluidLG=false, fluidXL=false, notFluidMD=false, notFluidLG=false, notFluidXL=false,
+  noGutters=false, space=false, sizeSM="540px", sizeMD="720px", sizeLG="960px", sizeXL="1140px", className, children
+}) =>{
 
-  return <Container {...props}>
-    {props.children}
+  return <Container {...{
+    fluid, fluidMD, fluidLG, fluidXL, notFluidMD, notFluidLG, notFluidXL,
+    noGutters, space, sizeSM, sizeMD, sizeLG, sizeXL, className
+  }}>
+    {children}
   </Container>
 
 } 
@@ -20,8 +26,8 @@ const spaceSizes = {
 
 const Container = styled.div`
   ${({
-    fluid=false, fluidMD=false, fluidLG=false, fluidXL=false, notFluidMD=false, notFluidLG=false, notFluidXL=false,
-    noGutters=false, space=false, sizeSM="540px", sizeMD="720px", sizeLG="960px", sizeXL="1140px"
+    fluid, fluidMD, fluidLG, fluidXL, notFluidMD, notFluidLG, notFluidXL,
+    noGutters, space, sizeSM, sizeMD, sizeLG, sizeXL
   })=>css`
     width: 100%;
     max-width: 100%;

diff --git a/row.js b/row.js
@@ -2,10 +2,24 @@ import React from "react";
 import {css, styled, connect} from "frontity";
 import mq from "./mq";
 
-const RowComponent = (props) => {
+const RowComponent = ({
+    alignCenter=false, alignSMCenter=false, alignMDCenter=false, alignLGCenter=false, alignXLCenter=false,
+    alignItems=false, alignSMItems=false, alignMDItems=false, alignLGItems=false, alignXLItems=false, 
+    reverse=false, reverseSM=false, reverseMD=false, reverseLG=false, reverseXL=false,
+    alignContent=false, alignSMContent=false, alignMDContent=false, alignLGContent=false, alignXLContent=false,
+    justifyContent=false, justifySMContent=false, justifyMDContent=false, justifyLGContent=false, justifyXLContent=false,
+    className, children
+}) => {
 
-  return <Row {...props}>
-    {props.children}
+  return <Row {...{
+    alignCenter, alignSMCenter, alignMDCenter, alignLGCenter, alignXLCenter,
+    alignItems, alignSMItems, alignMDItems, alignLGItems, alignXLItems, 
+    reverse, reverseSM, reverseMD, reverseLG, reverseXL,
+    alignContent, alignSMContent, alignMDContent, alignLGContent, alignXLContent,
+    justifyContent, justifySMContent, justifyMDContent, justifyLGContent, justifyXLContent,
+    className
+  }}>
+    {children}
   </Row>
 
 }
@@ -14,11 +28,11 @@ export default connect(RowComponent);
 
 const Row = styled.div`
   ${({
-    alignCenter=false, alignSMCenter=false, alignMDCenter=false, alignLGCenter=false, alignXLCenter=false,
-    alignItems=false, alignSMItems=false, alignMDItems=false, alignLGItems=false, alignXLItems=false, 
-    reverse=false, reverseSM=false, reverseMD=false, reverseLG=false, reverseXL=false,
-    alignContent=false, alignSMContent=false, alignMDContent=false, alignLGContent=false, alignXLContent=false,
-    justifyContent=false, justifySMContent=false, justifyMDContent=false, justifyLGContent=false, justifyXLContent=false,
+    alignCenter, alignSMCenter, alignMDCenter, alignLGCenter, alignXLCenter,
+    alignItems, alignSMItems, alignMDItems, alignLGItems, alignXLItems, 
+    reverse, reverseSM, reverseMD, reverseLG, reverseXL,
+    alignContent, alignSMContent, alignMDContent, alignLGContent, alignXLContent,
+    justifyContent, justifySMContent, justifyMDContent, justifyLGContent, justifyXLContent,
   })=>css`
     display: flex;
     flex-wrap: wrap;