@flodesk/grain 2.19.9 → 2.19.12

package/es/components/box.js

@@ -206,8 +206,6 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
-        }, {
-          "name": "object"
         }]
       },
       "required": false,

package/es/hooks/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useMedia", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useMedia;
+  }
+});
+
+var _useMedia = require("./useMedia");

package/es/hooks/useMedia.js

@@ -0,0 +1,54 @@
+"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.useMedia = useMedia;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.find-index.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+function useMedia(queries, values, defaultValue) {
+  var mediaQueryLists = queries.map(function (q) {
+    return window.matchMedia(q);
+  });
+
+  var getValue = function getValue() {
+    var index = mediaQueryLists.findIndex(function (mql) {
+      return mql.matches;
+    });
+    return typeof values[index] !== "undefined" ? values[index] : defaultValue;
+  };
+
+  var _useState = useState(getValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  useEffect(function () {
+    var handler = function handler() {
+      return setValue(getValue);
+    };
+
+    mediaQueryLists.forEach(function (mql) {
+      return mql.addListener(handler);
+    });
+    return function () {
+      return mediaQueryLists.forEach(function (mql) {
+        return mql.removeListener(handler);
+      });
+    };
+  }, []);
+  return value;
+}

package/es/utilities/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "getResponsiveDimension", {
     return _responsive.getResponsiveDimension;
   }
 });
+Object.defineProperty(exports, "breakpoints", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.breakpoints;
+  }
+});
 Object.defineProperty(exports, "getTextSize", {
   enumerable: true,
   get: function get() {

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 = exports.breakpoints = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -21,6 +21,21 @@ 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;
@@ -28,7 +43,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 ".concat(getBrakpoint(breakpoint), " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
 
 exports.getMediaCss = getMediaCss;
@@ -36,7 +55,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 +65,8 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
     }
 
     return getMediaCss(breakpoint, property, value);
-  }).join("");
+  });
+  return declarations.join("");
 };
 
 exports.mapObjToMedia = mapObjToMedia;
@@ -59,24 +79,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 +126,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.12",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",