layout-emotions - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

dist/index.d.ts

@@ -7,3 +7,3 @@ import * as _emotion_styled from '@emotion/styled';
     theme?: _emotion_react.Theme;
-    as?: react.ElementType<any>;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements>;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -13,7 +13,22 @@
     theme?: _emotion_react.Theme;
-    as?: react.ElementType<any>;
-} & {
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements>;
+} & IRowProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Props are from rebass */
+type INum = [number?, number?, number?, number?];
+interface IRebass {
+    m?: number | INum;
+    mt?: number;
+    mb?: number;
+    ml?: number;
+    mr?: number;
+    p?: number | INum;
+    pt?: number;
+    pb?: number;
+    pl?: number;
+    pr?: number;
+}
+interface IRowProps extends IRebass {
     gapX?: number;
     gapY?: number;
-}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}
 
@@ -30,5 +45,5 @@ interface IProps {
     theme?: _emotion_react.Theme;
-    as?: react.ElementType<any>;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements>;
 } & IProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 export { Col, Container, Row };

dist/index.js

@@ -167,7 +167,17 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/layout/container.ts
     --gap-y: ${(props) => _nullishCoalesce(props.gapY, () => ( 0))}rem;
+
+    margin-top: ${(props) => _nullishCoalesce(props.mt, () => ( "calc(-1 * var(--gap-y))"))}rem;
+    margin-bottom: ${(props) => _nullishCoalesce(props.mb, () => ( "calc(-1 * var(--gap-y))"))}rem;
+    margin-right: ${(props) => _nullishCoalesce(props.mr, () => ( "calc(-0.5 * var(--gap-x))"))}rem;
+    margin-left: ${(props) => _nullishCoalesce(props.ml, () => ( "calc(-0.5 * var(--gap-x))"))}rem;
+
+    ${(props) => props.pt ? `padding-top: ${props.pt}rem;` : ""}
+    ${(props) => props.pb ? `padding-bottom: ${props.pb}rem;` : ""}
+    ${(props) => props.pl ? `padding-left: ${props.pl}rem;` : ""}
+    ${(props) => props.pr ? `padding-right: ${props.pr}rem;` : ""}
+
+    ${(props) => props.p ? padding(props.p) : ""}
+    
     display: flex;
     flex-wrap: wrap;
-    margin-top: calc(-1 * var(--gap-y));
-    margin-right: calc(-0.5 * var(--gap-x));
-    margin-left: calc(-0.5 * var(--gap-x));
     > * {
@@ -181,3 +191,3 @@ flex: 0 0 auto;
         margin-top: var(--gap-y);
-    } 
+    }
     ${columns_default}
@@ -187,2 +197,22 @@ ${spacing_default}
 `;
+var padding = (p) => {
+  let paddingString = "";
+  if (p instanceof Number) {
+    paddingString = `padding: ${p}rem;`;
+  } else {
+    if (p.length) {
+      switch (p.length) {
+        case 1:
+          return `padding: ${p[0]}rem;`;
+        case 2:
+          return `padding: ${p[0]}rem ${p[1]}rem;`;
+        case 3:
+          return `padding: ${p[0]}rem ${p[1]}rem ${p[2]}rem;`;
+        case 4:
+          return `padding: ${p[0]}rem ${p[1]}rem ${p[2]}rem ${p[3]}rem;`;
+      }
+    }
+  }
+  return "";
+};
 
@@ -189,0 +219,0 @@ // src/layout/column.ts

package.json

 {
   "name": "layout-emotions",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Collection of layout emotion components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -6,3 +6,3 @@ # Layout Emotions [![CodeFactor](https://www.codefactor.io/repository/github/manojgetwealthy/layout-emotions/badge)](https://www.codefactor.io/repository/github/manojgetwealthy/layout-emotions)
 ## Change logs
-[enhancement: add row properties to add gaps](https://github.com/manojadams/layout-emotions/issues/10)
+[enhancement: add basic margin and padding properties to row component from styled system/rebass](https://github.com/manojadams/layout-emotions/issues/13)
 
@@ -9,0 +9,0 @@ ## About

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25840

increased by17.79%

Lines of code

299

increased by15.89%

No dependency changes