jfs-components 0.1.2 → 0.1.12

package/lib/module/components/CompareTable/CompareTable.js

@@ -0,0 +1,396 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
+import Accordion from '../Accordion/Accordion';
+import Table from '../Table/Table';
+import Image from '../Image/Image';
+import IconButton from '../IconButton/IconButton';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Brand link colour used by the selection-card CTA. The Figma node resolves
+ * `button/foreground` to this value, but no reproducible token mode currently
+ * produces it (the published token store is out of sync), so it is pinned here
+ * to stay faithful to the design.
+ */
+const BRAND_LINK_COLOR = '#5d00b5';
+
+/**
+ * Selection-card close control (Figma node 5568:3492). It is an `IconButton`
+ * pinned to the card's top-right corner. The Figma node resolves its
+ * `iconButton/background` and border to fully transparent (`#ebebed00` /
+ * `#ffffff00`) — values no token mode reproduces — so they are overridden here.
+ * Size (40px) and icon are left to the `IconButton`'s own token resolution
+ * (padding 11 · 2 + icon 18).
+ */
+/** Add-a-card icon button fill + icon (Figma node 5568:3494 direct overrides). */
+const ADD_BUTTON_BG = '#545961';
+const ADD_BUTTON_ICON_COLOR = '#ffffff';
+const closeButtonStyle = {
+  position: 'absolute',
+  top: 1,
+  right: 0,
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+};
+
+/** Keeps every text layer on a single line on web. */
+const NO_WRAP_TEXT = {
+  flexShrink: 0,
+  ...(Platform.OS === 'web' ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
+
+/**
+ * A single product/plan column rendered as a selection card at the top of the
+ * table. The card order maps 1:1 to each {@link CompareTableRow}'s `values`.
+ */
+
+/**
+ * Value rendered inside a comparison cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React element → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+
+/**
+ * A collapsible section. Each section renders as an `Accordion` whose body is a
+ * comparison table that spans the same columns as the selection cards.
+ */
+
+const DEFAULT_COLUMNS = [{
+  label: 'Plan A',
+  actionLabel: 'View details',
+  onRemove: () => {}
+}, {
+  label: 'Plan B',
+  actionLabel: 'View details',
+  onRemove: () => {}
+}];
+const DEFAULT_SECTIONS = [{
+  title: 'Fees & charges',
+  header: 'Annual fees',
+  defaultExpanded: true,
+  rows: [{
+    values: ['₹0', '₹499']
+  }, {
+    values: ['Free', 'Up to ₹1,300']
+  }, {
+    values: ['1x', '1.25x']
+  }]
+}];
+
+/**
+ * CompareTable renders a product comparison surface: a row of selection cards
+ * (one per column) followed by one or more collapsible sections, each holding a
+ * comparison table whose cells line up beneath their column.
+ *
+ * The selection card is an internal sub-component and is intentionally not
+ * exported — it should only be used through `CompareTable`. Implementation of
+ * Figma node `5568:3496` (`Compare table`) with sub-component `5568:3487`
+ * (`selectioncard`).
+ *
+ * @component
+ */
+function CompareTable({
+  columns = DEFAULT_COLUMNS,
+  sections = DEFAULT_SECTIONS,
+  onAddColumn,
+  addColumnLabel = 'Add a card',
+  maxColumns = 4,
+  modes = EMPTY_MODES,
+  style,
+  disableTruncation
+}) {
+  // --- selection card tokens ------------------------------------------------
+  const cardBg = getVariableByName('selectionCard/background/color', modes) ?? '#ffffff';
+  const cardBorderColor = getVariableByName('selectionCard/border/color', modes) ?? '#eeeeee';
+  const cardBorderSize = getVariableByName('selectionCard/border/size', modes) ?? 1;
+  const cardGap = getVariableByName('selectionCard/gap', modes) ?? 12;
+  const cardPaddingH = getVariableByName('selectionCard/padding/horizontal', modes) ?? 20;
+  const cardPaddingV = getVariableByName('selectionCard/padding/vertical', modes) ?? 20;
+  const cardLabelColor = getVariableByName('selectionCard/label/color', modes) ?? '#000000';
+  const cardLabelFontSize = getVariableByName('selectionCard/label/fontsize', modes) ?? 14;
+  const cardLabelFontFamily = getVariableByName('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
+  const cardLabelFontWeight = getVariableByName('selectionCard/label/fontweight', modes) ?? 700;
+  const imageRadius = 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 = getVariableByName('selectionCard/radius', modes) ?? 0;
+
+  // --- add-a-card icon button tokens ---------------------------------------
+  // padding/size/border come from the shared iconButton tokens; the filled
+  // background (#545961) and white icon are the Figma node's direct overrides
+  // (no token mode reproduces them), so they are pinned to match the design.
+  const addBorderColor = getVariableByName('iconButton/border/color', modes) ?? 'rgba(255,255,255,0)';
+  const addBorderSize = getVariableByName('iconButton/border/size', modes) ?? 1;
+  const addPadding = getVariableByName('iconButton/padding', modes) ?? 11;
+  const addIconSize = getVariableByName('iconButton/icon/size', modes) ?? 18;
+  // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+  // circle"), mirroring IconButton's own resolution.
+  const addRadius = getVariableByName('iconButton/radius', modes) ?? 9999;
+  const addBg = ADD_BUTTON_BG;
+  const addIconColor = ADD_BUTTON_ICON_COLOR;
+
+  // --- table header tokens --------------------------------------------------
+  const headerBg = getVariableByName('comparetableHeader/background/color', modes) ?? '#f5f5f5';
+  const headerLabelColor = getVariableByName('comparetableHeader/label/color', modes) ?? '#000000';
+  const headerFontSize = getVariableByName('comparetableHeader/label/fontsize', modes) ?? 14;
+  const headerFontFamily = getVariableByName('comparetableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontWeight = getVariableByName('comparetableHeader/label/fontweight', modes) ?? 600;
+  const headerPaddingH = getVariableByName('comparetableHeader/padding/horizontal', modes) ?? 12;
+  const headerPaddingV = getVariableByName('comparetableHeader/padding/vertical', modes) ?? 12;
+
+  // --- table cell tokens ----------------------------------------------------
+  const cellBorderColor = getVariableByName('compareTableCell/border/color', modes) ?? '#eeeeee';
+  const cellBorderSize = getVariableByName('compareTableCell/border/size', modes) ?? 1;
+  const cellBg = getVariableByName('compareTableCell/background/color', modes) ?? '#ffffff';
+  const cellLabelColor = getVariableByName('compareTableCell/label/color', modes) ?? '#000000';
+  const cellFontSize = getVariableByName('compareTableCell/label/fontsize', modes) ?? 14;
+  const cellFontFamily = getVariableByName('compareTableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontWeight = getVariableByName('compareTableCell/label/fontweight', modes) ?? 400;
+  const cellPaddingH = getVariableByName('compareTableCell/padding/horizontal', modes) ?? 12;
+  const cellPaddingV = 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,
+    fontSize: cardLabelFontSize,
+    fontFamily: cardLabelFontFamily,
+    fontWeight: toWeight(cardLabelFontWeight),
+    lineHeight: cardLabelFontSize * 1.1,
+    textAlign: 'center'
+  };
+  const linkStyle = {
+    ...NO_WRAP_TEXT,
+    color: BRAND_LINK_COLOR,
+    fontFamily: cardLabelFontFamily,
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 22
+  };
+  const headerTextStyle = {
+    color: headerLabelColor,
+    fontSize: headerFontSize,
+    fontFamily: headerFontFamily,
+    fontWeight: toWeight(headerFontWeight)
+  };
+  const cellTextStyle = {
+    color: cellLabelColor,
+    fontSize: cellFontSize,
+    fontFamily: cellFontFamily,
+    fontWeight: toWeight(cellFontWeight)
+  };
+  const cardStyle = {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 147,
+    backgroundColor: cardBg,
+    borderRadius: cardRadius,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: cardGap,
+    paddingHorizontal: cardPaddingH,
+    paddingVertical: cardPaddingV
+  };
+  const renderCard = (column, index) => {
+    const isLast = index === columnCount - 1 && !showAddCard;
+    return /*#__PURE__*/_jsxs(View, {
+      style: [cardStyle, {
+        borderBottomWidth: cardBorderSize,
+        borderBottomColor: cardBorderColor,
+        borderRightWidth: isLast ? 0 : cardBorderSize,
+        borderRightColor: cardBorderColor
+      }],
+      children: [column.imageSource != null && /*#__PURE__*/_jsx(Image, {
+        imageSource: column.imageSource,
+        width: 66,
+        height: 44,
+        borderRadius: imageRadius,
+        resizeMode: "cover",
+        accessibilityLabel: column.label
+      }), column.label != null && /*#__PURE__*/_jsx(Text, {
+        style: cardLabelStyle,
+        ...resolveTruncation(disableTruncation, 2),
+        children: column.label
+      }), column.actionLabel != null && /*#__PURE__*/_jsx(Pressable, {
+        onPress: column.onActionPress,
+        accessibilityRole: "button",
+        accessibilityLabel: column.actionLabel,
+        hitSlop: 6,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: linkStyle,
+          children: column.actionLabel
+        })
+      }), column.onRemove != null &&
+      /*#__PURE__*/
+      // Figma node 5568:3492 — an Icon Button (not a capsule):
+      // padding 11 + icon 18 → 40px circle, transparent background,
+      // absolutely pinned to the card's top-right (right:0, top:1).
+      _jsx(IconButton, {
+        iconName: "ic_close",
+        onPress: column.onRemove,
+        modes: modes,
+        accessibilityLabel: `Remove ${column.label ?? 'column'}`,
+        style: closeButtonStyle
+      })]
+    }, column.key ?? column.label ?? index);
+  };
+  const renderAddCard = () => /*#__PURE__*/_jsxs(Pressable, {
+    onPress: onAddColumn,
+    accessibilityRole: "button",
+    accessibilityLabel: addColumnLabel,
+    style: [cardStyle, {
+      borderBottomWidth: cardBorderSize,
+      borderBottomColor: cardBorderColor
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: addPadding * 2 + addIconSize,
+        height: addPadding * 2 + addIconSize,
+        borderRadius: addRadius,
+        borderWidth: addBorderSize,
+        borderColor: addBorderColor,
+        backgroundColor: addBg,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "ic_add",
+        size: addIconSize,
+        color: addIconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: cardLabelStyle,
+      ...resolveTruncation(disableTruncation, 1),
+      children: addColumnLabel
+    })]
+  }, "__add_card__");
+  const renderCellContent = (value, cellKey) => {
+    if (value === false) {
+      return /*#__PURE__*/_jsx(Icon, {
+        name: "ic_close",
+        size: cellFontSize + 2,
+        color: cellBorderColor
+      }, cellKey);
+    }
+    if (value === null || value === undefined || value === true) {
+      return null;
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: cellTextStyle,
+        children: value
+      }, cellKey);
+    }
+    return cloneChildrenWithModes(value, modes);
+  };
+
+  // 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__*/_jsx(Table.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__*/_jsxs(Table, {
+    modes: modes,
+    style: {
+      width: '100%',
+      borderWidth: cellBorderSize,
+      borderColor: cellBorderColor
+    },
+    children: [section.header != null && /*#__PURE__*/_jsx(Table.Header, {
+      modes: modes,
+      style: {
+        borderBottomWidth: cellBorderSize,
+        borderBottomColor: cellBorderColor
+      },
+      children: /*#__PURE__*/_jsx(Table.HeaderCell, {
+        modes: modes,
+        flex: 1,
+        style: {
+          backgroundColor: headerBg,
+          paddingHorizontal: headerPaddingH,
+          paddingVertical: headerPaddingV
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: headerTextStyle,
+          children: section.header
+        })
+      })
+    }), /*#__PURE__*/_jsx(Table.Body, {
+      modes: modes,
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/_jsxs(Table.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__*/_jsxs(View, {
+    style: [{
+      width: '100%',
+      backgroundColor: cardBg,
+      borderWidth: 1,
+      borderColor: '#e8e8e8',
+      overflow: 'hidden'
+    }, style],
+    children: [(columnCount > 0 || showAddCard) && /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        width: '100%'
+      },
+      children: [columns.map(renderCard), showAddCard && renderAddCard()]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%'
+      },
+      children: sections.map((section, index) => /*#__PURE__*/_jsx(Accordion, {
+        title: section.title,
+        defaultExpanded: section.defaultExpanded ?? index === 0,
+        modes: modes,
+        children: renderTable(section)
+      }, section.key ?? section.title ?? index))
+    })]
+  });
+}
+export default CompareTable;

