@invoicebox/ui 0.1.0-alpha.102 → 0.1.0-alpha.104

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

@@ -14,6 +14,7 @@ export declare const typography: {
     bodyMBold: import("styled-components").RuleSet<object>;
     bodyMUnderlined: import("styled-components").RuleSet<object>;
     captionRegular: import("styled-components").RuleSet<object>;
+    captionSRegular: import("styled-components").RuleSet<object>;
     captionUnderlined: import("styled-components").RuleSet<object>;
     smallMedium: import("styled-components").RuleSet<object>;
     labelsAndHints: import("styled-components").RuleSet<object>;

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

@@ -22,6 +22,7 @@ var typography = exports.typography = {
   bodyMBold: (0, _styledComponents.css)(["font-size:14px;font-weight:700;line-height:20px;"]),
   bodyMUnderlined: (0, _styledComponents.css)(["font-size:14px;font-weight:400;line-height:20px;text-decoration:underline;"]),
   captionRegular: (0, _styledComponents.css)(["font-size:12px;font-weight:400;line-height:18px;"]),
+  captionSRegular: (0, _styledComponents.css)(["font-size:10px;font-weight:400;line-height:16px;"]),
   captionUnderlined: (0, _styledComponents.css)(["font-size:12px;font-weight:400;line-height:18px;text-decoration:underline;"]),
   smallMedium: (0, _styledComponents.css)(["font-size:12px;font-weight:500;line-height:16px;"]),
   labelsAndHints: (0, _styledComponents.css)(["font-size:12px;font-weight:400;line-height:16px;"])

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,
-    variant: "captionRegular"
+    $isActive: isActive,
+    variant: "captionSRegular"
   }, 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/package.json

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