@flodesk/grain 2.0.0 → 2.1.0

package/es/components/box/index.js

@@ -0,0 +1,102 @@
+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";
+
+var _templateObject;
+
+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 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) {
+  return getBorder(p.borderSide, p.borderWidth, p.borderColor);
+}, function (p) {
+  return p.paddingTop && "padding-top: ".concat(getSpace(p.paddingTop));
+}, function (p) {
+  return p.paddingBottom && "padding-bottom: ".concat(getSpace(p.paddingBottom));
+}, function (p) {
+  return p.paddingLeft && "padding-left: ".concat(getSpace(p.paddingLeft));
+}, function (p) {
+  return p.paddingRight && "padding-right: ".concat(getSpace(p.paddingRight));
+}, function (p) {
+  return p.marginTop && "margin-top: ".concat(getSpace(p.marginTop));
+}, function (p) {
+  return p.marginBottom && "margin-bottom: ".concat(getSpace(p.marginBottom));
+}, function (p) {
+  return p.marginLeft && "margin-left: ".concat(getSpace(p.marginLeft));
+}, function (p) {
+  return p.marginRight && "margin-right: ".concat(getSpace(p.marginRight));
+}, function (p) {
+  return getColor(p.color);
+}, function (p) {
+  return getColor(p.backgroundColor);
+}, function (p) {
+  return getSpace(p.width);
+}, function (p) {
+  return getSpace(p.height);
+});
+export var Box = function Box(_ref) {
+  var children = _ref.children,
+      color = _ref.color,
+      backgroundColor = _ref.backgroundColor,
+      borderSide = _ref.borderSide,
+      borderWidth = _ref.borderWidth,
+      borderColor = _ref.borderColor,
+      width = _ref.width,
+      height = _ref.height,
+      padding = _ref.padding,
+      paddingTop = _ref.paddingTop,
+      paddingBottom = _ref.paddingBottom,
+      paddingLeft = _ref.paddingLeft,
+      paddingRight = _ref.paddingRight,
+      paddingX = _ref.paddingX,
+      paddingY = _ref.paddingY,
+      margin = _ref.margin,
+      marginTop = _ref.marginTop,
+      marginBottom = _ref.marginBottom,
+      marginLeft = _ref.marginLeft,
+      marginRight = _ref.marginRight,
+      marginX = _ref.marginX,
+      marginY = _ref.marginY;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    backgroundColor: backgroundColor,
+    color: color,
+    borderSide: borderSide,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    width: width,
+    height: height,
+    paddingTop: padding || paddingY || paddingTop,
+    paddingBottom: padding || paddingY || paddingBottom,
+    paddingLeft: padding || paddingX || paddingLeft,
+    paddingRight: padding || paddingX || paddingRight,
+    marginTop: margin || marginY || marginTop,
+    marginBottom: margin || marginY || marginBottom,
+    marginLeft: margin || marginX || marginLeft,
+    marginRight: margin || marginX || marginRight
+  }, children);
+};
+Box.propTypes = {
+  color: types.color,
+  borderSide: types.side,
+  width: types.space,
+  height: types.space,
+  padding: types.space,
+  paddingTop: types.space,
+  paddingBottom: types.space,
+  paddingLeft: types.space,
+  paddingRight: types.space,
+  paddingX: types.space,
+  paddingY: types.space,
+  margin: types.space,
+  marginTop: types.space,
+  marginBottom: types.space,
+  marginLeft: types.space,
+  marginRight: types.space,
+  marginX: types.space,
+  marginY: types.space
+};

package/es/components/index.js

@@ -1 +1,2 @@
-export { Text } from "./text";
+export { Text } from "./text";
+export { Box } from "./box";

package/es/components/text/index.js

@@ -7,10 +7,9 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getTextSize, getWeight } from '../../utilities';
-import PropTypes from 'prop-types';
 import React from "react";
-import { cssVars } from '../../variables';
 import styled from "@emotion/styled";
+import { types } from '../../types';
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (p) {
   return getTextSize(p.size);
 }, function (p) {
@@ -32,7 +31,7 @@ export var Text = function Text(_ref) {
   }, children);
 };
 Text.propTypes = {
-  size: PropTypes.oneOf(cssVars.textSizes),
-  weight: PropTypes.oneOf(cssVars.weights),
-  color: PropTypes.oneOfType([PropTypes.oneOf(cssVars.weights), PropTypes.string])
+  size: types.textSize,
+  weight: types.weight,
+  color: types.color
 };

package/es/types/index.js

@@ -0,0 +1,9 @@
+import PropTypes from "prop-types";
+import { cssVars } 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]),
+  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)
+};

package/es/utilities/index.js

@@ -8,6 +8,11 @@ export var getCssVarCore = function getCssVarCore(type, value) {
 export var getCssVar = function getCssVar(type, value) {
   return "var(".concat(getCssVarCore(type, value), ")");
 };
+
+var u = function u(amount) {
+  return "calc(var(--grn-unit) * ".concat(amount, ")");
+};
+
 export var getColor = function getColor(color) {
   if (cssVars.colors.includes(color)) {
     return getCssVar("color", color);
@@ -26,4 +31,33 @@ export var getWeight = function getWeight(weight) {
   if (cssVars.weights.includes(weight)) {
     return getCssVar("weight", weight);
   }
+};
+export var getSpace = function getSpace(space) {
+  if (isNaN(space)) {
+    if (cssVars.spaces.includes(space)) {
+      return getCssVar("space", space);
+    }
+
+    return space;
+  }
+
+  return u(space);
+};
+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";
+  var w = getSpace(borderWidth);
+  var borderSideStyles = {
+    x: "0 ".concat(w),
+    y: "".concat(w, " 0"),
+    all: "".concat(w),
+    top: "".concat(w, " 0 0 0"),
+    right: "0 ".concat(w, " 0 0"),
+    bottom: "0 0 ".concat(w, " 0"),
+    left: "0 0 0 ".concat(w)
+  };
+
+  if (borderSide in borderSideStyles) {
+    return "\n      border-style: solid;\n      border-width: ".concat(borderSideStyles[borderSide], ";\n      border-color: ").concat(getColor(borderColor), ";\n    ");
+  }
 };

package/package.json

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