@flodesk/grain 2.19.9 → 2.19.10

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.getDimension = exports.mapObjToMedia = exports.getMediaCss = 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"));
 
@@ -21,6 +21,20 @@ var _ = require(".");
 
 var _variables = require("../variables");
 
+var breakpoints = {
+  breakpointS: "320px",
+  breakpointM: "768px",
+  breakpointL: "1170px"
+};
+
+var getBrakpoint = function getBrakpoint(breakpoint) {
+  if (breakpoint in breakpoints) {
+    return breakpoints[breakpoint];
+  }
+
+  return breakpoint;
+};
+
 var getMediaCss = function getMediaCss(breakpoint, property, value) {
   var getValue = function getValue(val) {
     if (val === 0) return val;
@@ -28,7 +42,11 @@ var getMediaCss = function getMediaCss(breakpoint, property, value) {
     if ((0, _.isString)(val)) return val;
   };
 
-  return "\n    @media (min-width: ".concat(breakpoint, ") {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+  if (breakpoint === "default") {
+    return "".concat(property, ": ").concat(getValue(value), ";");
+  }
+
+  return "\n    @media (min-width: ".concat(getBrakpoint(breakpoint), ") {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
 
 exports.getMediaCss = getMediaCss;
@@ -36,7 +54,7 @@ exports.getMediaCss = getMediaCss;
 var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
   var varGroupName = _variables.varNames[varName].group;
   var varPrefix = _variables.varNames[varName].prefix;
-  return Object.entries(obj).map(function (_ref) {
+  var declarations = Object.entries(obj).map(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
         breakpoint = _ref2[0],
         value = _ref2[1];
@@ -46,7 +64,8 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
     }
 
     return getMediaCss(breakpoint, property, value);
-  }).join("");
+  });
+  return declarations.join("");
 };
 
 exports.mapObjToMedia = mapObjToMedia;
@@ -59,24 +78,38 @@ var getDimension = function getDimension(dimension) {
 
 exports.getDimension = getDimension;
 
+var getSpace = function getSpace(value) {
+  if (value in _variables.vars.spaces) {
+    return (0, _.getCssVar)(_variables.varNames.space.prefix, value);
+  }
+
+  if (value === 0) return value;
+  if ((0, _.isString)(value)) return value;
+  if ((0, _.isNumber)(value)) return (0, _.u)(value);
+};
+
+exports.getSpace = getSpace;
+
 var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
+  if (!dimension) return;
+
   if ((0, _.isObject)(dimension)) {
     return mapObjToMedia(property, dimension, _variables.varNames.space.prefix);
   }
 
-  if (dimension === 0) return "".concat(property, ": ").concat(dimension);
-  if ((0, _.isString)(dimension)) return "".concat(property, ": ").concat(dimension);
-  if ((0, _.isNumber)(dimension)) return "".concat(property, ": ").concat((0, _.u)(dimension));
+  return "".concat(property, ": ").concat(getDimension(dimension));
 };
 
 exports.getResponsiveDimension = getResponsiveDimension;
 
 var getResponsiveSpace = function getResponsiveSpace(property, space) {
-  if (space in _variables.vars.spaces) {
-    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.space.prefix, space));
+  if (!space) return;
+
+  if ((0, _.isObject)(space)) {
+    return mapObjToMedia(property, space, _variables.varNames.space.prefix);
   }
 
-  return getResponsiveDimension(property, space);
+  return "".concat(property, ": ").concat(getSpace(space));
 };
 
 exports.getResponsiveSpace = getResponsiveSpace;
@@ -92,17 +125,14 @@ var getTextSize = function getTextSize(size) {
 exports.getTextSize = getTextSize;
 
 var getResponsiveTextSize = function getResponsiveTextSize(size) {
+  if (!size) return;
   var property = "font-size";
 
-  if (size in _variables.vars.texts) {
-    return "".concat(property, ": ").concat((0, _.getCssVar)(_variables.varNames.text.prefix, size));
-  }
-
   if ((0, _.isObject)(size)) {
     return mapObjToMedia(property, size, _variables.varNames.text.prefix);
   }
 
-  if ((0, _.isString)(size)) return "".concat(property, ": ").concat(size);
+  return "".concat(property, ": ").concat(getTextSize(size));
 };
 
 exports.getResponsiveTextSize = getResponsiveTextSize;

package/es/utilities/styles.js

@@ -129,7 +129,7 @@ var getBorder = function getBorder(borderSide, borderWidth, borderColor) {
   if (borderSide in borderSides) {
     return "\n      ".concat(borderSides[borderSide].map(function (side) {
       return "border-".concat(side, "-style: solid");
-    }).join(";"), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      ").concat((0, _responsive.getDimension)("border-width", borderWidth), ";\n    ");
+    }).join(";"), ";\n\n      border-color: ").concat(getColor(borderColor), ";\n      border-width: ").concat((0, _responsive.getDimension)(borderWidth), ";\n    ");
   }
 };
 

package/package.json

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