@invoicebox/ui 0.1.0-alpha.21 → 0.1.0-alpha.22

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

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, FC } from 'react';
+import { TProps as TInvoiceboxSpinnerProps } from '../InvoiceboxSpinner';
+import { TSecondaryButtonPalette } from './palette';
+export type TProps = {
+    isLoading?: boolean;
+    palette?: Partial<TSecondaryButtonPalette>;
+    invoiceboxSpinnerProps?: Pick<TInvoiceboxSpinnerProps, 'palette'>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const SecondaryButton: FC<TProps>;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecondaryButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _InvoiceboxSpinner = require("../InvoiceboxSpinner");
+var _palette = require("../../../palette");
+var _excluded = ["isLoading", "palette", "invoiceboxSpinnerProps", "children", "disabled"];
+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 }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var mergedPalette = (0, _palette.useComponentPalette)('secondaryButton', palette);
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
+    disabled: disabled || isLoading,
+    $palette: mergedPalette
+  }, rest), isLoading && /*#__PURE__*/_react["default"].createElement(S.LoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_InvoiceboxSpinner.InvoiceboxSpinner, _extends({}, invoiceboxSpinnerProps, {
+    isSecondary: true,
+    width: "32px"
+  }))), /*#__PURE__*/_react["default"].createElement(S.Inner, {
+    htmlElement: "span",
+    variant: "buttonM",
+    $isLoading: isLoading
+  }, children));
+};

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { SecondaryButton } from '.';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import(".").TProps>;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof SecondaryButton>;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var _addonActions = require("@storybook/addon-actions");
+var meta = {
+  title: 'common/SecondaryButton',
+  component: _.SecondaryButton,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    disabled: false,
+    isLoading: false,
+    onClick: (0, _addonActions.action)('click'),
+    children: 'Button'
+  }
+};

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

@@ -0,0 +1,8 @@
+import { TAbstractPalette } from '../../../palette';
+export type TSecondaryButtonPalette = {
+    text: string;
+    bg: string;
+    bgHover: string;
+    bgActive: string;
+};
+export declare const generateSecondaryButtonPalette: (abstractPalette: TAbstractPalette) => TSecondaryButtonPalette;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSecondaryButtonPalette = void 0;
+var generateSecondaryButtonPalette = exports.generateSecondaryButtonPalette = function generateSecondaryButtonPalette(abstractPalette) {
+  return {
+    text: abstractPalette.primary,
+    bg: abstractPalette.neutralUsual,
+    bgHover: abstractPalette.neutralHeavy,
+    bgActive: abstractPalette.neutralMassive
+  };
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TSecondaryButtonPalette } from './palette';
+export declare const Inner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../Typography").TProps, {
+    $isLoading?: boolean | undefined;
+}>> & Omit<import("react").FC<import("../Typography").TProps>, keyof import("react").Component<any, {}, any>>;
+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;
+}>>;
+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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.LoaderWrapper = exports.Inner = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Inner",
+  componentId: "sc-ln4oiu-0"
+})(["visibility:", ";"], function (_ref) {
+  var $isLoading = _ref.$isLoading;
+  return $isLoading ? 'hidden' : 'visible';
+});
+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) {
+  var $palette = _ref2.$palette;
+  return $palette.text;
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.bg;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
+  return $palette.bgHover;
+}, function (_ref5) {
+  var $palette = _ref5.$palette;
+  return $palette.bgActive;
+}, Inner);
+var LoaderWrapper = exports.LoaderWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__LoaderWrapper",
+  componentId: "sc-ln4oiu-2"
+})(["position:absolute;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;"]);

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

@@ -1,23 +1,26 @@
-import { FC, HTMLProps } from 'react';
+import { ButtonHTMLAttributes, FC, HTMLAttributes } from 'react';
 import { typography } from './typography';
 type TDefaultElementProps = {
-    as?: never;
-} & HTMLProps<HTMLDivElement>;
+    htmlElement?: never;
+} & HTMLAttributes<HTMLDivElement>;
 type TDivProps = {
-    as: 'div';
-} & HTMLProps<HTMLDivElement>;
+    htmlElement: 'div';
+} & HTMLAttributes<HTMLDivElement>;
 type TParagraphProps = {
-    as: 'p';
-} & HTMLProps<HTMLParagraphElement>;
+    htmlElement: 'p';
+} & HTMLAttributes<HTMLParagraphElement>;
 type TSpanProps = {
-    as: 'span';
-} & HTMLProps<HTMLSpanElement>;
+    htmlElement: 'span';
+} & HTMLAttributes<HTMLSpanElement>;
 type THeadingProps = {
-    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-} & HTMLProps<HTMLHeadingElement>;
+    htmlElement: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & HTMLAttributes<HTMLHeadingElement>;
+type TButtonProps = {
+    htmlElement: 'button';
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 export type TProps = {
     variant: keyof typeof typography;
-} & ((TDefaultElementProps | TDivProps) | TParagraphProps | TSpanProps | THeadingProps);
+} & ((TDefaultElementProps | TDivProps) | TParagraphProps | TSpanProps | THeadingProps | TButtonProps);
 export declare const Typography: FC<TProps>;
 export declare const TypographyGlobalStyle: FC;
 export {};

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

