jfs-components 0.1.8 → 0.1.12

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -14,9 +14,18 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Badge = _interopRequireDefault(require("../Badge/Badge"));
 var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Accepted `type` values. The canonical (and historical) values are lowercase
+ * (`'cta' | 'rating' | 'sip'`). The Figma variant names are PascalCase
+ * (`'CTA' | 'Rating' | 'Sip'`) — we accept those too and normalize internally
+ * so callers can pass either casing without a breaking change.
+ */
+
 const optionalTokenAvailability = new Map();
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
 function getOptionalVariableByName(name, modes, fallback) {
   let isAvailable = optionalTokenAvailability.get(name);
   if (isAvailable === undefined) {
@@ -39,11 +48,16 @@ function CardCTA({
   showRatingActions = true,
   onPressLike,
   onPressDislike,
+  headline = 'Headline',
+  description = 'Description',
+  subtitle = 'Subtitle',
+  avatarSource,
   modes: propModes = _reactUtils.EMPTY_MODES,
   iconSlot,
   buttonSlot,
   ratingBadgeSlot,
   ratingActionsSlot,
+  avatarSlot,
   style
 }) {
   const {
@@ -53,7 +67,10 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
-  const isRating = type === 'rating';
+  // Accept both lowercase (canonical) and Figma PascalCase variant names.
+  const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
+  const isRating = normalizedType === 'rating';
+  const isSip = normalizedType === 'sip';
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
   const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
@@ -67,13 +84,13 @@ function CardCTA({
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes) || '#0c0d10';
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes) || 'JioType Var';
   const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 17.6;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 18;
   const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
   const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes) || '#13002d';
   const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 10;
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 14;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 17;
   const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
@@ -82,6 +99,33 @@ function CardCTA({
   const ratingFooterPaddingH = getOptionalVariableByName('cardCTA/rating/footer/horizontal', modes, 16);
   const ratingFooterPaddingTop = getOptionalVariableByName('cardCTA/rating/footer/top', modes, 0);
   const ratingFooterPaddingBottom = getOptionalVariableByName('cardCTA/rating/footer/bottom', modes, 12);
+
+  // Sip variant footer text block (Headline / Description / Subtitle). These
+  // `ccCard/*` tokens were introduced for the Sip layout — resolve them
+  // optionally so older token snapshots that lack them fall back gracefully.
+  const sipFooterGap = getOptionalVariableByName('ccCard/footer/textWrap/gap', modes, 4);
+  const sipHeadlineColor = getOptionalVariableByName('ccCard/headline/color', modes, '#707275');
+  const sipHeadlineFontFamily = getOptionalVariableByName('ccCard/headline/fontFamily', modes, 'JioType Var');
+  const sipHeadlineFontSize = getOptionalVariableByName('ccCard/headline/fontSize', modes, 10);
+  const sipHeadlineLineHeight = getOptionalVariableByName('ccCard/headline/lineHeight', modes, 13);
+  const sipHeadlineFontWeightRaw = getOptionalVariableByName('ccCard/headline/fontWeight', modes, 500);
+  const sipHeadlineFontWeight = typeof sipHeadlineFontWeightRaw === 'number' ? sipHeadlineFontWeightRaw.toString() : sipHeadlineFontWeightRaw;
+  const sipDescriptionColor = getOptionalVariableByName('ccCard/title/color', modes, '#081007');
+  const sipDescriptionFontFamily = getOptionalVariableByName('ccCard/title/fontFamily', modes, 'JioType Var');
+  const sipDescriptionFontSize = getOptionalVariableByName('ccCard/title/fontSize', modes, 14);
+  const sipDescriptionLineHeight = getOptionalVariableByName('ccCard/title/lineHeight', modes, 15);
+  const sipDescriptionFontWeightRaw = getOptionalVariableByName('ccCard/title/fontWeight', modes, 700);
+  const sipDescriptionFontWeight = typeof sipDescriptionFontWeightRaw === 'number' ? sipDescriptionFontWeightRaw.toString() : sipDescriptionFontWeightRaw;
+  const sipSubtitleColor = getOptionalVariableByName('ccCard/subtitle/color', modes, '#707275');
+  const sipSubtitleFontFamily = getOptionalVariableByName('ccCard/subtitle/fontFamily', modes, 'JioType Var');
+  const sipSubtitleFontSize = getOptionalVariableByName('ccCard/subtitle/fontSize', modes, 10);
+  const sipSubtitleLineHeight = getOptionalVariableByName('ccCard/subtitle/lineHeight', modes, 13);
+  const sipSubtitleFontWeightRaw = getOptionalVariableByName('ccCard/subtitle/fontWeight', modes, 500);
+  const sipSubtitleFontWeight = typeof sipSubtitleFontWeightRaw === 'number' ? sipSubtitleFontWeightRaw.toString() : sipSubtitleFontWeightRaw;
+  const avatarModes = {
+    ...modes,
+    'Avatar Size': 'L'
+  };
   const buttonModes = {
     ...modes,
     AppearanceBrand: 'Secondary',
@@ -98,25 +142,72 @@ function CardCTA({
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = _react.default.useState(null);
   const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes) || 20;
   const buttonBorderSize = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', buttonModes) ?? 1;
-  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
-  const handleButtonLabelTextLayout = _react.default.useCallback(event => {
-    const lines = event?.nativeEvent?.lines;
-    if (!Array.isArray(lines) || lines.length === 0) return;
-    const nextWidth = Math.ceil(lines.reduce((sum, line) => sum + (typeof line?.width === 'number' ? line.width : 0), 0));
-    if (nextWidth <= 0) return;
-    setMeasuredButtonLabelWidth(currentWidth => {
-      if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
-        return currentWidth;
-      }
-      return nextWidth;
-    });
+  // Small safety pad so sub-pixel rounding between the measure pass and the
+  // rendered glyph run can never clip the final character.
+  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2 + 2);
+
+  // ROOT-CAUSE FIX for the Android "jumping button" feedback loop + clipping.
+  //
+  // Previously the *visible* label measured itself via `onTextLayout` and we
+  // fed that width straight back onto the same Button. Because the button is
+  // width-constrained by its parent, Android clamps the overflowing text and
+  // even character-breaks a single word ("Save" -> "Sav"/"e"); the re-applied
+  // width re-triggers layout, producing an endless ~60fps width oscillation.
+  //
+  // We now measure an *off-screen* copy of the label, laid out at an
+  // effectively unbounded width, so its reported single-line width is
+  // intrinsic and constant regardless of the button's applied width — the
+  // measurement can no longer depend on the value it produces, so the loop is
+  // impossible. Crucially the measurer reuses the Button's own resolved label
+  // styles (passed into `renderContent`), so the measured font matches the
+  // rendered font exactly and the width is never an under-estimate. The label
+  // is always a single line that overflows rather than wraps or truncates.
+  const handleMeasureTextLayout = _react.default.useCallback(event => {
+    const line = event?.nativeEvent?.lines?.[0];
+    const width = line && typeof line.width === 'number' ? line.width : 0;
+    if (width <= 0) return;
+    setMeasuredButtonLabelWidth(currentWidth => currentWidth !== null && Math.abs(currentWidth - width) < 0.5 ? currentWidth : Math.ceil(width));
   }, []);
+
+  // Off-screen measurer wrapper: absolute + opacity 0 + pointerEvents none =>
+  // out of flow, invisible, never intercepts touches, zero layout impact.
+  const measurerWrapStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    opacity: 0
+  };
+
+  // Renders the visible single-line label (never wraps, never ellipsizes) plus
+  // the co-located off-screen measurer that shares the Button's exact label
+  // styles. `width: 9999` forces the measurer onto one line so `onTextLayout`
+  // reports the true intrinsic width.
+  const renderButtonContent = labelExtraStyle => labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "clip",
+      style: [labelStyles, labelExtraStyle],
+      children: nonWrappingButtonLabel
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: measurerWrapStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [labelStyles, {
+          width: 9999
+        }],
+        onTextLayout: handleMeasureTextLayout,
+        children: nonWrappingButtonLabel
+      })
+    })]
+  });
   const containerStyle = {
     backgroundColor: background,
     borderRadius: radius,
     borderWidth: borderSize,
     borderColor,
-    flexDirection: isRating ? 'column' : 'row',
+    flexDirection: isRating || isSip ? 'column' : 'row',
     overflow: 'visible'
   };
 
