@flodesk/grain 10.10.2 → 10.10.4

package/es/components/box2.js

@@ -9,7 +9,7 @@ import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.assign.js";
-var _excluded = ["color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColorHover", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor", "children", "className", "style"];
+var _excluded = ["color", "colorHover", "backgroundColor", "backgroundColorHover", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor", "children", "className", "style", "borderColor", "borderColorHover", "borderWidth", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth", "borderXWidth", "borderYWidth"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -39,8 +39,6 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
       colorHover = _ref.colorHover,
       backgroundColor = _ref.backgroundColor,
       backgroundColorHover = _ref.backgroundColorHover,
-      borderColorHover = _ref.borderColorHover,
-      borderSide = _ref.borderSide,
       width = _ref.width,
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
@@ -87,6 +85,15 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
       children = _ref.children,
       className = _ref.className,
       style = _ref.style,
+      borderColor = _ref.borderColor,
+      borderColorHover = _ref.borderColorHover,
+      borderWidth = _ref.borderWidth,
+      borderLeftWidth = _ref.borderLeftWidth,
+      borderRightWidth = _ref.borderRightWidth,
+      borderTopWidth = _ref.borderTopWidth,
+      borderBottomWidth = _ref.borderBottomWidth,
+      borderXWidth = _ref.borderXWidth,
+      borderYWidth = _ref.borderYWidth,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   var styles = _objectSpread({}, generateStyleAttributes({
@@ -124,7 +131,9 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     aspectRatio: aspectRatio,
     flex: flex,
     opacity: opacity,
-    opacityHover: opacityHover
+    opacityHover: opacityHover,
+    borderColor: borderColor,
+    borderColorHover: borderColorHover
   }));
 
   var propClassName = className ? className : '';
@@ -155,7 +164,7 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     shadow: shadow,
     shadowHover: shadowHover,
     radius: radius
-  }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
+  }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _defineProperty(_generateClassNameAtt, "borderColor", borderColor), _defineProperty(_generateClassNameAtt, "borderColorHover", borderColorHover), _defineProperty(_generateClassNameAtt, "borderWidth", borderWidth), _defineProperty(_generateClassNameAtt, "borderLeftWidth", borderLeftWidth), _defineProperty(_generateClassNameAtt, "borderRightWidth", borderRightWidth), _defineProperty(_generateClassNameAtt, "borderTopWidth", borderTopWidth), _defineProperty(_generateClassNameAtt, "borderBottomWidth", borderBottomWidth), _defineProperty(_generateClassNameAtt, "borderXWidth", borderXWidth), _defineProperty(_generateClassNameAtt, "borderYWidth", borderYWidth), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
@@ -169,10 +178,15 @@ Box2.propTypes = {
   colorHover: types.color,
   backgroundColor: types.color,
   backgroundColorHover: types.color,
-  borderSide: types.side,
-  borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   borderColor: types.color,
   borderColorHover: types.color,
+  borderWidth: types.borderWidth,
+  borderLeftWidth: types.borderWidth,
+  borderRightWidth: types.borderWidth,
+  borderTopWidth: types.borderWidth,
+  borderBottomWidth: types.borderWidth,
+  borderXWidth: types.borderWidth,
+  borderYWidth: types.borderWidth,
   width: types.responsiveDimension,
   minWidth: types.responsiveDimension,
   maxWidth: types.responsiveDimension,
@@ -208,7 +222,7 @@ Box2.propTypes = {
   zIndex: types.zIndex,
   opacity: PropTypes.string,
   opacityHover: PropTypes.string,
-  order: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  order: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
   alignSelf: types.alignSelf,
   flex: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   transition: types.transition,

package/es/styles/utilities.js

@@ -16,6 +16,7 @@ import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.iterator.js";
@@ -101,9 +102,34 @@ var spaceProps = styleConfig.spaceProps,
     flexProps = styleConfig.flexProps,
     sizeProps = styleConfig.sizeProps,
     opacityProps = styleConfig.opacityProps,
-    alignSelfProps = styleConfig.alignSelfProps;
-var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps];
-var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps]);
+    alignSelfProps = styleConfig.alignSelfProps,
+    borderColorProps = styleConfig.borderColorProps,
+    borderWidthProps = styleConfig.borderWidthProps;
+var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps];
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps]);
 var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps]);
