@flodesk/grain 2.19.12 → 2.20.0

package/es/components/index.js

@@ -77,6 +77,12 @@ Object.defineProperty(exports, "TextToggle", {
     return _textToggle.TextToggle;
   }
 });
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.Stack;
+  }
+});
 
 var _text = require("./text");
 
@@ -96,4 +102,6 @@ var _textButton = require("./text-button");
 
 var _iconToggle = require("./icon-toggle");
 
-var _textToggle = require("./text-toggle");
+var _textToggle = require("./text-toggle");
+
+var _stack = require("./stack");

package/es/components/stack.js

@@ -0,0 +1,94 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Stack = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _types = require("../types");
+
+var _excluded = ["children", "gap"];
+
+var _templateObject;
+
+var __jsx = _react.default.createElement;
+
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > * + * {\n    ", ";\n  }\n"])), function (p) {
+  return (0, _utilities.getResponsiveSpace)('margin-top', p.gap);
+});
+
+var Stack = function Stack(_ref) {
+  var children = _ref.children,
+      gap = _ref.gap,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    gap: gap
+  }, props), children);
+};
+
+exports.Stack = Stack;
+Stack.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Stack",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "gap": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }, {
+          "name": "object"
+        }]
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/utilities/responsive.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getResponsiveTextSize = exports.getTextSize = exports.getResponsiveSpace = exports.getResponsiveDimension = exports.getSpace = exports.getDimension = exports.mapObjToMedia = exports.getMediaCss = exports.breakpoints = void 0;
+exports.getResponsiveTextSize = exports.getTextSize = exports.getResponsiveSpace = exports.getResponsiveDimension = exports.getSpace = exports.getDimension = exports.mapObjToMedia = exports.getMediaCss = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -17,25 +17,12 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.object.entries.js");
 
+require("core-js/modules/es.array.reverse.js");
+
 var _ = require(".");
 
 var _variables = require("../variables");
 
-var breakpoints = {
-  breakpointS: "320px",
-  breakpointM: "768px",
-  breakpointL: "1170px"
-};
-exports.breakpoints = breakpoints;
-
-var getBrakpoint = function getBrakpoint(breakpoint) {
-  if (breakpoint in breakpoints) {
-    return "(min-width: ".concat(breakpoints[breakpoint], ")");
-  }
-
-  return breakpoint;
-};
-
 var getMediaCss = function getMediaCss(breakpoint, property, value) {
   var getValue = function getValue(val) {
     if (val === 0) return val;
@@ -47,7 +34,7 @@ var getMediaCss = function getMediaCss(breakpoint, property, value) {
     return "".concat(property, ": ").concat(getValue(value), ";");
   }
 
-  return "\n    @media ".concat(getBrakpoint(breakpoint), " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+  return "\n    @media ".concat(breakpoint, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
 
 exports.getMediaCss = getMediaCss;
@@ -65,8 +52,10 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
     }
 
     return getMediaCss(breakpoint, property, value);
-  });
-  return declarations.join("");
+  }); // reverse array to make sure max-widths correctly override
+
+  declarations.reverse().join("");
+  return declarations;
 };
 
 exports.mapObjToMedia = mapObjToMedia;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.19.12",
+  "version": "2.20.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",