@@ -202,6 +293,47 @@ function CardCTA({
     lineHeight: bodyLineHeight,
     fontWeight: bodyFontWeight
   };
+  const sipWrapStyle = {
+    width: '100%',
+    paddingHorizontal: leftPaddingH,
+    paddingVertical: leftPaddingV,
+    gap: leftGap,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    overflow: 'visible'
+  };
+  const sipFooterTextWrapStyle = {
+    gap: sipFooterGap,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    minWidth: 0
+  };
+  const sipDescriptionWrapStyle = {
+    flexDirection: 'row',
+    gap: sipFooterGap,
+    alignItems: 'flex-end'
+  };
+  const sipHeadlineStyle = {
+    color: sipHeadlineColor,
+    fontFamily: sipHeadlineFontFamily,
+    fontSize: sipHeadlineFontSize,
+    lineHeight: sipHeadlineLineHeight,
+    fontWeight: toWeight(sipHeadlineFontWeightRaw)
+  };
+  const sipDescriptionStyle = {
+    color: sipDescriptionColor,
+    fontFamily: sipDescriptionFontFamily,
+    fontSize: sipDescriptionFontSize,
+    lineHeight: sipDescriptionLineHeight,
+    fontWeight: toWeight(sipDescriptionFontWeightRaw)
+  };
+  const sipSubtitleStyle = {
+    color: sipSubtitleColor,
+    fontFamily: sipSubtitleFontFamily,
+    fontSize: sipSubtitleFontSize,
+    lineHeight: sipSubtitleLineHeight,
+    fontWeight: toWeight(sipSubtitleFontWeightRaw)
+  };
   const ratingContentStyle = {
     paddingHorizontal: ratingContentPaddingH,
     paddingVertical: ratingContentPaddingV,
@@ -248,6 +380,52 @@ function CardCTA({
     flexShrink: 0,
     flexWrap: 'nowrap'
   };
+  if (isSip) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: sipWrapStyle,
+        children: [avatarSlot ? (0, _reactUtils.cloneChildrenWithModes)(avatarSlot, avatarModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          style: "Image",
+          imageSource: avatarSource,
+          modes: avatarModes
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: sipFooterTextWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: sipHeadlineStyle,
+            children: headline
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: sipDescriptionWrapStyle,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: sipDescriptionStyle,
+              children: description
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: sipSubtitleStyle,
+              children: subtitle
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: buttonWrapStyle,
+          children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: buttonStyle,
+            renderContent: renderButtonContent(buttonLabelStyle)
+          })
+        })]
+      })
+    });
+  }
   if (isRating) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
