@invoicebox/ui 0.1.0-alpha.94 → 0.1.0-alpha.96

package/dist/components/common/SecondaryButton/index.d.ts

@@ -1,4 +1,5 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
+import { TButtonSize } from './styles';
 type TButtonProps = {
     element?: 'button';
 } & ButtonHTMLAttributes<HTMLButtonElement>;
@@ -10,6 +11,7 @@ export type TProps = (TButtonProps | TAnchorProps) & {
     fullWidth?: boolean;
     disabled?: boolean;
     className?: never;
+    size?: TButtonSize;
 };
 export declare const SecondaryButton: FC<TProps>;
 export {};

package/dist/components/common/SecondaryButton/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _InvoiceboxSpinner = require("../InvoiceboxSpinner");
 var _palette = require("../../../palette");
-var _excluded = ["element", "isLoading", "fullWidth", "disabled", "className", "children"];
+var _excluded = ["element", "isLoading", "fullWidth", "disabled", "size", "className", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -25,6 +25,8 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     className = _ref.className,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -37,7 +39,8 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
     /* отправляет аргумент, для чистоты на уровне html атрибутов, на логику не влияет */,
     disabled: element === 'button' ? isDisabled : undefined,
     $palette: palette,
-    $fullWidth: fullWidth
+    $fullWidth: fullWidth,
+    $size: size
   }, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner, {
     width: "32px"
   })), /*#__PURE__*/_react["default"].createElement(S.Inner, {

package/dist/components/common/SecondaryButton/index.stories.js

@@ -23,7 +23,8 @@ var args = {
   isLoading: false,
   fullWidth: false,
   onClick: (0, _addonActions.action)('click'),
-  children: 'Button'
+  children: 'Button',
+  size: 'small'
 };
 var Default = exports.Default = {
   args: _objectSpread(_objectSpread({}, args), {}, {

package/dist/components/common/SecondaryButton/styles.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { TSecondaryButtonPalette } from './palette';
+export type TButtonSize = 'small' | 'medium';
+export declare const getPaddingBySize: (size: TButtonSize) => "8px 16px" | "13px 24px";
 export declare const Inner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../Typography").TProps & import("react").RefAttributes<HTMLInputElement>, {
     $isLoading?: boolean | undefined;
 }>> & Omit<import("react").ForwardRefExoticComponent<import("../Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
@@ -7,5 +9,6 @@ export declare const Wrapper: import("styled-components").IStyledComponent<"web"
     $palette: TSecondaryButtonPalette;
     $fullWidth: boolean;
     $disabled: boolean;
+    $size: TButtonSize;
 }>>;
 export declare const LoaderWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/dist/components/common/SecondaryButton/styles.js

@@ -4,11 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.LoaderWrapper = exports.Inner = void 0;
+exports.getPaddingBySize = exports.Wrapper = exports.LoaderWrapper = exports.Inner = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../Typography");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var getPaddingBySize = exports.getPaddingBySize = function getPaddingBySize(size) {
+  if (size === 'small') {
+    return '8px 16px';
+  }
+  return '13px 24px';
+};
 var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Inner",
   componentId: "sc-ln4oiu-0"
@@ -19,25 +25,28 @@ var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typogr
 var Wrapper = exports.Wrapper = _styledComponents["default"].button.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-ln4oiu-1"
-})(["appearance:none;display:inline-block;text-decoration:none;text-align:center;position:relative;border:none;border-radius:10px;cursor:pointer;padding:13px 24px;color:", ";background-color:", ";transition:background-color 0.2s ease-in-out 0s;box-sizing:border-box;", " &:hover{", "}&:active{", "}", ""], function (_ref2) {
-  var $palette = _ref2.$palette;
-  return $palette.text;
+})(["appearance:none;display:inline-block;text-decoration:none;text-align:center;position:relative;border:none;border-radius:10px;cursor:pointer;padding:", ";color:", ";background-color:", ";transition:background-color 0.2s ease-in-out 0s;box-sizing:border-box;", " &:hover{", "}&:active{", "}", ""], function (_ref2) {
+  var $size = _ref2.$size;
+  return getPaddingBySize($size);
 }, function (_ref3) {
   var $palette = _ref3.$palette;
-  return $palette.bg;
+  return $palette.text;
 }, function (_ref4) {
-  var $fullWidth = _ref4.$fullWidth;
-  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
+  var $palette = _ref4.$palette;
+  return $palette.bg;
 }, function (_ref5) {
-  var $disabled = _ref5.$disabled,
-    $palette = _ref5.$palette;
-  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgHover);
+  var $fullWidth = _ref5.$fullWidth;
+  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
 }, function (_ref6) {
   var $disabled = _ref6.$disabled,
     $palette = _ref6.$palette;
-  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgActive);
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgHover);
 }, function (_ref7) {
-  var $disabled = _ref7.$disabled;
+  var $disabled = _ref7.$disabled,
+    $palette = _ref7.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgActive);
+}, function (_ref8) {
+  var $disabled = _ref8.$disabled;
   return $disabled && (0, _styledComponents.css)(["pointer-events:none;", "{opacity:0.5;}"], Inner);
 });
 var LoaderWrapper = exports.LoaderWrapper = _styledComponents["default"].div.withConfig({

package/dist/components/form/PhoneInput/index.js

@@ -15,6 +15,7 @@ var _useInputFocus2 = require("../../../hooks/useInputFocus");
 var _InputLabel = require("../InputLabel");
 var _PureInput = require("../PureInput");
 var _CountrySelect = require("../CountrySelect");
+var _useMedia = require("../../../hooks/useMedia");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -38,6 +39,7 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     countries = _ref.countries,
     onCountryChange = _ref.onCountryChange;
   var inputRef = (0, _react.useRef)();
+  var isMobile = (0, _useMedia.useMobile)();
   var countrySelectOptions = (0, _react.useMemo)(function () {
     return _phoneInputLogic.phoneInputLogic.getCountriesSelectOptions(countries);
   }, [countries]);
@@ -143,7 +145,7 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     label: label,
     disabled: disabled
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/_react["default"].createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/_react["default"].createElement(S.CountrySelectWrapper, null, /*#__PURE__*/_react["default"].createElement(_CountrySelect.CountrySelect, {
-    minWidth: "350px",
+    minWidth: isMobile ? '100%' : '350px',
     options: countrySelectOptions,
     onChange: handleCountryChange,
     value: country,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.94",
+    "version": "0.1.0-alpha.96",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {