@invoicebox/ui 0.1.0-alpha.24 → 0.1.0-alpha.26

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

@@ -1,10 +1,19 @@
-import { ButtonHTMLAttributes, FC } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
 import { TProps as TInvoiceboxSpinnerProps } from '../InvoiceboxSpinner';
 import { TSecondaryButtonPalette } from './palette';
-export type TProps = {
+type TButtonProps = {
+    element?: 'button';
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+type TAnchorProps = {
+    element: 'a';
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export type TProps = (TButtonProps | TAnchorProps) & {
     isLoading?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: never;
     palette?: Partial<TSecondaryButtonPalette>;
     invoiceboxSpinnerProps?: Pick<TInvoiceboxSpinnerProps, 'palette'>;
-    fullWidth?: boolean;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
+};
 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 = ["isLoading", "palette", "invoiceboxSpinnerProps", "fullWidth", "children", "disabled"];
+var _excluded = ["element", "isLoading", "fullWidth", "disabled", "className", "palette", "invoiceboxSpinnerProps", "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 }; }
@@ -17,17 +17,27 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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; }
 var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
-  var isLoading = _ref.isLoading,
-    palette = _ref.palette,
-    invoiceboxSpinnerProps = _ref.invoiceboxSpinnerProps,
+  var _ref$element = _ref.element,
+    element = _ref$element === void 0 ? 'button' : _ref$element,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    palette = _ref.palette,
+    invoiceboxSpinnerProps = _ref.invoiceboxSpinnerProps,
     children = _ref.children,
-    disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
   var mergedPalette = (0, _palette.useComponentPalette)('secondaryButton', palette);
+  var isDisabled = disabled || isLoading;
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
-    disabled: disabled || isLoading,
+    as: element
+    /* реализует disabled логику компонента */,
+    $disabled: isDisabled
+    /* отправляет аргумент, для чистоты на уровне html атрибутов, на логику не влияет */,
+    disabled: element === 'button' ? isDisabled : undefined,
     $palette: mergedPalette,
     $fullWidth: fullWidth
   }, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner, _extends({}, invoiceboxSpinnerProps, {

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

@@ -8,3 +8,4 @@ declare const meta: {
 };
 export default meta;
 export declare const Default: StoryObj<typeof SecondaryButton>;
+export declare const Link: StoryObj<typeof SecondaryButton>;

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

@@ -3,21 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Link = exports.Default = void 0;
 var _ = require(".");
 var _addonActions = require("@storybook/addon-actions");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var meta = {
   title: 'common/SecondaryButton',
   component: _.SecondaryButton,
   tags: ['autodocs']
 };
 var _default = exports["default"] = meta;
+var args = {
+  disabled: false,
+  isLoading: false,
+  fullWidth: false,
+  onClick: (0, _addonActions.action)('click'),
+  children: 'Button'
+};
 var Default = exports.Default = {
-  args: {
-    disabled: false,
-    isLoading: false,
-    fullWidth: false,
-    onClick: (0, _addonActions.action)('click'),
-    children: 'Button'
-  }
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    element: 'button'
+  })
+};
+var Link = exports.Link = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    element: 'a',
+    href: 'https://google.com'
+  })
 };

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

@@ -6,5 +6,6 @@ export declare const Inner: import("styled-components").IStyledComponent<"web",
 export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $palette: TSecondaryButtonPalette;
     $fullWidth: boolean;
+    $disabled: boolean;
 }>>;
 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

@@ -19,7 +19,7 @@ var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typogr
 var Wrapper = exports.Wrapper = _styledComponents["default"].button.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-ln4oiu-1"
-})(["position:relative;border:none;border-radius:10px;cursor:pointer;padding:13px 24px;color:", ";background-color:", ";transition:background-color 0.2s ease-in-out 0s;", " &:hover:not(:disabled){background-color:", ";}&:active:not(:disabled){background-color:", ";}&:disabled{cursor:not-allowed;", "{opacity:0.5;}}"], function (_ref2) {
+})(["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;
 }, function (_ref3) {
@@ -27,14 +27,19 @@ var Wrapper = exports.Wrapper = _styledComponents["default"].button.withConfig({
   return $palette.bg;
 }, function (_ref4) {
   var $fullWidth = _ref4.$fullWidth;
-  return $fullWidth && (0, _styledComponents.css)(["box-sizing:border-box;width:100%;"]);
+  return $fullWidth && (0, _styledComponents.css)(["width:100%;"]);
 }, function (_ref5) {
-  var $palette = _ref5.$palette;
-  return $palette.bgHover;
+  var $disabled = _ref5.$disabled,
+    $palette = _ref5.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgHover);
 }, function (_ref6) {
-  var $palette = _ref6.$palette;
-  return $palette.bgActive;
-}, Inner);
+  var $disabled = _ref6.$disabled,
+    $palette = _ref6.$palette;
+  return !$disabled && (0, _styledComponents.css)(["background-color:", ";"], $palette.bgActive);
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
+  return $disabled && (0, _styledComponents.css)(["pointer-events:none;", "{opacity:0.5;}"], Inner);
+});
 var LoaderWrapper = exports.LoaderWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__LoaderWrapper",
   componentId: "sc-ln4oiu-2"

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

@@ -1,10 +1,7 @@
 import { ButtonHTMLAttributes, FC, HTMLAttributes } from 'react';
 import { typography } from './typography';
-type TDefaultElementProps = {
-    element?: never;
-} & HTMLAttributes<HTMLDivElement>;
 type TDivProps = {
-    element: 'div';
+    element?: 'div';
 } & HTMLAttributes<HTMLDivElement>;
 type TParagraphProps = {
     element: 'p';
@@ -20,7 +17,7 @@ type TButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export type TProps = {
     variant: keyof typeof typography;
-} & ((TDefaultElementProps | TDivProps) | TParagraphProps | TSpanProps | THeadingProps | TButtonProps);
+} & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps);
 export declare const Typography: FC<TProps>;
 export declare const TypographyGlobalStyle: FC;
 export {};

package/package.json

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