jfs-components 0.1.2 → 0.1.12

package/src/components/CardCTA/CardCTA.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
+import { View, Text, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { findVariablesByPattern, getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
@@ -8,12 +8,24 @@ import Button from '../Button/Button'
 import Badge from '../Badge/Badge'
 import ButtonGroup from '../ButtonGroup/ButtonGroup'
 import IconButton from '../IconButton/IconButton'
+import Avatar from '../Avatar/Avatar'
 import type { Modes } from '../../design-tokens'
 
-export type CardCTAType = 'cta' | 'rating'
+export type CardCTAType = 'cta' | 'rating' | 'sip'
+
+/**
+ * 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.
+ */
+export type CardCTATypeInput = CardCTAType | 'CTA' | 'Rating' | 'Sip'
 
 const optionalTokenAvailability = new Map<string, boolean>()
 
+const toWeight = (w: number | string): TextStyle['fontWeight'] =>
+    (typeof w === 'number' ? `${w}` : w) as TextStyle['fontWeight']
+
 function getOptionalVariableByName<T>(name: string, modes: Modes, fallback: T): T {
     let isAvailable = optionalTokenAvailability.get(name)
 
@@ -30,8 +42,13 @@ function getOptionalVariableByName<T>(name: string, modes: Modes, fallback: T):
 }
 
 export type CardCTAProps = {
-    /** Visual layout variant */
-    type?: CardCTAType;
+    /**
+     * Visual layout variant. `'cta'` (default) is the horizontal CTA card,
+     * `'rating'` is the rating card, and `'sip'` is the avatar-led card with a
+     * headline/description/subtitle footer. PascalCase Figma names
+     * (`'CTA' | 'Rating' | 'Sip'`) are also accepted.
+     */
+    type?: CardCTATypeInput;
     /** Title text */
     title?: string;
     /** Body / subtitle text */
@@ -50,6 +67,14 @@ export type CardCTAProps = {
     onPressLike?: () => void;
     /** Callback for the default dislike action */
     onPressDislike?: () => void;
+    /** [sip] Headline text shown above the description row */
+    headline?: string;
+    /** [sip] Description text (left of subtitle) */
+    description?: string;
+    /** [sip] Subtitle text (right of description) */
+    subtitle?: string;
+    /** [sip] Image source for the default Avatar */
+    avatarSource?: ImageSourcePropType | string;
     /** Mode configuration for design token resolution */
     modes?: Modes;
     /** Slot: replaces the default icon area (right side) */
@@ -60,6 +85,8 @@ export type CardCTAProps = {
     ratingBadgeSlot?: React.ReactNode;
     /** Slot: replaces the default like/dislike action group */
     ratingActionsSlot?: React.ReactNode;
+    /** [sip] Slot: replaces the default Avatar */
+    avatarSlot?: React.ReactNode;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };
@@ -75,16 +102,24 @@ function CardCTA({
     showRatingActions = true,
     onPressLike,
     onPressDislike,
+    headline = 'Headline',
+    description = 'Description',
+    subtitle = 'Subtitle',
+    avatarSource,
     modes: propModes = EMPTY_MODES,
     iconSlot,
     buttonSlot,
     ratingBadgeSlot,
     ratingActionsSlot,
+    avatarSlot,
     style,
 }: CardCTAProps) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
-    const isRating = type === 'rating'
+    // Accept both lowercase (canonical) and Figma PascalCase variant names.
+    const normalizedType = (typeof type === 'string' ? type.toLowerCase() : 'cta') as CardCTAType
+    const isRating = normalizedType === 'rating'
+    const isSip = normalizedType === 'sip'
 
     const background = getVariableByName('cardCTA/background', modes) || '#ffffff'
     const radius = getVariableByName('cardCTA/radius', modes) || 12
@@ -103,14 +138,14 @@ function CardCTA({
     const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10'
     const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var'
     const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16
-    const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 17.6
+    const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 18
     const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700
     const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
     const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d'
     const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var'
-    const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 10
-    const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 12
+    const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 14
+    const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 17
     const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400
     const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
 
@@ -122,6 +157,34 @@ function CardCTA({
     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<string | number>('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<string | number>('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<string | number>('ccCard/subtitle/fontWeight', modes, 500)
+    const sipSubtitleFontWeight = typeof sipSubtitleFontWeightRaw === 'number' ? sipSubtitleFontWeightRaw.toString() : sipSubtitleFontWeightRaw
+
+    const avatarModes = { ...modes, 'Avatar Size': 'L' }
+
     const buttonModes = {...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'}
     const iconButtonModes = {'Button / Size': 'S', 'Emphasis': 'Low', 'AppearanceBrand':'Neutral',...modes }
     const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button')
@@ -130,33 +193,72 @@ function CardCTA({
 
     const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20
     const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1
+    // 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 as number) * 2 + (buttonBorderSize as number) * 2)
-
-    const handleButtonLabelTextLayout = React.useCallback((event: any) => {
-        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)
+        : Math.ceil(measuredButtonLabelWidth + (buttonPaddingH as number) * 2 + (buttonBorderSize as number) * 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.useCallback((event: any) => {
+        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)
         )
-        if (nextWidth <= 0) return
-
-        setMeasuredButtonLabelWidth((currentWidth) => {
-            if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
-                return currentWidth
-            }
-            return nextWidth
-        })
     }, [])
 
+    // Off-screen measurer wrapper: absolute + opacity 0 + pointerEvents none =>
+    // out of flow, invisible, never intercepts touches, zero layout impact.
+    const measurerWrapStyle: ViewStyle = { 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: TextStyle) => (labelStyles: StyleProp<TextStyle>) => (
+        <>
+            <Text numberOfLines={1} ellipsizeMode="clip" style={[labelStyles, labelExtraStyle]}>
+                {nonWrappingButtonLabel}
+            </Text>
+            <View
+                pointerEvents="none"
+                accessibilityElementsHidden
+                importantForAccessibility="no"
+                style={measurerWrapStyle}
+            >
+                <Text style={[labelStyles, { width: 9999 }]} onTextLayout={handleMeasureTextLayout}>
+                    {nonWrappingButtonLabel}
+                </Text>
+            </View>
+        </>
+    )
+
     const containerStyle: ViewStyle = {
         backgroundColor: background,
         borderRadius: radius,
         borderWidth: borderSize,
         borderColor,
-        flexDirection: isRating ? 'column' : 'row',
+        flexDirection: isRating || isSip ? 'column' : 'row',
         overflow: 'visible',
     }
 
@@ -245,6 +347,53 @@ function CardCTA({
         fontWeight: bodyFontWeight,
     }
 
+    const sipWrapStyle: ViewStyle = {
+        width: '100%',
+        paddingHorizontal: leftPaddingH,
+        paddingVertical: leftPaddingV,
+        gap: leftGap,
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        overflow: 'visible',
+    }
+
+    const sipFooterTextWrapStyle: ViewStyle = {
+        gap: sipFooterGap,
+        alignItems: 'flex-start',
+        alignSelf: 'stretch',
+        minWidth: 0,
+    }
+
+    const sipDescriptionWrapStyle: ViewStyle = {
+        flexDirection: 'row',
+        gap: sipFooterGap,
+        alignItems: 'flex-end',
+    }
+
+    const sipHeadlineStyle: TextStyle = {
+        color: sipHeadlineColor,
+        fontFamily: sipHeadlineFontFamily,
+        fontSize: sipHeadlineFontSize,
+        lineHeight: sipHeadlineLineHeight,
+        fontWeight: toWeight(sipHeadlineFontWeightRaw),
+    }
+
+    const sipDescriptionStyle: TextStyle = {
+        color: sipDescriptionColor,
+        fontFamily: sipDescriptionFontFamily,
+        fontSize: sipDescriptionFontSize,
+        lineHeight: sipDescriptionLineHeight,
+        fontWeight: toWeight(sipDescriptionFontWeightRaw),
+    }
+
+    const sipSubtitleStyle: TextStyle = {
+        color: sipSubtitleColor,
+        fontFamily: sipSubtitleFontFamily,
+        fontSize: sipSubtitleFontSize,
+        lineHeight: sipSubtitleLineHeight,
+        fontWeight: toWeight(sipSubtitleFontWeightRaw),
+    }
+
     const ratingContentStyle: ViewStyle = {
         paddingHorizontal: ratingContentPaddingH,
         paddingVertical: ratingContentPaddingV,
@@ -294,6 +443,44 @@ function CardCTA({
         flexWrap: 'nowrap',
     }
 
+    if (isSip) {
+        return (
+            <View style={[containerStyle, style]}>
+                <View style={sipWrapStyle}>
+                    {avatarSlot ? (
+                        cloneChildrenWithModes(avatarSlot, avatarModes)
+                    ) : (
+                        <Avatar style="Image" imageSource={avatarSource} modes={avatarModes} />
+                    )}
+                    <View style={textWrapStyle}>
+                        <Text style={titleStyle}>{title}</Text>
+                        <Text style={bodyStyle}>{body}</Text>
+                    </View>
+                    <View style={sipFooterTextWrapStyle}>
+                        <Text style={sipHeadlineStyle}>{headline}</Text>
+                        <View style={sipDescriptionWrapStyle}>
+                            <Text style={sipDescriptionStyle}>{description}</Text>
+                            <Text style={sipSubtitleStyle}>{subtitle}</Text>
+                        </View>
+                    </View>
+                    <View style={buttonWrapStyle}>
+                        {buttonSlot ? (
+                            cloneChildrenWithModes(buttonSlot, buttonModes)
+                        ) : (
+                            <Button
+                                label={effectiveButtonLabel}
+                                onPress={onPressButton || (() => {})}
+                                modes={buttonModes}
+                                style={buttonStyle}
+                                renderContent={renderButtonContent(buttonLabelStyle)}
+                            />
+                        )}
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
     if (isRating) {
         return (
             <View style={[containerStyle, style]}>
@@ -318,14 +505,7 @@ function CardCTA({
                                 onPress={onPressButton || (() => {})}
                                 modes={buttonModes}
                                 style={ratingButtonStyle}
-                                renderContent={(labelStyles) => (
-                                    <Text
-                                        onTextLayout={handleButtonLabelTextLayout}
-                                        style={[labelStyles, ratingButtonLabelStyle]}
-                                    >
-                                        {nonWrappingButtonLabel}
-                                    </Text>
-                                )}
+                                renderContent={renderButtonContent(ratingButtonLabelStyle)}
                             />
                         )}
                     </View>
@@ -368,14 +548,7 @@ function CardCTA({
                             onPress={onPressButton || (() => {})}
                             modes={buttonModes}
                             style={buttonStyle}
-                            renderContent={(labelStyles) => (
-                                <Text
-                                    onTextLayout={handleButtonLabelTextLayout}
-                                    style={[labelStyles, buttonLabelStyle]}
-                                >
-                                    {nonWrappingButtonLabel}
-                                </Text>
-                            )}
+                            renderContent={renderButtonContent(buttonLabelStyle)}
                         />
                     )}
                 </View>

package/src/components/CardInsight/CardInsight.tsx

@@ -71,7 +71,11 @@ function CardInsight({
     const background =
         (getVariableByName('cardInsight/background', modes) as string | null) ?? '#ffffff'
     const radius =
-        (getVariableByName('cardInsight/radius', modes) as number | null) ?? 16
+        (getVariableByName('cardInsight/radius', modes) as number | null) ?? 12
+    const borderWidth =
+        (getVariableByName('cardInsight/borderWidth', modes) as number | null) ?? 1
+    const borderColor =
+        (getVariableByName('cardInsight/border/color', modes) as string | null) ?? '#ffffff'
     const paddingHorizontal =
         (getVariableByName('cardInsight/padding/horizontal', modes) as number | null) ?? 12
     const paddingVertical =
@@ -164,6 +168,8 @@ function CardInsight({
                     width,
                     backgroundColor: background,
                     borderRadius: radius,
+                    borderWidth,
+                    borderColor,
                     paddingHorizontal,
                     paddingVertical,
                     gap,