@flodesk/grain 2.15.0 → 2.16.0

package/es/components/button.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-require("core-js/modules/es.array.concat.js");
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _utilities = require("../utilities");
@@ -27,38 +25,37 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "tag", "variant", "isDisabled", "icon"];
+var _types = require("../types");
+
+var _excluded = ["children", "variant", "isDisabled", "icon"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var __jsx = _react.default.createElement;
-var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-buttonTextBoxPaddingX-m: 16px;\n  --grn-color-buttonBorder: var(--grn-color-fade4);\n  --grn-color-buttonBorder-hover: var(--grn-color-fade6);\n  --grn-color-buttonBorder-active: var(--grn-color-grey8);\n"])));
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
 var variants = {
-  neutral: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-color-buttonBorder);\n\n    &:hover {\n      border-color: var(--grn-color-buttonBorder-hover);\n    }\n    &:active {\n      border-color: var(--grn-color-buttonBorder-active);\n    }\n  "]))),
+  neutral: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
   primary: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: black;\n    }\n  "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey2'))
 };
 
-var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  // border-radius: 3px;\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
+var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ", ";\n  \n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
   return !p.isDisabled && variants[p.variant];
-}, function (p) {
-  return p.isDisabled && "\n    color: ".concat((0, _utilities.getColor)('disabledContent'), ";\n    background-color: ").concat((0, _utilities.getColor)('disabledBackground'), ";\n    border-color: transparent;\n    cursor: default;\n  ");
-}, (0, _utilities.getTransition)('fast'));
+}, (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'), (0, _utilities.getColor)('disabledBackground'));
 
 var Button = function Button(_ref) {
   var children = _ref.children,
-      tag = _ref.tag,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return __jsx(Wrapper, (0, _extends2.default)({
-    as: tag,
     variant: variant,
-    isDisabled: isDisabled,
+    disabled: isDisabled,
     icon: icon
   }, props), icon && __jsx(_components.Icon, {
-    icon: icon
+    icon: icon,
+    color: "currentColor"
   }), children);
 };
 
@@ -93,6 +90,13 @@ Button.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
     "onClick": {
       "type": {
         "name": "func"

package/es/components/icon-button.js

@@ -0,0 +1,115 @@
+"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.IconButton = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _components = require("../components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _types = require("../types");
+
+var _excluded = ["children", "isDisabled", "icon", "color"];
+
+var _templateObject, _templateObject2;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
+
+var Wrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  width: var(--grn-clearButtonHeight-m);\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-borderColor-hover);\n  }\n  \n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n  }\n"])), variables, (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+
+var IconButton = function IconButton(_ref) {
+  var children = _ref.children,
+      isDisabled = _ref.isDisabled,
+      icon = _ref.icon,
+      color = _ref.color,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    disabled: isDisabled,
+    icon: icon,
+    color: color
+  }, props), icon && __jsx(_components.Icon, {
+    icon: icon,
+    color: "currentColor"
+  }), children && children);
+};
+
+exports.IconButton = IconButton;
+IconButton.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconButton",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "color": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"greys\"",
+            "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
+          }, {
+            "value": "\"baseColors\"",
+            "computed": false
+          }, {
+            "value": "\"semanticColors\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/icon.js

@@ -45,7 +45,8 @@ var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
-      color = _ref.color,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'body' : _ref$color,
       hasEvenBoundary = _ref.hasEvenBoundary,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return __jsx(Wrapper, (0, _extends2.default)({
@@ -102,22 +103,11 @@ Icon.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "hasEvenBoundary": {
-      "type": {
-        "name": "custom",
-        "raw": "PropTypes.boolean"
-      },
-      "required": false,
-      "description": ""
-    },
     "color": {
+      "defaultValue": {
+        "value": "'body'",
+        "computed": false
+      },
       "type": {
         "name": "union",
         "value": [{
@@ -141,6 +131,21 @@ Icon.__docgenInfo = {
       },
       "required": false,
       "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hasEvenBoundary": {
+      "type": {
+        "name": "custom",
+        "raw": "PropTypes.boolean"
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/es/components/index.js

@@ -41,6 +41,18 @@ Object.defineProperty(exports, "Icon", {
     return _icon.Icon;
   }
 });
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _iconButton.IconButton;
+  }
+});
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function get() {
+    return _textButton.TextButton;
+  }
+});
 
 var _text = require("./text");
 
@@ -52,4 +64,8 @@ var _textInput = require("./text-input");
 
 var _arrange = require("./arrange");
 
-var _icon = require("./icon");
+var _icon = require("./icon");
+
+var _iconButton = require("./icon-button");
+
+var _textButton = require("./text-button");

package/es/components/text-button.js

@@ -0,0 +1,85 @@
+"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.TextButton = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _components = require("../components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "isDisabled", "icon"];
+
+var _templateObject, _templateObject2;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-paddingX-m: 8px;\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
+
+var Wrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0 var(--grn-paddingX-m);\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-radius: ", ";\n  font-weight: ", ";\n  transition: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  \n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-borderColor-hover);\n  }\n  \n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n  }\n"])), variables, (0, _utilities.getRadius)('s'), (0, _utilities.getWeight)('medium'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+
+var TextButton = function TextButton(_ref) {
+  var children = _ref.children,
+      isDisabled = _ref.isDisabled,
+      icon = _ref.icon,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    disabled: isDisabled,
+    icon: icon
+  }, props), icon && __jsx(_components.Icon, {
+    icon: icon
+  }), children && children);
+};
+
+exports.TextButton = TextButton;
+TextButton.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TextButton",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/styles/components-variables.css

@@ -1,4 +1,5 @@
 :root {
   --grn-textBoxHeight-s: 28px;
   --grn-textBoxHeight-m: 40px;
+  --grn-clearButtonHeight-m: 36px;
 }

package/package.json

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