@flodesk/grain 2.1.0 → 2.2.0

package/es/components/box/index.js

@@ -1,35 +1,60 @@
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.object.freeze.js";
 import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right"];
 
 var _templateObject;
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-import { getBorder, getColor, getSpace } from '../../utilities';
-import PropTypes from "prop-types";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.assign.js";
+import { getBorder, getColor, getRadius, getSpace } from '../../utilities';
 import React from "react";
-import { cssVars } from '../../variables';
 import styled from "@emotion/styled";
 import { types } from '../../types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n    \n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (p) {
+
+var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
+  if (propertyValue || propertyValue === 0) {
+    return "".concat(propertyName, ": ").concat(getSpace(propertyValue));
+  }
+};
+
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n    \n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n"])), function (p) {
   return getBorder(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
-  return p.paddingTop && "padding-top: ".concat(getSpace(p.paddingTop));
+  return getSpaceCss('padding-top', p.paddingTop);
+}, function (p) {
+  return getSpaceCss('padding-bottom', p.paddingBottom);
 }, function (p) {
-  return p.paddingBottom && "padding-bottom: ".concat(getSpace(p.paddingBottom));
+  return getSpaceCss('padding-left', p.paddingLeft);
 }, function (p) {
-  return p.paddingLeft && "padding-left: ".concat(getSpace(p.paddingLeft));
+  return getSpaceCss('padding-right', p.paddingRight);
 }, function (p) {
-  return p.paddingRight && "padding-right: ".concat(getSpace(p.paddingRight));
+  return getSpaceCss('margin-top', p.marginTop);
 }, function (p) {
-  return p.marginTop && "margin-top: ".concat(getSpace(p.marginTop));
+  return getSpaceCss('margin-bottom', p.marginBottom);
 }, function (p) {
-  return p.marginBottom && "margin-bottom: ".concat(getSpace(p.marginBottom));
+  return getSpaceCss('margin-left', p.marginLeft);
 }, function (p) {
-  return p.marginLeft && "margin-left: ".concat(getSpace(p.marginLeft));
+  return getSpaceCss('margin-right', p.marginRight);
 }, function (p) {
-  return p.marginRight && "margin-right: ".concat(getSpace(p.marginRight));
+  return getSpaceCss('top', p.top);
+}, function (p) {
+  return getSpaceCss('bottom', p.bottom);
+}, function (p) {
+  return getSpaceCss('left', p.left);
+}, function (p) {
+  return getSpaceCss('right', p.right);
+}, function (p) {
+  return p.position && "position: ".concat(p.position);
 }, function (p) {
   return getColor(p.color);
 }, function (p) {
@@ -38,6 +63,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return getSpace(p.width);
 }, function (p) {
   return getSpace(p.height);
+}, function (p) {
+  return getRadius(p.radius);
 });
 export var Box = function Box(_ref) {
   var children = _ref.children,
@@ -48,6 +75,7 @@ export var Box = function Box(_ref) {
       borderColor = _ref.borderColor,
       width = _ref.width,
       height = _ref.height,
+      radius = _ref.radius,
       padding = _ref.padding,
       paddingTop = _ref.paddingTop,
       paddingBottom = _ref.paddingBottom,
@@ -61,8 +89,15 @@ export var Box = function Box(_ref) {
       marginLeft = _ref.marginLeft,
       marginRight = _ref.marginRight,
       marginX = _ref.marginX,
-      marginY = _ref.marginY;
-  return /*#__PURE__*/React.createElement(Wrapper, {
+      marginY = _ref.marginY,
+      position = _ref.position,
+      top = _ref.top,
+      bottom = _ref.bottom,
+      left = _ref.left,
+      right = _ref.right,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     backgroundColor: backgroundColor,
     color: color,
     borderSide: borderSide,
@@ -70,6 +105,7 @@ export var Box = function Box(_ref) {
     borderColor: borderColor,
     width: width,
     height: height,
+    radius: radius,
     paddingTop: padding || paddingY || paddingTop,
     paddingBottom: padding || paddingY || paddingBottom,
     paddingLeft: padding || paddingX || paddingLeft,
@@ -77,14 +113,20 @@ export var Box = function Box(_ref) {
     marginTop: margin || marginY || marginTop,
     marginBottom: margin || marginY || marginBottom,
     marginLeft: margin || marginX || marginLeft,
-    marginRight: margin || marginX || marginRight
-  }, children);
+    marginRight: margin || marginX || marginRight,
+    position: position,
+    top: top,
+    bottom: bottom,
+    left: left,
+    right: right
+  }, props), children);
 };
 Box.propTypes = {
   color: types.color,
   borderSide: types.side,
   width: types.space,
   height: types.space,
+  radius: types.radius,
   padding: types.space,
   paddingTop: types.space,
   paddingBottom: types.space,
@@ -98,5 +140,10 @@ Box.propTypes = {
   marginLeft: types.space,
   marginRight: types.space,
   marginX: types.space,
-  marginY: types.space
+  marginY: types.space,
+  position: types.position,
+  top: types.space,
+  bottom: types.space,
+  left: types.space,
+  right: types.space
 };

package/es/styles/base.css

@@ -25,6 +25,12 @@
   --grn-space-xxl: calc(var(--grn-unit) * 7);
 }
 
+:root {
+  --grn-radius-s: calc(var(--grn-unit) / 2);
+  --grn-radius-m: calc(var(--grn-unit) / 1.33);
+  --grn-radius-l: calc(var(--grn-unit) * 1.25);
+}
+
 :root {
   --grey8-HSL: 0 0% 7%;
 

package/es/types/index.js

@@ -1,9 +1,12 @@
+import "core-js/modules/es.object.keys.js";
 import PropTypes from "prop-types";
-import { cssVars } from "../variables";
+import { vars } from "../variables";
 export var types = {
-  color: PropTypes.oneOfType([PropTypes.oneOf(cssVars.colors), PropTypes.string]),
-  space: PropTypes.oneOfType([PropTypes.oneOf(cssVars.spaces), PropTypes.number, PropTypes.string]),
+  color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
+  space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string]),
   side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
-  textSize: PropTypes.oneOfType([PropTypes.oneOf(cssVars.textSizes), PropTypes.number, PropTypes.string]),
-  weight: PropTypes.oneOf(cssVars.weights)
+  radius: PropTypes.oneOf(["s", "m", "l"]),
+  position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
+  textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.textSizes)), PropTypes.number, PropTypes.string]),
+  weight: PropTypes.oneOf(Object.keys(vars.weights))
 };

