jfs-components 0.1.8 → 0.1.17

package/src/components/CompareTable/CompareTable.tsx

@@ -10,8 +10,9 @@ import {
     type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+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'
@@ -133,6 +134,12 @@ export type CompareTableProps = {
     modes?: Modes;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 
 const DEFAULT_COLUMNS: CompareTableColumn[] = [
@@ -173,6 +180,7 @@ function CompareTable({
     maxColumns = 4,
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: CompareTableProps) {
     // --- selection card tokens ------------------------------------------------
     const cardBg = (getVariableByName('selectionCard/background/color', modes) as string) ?? '#ffffff'
@@ -186,6 +194,11 @@ function CompareTable({
     const cardLabelFontFamily = (getVariableByName('selectionCard/label/fontfamily', modes) as string) ?? 'JioType Var'
     const cardLabelFontWeight = (getVariableByName('selectionCard/label/fontweight', modes) as number | string) ?? 700
     const imageRadius = (getVariableByName('image/radius', modes) as number) ?? 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) as number) ?? 0
 
     // --- add-a-card icon button tokens ---------------------------------------
     // padding/size/border come from the shared iconButton tokens; the filled
@@ -195,31 +208,36 @@ function CompareTable({
     const addBorderSize = (getVariableByName('iconButton/border/size', modes) as number) ?? 1
     const addPadding = (getVariableByName('iconButton/padding', modes) as number) ?? 11
     const addIconSize = (getVariableByName('iconButton/icon/size', modes) as number) ?? 18
+    // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+    // circle"), mirroring IconButton's own resolution.
+    const addRadius = (getVariableByName('iconButton/radius', modes) as number) ?? 9999
     const addBg = ADD_BUTTON_BG
     const addIconColor = ADD_BUTTON_ICON_COLOR
 
     // --- table header tokens --------------------------------------------------
-    const headerBg = (getVariableByName('comparetableHeader/background/color', modes) as string) ?? '#f5f5f5'
-    const headerLabelColor = (getVariableByName('comparetableHeader/label/color', modes) as string) ?? '#000000'
-    const headerFontSize = (getVariableByName('comparetableHeader/label/fontsize', modes) as number) ?? 14
-    const headerFontFamily = (getVariableByName('comparetableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
-    const headerFontWeight = (getVariableByName('comparetableHeader/label/fontweight', modes) as number | string) ?? 600
-    const headerPaddingH = (getVariableByName('comparetableHeader/padding/horizontal', modes) as number) ?? 12
-    const headerPaddingV = (getVariableByName('comparetableHeader/padding/vertical', modes) as number) ?? 12
+    const headerBg = (getVariableByName('tableHeader/background/color', modes) as string) ?? '#f5f5f5'
+    const headerLabelColor = (getVariableByName('tableHeader/label/color', modes) as string) ?? '#000000'
+    const headerFontSize = (getVariableByName('tableHeader/label/fontsize', modes) as number) ?? 14
+    const headerFontFamily = (getVariableByName('tableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const headerFontWeight = (getVariableByName('tableHeader/label/fontweight', modes) as number | string) ?? 600
+    const headerPaddingH = (getVariableByName('tableHeader/padding/horizontal', modes) as number) ?? 12
+    const headerPaddingV = (getVariableByName('tableHeader/padding/vertical', modes) as number) ?? 12
 
     // --- table cell tokens ----------------------------------------------------
-    const cellBorderColor = (getVariableByName('compareTableCell/border/color', modes) as string) ?? '#eeeeee'
-    const cellBorderSize = (getVariableByName('compareTableCell/border/size', modes) as number) ?? 1
-    const cellBg = (getVariableByName('compareTableCell/background/color', modes) as string) ?? '#ffffff'
-    const cellLabelColor = (getVariableByName('compareTableCell/label/color', modes) as string) ?? '#000000'
-    const cellFontSize = (getVariableByName('compareTableCell/label/fontsize', modes) as number) ?? 14
-    const cellFontFamily = (getVariableByName('compareTableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
-    const cellFontWeight = (getVariableByName('compareTableCell/label/fontweight', modes) as number | string) ?? 400
-    const cellPaddingH = (getVariableByName('compareTableCell/padding/horizontal', modes) as number) ?? 12
-    const cellPaddingV = (getVariableByName('compareTableCell/padding/vertical', modes) as number) ?? 12
+    const cellBorderColor = (getVariableByName('tableCell/border/color', modes) as string) ?? '#eeeeee'
+    const cellBorderSize = (getVariableByName('tableCell/border/size', modes) as number) ?? 1
+    const cellBg = (getVariableByName('tableCell/background/color', modes) as string) ?? '#ffffff'
+    const cellLabelColor = (getVariableByName('tableCell/label/color', modes) as string) ?? '#000000'
+    const cellFontSize = (getVariableByName('tableCell/label/fontsize', modes) as number) ?? 14
+    const cellFontFamily = (getVariableByName('tableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const cellFontWeight = (getVariableByName('tableCell/label/fontweight', modes) as number | string) ?? 400
+    const cellPaddingH = (getVariableByName('tableCell/padding/horizontal', modes) as number) ?? 12
+    const cellPaddingV = (getVariableByName('tableCell/padding/vertical', modes) as number) ?? 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: TextStyle = {
         ...NO_WRAP_TEXT,
@@ -259,6 +277,7 @@ function CompareTable({
         minWidth: 0,
         minHeight: 147,
         backgroundColor: cardBg,
+        borderRadius: cardRadius,
         alignItems: 'center',
         justifyContent: 'center',
         gap: cardGap,
@@ -292,7 +311,7 @@ function CompareTable({
                     />
                 )}
                 {column.label != null && (
-                    <Text style={cardLabelStyle} numberOfLines={2}>
+                    <Text style={cardLabelStyle} {...resolveTruncation(disableTruncation, 2)}>
                         {column.label}
                     </Text>
                 )}
@@ -334,7 +353,7 @@ function CompareTable({
                 style={{
                     width: addPadding * 2 + addIconSize,
                     height: addPadding * 2 + addIconSize,
-                    borderRadius: 9999,
+                    borderRadius: addRadius,
                     borderWidth: addBorderSize,
                     borderColor: addBorderColor,
                     backgroundColor: addBg,
@@ -350,7 +369,7 @@ function CompareTable({
                     importantForAccessibility="no"
                 />
             </View>
-            <Text style={cardLabelStyle} numberOfLines={1}>
+            <Text style={cardLabelStyle} {...resolveTruncation(disableTruncation, 1)}>
                 {addColumnLabel}
             </Text>
         </Pressable>
@@ -380,61 +399,91 @@ function CompareTable({
         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: React.ReactNode,
+        colIndex: number,
+        isLastRow: boolean,
+        key: React.Key,
+    ) => {
+        const isLastCol = colIndex === gridColumnCount - 1
+        return (
+            <Table.Cell
+                key={key}
+                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,
+                }}
+            >
+                {content}
+            </Table.Cell>
+        )
+    }
+
     const renderTable = (section: CompareTableSection) => (
-        <View
+        <Table
+            modes={modes}
             style={{
                 width: '100%',
                 borderWidth: cellBorderSize,
                 borderColor: cellBorderColor,
-                overflow: 'hidden',
             }}
         >
             {section.header != null && (
-                <View
-                    style={{
-                        backgroundColor: headerBg,
-                        paddingHorizontal: headerPaddingH,
-                        paddingVertical: headerPaddingV,
-                        borderBottomWidth: cellBorderSize,
-                        borderBottomColor: cellBorderColor,
-                    }}
+                <Table.Header
+                    modes={modes}
+                    style={{ borderBottomWidth: cellBorderSize, borderBottomColor: cellBorderColor }}
                 >
-                    <Text style={headerTextStyle}>{section.header}</Text>
-                </View>
-            )}
-            {section.rows.map((row, rowIndex) => {
-                const isLastRow = rowIndex === section.rows.length - 1
-                return (
-                    <View
-                        key={row.key ?? rowIndex}
-                        style={{ flexDirection: 'row', width: '100%' }}
+                    <Table.HeaderCell
+                        modes={modes}
+                        flex={1}
+                        style={{
+                            backgroundColor: headerBg,
+                            paddingHorizontal: headerPaddingH,
+                            paddingVertical: headerPaddingV,
+                        }}
                     >
-                        {Array.from({ length: columnCount }).map((_, colIndex) => {
-                            const isLastCol = colIndex === columnCount - 1
-                            return (
-                                <View
-                                    key={colIndex}
-                                    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,
-                                    }}
-                                >
-                                    {renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)}
-                                </View>
-                            )
-                        })}
-                    </View>
-                )
-            })}
-        </View>
+                        <Text style={headerTextStyle}>{section.header}</Text>
+                    </Table.HeaderCell>
+                </Table.Header>
+            )}
+            <Table.Body modes={modes}>
+                {section.rows.map((row, rowIndex) => {
+                    const isLastRow = rowIndex === section.rows.length - 1
+                    return (
+                        <Table.Row key={row.key ?? rowIndex} modes={modes}>
+                            {Array.from({ length: columnCount }).map((_, colIndex) =>
+                                renderTableCell(
+                                    renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`),
+                                    colIndex,
+                                    isLastRow,
+                                    colIndex,
+                                ),
+                            )}
+                            {showAddCard &&
+                                renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')}
+                        </Table.Row>
+                    )
+                })}
+            </Table.Body>
+        </Table>
     )
 
     return (
@@ -464,7 +513,6 @@ function CompareTable({
                         title={section.title}
                         defaultExpanded={section.defaultExpanded ?? index === 0}
                         modes={modes}
-                        style={{ paddingHorizontal: headerPaddingH }}
                     >
                         {renderTable(section)}
                     </Accordion>

package/src/components/CoverageBarComparison/CoverageBarComparison.tsx

@@ -10,7 +10,7 @@ import {
 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'
 import type { Modes } from '../../design-tokens'
 
@@ -97,6 +97,12 @@ export type CoverageBarComparisonProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label for the entire component. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 /**
@@ -221,6 +227,7 @@ function CoverageBarComparison({
   legendStyle,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: CoverageBarComparisonProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -331,7 +338,7 @@ function CoverageBarComparison({
             >
               {hasLabel ? (
                 <Text
-                  numberOfLines={1}
+                  {...resolveTruncation(disableTruncation, 1)}
                   style={[computedLabelStyle, labelStyle]}
                 >
                   {original.label}

package/src/components/DebitCard/DebitCard.tsx

@@ -45,28 +45,28 @@ function DebitCard({
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
-    const background = getVariableByName('debitCard/background', modes) || '#cea15a'
-    const radius = getVariableByName('debitCard/radius', modes) || 16
-    const width = getVariableByName('debitCard/width', modes) || 328
-    const height = getVariableByName('debitCard/height', modes) || 224
-    const paddingBottom = getVariableByName('debitCard/padding/bottom', modes) || 24
-
-    const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes) || 20
-    const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes) || 16
-    const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes) || 28
-
-    const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes) || 50
-    const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes) || 4
-
-    const footerGap = getVariableByName('debitCard/footer/gap', modes) || 16
-    const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes) || 20
-    const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes) || 16
-
-    const foreground = getVariableByName('debitCard/foreground', modes) || '#141414'
-    const fontSize = getVariableByName('debitCard/fontSize', modes) || 14
-    const fontFamily = getVariableByName('debitCard/fontFamily', modes) || 'JioType Var'
-    const lineHeight = getVariableByName('debitCard/lineHeight', modes) || 17
-    const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes) || 500
+    const background = getVariableByName('debitCard/background', modes)
+    const radius = getVariableByName('debitCard/radius', modes)
+    const width = getVariableByName('debitCard/width', modes)
+    const height = getVariableByName('debitCard/height', modes)
+    const paddingBottom = getVariableByName('debitCard/padding/bottom', modes)
+
+    const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes)
+    const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes)
+    const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes)
+
+    const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes)
+    const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes)
+
+    const footerGap = getVariableByName('debitCard/footer/gap', modes)
+    const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes)
+    const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes)
+
+    const foreground = getVariableByName('debitCard/foreground', modes)
+    const fontSize = getVariableByName('debitCard/fontSize', modes)
+    const fontFamily = getVariableByName('debitCard/fontFamily', modes)
+    const lineHeight = getVariableByName('debitCard/lineHeight', modes)
+    const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes)
     const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
 
     const containerStyle: ViewStyle = {

package/src/components/Disclaimer/Disclaimer.tsx

@@ -47,15 +47,15 @@ function Disclaimer({
   const { modes: globalModes } = useTokens()
   const modes = { ...globalModes, ...propModes }
   // Resolve typography and color from Figma variables
-  const color = getVariableByName('disclaimer/color', modes) || '#24262b'
+  const color = getVariableByName('disclaimer/color', modes)
   const fontSize =
-    getVariableByName('disclaimer/label/fontSize', modes) || 10
+    getVariableByName('disclaimer/label/fontSize', modes)
   const lineHeight =
-    getVariableByName('disclaimer/label/lineHeight', modes) || 12
+    getVariableByName('disclaimer/label/lineHeight', modes)
   const fontFamily =
-    getVariableByName('disclaimer/label/fontFamily', modes) || 'System'
+    getVariableByName('disclaimer/label/fontFamily', modes)
   const fontWeightRaw =
-    getVariableByName('disclaimer/label/fontWeight', modes) || 500
+    getVariableByName('disclaimer/label/fontWeight', modes)
   const fontWeight =
     typeof fontWeightRaw === 'number'
       ? fontWeightRaw.toString()

package/src/components/DonutChart/DonutChart.tsx

@@ -10,7 +10,7 @@ import {
 import Svg, { Circle } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -83,6 +83,12 @@ export type DonutChartProps = {
     labelStyle?: StyleProp<TextStyle>
     /** Accessibility label announced for the whole donut chart. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const DEFAULT_APPEARANCE_CYCLE = [
@@ -222,6 +228,7 @@ function DonutChart({
     valueStyle,
     labelStyle,
     accessibilityLabel,
+    disableTruncation,
 }: DonutChartProps) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
@@ -278,59 +285,25 @@ function DonutChart({
     const showValueLabel = !hasChildrenSlot && shouldRenderText(value)
     const showLabel = !hasChildrenSlot && shouldRenderText(label)
 
-    const valueColor =
-        (getVariableByName('donutChart/value/color', modes) as string | null) ??
-        (getVariableByName('value/fg', modes) as string | null) ??
-        '#000000'
-    const valueFontFamily =
-        (getVariableByName('donutChart/value/fontFamily', modes) as string | null) ??
-        (getVariableByName('value/fontFamily', modes) as string | null) ??
-        'JioType Var'
-    const valueFontSize = toNumber(
-        getVariableByName('donutChart/value/fontSize', modes) ??
-            getVariableByName('value/fontSize', modes),
-        29
-    )
-    const valueLineHeight = toNumber(
-        getVariableByName('donutChart/value/lineHeight', modes) ??
-            getVariableByName('value/lineHeight', modes),
-        29
-    )
+    const valueColor = getVariableByName('value/fg', modes) as string
+    const valueFontFamily = getVariableByName('value/fontFamily', modes) as string
+    const valueFontSize = toNumber(getVariableByName('value/fontSize', modes), 29)
+    const valueLineHeight = toNumber(getVariableByName('value/lineHeight', modes), 29)
     const valueFontWeight = toFontWeight(
-        getVariableByName('donutChart/value/fontWeight', modes) ??
-            getVariableByName('value/fontWeight', modes),
+        getVariableByName('value/fontWeight', modes),
         '900'
     )
 
-    const labelColor =
-        (getVariableByName('donutChart/label/color', modes) as string | null) ??
-        (getVariableByName('label/fg', modes) as string | null) ??
-        '#000000'
-    const labelFontFamily =
-        (getVariableByName('donutChart/label/fontFamily', modes) as string | null) ??
-        (getVariableByName('label/fontFamily', modes) as string | null) ??
-        'JioType Var'
-    const labelFontSize = toNumber(
-        getVariableByName('donutChart/label/fontSize', modes) ??
-            getVariableByName('label/fontSize', modes),
-        12
-    )
-    const labelLineHeight = toNumber(
-        getVariableByName('donutChart/label/lineHeight', modes) ??
-            getVariableByName('label/lineHeight', modes),
-        15.6
-    )
+    const labelColor = getVariableByName('label/fg', modes) as string
+    const labelFontFamily = getVariableByName('label/fontFamily', modes) as string
+    const labelFontSize = toNumber(getVariableByName('label/fontSize', modes), 12)
+    const labelLineHeight = toNumber(getVariableByName('label/lineHeight', modes), 15.6)
     const labelFontWeight = toFontWeight(
-        getVariableByName('donutChart/label/fontWeight', modes) ??
-            getVariableByName('label/fontWeight', modes),
+        getVariableByName('label/fontWeight', modes),
         '400'
     )
 
-    const textWrapGap = toNumber(
-        getVariableByName('donutChart/textWrap/gap', modes) ??
-            getVariableByName('textWrap/gap', modes),
-        7
-    )
+    const textWrapGap = toNumber(getVariableByName('textWrap/gap', modes), 7)
 
     const containerStyle: ViewStyle = {
         alignItems: 'center',
@@ -388,7 +361,7 @@ function DonutChart({
                                 },
                                 valueStyle,
                             ]}
-                            numberOfLines={1}
+                            {...resolveTruncation(disableTruncation, 1)}
                         >
                             {value}
                         </Text>
@@ -406,7 +379,7 @@ function DonutChart({
                                 },
                                 labelStyle,
                             ]}
-                            numberOfLines={1}
+                            {...resolveTruncation(disableTruncation, 1)}
                         >
                             {label}
                         </Text>