-var utilities = "\n  ".concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
+var borderSides = {
+  t: 'top',
+  r: 'right',
+  b: 'bottom',
+  l: 'left',
+  x: 'inline',
+  y: 'block'
+};
+
+var generateBorderStyle = function generateBorderStyle() {
+  var css = '';
+  Object.entries(borderSides).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        shortSide = _ref4[0],
+        side = _ref4[1];
+
+    css += "\n        [class*=\"bd".concat(shortSide, "w-\"] { border-").concat(side, "-style: solid }\n      ");
+  }).join('');
+  css += "\n    [class*=\"bdw-\"] { border-style: solid }\n  ";
+  return css;
+};
+
+var defaultBorderColor = "\n  [class*=\"bdw-\"]:not([class*=\"bdc-\"]),\n  [class*=\"bdw-\"][class*=\"bdc-h\"]:not(:hover) {\n    border-color: var(--grn-color-border);\n  }\n";
+var utilities = "\n  ".concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n  ").concat(generateBorderStyle(), "\n  ").concat(defaultBorderColor, "\n");
 export default utilities;

package/es/types.js

@@ -20,12 +20,14 @@ export var flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
 export var overflows = ['visible', 'hidden', 'scroll', 'auto'];
 export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
 export var cursors = ['default', 'pointer'];
+export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
+export var borderWidths = ['1', '2', '3', '4'];
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   responsiveDimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-  side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
+  side: PropTypes.oneOf(sides),
   radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(positions),
@@ -60,7 +62,8 @@ export var types = {
   buttonTag: PropTypes.oneOf(['button', 'a', 'span']),
   hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
-  cursor: PropTypes.oneOf(cursors)
+  cursor: PropTypes.oneOf(cursors),
+  borderWidth: PropTypes.oneOf(borderWidths)
 };
 export var defaultProps = {
   menuMaxHeight: '468px',

package/es/utilities/style-config.js

@@ -310,6 +310,58 @@ export var styleConfig = {
     variableChecker: function variableChecker(value) {
       return alignSelfs.includes(value);
     }
+  },
+  borderColorProps: {
+    props: [{
+      propName: 'borderColor',
+      property: 'border-color',
+      short: 'bdc'
+    }, {
+      propName: 'borderColorHover',
+      property: 'border-color',
+      short: 'bdc-h'
+    }],
+    valueTransformer: getColor,
+    variableChecker: isColorVar,
+    variables: colors
+  },
+  borderWidthProps: {
+    props: [{
+      propName: 'borderWidth',
+      property: 'border-width',
+      short: 'bdw'
+    }, {
+      propName: 'borderTopWidth',
+      property: 'border-top-width',
+      short: 'bdtw'
+    }, {
+      propName: 'borderRightWidth',
+      property: 'border-right-width',
+      short: 'bdrw'
+    }, {
+      propName: 'borderBottomWidth',
+      property: 'border-bottom-width',
+      short: 'bdbw'
+    }, {
+      propName: 'borderLeftWidth',
+      property: 'border-left-width',
+      short: 'bdlw'
+    }, {
+      propName: 'borderXWidth',
+      property: 'border-inline-width',
+      short: 'bdxw'
+    }, {
+      propName: 'borderYWidth',
+      property: 'border-block-width',
+      short: 'bdyw'
+    }],
+    valueTransformer: function valueTransformer(borderWidth) {
+      return "".concat(borderWidth, "px");
+    },
+    variables: ['1', '2', '3', '4'],
+    variableChecker: function variableChecker(value) {
+      return ['1', '2', '3', '4'].includes(value);
+    }
   }
 };
 export var propNameToShort = function propNameToShort(propName) {

package/package.json

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