@@ -8,7 +8,7 @@ exports.TypographyGlobalStyle = exports.Typography = void 0;
 var _react = _interopRequireDefault(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _reactHelmet = require("react-helmet");
-var _excluded = ["variant", "as"];
+var _excluded = ["variant", "htmlElement"];
 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,11 +17,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 Typography = exports.Typography = function Typography(_ref) {
   var variant = _ref.variant,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'div' : _ref$as,
+    _ref$htmlElement = _ref.htmlElement,
+    htmlElement = _ref$htmlElement === void 0 ? 'div' : _ref$htmlElement,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
-    as: as,
+    as: htmlElement,
     $variant: variant
   }, rest));
 };

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export { Skeleton } from './components/common/Skeleton';
 export { InvoiceboxLoader } from './components/common/InvoiceboxLoader';
 export { Typography, TypographyGlobalStyle } from './components/common/Typography';
 export { InvoiceboxSpinner } from './components/common/InvoiceboxSpinner';
+export { SecondaryButton } from './components/common/SecondaryButton';
 export { PaletteProvider } from './palette';

package/dist/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "PaletteProvider", {
     return _palette.PaletteProvider;
   }
 });
+Object.defineProperty(exports, "SecondaryButton", {
+  enumerable: true,
+  get: function get() {
+    return _SecondaryButton.SecondaryButton;
+  }
+});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
@@ -43,4 +49,5 @@ var _Skeleton = require("./components/common/Skeleton");
 var _InvoiceboxLoader = require("./components/common/InvoiceboxLoader");
 var _Typography = require("./components/common/Typography");
 var _InvoiceboxSpinner = require("./components/common/InvoiceboxSpinner");
+var _SecondaryButton = require("./components/common/SecondaryButton");
 var _palette = require("./palette");

package/dist/palette/constants.js

@@ -9,5 +9,7 @@ var defaultAbstractPalette = exports.defaultAbstractPalette = {
   secondary: '#FAD247',
   base: '#FFFFFF',
   neutralUsual: '#f1f2f6',
-  neutralLight: '#f9f9f9'
+  neutralLight: '#f9f9f9',
+  neutralHeavy: '#ececf0',
+  neutralMassive: '#dee0e7'
 };

package/dist/palette/context.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { TSkeletonPalette } from '../components/common/Skeleton/palette';
 import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
+import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
+    secondaryButton: TSecondaryButtonPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -8,7 +8,9 @@ var _react = require("react");
 var _constants = require("./constants");
 var _palette = require("../components/common/Skeleton/palette");
 var _palette2 = require("../components/common/InvoiceboxSpinner/palette");
+var _palette3 = require("../components/common/SecondaryButton/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
-  invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette)
+  invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
+  secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.d.ts

@@ -2,11 +2,13 @@ import { FC, ReactNode } from 'react';
 import { TSkeletonPalette } from '../components/common/Skeleton/palette';
 import { TAbstractPalette } from './types';
 import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
+import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
 type TProps = {
     children: ReactNode;
     abstract?: Partial<TAbstractPalette>;
     skeleton?: Partial<TSkeletonPalette>;
     invoiceboxSpinner?: Partial<TInvoiceboxSpinnerPalette>;
+    secondaryButton?: Partial<TSecondaryButtonPalette>;
 };
 export declare const PaletteProvider: FC<TProps>;
 export {};

package/dist/palette/provider.js

@@ -9,6 +9,7 @@ var _palette = require("../components/common/Skeleton/palette");
 var _constants = require("./constants");
 var _context = require("./context");
 var _palette2 = require("../components/common/InvoiceboxSpinner/palette");
+var _palette3 = require("../components/common/SecondaryButton/palette");
 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 _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); }
@@ -21,7 +22,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
   var children = _ref.children,
     _abstract = _ref["abstract"],
     skeleton = _ref.skeleton,
-    invoiceboxSpinner = _ref.invoiceboxSpinner;
+    invoiceboxSpinner = _ref.invoiceboxSpinner,
+    secondaryButton = _ref.secondaryButton;
   var mergedAbstractPalette = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _constants.defaultAbstractPalette), _abstract);
   }, [_abstract]);
@@ -31,12 +33,16 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
   var mergedInvoiceboxSpinnerPalette = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, (0, _palette2.generateInvoiceboxSpinnerPalette)(mergedAbstractPalette)), invoiceboxSpinner);
   }, [mergedAbstractPalette, invoiceboxSpinner]);
+  var mergedSecondaryButtonPalette = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, (0, _palette3.generateSecondaryButtonPalette)(mergedAbstractPalette)), secondaryButton);
+  }, [mergedAbstractPalette, secondaryButton]);
   var value = (0, _react.useMemo)(function () {
     return {
       skeleton: mergedSkeletonPalette,
-      invoiceboxSpinner: mergedInvoiceboxSpinnerPalette
+      invoiceboxSpinner: mergedInvoiceboxSpinnerPalette,
+      secondaryButton: mergedSecondaryButtonPalette
     };
-  }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette]);
+  }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette, mergedSecondaryButtonPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {
     value: value
   }, children);

package/dist/palette/types.d.ts

@@ -1,7 +1,9 @@
 export type TAbstractPalette = {
-    neutralUsual: string;
-    neutralLight: string;
     primary: string;
     secondary: string;
     base: string;
+    neutralUsual: string;
+    neutralLight: string;
+    neutralHeavy: string;
+    neutralMassive: string;
 };

package/dist/palette/usePalette.d.ts

@@ -1,4 +1,5 @@
 export declare const usePalette: () => {
     skeleton: import("../components/common/Skeleton/palette").TSkeletonPalette;
     invoiceboxSpinner: import("../components/common/InvoiceboxSpinner/palette").TInvoiceboxSpinnerPalette;
+    secondaryButton: import("../components/common/SecondaryButton/palette").TSecondaryButtonPalette;
 };

package/package.json

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