@wireapp/react-ui-kit 8.14.1 → 8.14.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@emotion/react": "11.9.0",
-    "bazinga64": "5.11.1",
+    "bazinga64": "5.11.4",
     "color": "3.1.3",
     "emotion-normalize": "11.0.1",
     "react-select": "5.4.0",
@@ -70,8 +70,9 @@
     "test:coverage": "yarn test --coverage",
     "test:watch": "yarn test --watch",
     "test:update": "yarn test --updateSnapshot",
-    "test:project": "yarn dist && yarn test"
+    "test:project": "yarn dist && yarn test",
+    "prepare": "yarn dist"
   },
-  "version": "8.14.1",
-  "gitHead": "dd789e2ce6c0b5197a25733d1f86bc13bdf06641"
+  "version": "8.14.4",
+  "gitHead": "18ca4e254a2713c941d165af06506b63ff361dc3"
 }

package/src/Form/Button.js

@@ -1,136 +1,221 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.filterButtonProps = exports.Button = exports.buttonStyle = exports.ButtonVariant = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const Identity_1 = require("../Identity");
-const motions_1 = require("../Identity/motions");
-const Misc_1 = require("../Misc");
-const Text_1 = require("../Text");
-const util_1 = require("../util");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _Identity = require("../Identity");
+
+var _motions = require("../Identity/motions");
+
+var _Misc = require("../Misc");
+
+var _Text = require("../Text");
+
+var _util = require("../util");
+
+var _excluded = ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"],
+    _excluded2 = ["showLoading", "children", "loadingColor"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var ButtonVariant;
+exports.ButtonVariant = ButtonVariant;
+
 (function (ButtonVariant) {
-    ButtonVariant["PRIMARY"] = "primary";
-    ButtonVariant["SECONDARY"] = "secondary";
-    ButtonVariant["TERTIARY"] = "tertiary";
-    ButtonVariant["QUATERNARY"] = "quaternary";
-    ButtonVariant["SEND"] = "send";
-})(ButtonVariant = exports.ButtonVariant || (exports.ButtonVariant = {}));
-const buttonStyle = (theme, _a) => {
-    var { variant = ButtonVariant.PRIMARY, backgroundColor, block = false, disabled = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = '16px', noWrap = true, textTransform = 'none', truncate = true } = _a, props = __rest(_a, ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"]);
-    return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block,
-        bold,
-        center,
-        disabled,
-        fontSize,
-        noWrap,
-        textTransform,
-        truncate }, props))), { border: 0, cursor: disabled ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '16px', padding: 0, outline: 'none', textDecoration: 'none', touchAction: 'manipulation', transition: motions_1.defaultTransition, width: block ? '100%' : 'auto', '&:hover, &:focus': {
-            textDecoration: 'none',
-        } }), (variant !== ButtonVariant.TERTIARY && Object.assign({ borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px', height: variant === ButtonVariant.SEND ? '40px' : '48px', lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px' }, (variant !== ButtonVariant.SEND && {
-        maxWidth: '100%',
-        minWidth: '125px',
-        padding: '0 16px',
-    })))), (variant === ButtonVariant.PRIMARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg), color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: theme.Button.primaryHoverBg,
-        },
-        '&:focus': {
-            border: `1px solid ${theme.Button.primaryFocusBorder}`,
-        },
-        '&:active': {
-            backgroundColor: theme.Button.primaryActiveBg,
-            border: `1px solid ${theme.Button.primaryActiveBorder}`,
-            color: Identity_1.COLOR.WHITE,
-        },
-    })))), (variant === ButtonVariant.SECONDARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_20 : Identity_1.COLOR_V2.WHITE), border: `1px solid ${Identity_1.COLOR_V2.GRAY_40}`, color: disabled ? Identity_1.COLOR_V2.GRAY_60 : Identity_1.COLOR_V2.BLACK }, (!disabled && {
-        '&:hover, &:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.BLUE}`,
-        },
-        '&:focus': {
-            color: Identity_1.COLOR_V2.BLUE,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_50,
-            border: `1px solid ${Identity_1.COLOR_V2.BLUE}`,
-            color: Identity_1.COLOR_V2.BLUE,
-        },
-    })))), (variant === ButtonVariant.TERTIARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg), border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`, borderRadius: '12px', color: disabled ? theme.Input.placeholderColor : theme.general.color, fontSize: '14px', fontWeight: 700, lineHeight: '24px', padding: '4px 8px', '& > svg > path': {
-            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
-        } }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: theme.Button.tertiaryHoverBg,
-            border: `1px solid ${theme.Button.tertiaryHoverBorder}`,
-        },
-        '&:focus': {
-            border: `1px solid ${theme.general.focusColor}`,
-        },
-        '&:active': {
-            backgroundColor: theme.Button.tertiaryActiveBg,
-            color: theme.IconButton.primaryActiveFillColor,
-            '& > svg > path': {
-                fill: theme.IconButton.primaryActiveFillColor,
-            },
-        },
-    })))), (variant === ButtonVariant.QUATERNARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN), color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE, lineHeight: '24px' }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.GREEN_LIGHT_700}`,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_700,
-        },
-    })))), (variant === ButtonVariant.SEND && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLUE), width: '40px' }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_800}`,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_700,
-        },
-    })))));
+  ButtonVariant["PRIMARY"] = "primary";
+  ButtonVariant["SECONDARY"] = "secondary";
+  ButtonVariant["TERTIARY"] = "tertiary";
+  ButtonVariant["QUATERNARY"] = "quaternary";
+  ButtonVariant["SEND"] = "send";
+})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
+
+var buttonStyle = function buttonStyle(theme, _ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? ButtonVariant.PRIMARY : _ref$variant,
+      backgroundColor = _ref.backgroundColor,
+      _ref$block = _ref.block,
+      block = _ref$block === void 0 ? false : _ref$block,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$noCapital = _ref.noCapital,
+      noCapital = _ref$noCapital === void 0 ? false : _ref$noCapital,
+      _ref$bold = _ref.bold,
+      bold = _ref$bold === void 0 ? true : _ref$bold,
+      _ref$center = _ref.center,
+      center = _ref$center === void 0 ? true : _ref$center,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? _Identity.COLOR.WHITE : _ref$color,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? '16px' : _ref$fontSize,
+      _ref$noWrap = _ref.noWrap,
+      noWrap = _ref$noWrap === void 0 ? true : _ref$noWrap,
+      _ref$textTransform = _ref.textTransform,
+      textTransform = _ref$textTransform === void 0 ? 'none' : _ref$textTransform,
+      _ref$truncate = _ref.truncate,
+      truncate = _ref$truncate === void 0 ? true : _ref$truncate,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
+    block: block,
+    bold: bold,
+    center: center,
+    disabled: disabled,
+    fontSize: fontSize,
+    noWrap: noWrap,
+    textTransform: textTransform,
+    truncate: truncate
+  }, props))), {}, {
+    border: 0,
+    cursor: disabled ? 'default' : 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '16px',
+    padding: 0,
+    outline: 'none',
+    textDecoration: 'none',
+    touchAction: 'manipulation',
+    transition: _motions.defaultTransition,
+    width: block ? '100%' : 'auto',
+    '&:hover, &:focus': {
+      textDecoration: 'none'
+    }
+  }, variant !== ButtonVariant.TERTIARY && _objectSpread({
+    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',
+    height: variant === ButtonVariant.SEND ? '40px' : '48px',
+    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px'
+  }, variant !== ButtonVariant.SEND && {
+    maxWidth: '100%',
+    minWidth: '125px',
+    padding: '0 16px'
+  })), variant === ButtonVariant.PRIMARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),
+    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: theme.Button.primaryHoverBg
+    },
+    '&:focus': {
+      border: "1px solid ".concat(theme.Button.primaryFocusBorder)
+    },
+    '&:active': {
+      backgroundColor: theme.Button.primaryActiveBg,
+      border: "1px solid ".concat(theme.Button.primaryActiveBorder),
+      color: _Identity.COLOR.WHITE
+    }
+  })), variant === ButtonVariant.SECONDARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE),
+    border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
+    color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
+  }, !disabled && {
+    '&:hover, &:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE)
+    },
+    '&:focus': {
+      color: _Identity.COLOR_V2.BLUE
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE),
+      color: _Identity.COLOR_V2.BLUE
+    }
+  })), variant === ButtonVariant.TERTIARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),
+    border: disabled ? "1px solid ".concat(theme.Button.tertiaryDisabledBorder) : "1px solid ".concat(theme.Button.tertiaryBorder),
+    borderRadius: '12px',
+    color: disabled ? theme.Input.placeholderColor : theme.general.color,
+    fontSize: '14px',
+    fontWeight: 700,
+    lineHeight: '24px',
+    padding: '4px 8px',
+    '& > svg > path': {
+      fill: disabled ? theme.Input.placeholderColor : theme.general.color
+    }
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: theme.Button.tertiaryHoverBg,
+      border: "1px solid ".concat(theme.Button.tertiaryHoverBorder)
+    },
+    '&:focus': {
+      border: "1px solid ".concat(theme.general.focusColor)
+    },
+    '&:active': {
+      backgroundColor: theme.Button.tertiaryActiveBg,
+      color: theme.IconButton.primaryActiveFillColor,
+      '& > svg > path': {
+        fill: theme.IconButton.primaryActiveFillColor
+      }
+    }
+  })), variant === ButtonVariant.QUATERNARY && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.GREEN),
+    color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE,
+    lineHeight: '24px'
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.GREEN_LIGHT_600
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.GREEN_LIGHT_700)
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.GREEN_LIGHT_700
+    }
+  })), variant === ButtonVariant.SEND && _objectSpread({
+    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLUE),
+    width: '40px'
+  }, !disabled && {
+    '&:hover, &:focus': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_800)
+    },
+    '&:active': {
+      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
+    }
+  }));
 };
+
 exports.buttonStyle = buttonStyle;
-const Button = (_a) => {
-    var { showLoading, children, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["showLoading", "children", "loadingColor"]);
-    return ((0, react_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.buttonStyle)(theme, props) }, (0, exports.filterButtonProps)(props)), showLoading ? (0, react_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children));
+
+var Button = function Button(_ref2) {
+  var showLoading = _ref2.showLoading,
+      children = _ref2.children,
+      _ref2$loadingColor = _ref2.loadingColor,
+      loadingColor = _ref2$loadingColor === void 0 ? _Identity.COLOR.WHITE : _ref2$loadingColor,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return (0, _react.jsx)("button", (0, _extends2["default"])({
+    css: function css(theme) {
+      return buttonStyle(theme, props);
+    }
+  }, filterButtonProps(props)), showLoading ? (0, _react.jsx)(_Misc.Loading, {
+    size: 30,
+    color: loadingColor,
+    style: {
+      display: 'flex',
+      margin: 'auto'
+    }
+  }) : children);
 };
+
 exports.Button = Button;
-const filterButtonProps = (props) => {
-    return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), ['backgroundColor', 'noCapital']);
+
+var filterButtonProps = function filterButtonProps(props) {
+  return (0, _util.filterProps)((0, _Text.filterTextProps)(props), ['backgroundColor', 'noCapital']);
 };
+
 exports.filterButtonProps = filterButtonProps;
 //# sourceMappingURL=Button.js.map

package/src/Form/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","COLOR_V2","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE","BLUE_LIGHT_50","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","Input","placeholderColor","fontWeight","fill","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","IconButton","primaryActiveFillColor","QUATERNARY","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\n  SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: ButtonVariant;\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    variant = ButtonVariant.PRIMARY,\n    backgroundColor,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  border: 0,\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant !== ButtonVariant.TERTIARY && {\n    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n    height: variant === ButtonVariant.SEND ? '40px' : '48px',\n    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n    ...(variant !== ButtonVariant.SEND && {\n      maxWidth: '100%',\n      minWidth: '125px',\n      padding: '0 16px',\n    }),\n  }),\n  ...(variant === ButtonVariant.PRIMARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.primaryHoverBg,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.Button.primaryFocusBorder}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.primaryActiveBg,\n        border: `1px solid ${theme.Button.primaryActiveBorder}`,\n        color: COLOR.WHITE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SECONDARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n    border: `1px solid ${COLOR_V2.GRAY_40}`,\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        border: `1px solid ${COLOR_V2.BLUE}`,\n      },\n      '&:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n        border: `1px solid ${COLOR_V2.BLUE}`,\n        color: COLOR_V2.BLUE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.TERTIARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n    border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n    borderRadius: '12px',\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    fontSize: '14px',\n    fontWeight: 700,\n    lineHeight: '24px',\n    padding: '4px 8px',\n    '& > svg > path': {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.tertiaryHoverBg,\n        border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.general.focusColor}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.tertiaryActiveBg,\n        color: theme.IconButton.primaryActiveFillColor,\n        '& > svg > path': {\n          fill: theme.IconButton.primaryActiveFillColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SEND && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n    width: '40px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}

package/src/Form/ButtonLink.js

@@ -1,54 +1,67 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ButtonLink = exports.buttonLinkStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const Misc_1 = require("../Misc");
-const Identity_1 = require("../Identity");
-const util_1 = require("../util");
-const Text_1 = require("../Text");
-const Button_1 = require("./Button");
-const buttonLinkStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_1.buttonStyle)(theme, props)), { display: 'inline-flex !important' }));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _Misc = require("../Misc");
+
+var _Identity = require("../Identity");
+
+var _util = require("../util");
+
+var _Text = require("../Text");
+
+var _Button = require("./Button");
+
+var _excluded = ["children", "showLoading", "loadingColor"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var buttonLinkStyle = function buttonLinkStyle(theme, props) {
+  return _objectSpread(_objectSpread({}, (0, _Button.buttonStyle)(theme, props)), {}, {
+    display: 'inline-flex !important'
+  });
+};
+
 exports.buttonLinkStyle = buttonLinkStyle;
-const filterButtonLinkProps = (props) => {
-    return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), [
-        'backgroundColor',
-        'disabled',
-        'noCapital',
-    ]);
+
+var filterButtonLinkProps = function filterButtonLinkProps(props) {
+  return (0, _util.filterProps)((0, _Text.filterTextProps)(props), ['backgroundColor', 'disabled', 'noCapital']);
 };
-const ButtonLink = (_a) => {
-    var { children, showLoading, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["children", "showLoading", "loadingColor"]);
-    return ((0, react_1.jsx)("a", Object.assign({ css: (theme) => (0, exports.buttonLinkStyle)(theme, props) }, filterButtonLinkProps(props)), showLoading ? (0, react_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children));
+
+var ButtonLink = function ButtonLink(_ref) {
+  var children = _ref.children,
+      showLoading = _ref.showLoading,
+      _ref$loadingColor = _ref.loadingColor,
+      loadingColor = _ref$loadingColor === void 0 ? _Identity.COLOR.WHITE : _ref$loadingColor,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react.jsx)("a", (0, _extends2["default"])({
+    css: function css(theme) {
+      return buttonLinkStyle(theme, props);
+    }
+  }, filterButtonLinkProps(props)), showLoading ? (0, _react.jsx)(_Misc.Loading, {
+    size: 30,
+    color: loadingColor,
+    style: {
+      display: 'flex',
+      margin: 'auto'
+    }
+  }) : children);
 };
+
 exports.ButtonLink = ButtonLink;
 //# sourceMappingURL=ButtonLink.js.map

package/src/Form/ButtonLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["ButtonLink.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAA8C;AAE9C,kCAAgC;AAChC,0CAAkC;AAClC,kCAAoC;AACpC,kCAAwC;AACxC,qCAAkD;AAG3C,MAAM,eAAe,GAAuE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,iCAChH,IAAA,oBAAW,EAAC,KAAK,EAAE,KAAK,CAAC,KAC5B,OAAO,EAAE,wBAAwB,IACjC,CAAC;AAHU,QAAA,eAAe,mBAGzB;AAEH,MAAM,qBAAqB,GAAG,CAAC,KAAqC,EAAE,EAAE;IACtE,OAAO,IAAA,kBAAW,EAAC,IAAA,sBAAe,EAAC,KAAK,CAAmC,EAAE;QAC3E,iBAAiB;QACjB,UAAU;QACV,WAAW;KACZ,CAAC,CAAC;AACL,CAAC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,EAKM,EAAE,EAAE;QALV,EACzB,QAAQ,EACR,WAAW,EACX,YAAY,GAAG,gBAAK,CAAC,KAAK,OAEK,EAD5B,KAAK,cAJiB,2CAK1B,CADS;IAC4B,OAAA,CACpC,sCAAG,GAAG,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAA,uBAAe,EAAC,KAAK,EAAE,KAAK,CAAC,IAAM,qBAAqB,CAAC,KAAK,CAAC,GACtF,WAAW,CAAC,CAAC,CAAC,iBAAC,cAAO,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,GAAI,CAAC,CAAC,CAAC,QAAQ,CAC5G,CACL,CAAA;CAAA,CAAC;AATW,QAAA,UAAU,cASrB"}
+{"version":3,"sources":["ButtonLink.tsx"],"names":["buttonLinkStyle","theme","props","display","filterButtonLinkProps","ButtonLink","children","showLoading","loadingColor","COLOR","WHITE","margin"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,eAAmF,GAAG,SAAtFA,eAAsF,CAACC,KAAD,EAAQC,KAAR;AAAA,yCAC9F,yBAAYD,KAAZ,EAAmBC,KAAnB,CAD8F;AAEjGC,IAAAA,OAAO,EAAE;AAFwF;AAAA,CAA5F;;;;AAKP,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACF,KAAD,EAA2C;AACvE,SAAO,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAsE,CAC3E,iBAD2E,EAE3E,UAF2E,EAG3E,WAH2E,CAAtE,CAAP;AAKD,CAND;;AAQO,IAAMG,UAAU,GAAG,SAAbA,UAAa;AAAA,MACxBC,QADwB,QACxBA,QADwB;AAAA,MAExBC,WAFwB,QAExBA,WAFwB;AAAA,+BAGxBC,YAHwB;AAAA,MAGxBA,YAHwB,kCAGTC,gBAAMC,KAHG;AAAA,MAIrBR,KAJqB;AAAA,SAMxB;AAAG,IAAA,GAAG,EAAE,aAACD,KAAD;AAAA,aAAkBD,eAAe,CAACC,KAAD,EAAQC,KAAR,CAAjC;AAAA;AAAR,KAA6DE,qBAAqB,CAACF,KAAD,CAAlF,GACGK,WAAW,GAAG,gBAAC,aAAD;AAAS,IAAA,IAAI,EAAE,EAAf;AAAmB,IAAA,KAAK,EAAEC,YAA1B;AAAwC,IAAA,KAAK,EAAE;AAACL,MAAAA,OAAO,EAAE,MAAV;AAAkBQ,MAAAA,MAAM,EAAE;AAA1B;AAA/C,IAAH,GAA0FL,QADxG,CANwB;AAAA,CAAnB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Loading} from '../Misc';\nimport {COLOR} from '../Identity';\nimport {filterProps} from '../util';\nimport {filterTextProps} from '../Text';\nimport {ButtonProps, buttonStyle} from './Button';\nimport {Theme} from '../Layout';\n\nexport const buttonLinkStyle: (theme: Theme, props: ButtonProps<HTMLAnchorElement>) => CSSObject = (theme, props) => ({\n  ...buttonStyle(theme, props),\n  display: 'inline-flex !important',\n});\n\nconst filterButtonLinkProps = (props: ButtonProps<HTMLAnchorElement>) => {\n  return filterProps(filterTextProps(props) as ButtonProps<HTMLAnchorElement>, [\n    'backgroundColor',\n    'disabled',\n    'noCapital',\n  ]);\n};\n\nexport const ButtonLink = ({\n  children,\n  showLoading,\n  loadingColor = COLOR.WHITE,\n  ...props\n}: ButtonProps<HTMLAnchorElement>) => (\n  <a css={(theme: Theme) => buttonLinkStyle(theme, props)} {...filterButtonLinkProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </a>\n);\n"],"file":"ButtonLink.js"}