@invoicebox/ui 0.1.0-alpha.101 → 0.1.0-alpha.103

package/dist/components/payment/PaymentCard/index.js

@@ -44,6 +44,7 @@ var PaymentCard = exports.PaymentCard = function PaymentCard(_ref) {
     $isActive: isActive
   }, icon || /*#__PURE__*/_react["default"].createElement(_DefaultLogo.DefaultLogo, null)), comment && /*#__PURE__*/_react["default"].createElement(S.Comment, {
     $pallete: palette,
+    $isActive: isActive,
     variant: "captionRegular"
   }, comment));
 };

package/dist/components/payment/PaymentCard/index.stories.d.ts

@@ -4,3 +4,4 @@ import { PaymentCard } from '.';
 declare const meta: Meta<typeof PaymentCard>;
 export default meta;
 export declare const Default: StoryObj<typeof PaymentCard>;
+export declare const WithChildren: StoryObj<typeof PaymentCard>;

package/dist/components/payment/PaymentCard/index.stories.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithChildren = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var meta = {
   title: 'payment/PaymentCard',
   component: _.PaymentCard,
@@ -16,7 +18,21 @@ var Default = exports.Default = {
     title: 'Альфа-банк',
     isActive: false,
     isDisabled: false,
-    children: 'children',
+    comment: 'Комиссия 10 руб'
+  }
+};
+var WithChildren = exports.WithChildren = {
+  args: {
+    title: 'Альфа-банк',
+    isActive: false,
+    isDisabled: false,
+    children: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: 22,
+        width: 121,
+        background: 'green'
+      }
+    }),
     comment: 'Комиссия 10 руб'
   }
 };

package/dist/components/payment/PaymentCard/palette.d.ts

@@ -9,5 +9,6 @@ export type TPaymentCardPalette = {
     radioBgActive: string;
     radioBorderActive: string;
     radioBorderInactive: string;
+    commentBg: string;
 };
 export declare const generatePaymentCardPalette: (abstractPalette: TAbstractPalette) => TPaymentCardPalette;

package/dist/components/payment/PaymentCard/palette.js

@@ -16,6 +16,7 @@ var generatePaymentCardPalette = exports.generatePaymentCardPalette = function g
     comment: abstractPalette.neutralBrutal,
     radioBgActive: abstractPalette.base,
     radioBorderActive: abstractPalette.secondary,
-    radioBorderInactive: abstractPalette.primary
+    radioBorderInactive: abstractPalette.primary,
+    commentBg: abstractPalette.base
   };
 };

package/dist/components/payment/PaymentCard/styles.d.ts

@@ -19,4 +19,5 @@ export declare const IconWrapper: import("styled-components").IStyledComponent<"
 }>>;
 export declare const Comment: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>, {
     $pallete: TPaymentCardPalette;
+    $isActive: boolean;
 }>> & Omit<import("react").ForwardRefExoticComponent<import("../../common/Typography").TProps & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/payment/PaymentCard/styles.js

@@ -51,7 +51,14 @@ var IconWrapper = exports.IconWrapper = _styledComponents["default"].div.withCon
 var Comment = exports.Comment = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Comment",
   componentId: "sc-ykxt4t-5"
-})(["color:", ";position:absolute;bottom:4px;right:10px;"], function (_ref6) {
+})(["color:", ";position:absolute;bottom:0;right:0;padding:0 8px;box-sizing:border-box;background:", ";border-radius:6px 0px 0px 0px;", ""], function (_ref6) {
   var $pallete = _ref6.$pallete;
   return $pallete.comment;
+}, function (_ref7) {
+  var $pallete = _ref7.$pallete;
+  return $pallete.commentBg;
+}, function (_ref8) {
+  var $isActive = _ref8.$isActive,
+    $pallete = _ref8.$pallete;
+  return $isActive ? (0, _styledComponents.css)(["border-top:1px solid ", ";border-left:1px solid ", ";"], $pallete.borderActive, $pallete.borderActive) : (0, _styledComponents.css)(["border-top:1px solid ", ";border-left:1px solid ", ";"], $pallete.borderInactive, $pallete.borderInactive);
 });

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
 export { phoneLogic } from './components/form/PhoneInput/externalPhoneLogic';
 export { BgCard } from './components/common/BgCard';
 export { ToastContainer, toast } from './components/common/Toast';
+export { PaymentCard } from './components/payment/PaymentCard';
 export { PaletteProvider, defaultAbstractPalette } from './palette';
 export type { TAbstractPalette } from './palette';
 export { useOutsideClick } from './hooks/useOutsideClick';

package/dist/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "PaletteProvider", {
     return _palette.PaletteProvider;
   }
 });
+Object.defineProperty(exports, "PaymentCard", {
+  enumerable: true,
+  get: function get() {
+    return _PaymentCard.PaymentCard;
+  }
+});
 Object.defineProperty(exports, "PhoneInput", {
   enumerable: true,
   get: function get() {
@@ -230,6 +236,7 @@ var _PhoneInput = require("./components/form/PhoneInput");
 var _externalPhoneLogic = require("./components/form/PhoneInput/externalPhoneLogic");
 var _BgCard = require("./components/common/BgCard");
 var _Toast = require("./components/common/Toast");
+var _PaymentCard = require("./components/payment/PaymentCard");
 var _palette = require("./palette");
 var _useOutsideClick = require("./hooks/useOutsideClick");
 var _useInputFocus = require("./hooks/useInputFocus");

package/package.json

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