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

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

@@ -5,5 +5,6 @@ export type TProps = {
     isLoading?: boolean;
     palette?: Partial<TSecondaryButtonPalette>;
     invoiceboxSpinnerProps?: Pick<TInvoiceboxSpinnerProps, 'palette'>;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+    fullWidth?: boolean;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
 export declare const SecondaryButton: FC<TProps>;

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", "children", "disabled"];
+var _excluded = ["isLoading", "palette", "invoiceboxSpinnerProps", "fullWidth", "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 }; }
@@ -20,18 +20,21 @@ var SecondaryButton = exports.SecondaryButton = function SecondaryButton(_ref) {
   var isLoading = _ref.isLoading,
     palette = _ref.palette,
     invoiceboxSpinnerProps = _ref.invoiceboxSpinnerProps,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     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
+    $palette: mergedPalette,
+    $fullWidth: fullWidth
   }, 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",
+    element: "span",
     variant: "buttonM",
     $isLoading: isLoading
   }, children));

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

@@ -16,6 +16,7 @@ var Default = exports.Default = {
   args: {
     disabled: false,
     isLoading: false,
+    fullWidth: false,
     onClick: (0, _addonActions.action)('click'),
     children: 'Button'
   }

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

@@ -5,5 +5,6 @@ export declare const Inner: import("styled-components").IStyledComponent<"web",
 }>> & 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;
+    $fullWidth: 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

@@ -1,12 +1,14 @@
 "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.Wrapper = exports.LoaderWrapper = exports.Inner = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../Typography");
-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; }
 var Inner = exports.Inner = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Inner",
   componentId: "sc-ln4oiu-0"
@@ -17,17 +19,20 @@ 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) {
+})(["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;
+  var $fullWidth = _ref4.$fullWidth;
+  return $fullWidth && (0, _styledComponents.css)(["box-sizing:border-box;width:100%;"]);
 }, function (_ref5) {
   var $palette = _ref5.$palette;
+  return $palette.bgHover;
+}, function (_ref6) {
+  var $palette = _ref6.$palette;
   return $palette.bgActive;
 }, Inner);
 var LoaderWrapper = exports.LoaderWrapper = _styledComponents["default"].div.withConfig({

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

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

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", "htmlElement"];
+var _excluded = ["variant", "element"];
 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$htmlElement = _ref.htmlElement,
-    htmlElement = _ref$htmlElement === void 0 ? 'div' : _ref$htmlElement,
+    _ref$element = _ref.element,
+    element = _ref$element === void 0 ? 'div' : _ref$element,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
-    as: htmlElement,
+    as: element,
     $variant: variant
   }, rest));
 };

package/package.json

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