jfs-components 0.0.56 → 0.0.57

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js

@@ -17,16 +17,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /**
  * TransactionBubble — Figma node 1517:1155.
  *
- * Layout (single horizontal row inside a rounded bordered pill):
+ * Layout (vertical stack inside a rounded bordered pill):
  *
  *   ┌──────────────────────────────────────────────┐
- *   │  Description                  Status · Date  │
- *   │  ₹56                                    ›    │
+ *   │  Description                                 │
+ *   │  ₹56                                        │
+ *   │  [slot / children content]                   │
+ *   │  ⚠ Expired · 20 Mar 2025               ›    │
  *   └──────────────────────────────────────────────┘
  *
- * Left column: description text + MoneyValue, stacked vertically with `transactionBubble/gap`.
- * Right column: TransactionStatus + NavArrow, stacked vertically with `transactionBubble/statusWrap/gap`,
- *               right-aligned.
+ * moneyValueWrap: description + MoneyValue, vertical with `transactionBubble/wrap/gap`.
+ * slotWrap: children (optional), rendered between moneyValueWrap and statusWrap.
+ * statusWrap: TransactionStatus + NavArrow, horizontal row with `transactionBubble/statusWrap/gap`.
+ * Container gap between sections: `transactionBubble/gap`.
  */
 function TransactionBubble({
   description = 'Payment to Uber India',
@@ -54,12 +57,13 @@ function TransactionBubble({
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/background', resolvedModes) || '#ffffff';
   const borderColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/color', resolvedModes) || '#e5e5e5';
   const bubbleGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/gap', resolvedModes)) || 8;
-  const wrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/wrap/gap', resolvedModes)) || 8;
+  const moneyValueWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/wrap/gap', resolvedModes)) || 8;
   const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/color', resolvedModes) || '#24262b';
   const descriptionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontSize', resolvedModes)) || 14;
   const descriptionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/lineHeight', resolvedModes)) || 17;
   const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var';
   const statusWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', resolvedModes)) || 4;
+  const statusWrapHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/height', resolvedModes)) || 18;
   const containerStyle = {
     padding,
     borderRadius: radius,
@@ -83,11 +87,13 @@ function TransactionBubble({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-  const rightColumn = processedStatusSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const statusRow = processedStatusSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: {
-      alignItems: 'flex-end',
-      justifyContent: 'flex-end',
-      gap: statusWrapGap
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: statusWrapGap,
+      height: statusWrapHeight
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TransactionStatus.default, {
       status: status,
@@ -100,13 +106,11 @@ function TransactionBubble({
   });
   const mainContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: {
-      flexDirection: 'row',
-      gap: wrapGap
+      gap: bubbleGap
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
-        flex: 1,
-        gap: bubbleGap
+        gap: moneyValueWrapGap
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: descriptionStyle,
@@ -117,10 +121,10 @@ function TransactionBubble({
         currency: currency,
         modes: resolvedModes
       })]
-    }), rightColumn]
+    }), processedChildren, statusRow]
   });
   if (onPress) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
       onPress: onPress,
       style: ({
         pressed
@@ -132,14 +136,14 @@ function TransactionBubble({
       accessibilityHint: accessibilityHint,
       ...webProps,
       ...rest,
-      children: [mainContent, processedChildren]
+      children: mainContent
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityLabel: defaultAccessibilityLabel,
     accessibilityHint: accessibilityHint,
-    children: [mainContent, processedChildren]
+    children: mainContent
   });
 }
 var _default = exports.default = TransactionBubble;