package/lib/module/components/ComparisonBar/ComparisonBar.js

@@ -0,0 +1,260 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import Button from '../Button/Button';
+import Image from '../Image/Image';
+import IconCapsule from '../IconCapsule/IconCapsule';
+
+/**
+ * A single slot in the {@link ComparisonBar}. Each item is either empty (the
+ * "Add" state — a tappable `+` capsule) or filled with an image (the
+ * "Image Added" state — the image plus a dismiss capsule in the corner).
+ *
+ * The presence of {@link ComparisonBarItem.imageSource} is what toggles the
+ * state: provide a source to show the image, leave it `undefined`/`null` to
+ * show the empty add slot. This keeps the component fully controlled — the
+ * `ComparisonBar` never owns the image state itself, so the consumer decides
+ * (e.g. after opening a file/asset picker) when and how an item flips between
+ * the two states.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ITEM_WIDTH = 45;
+const ITEM_HEIGHT = 44;
+function resolveTokens(modes) {
+  const cardGap = getVariableByName('compareFloatCard/gap', modes) ?? 12;
+  const cardPadH = getVariableByName('compareFloatCard/padding/horizontal', modes) ?? 12;
+  const cardPadV = getVariableByName('compareFloatCard/padding/vertical', modes) ?? 10;
+  const cardRadius = getVariableByName('compareFloatCard/radius', modes) ?? 12;
+  const cardBackground = getVariableByName('compareFloatCard/background', modes) ?? '#ffffff';
+  const cardBorderColor = getVariableByName('compareFloatCard/border/color', modes) ?? '#f5f5f5';
+  const itemPadH = getVariableByName('compareCardItem/padding/horizontal', modes) ?? 6;
+  const itemPadV = getVariableByName('compareCardItem/padding/vertical', modes) ?? 8;
+  const itemRadius = getVariableByName('compareCardItem/radius', modes) ?? 8;
+  const itemBackground = getVariableByName('compareCardItem/background', modes) ?? '#ebebed';
+  const imageRadius = getVariableByName('image/radius', modes) ?? 8;
+  return {
+    card: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: cardGap,
+      paddingHorizontal: cardPadH,
+      paddingVertical: cardPadV,
+      borderRadius: cardRadius,
+      borderWidth: 1,
+      borderColor: cardBorderColor,
+      backgroundColor: cardBackground,
+      alignSelf: 'flex-start'
+    },
+    item: {
+      width: ITEM_WIDTH,
+      height: ITEM_HEIGHT,
+      borderRadius: itemRadius,
+      backgroundColor: itemBackground,
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    itemImageState: {
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV
+    },
+    imageRadius
+  };
+}
+/**
+ * Internal slot renderer for {@link ComparisonBar}. Intentionally NOT exported
+ * — it is meaningless outside of a `ComparisonBar` (its layout, sizing and
+ * remove affordance all assume the surrounding card) and is kept private so
+ * the public surface stays a single, cohesive component.
+ */
+function Additem({
+  item,
+  index,
+  tokens,
+  addCapsuleModes,
+  closeCapsuleModes,
+  onPress,
+  onRemove
+}) {
+  const hasImage = item.imageSource != null && item.imageSource !== '';
+  const id = item.id ?? index;
+  const addWebProps = usePressableWebSupport({
+    restProps: {},
+    onPress: () => onPress?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Add item to comparison'
+  });
+  const removeWebProps = usePressableWebSupport({
+    restProps: {},
+    onPress: () => onRemove?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Remove item from comparison'
+  });
+  if (!hasImage) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: tokens.item,
+      accessibilityRole: "button",
+      accessibilityLabel: item.accessibilityLabel ?? 'Add item to comparison',
+      onPress: () => onPress?.(id, index),
+      ...addWebProps,
+      children: /*#__PURE__*/_jsx(IconCapsule, {
+        iconName: "ic_add",
+        modes: addCapsuleModes,
+        style: ADD_CAPSULE_STYLE
+      })
+    });
+  }
+
+  // Mobile-first: the entire filled slot is the remove target, not just the
+  // tiny close capsule (which a fingertip struggles to hit). The capsule stays
+  // purely as a visual affordance and is marked non-interactive so it never
+  // intercepts the press from the surrounding Pressable.
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: [tokens.item, tokens.itemImageState],
+    accessibilityRole: "button",
+    accessibilityLabel: item.accessibilityLabel ?? 'Remove item from comparison',
+    onPress: () => onRemove?.(id, index),
+    ...removeWebProps,
+    children: [/*#__PURE__*/_jsx(Image, {
+      imageSource: item.imageSource,
+      width: "100%",
+      height: "100%",
+      borderRadius: tokens.imageRadius,
+      resizeMode: "cover",
+      accessibilityLabel: item.accessibilityLabel ?? 'Comparison item image'
+    }), /*#__PURE__*/_jsx(View, {
+      style: CLOSE_CAPSULE_WRAPPER_STYLE,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(IconCapsule, {
+        iconName: "ic_close",
+        modes: closeCapsuleModes
+      })
+    })]
+  });
+}
+
+// The Add capsule is the transparent IconCapsule variant from Figma (the gray
+// item box is the visible surface); its size/icon come from the resolved
+// `Icon Capsule Size: S` tokens, we only flatten the background/border here.
+const ADD_CAPSULE_STYLE = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+};
+
+// Positions the dismiss IconCapsule in the slot's top-right corner. The capsule
+// itself (size/background/icon) is fully token-driven via `closeCapsuleModes`.
+const CLOSE_CAPSULE_WRAPPER_STYLE = {
+  position: 'absolute',
+  top: 1,
+  right: 1
+};
+
+// Mode overrides applied on top of the consumer's `modes` for each capsule.
+// These mirror the Figma component's IconCapsule variant selections so the
+// sizing and colours come from design tokens instead of magic numbers.
+const ADD_CAPSULE_MODE_OVERRIDES = {
+  'Icon Capsule Size': 'XS'
+};
+const CLOSE_CAPSULE_MODE_OVERRIDES = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS'
+};
+
+/**
+ * ComparisonBar — a floating card that lets a user assemble a set of items to
+ * compare, then trigger the comparison.
+ *
+ * Each slot is fully controlled via its `imageSource`: an empty slot shows a
+ * tappable `+` (the "Add" state) and a filled slot shows the image with a
+ * dismiss capsule (the "Image Added" state). The component never sources or
+ * stores images itself — when an empty slot is pressed it fires `onItemPress`
+ * with the item's id/index so the consumer can open whatever picker is
+ * appropriate and then update that item's `imageSource` to flip its state.
+ * Tapping a filled slot (anywhere on it — a mobile-friendly hit target, with
+ * the dismiss capsule as a visual affordance) fires `onItemRemove` so the
+ * consumer can clear the source again.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<ComparisonBarItem[]>([
+ *   { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
+ * ])
+ *
+ * <ComparisonBar
+ *   items={items}
+ *   onItemPress={async (id) => {
+ *     const uri = await openImagePicker()
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: uri } : it))
+ *   }}
+ *   onItemRemove={(id) =>
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: null } : it))
+ *   }
+ *   onCompare={runComparison}
+ * />
+ * ```
+ */
+function ComparisonBar({
+  items,
+  onItemPress,
+  onItemRemove,
+  onCompare,
+  compareLabel = 'Compare',
+  compareDisabled,
+  disableCompareWhenEmpty = true,
+  modes: propModes = EMPTY_MODES,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveTokens(modes), [modes]);
+
+  // Capsule modes = consumer modes + this component's fixed IconCapsule variant
+  // selections. Memoized so each `Additem`'s `IconCapsule` keeps a stable
+  // `modes` identity and hits the resolver cache.
+  const addCapsuleModes = useMemo(() => ({
+    ...modes,
+    ...ADD_CAPSULE_MODE_OVERRIDES
+  }), [modes]);
+  const closeCapsuleModes = useMemo(() => ({
+    ...modes,
+    ...CLOSE_CAPSULE_MODE_OVERRIDES
+  }), [modes]);
+
+  // An explicit `compareDisabled` always wins (functional disable — the tap is
+  // truly blocked, not merely dimmed). Otherwise auto-disable while no slot has
+  // an image, since there is nothing to compare yet.
+  const hasAnyImage = useMemo(() => items.some(it => it.imageSource != null && it.imageSource !== ''), [items]);
+  const isCompareDisabled = compareDisabled ?? (disableCompareWhenEmpty && !hasAnyImage);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [tokens.card, style],
+    children: [items.map((item, index) => /*#__PURE__*/_jsx(Additem, {
+      item: item,
+      index: index,
+      tokens: tokens,
+      addCapsuleModes: addCapsuleModes,
+      closeCapsuleModes: closeCapsuleModes,
+      onPress: onItemPress,
+      onRemove: onItemRemove
+    }, item.id ?? index)), /*#__PURE__*/_jsx(Button, {
+      label: compareLabel,
+      modes: modes,
+      disabled: isCompareDisabled,
+      ...(onCompare !== undefined ? {
+        onPress: onCompare
+      } : {})
+    })]
+  });
+}
+export default /*#__PURE__*/React.memo(ComparisonBar);

package/lib/module/components/CoverageBarComparison/CoverageBarComparison.js

@@ -5,7 +5,7 @@ import { View, Text } from 'react-native';
 import Svg, { Rect } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -136,7 +136,8 @@ function CoverageBarComparison({
   chartStyle,
   legendStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -222,7 +223,7 @@ function CoverageBarComparison({
             minWidth: 1
           },
           children: [hasLabel ? /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [computedLabelStyle, labelStyle],
             children: original.label
           }) : null, /*#__PURE__*/_jsx(BarShape, {