package/es/utilities/index.js

@@ -1,7 +1,5 @@
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-import { cssVars, grnPrefix } from "../variables";
+import { grnPrefix, vars } from "../variables";
 export var getCssVarCore = function getCssVarCore(type, value) {
   return "".concat(grnPrefix).concat(type, "-").concat(value);
 };
@@ -14,35 +12,42 @@ var u = function u(amount) {
 };
 
 export var getColor = function getColor(color) {
-  if (cssVars.colors.includes(color)) {
+  if (color in vars.colors) {
     return getCssVar("color", color);
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (cssVars.textSizes.includes(size)) {
+  if (size in vars.textSizes) {
     return getCssVar("text", size);
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (cssVars.weights.includes(weight)) {
+  if (weight in vars.weights) {
     return getCssVar("weight", weight);
   }
 };
+export var getRadius = function getRadius(radius) {
+  if (radius in vars.radiuses) {
+    return getCssVar("radius", radius);
+  }
+};
 export var getSpace = function getSpace(space) {
   if (isNaN(space)) {
-    if (cssVars.spaces.includes(space)) {
+    if (space in vars.spaces) {
       return getCssVar("space", space);
     }
 
     return space;
   }
 
+  if (space === 0) return space;
   return u(space);
 };
+console.log("getSpace", getSpace(0));
 export var getBorder = function getBorder(borderSide) {
   var borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1px";
   var borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "border";

package/es/variables/index.js

@@ -1,41 +1,70 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-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 "core-js/modules/es.array.reverse.js";
-import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.regexp.exec.js";
-var greysAmount = 8;
-var greysArray = [];
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+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";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-for (var step = 1; step < greysAmount + 1; step++) {
-  greysArray.push("grey" + step);
-}
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 export var grnPrefix = "--grn-";
-export var greys = greysArray.reverse();
-export var semanticColors = ["body", "bodyDimmed", "accent", "backgroundSecondary", "background", "overlay", "border", "selection", "danger"];
-export var baseColors = ["blue", "red"];
-export var cssVars = {
-  textSizes: ["s", "m", "l", "xl", "xxl"],
-  spaces: ["xs", "s", "m", "l", "xl", "xxl"],
-  weights: ["normal", "medium", "semiBold"],
-  colors: [].concat(_toConsumableArray(greys), baseColors, semanticColors)
+export var greys = {
+  grey8: "grey8",
+  grey7: "grey7",
+  grey6: "grey6",
+  grey5: "grey5",
+  grey4: "grey4",
+  grey3: "grey3",
+  grey2: "grey2",
+  grey1: "grey1"
+};
+export var semanticColors = {
+  body: "body",
+  bodyDimmed: "bodyDimmed",
+  accent: "accent",
+  backgroundSecondary: "backgroundSecondary",
+  background: "background",
+  overlay: "overlay",
+  border: "border",
+  selection: "selection",
+  danger: "danger"
+};
+export var baseColors = {
+  blue: "blue",
+  red: "red"
+};
+export var vars = {
+  textSizes: {
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  spaces: {
+    xs: "xs",
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  weights: {
+    normal: "normal",
+    medium: "medium",
+    semiBold: "semiBold"
+  },
+  radiuses: {
+    s: "s",
+    m: "m",
+    l: "l"
+  },
+  colors: _objectSpread(_objectSpread(_objectSpread({}, greys), baseColors), semanticColors)
 };

package/package.json

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