@flodesk/grain 10.10.7 → 10.10.8

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", "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", "borderWidthLeft", "borderWidthRight", "borderWidthTop", "borderWidthBottom", "borderWidthX", "borderWidthY"];
+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", "borderSide"];
 
 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); }
 
@@ -88,12 +88,7 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
       borderColor = _ref.borderColor,
       borderColorHover = _ref.borderColorHover,
       borderWidth = _ref.borderWidth,
-      borderWidthLeft = _ref.borderWidthLeft,
-      borderWidthRight = _ref.borderWidthRight,
-      borderWidthTop = _ref.borderWidthTop,
-      borderWidthBottom = _ref.borderWidthBottom,
-      borderWidthX = _ref.borderWidthX,
-      borderWidthY = _ref.borderWidthY,
+      borderSide = _ref.borderSide,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   var styles = _objectSpread({}, generateStyleAttributes({
@@ -168,7 +163,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), _defineProperty(_generateClassNameAtt, "borderColor", borderColor), _defineProperty(_generateClassNameAtt, "borderColorHover", borderColorHover), _defineProperty(_generateClassNameAtt, "borderWidth", borderWidth), _defineProperty(_generateClassNameAtt, "borderWidthLeft", borderWidthLeft), _defineProperty(_generateClassNameAtt, "borderWidthRight", borderWidthRight), _defineProperty(_generateClassNameAtt, "borderWidthTop", borderWidthTop), _defineProperty(_generateClassNameAtt, "borderWidthBottom", borderWidthBottom), _defineProperty(_generateClassNameAtt, "borderWidthX", borderWidthX), _defineProperty(_generateClassNameAtt, "borderWidthY", borderWidthY), _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, "borderSide", borderSide), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
@@ -185,12 +180,6 @@ Box2.propTypes = {
   borderColor: types.color,
   borderColorHover: types.color,
   borderWidth: types.borderWidth,
-  borderWidthLeft: types.borderWidth,
-  borderWidthRight: types.borderWidth,
-  borderWidthTop: types.borderWidth,
-  borderWidthBottom: types.borderWidth,
-  borderWidthX: types.borderWidth,
-  borderWidthY: types.borderWidth,
   width: types.responsiveDimension,
   minWidth: types.responsiveDimension,
   maxWidth: types.responsiveDimension,

package/es/styles/utilities.js

@@ -16,10 +16,6 @@ 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.object.values.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.iterator.js";
@@ -28,7 +24,7 @@ import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.from.js";
-import { borderWidths } from '../types';
+import "core-js/modules/es.regexp.exec.js";
 import { styleConfig } from '../utilities';
 import { propNameToShort } from '../utilities/style-config';
 
@@ -99,28 +95,14 @@ var spaceProps = styleConfig.spaceProps,
     alignSelfProps = styleConfig.alignSelfProps,
     borderColorProps = styleConfig.borderColorProps,
     borderWidthProps = styleConfig.borderWidthProps,
+    borderSideProps = styleConfig.borderSideProps,
     alignProps = styleConfig.alignProps,
     weightProps = styleConfig.weightProps,
     displayProps = styleConfig.displayProps,
     zIndexProps = styleConfig.zIndexProps;
 var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps];
-var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, alignProps, weightProps, displayProps]);
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, alignProps, weightProps, displayProps, borderSideProps]);
 var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps]);
-
-var generateBorderStyle = function generateBorderStyle() {
-  var css = '';
-  Object.values(borderWidthProps.props).map(function (prop) {
-    var property = prop.property.replace('width', 'style');
-    if (prop.propName === 'borderWidth') return;
-    css += "\n        [class*=\"".concat(prop.short, "\"] { ").concat(property, ": solid }\n      ");
-  }).join('');
-  var allSideSelector = borderWidthProps.props[0].short;
-  css += "\n    ".concat(borderWidths.map(function (w) {
-    return ".".concat(allSideSelector, "-").concat(w);
-  }), " { border-style: solid }\n  ");
-  return css;
-};
-
-var defaultBorderColor = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n  }\n";
-var utilities = "\n  ".concat(defaultBorderColor, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n  ").concat(generateBorderStyle(), "\n");
+var defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
+var utilities = "\n  ".concat(defaultBorder, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
 export default utilities;

package/es/types.js

@@ -21,7 +21,7 @@ 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 borderWidths = ['1px', '2px', '3px', '4px'];
 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]),

package/es/utilities/style-config.js

@@ -27,7 +27,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { alignSelfs, cursors, overflows, positions } from '../types';
+import { alignSelfs, borderWidths, cursors, overflows, positions, sides } from '../types';
 import { vars } from '../variables';
 import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
 import { getColor, getRadius, getShadow, getTransition, getWeight, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
@@ -37,6 +37,19 @@ var shadows = Object.keys(vars.shadows);
 var radii = Object.keys(vars.radii);
 var transitions = [].concat(_toConsumableArray(Object.keys(vars.transitions)), _toConsumableArray(Object.keys(vars.transitionUtils)));
 var sizes = Object.keys(vars.texts);
+
+var borderSideToStyle = function borderSideToStyle(s) {
+  var none = 'none';
+  var solid = 'solid';
+  if (s === 'all') return solid;
+  var top = s === 'top' || s === 'all' || s === 'y' ? solid : none;
+  var right = s === 'right' || s === 'all' || s === 'x' ? solid : none;
+  var bottom = s === 'bottom' || s === 'all' || s === 'y' ? solid : none;
+  var left = s === 'left' || s === 'all' || s === 'x' ? solid : none;
+  var side = "".concat(top, " ").concat(right, " ").concat(bottom, " ").concat(left);
+  return side;
+};
+
 export var styleConfig = {
   spaceProps: {
     props: [{
@@ -330,37 +343,25 @@ export var styleConfig = {
       propName: 'borderWidth',
       property: 'border-width',
       short: 'bdw'
-    }, {
-      propName: 'borderWidthTop',
-      property: 'border-top-width',
-      short: 'bdw-t'
-    }, {
-      propName: 'borderWidthRight',
-      property: 'border-right-width',
-      short: 'bdw-r'
-    }, {
-      propName: 'borderWidthBottom',
-      property: 'border-bottom-width',
-      short: 'bdw-b'
-    }, {
-      propName: 'borderWidthLeft',
-      property: 'border-left-width',
-      short: 'bdw-l'
-    }, {
-      propName: 'borderWidthX',
-      property: 'border-inline-width',
-      short: 'bdw-x'
-    }, {
-      propName: 'borderWidthY',
-      property: 'border-block-width',
-      short: 'bdw-y'
     }],
     valueTransformer: function valueTransformer(borderWidth) {
-      return "".concat(borderWidth, "px");
+      return borderWidth;
     },
-    variables: ['1', '2', '3', '4'],
+    variables: borderWidths,
+    variableChecker: function variableChecker(value) {
+      return borderWidths.includes(value);
+    }
+  },
+  borderSideProps: {
+    props: [{
+      propName: 'borderSide',
+      property: 'border-style',
+      short: 'bds'
+    }],
+    valueTransformer: borderSideToStyle,
+    variables: sides,
     variableChecker: function variableChecker(value) {
-      return ['1', '2', '3', '4'].includes(value);
+      return sides.includes(value);
     }
   },
   alignProps: {

package/package.json

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