@@ -275,11 +453,7 @@ function CardCTA({
             onPress: onPressButton || (() => {}),
             modes: buttonModes,
             style: ratingButtonStyle,
-            renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              onTextLayout: handleButtonLabelTextLayout,
-              style: [labelStyles, ratingButtonLabelStyle],
-              children: nonWrappingButtonLabel
-            })
+            renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
         }), showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
           modes: iconButtonModes,
@@ -320,11 +494,7 @@ function CardCTA({
           onPress: onPressButton || (() => {}),
           modes: buttonModes,
           style: buttonStyle,
-          renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            onTextLayout: handleButtonLabelTextLayout,
-            style: [labelStyles, buttonLabelStyle],
-            children: nonWrappingButtonLabel
-          })
+          renderContent: renderButtonContent(buttonLabelStyle)
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -36,7 +36,9 @@ function CardInsight({
   style
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 16;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 12;
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/borderWidth', modes) ?? 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/border/color', modes) ?? '#ffffff';
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/horizontal', modes) ?? 12;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/vertical', modes) ?? 16;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/gap', modes) ?? 12;
@@ -109,6 +111,8 @@ function CardInsight({
       width,
       backgroundColor: background,
       borderRadius: radius,
+      borderWidth,
+      borderColor,
       paddingHorizontal,
       paddingVertical,
       gap,

package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js

@@ -36,8 +36,11 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 const getStrokeColor = (style, fallback) => {
+  // `StyleSheet.flatten(undefined)` returns `undefined`, so guard before
+  // reading `backgroundColor` — otherwise omitting the optional style prop
+  // crashes with "Cannot read property 'backgroundColor' of undefined".
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return typeof flattened?.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBar({
   value = 70,
@@ -51,6 +54,7 @@ function CircularProgressBar({
   valueStyle,
   supportTextStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -175,11 +179,11 @@ function CircularProgressBar({
       pointerEvents: "none",
       children: [hasSupportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [computedSupportTextStyle, supportTextStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: supportText
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [computedValueStyle, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: displayValue
       })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMinus.IconMinus, {

package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -36,7 +36,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getBackgroundColor = (style, fallback) => {
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBarDoted({
   value = 72,
@@ -59,6 +59,7 @@ function CircularProgressBarDoted({
   scoreLabelStyle,
   tierLabelStyle,
   accessibilityLabel,
+  disableTruncation,
   onLayout,
   ...rest
 }) {
@@ -193,7 +194,7 @@ function CircularProgressBarDoted({
   };
   const trendContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: [computedTierLabelStyle, tierLabelStyle],
       children: tierLabel
     }), showChevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconChevronright.IconChevronright, {

package/lib/commonjs/components/CircularRating/CircularRating.js

@@ -96,6 +96,7 @@ function CircularRating({
   footerTextStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -135,7 +136,7 @@ function CircularRating({
       style: [tokens.footerStyle, footerStyle],
       children: processedFooterSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           style: [tokens.footerTextStyle, footerTextStyle],
           children: footerText
         }), showFooterIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/ClusterBubble/ClusterBubble.js

@@ -88,7 +88,8 @@ function ClusterBubble({
   circleStyle,
   style,
   modes: propModes = _reactUtils.EMPTY_MODES,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -135,7 +136,7 @@ function ClusterBubble({
     if (typeof node === 'string' || typeof node === 'number') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [baseStyle, override],
-        numberOfLines: 2,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
         children: node
       });
     }

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _Accordion = _interopRequireDefault(require("../Accordion/Accordion"));
+var _Table = _interopRequireDefault(require("../Table/Table"));
 var _Image = _interopRequireDefault(require("../Image/Image"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
@@ -109,7 +110,8 @@ function CompareTable({
   addColumnLabel = 'Add a card',
   maxColumns = 4,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
@@ -123,6 +125,11 @@ function CompareTable({
   const cardLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
   const cardLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontweight', modes) ?? 700;
   const imageRadius = (0, _figmaVariablesResolver.getVariableByName)('image/radius', modes) ?? 8;
+  // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
+  // The published token store is still out of sync (the variable resolves to
+  // `0` in the design), so the read falls back to `0` and will pick up a
+  // rounded value automatically once the store syncs.
+  const cardRadius = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/radius', modes) ?? 0;
 
   // --- add-a-card icon button tokens ---------------------------------------
   // padding/size/border come from the shared iconButton tokens; the filled
@@ -132,6 +139,9 @@ function CompareTable({
   const addBorderSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/size', modes) ?? 1;
   const addPadding = (0, _figmaVariablesResolver.getVariableByName)('iconButton/padding', modes) ?? 11;
   const addIconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', modes) ?? 18;
+  // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+  // circle"), mirroring IconButton's own resolution.
+  const addRadius = (0, _figmaVariablesResolver.getVariableByName)('iconButton/radius', modes) ?? 9999;
   const addBg = ADD_BUTTON_BG;
   const addIconColor = ADD_BUTTON_ICON_COLOR;
 
@@ -156,6 +166,8 @@ function CompareTable({
   const cellPaddingV = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/vertical', modes) ?? 12;
   const columnCount = columns.length;
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
+  /** Grid columns shared by the selection-card row and every table row. */
+  const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -190,6 +202,7 @@ function CompareTable({
     minWidth: 0,
     minHeight: 147,
     backgroundColor: cardBg,
+    borderRadius: cardRadius,
     alignItems: 'center',
     justifyContent: 'center',
     gap: cardGap,
@@ -214,7 +227,7 @@ function CompareTable({
         accessibilityLabel: column.label
       }), column.label != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: cardLabelStyle,
-        numberOfLines: 2,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
         children: column.label
       }), column.actionLabel != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: column.onActionPress,
@@ -251,7 +264,7 @@ function CompareTable({
       style: {
         width: addPadding * 2 + addIconSize,
         height: addPadding * 2 + addIconSize,
-        borderRadius: 9999,
+        borderRadius: addRadius,
         borderWidth: addBorderSize,
         borderColor: addBorderColor,
         backgroundColor: addBg,
@@ -267,7 +280,7 @@ function CompareTable({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: cardLabelStyle,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: addColumnLabel
     })]
   }, "__add_card__");
@@ -290,53 +303,72 @@ function CompareTable({
     }
     return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
   };
-  const renderTable = section => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+
+  // Renders a section's comparison grid using the shared `Table` component.
+  // CompareTable keeps ownership of token resolution and passes the resolved
+  // values as style overrides so the appearance is byte-identical to the
+  // previous hand-rolled grid (full outer border + suppressed last-edge
+  // dividers), while reusing Table's structure and `modes` cascade.
+  //
+  // When the "Add a card" tile is visible, each table row appends an empty
+  // trailing cell with the same flex weight so data columns stay 1:1 beneath
+  // their selection card.
+  const renderTableCell = (content, colIndex, isLastRow, key) => {
+    const isLastCol = colIndex === gridColumnCount - 1;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Cell, {
+      modes: modes,
+      flex: 1,
+      align: "left",
+      isLastColumn: isLastCol,
+      isLastRow: isLastRow,
+      style: {
+        backgroundColor: cellBg,
+        borderColor: cellBorderColor,
+        borderRightWidth: isLastCol ? 0 : cellBorderSize,
+        borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+        paddingHorizontal: cellPaddingH,
+        paddingVertical: cellPaddingV
+      },
+      children: content
+    }, key);
+  };
+  const renderTable = section => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.default, {
+    modes: modes,
     style: {
       width: '100%',
       borderWidth: cellBorderSize,
-      borderColor: cellBorderColor,
-      overflow: 'hidden'
+      borderColor: cellBorderColor
     },
-    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Header, {
+      modes: modes,
       style: {
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
         borderBottomWidth: cellBorderSize,
         borderBottomColor: cellBorderColor
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), section.rows.map((row, rowIndex) => {
-      const isLastRow = rowIndex === section.rows.length - 1;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.HeaderCell, {
+        modes: modes,
+        flex: 1,
         style: {
-          flexDirection: 'row',
-          width: '100%'
+          backgroundColor: headerBg,
+          paddingHorizontal: headerPaddingH,
+          paddingVertical: headerPaddingV
         },
-        children: Array.from({
-          length: columnCount
-        }).map((_, colIndex) => {
-          const isLastCol = colIndex === columnCount - 1;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: {
-              flex: 1,
-              minWidth: 0,
-              backgroundColor: cellBg,
-              justifyContent: 'center',
-              paddingHorizontal: cellPaddingH,
-              paddingVertical: cellPaddingV,
-              borderRightWidth: isLastCol ? 0 : cellBorderSize,
-              borderRightColor: cellBorderColor,
-              borderBottomWidth: isLastRow ? 0 : cellBorderSize,
-              borderBottomColor: cellBorderColor
-            },
-            children: renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-          }, colIndex);
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: headerTextStyle,
+          children: section.header
         })
-      }, row.key ?? rowIndex);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Body, {
+      modes: modes,
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.default.Row, {
+          modes: modes,
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
+      })
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -361,9 +393,6 @@ function CompareTable({
         title: section.title,
         defaultExpanded: section.defaultExpanded ?? index === 0,
         modes: modes,
-        style: {
-          paddingHorizontal: headerPaddingH
-        },
         children: renderTable(section)
       }, section.key ?? section.title ?? index))
     })]

package/lib/commonjs/components/CoverageBarComparison/CoverageBarComparison.js

@@ -142,7 +142,8 @@ function CoverageBarComparison({
   chartStyle,
   legendStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -228,7 +229,7 @@ function CoverageBarComparison({
             minWidth: 1
           },
           children: [hasLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [computedLabelStyle, labelStyle],
             children: original.label
           }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(BarShape, {