jfs-components 0.0.70 → 0.0.72

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -0,0 +1,283 @@
+import React, { useMemo } from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import Icon from '../../icons/Icon'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
+import Nudge from '../Nudge/Nudge'
+
+type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CardAdvisoryProps = CardAdvisoryBaseProps & {
+  /** Main heading text. */
+  title?: string
+  /** Description shown below the heading. */
+  description?: string
+  /** Progress score displayed in the circular progress bar. */
+  value?: number
+  /** Optional formatted score label. */
+  valueLabel?: string
+  /** Show the info icon beside the title. */
+  showInfoIcon?: boolean
+  /** Show the bottom advisory nudge. */
+  showNudge?: boolean
+  /** Body text for the default nudge. */
+  nudgeBody?: string
+  /** Button label for the default nudge. */
+  nudgeButtonLabel?: string
+  /** Callback for the default nudge button. */
+  onPressNudgeButton?: () => void
+  /** Optional slot replacing the title info icon. Receives `modes` recursively. */
+  titleEndSlot?: React.ReactNode
+  /** Optional slot replacing the circular progress bar. Receives `modes` recursively. */
+  progressSlot?: React.ReactNode
+  /** Optional slot replacing the bottom nudge. Receives `modes` recursively. */
+  nudgeSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and child components. */
+  modes?: Record<string, any>
+  /** Optional container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Optional main content row style override. */
+  mainContentStyle?: StyleProp<ViewStyle>
+  /** Optional title text style override. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Optional description text style override. */
+  descriptionStyle?: StyleProp<TextStyle>
+  /** Optional progress wrapper style override. */
+  progressStyle?: StyleProp<ViewStyle>
+  /** Optional nudge style override. */
+  nudgeStyle?: StyleProp<ViewStyle>
+  /** Accessibility label for the full card. */
+  accessibilityLabel?: string
+}
+
+interface CardAdvisoryTokens {
+  containerStyle: ViewStyle
+  mainContentStyle: ViewStyle
+  contentStyle: ViewStyle
+  headerStyle: ViewStyle
+  titleStyle: TextStyle
+  descriptionStyle: TextStyle
+  iconColor: string
+  iconSize: number
+}
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+
+  return fallback
+}
+
+const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+function resolveCardAdvisoryTokens(modes: Record<string, any>): CardAdvisoryTokens {
+  const width = toNumber(getVariableByName('cardAdvisory/width', modes), 360)
+  const gap = toNumber(getVariableByName('cardAdvisory/gap', modes), 16)
+  const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0)
+  const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0)
+  const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0)
+  const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff'
+
+  const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16)
+  const contentGap = toNumber(getVariableByName('cardAdvisory/content/gap', modes), 6)
+  const headerGap = toNumber(getVariableByName('cardAdvisory/header/gap', modes), 8)
+
+  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes) || '#0d0d0f'
+  const titleFontSize = toNumber(getVariableByName('cardAdvisory/title/fontSize', modes), 26)
+  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes) || 'JioType Var'
+  const titleLineHeight = toNumber(getVariableByName('cardAdvisory/title/lineHeight', modes), 26)
+  const titleFontWeight = toFontWeight(getVariableByName('cardAdvisory/title/fontWeight', modes), '900')
+  const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16)
+
+  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes) || '#24262b'
+  const descriptionFontSize = toNumber(getVariableByName('cardAdvisory/description/fontSize', modes), 12)
+  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes) || 'JioType Var'
+  const descriptionLineHeight = toNumber(getVariableByName('cardAdvisory/description/lineHeight', modes), 16)
+  const descriptionFontWeight = toFontWeight(
+    getVariableByName('cardAdvisory/description/fontWeight', modes),
+    '500'
+  )
+
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background as string,
+      borderRadius: radius,
+      gap,
+      overflow: 'hidden',
+      paddingHorizontal,
+      paddingVertical,
+      width,
+    },
+    mainContentStyle: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      gap: mainContentGap,
+      width: '100%',
+    },
+    contentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: contentGap,
+      minWidth: 1,
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%',
+    },
+    titleStyle: {
+      color: titleColor as string,
+      fontFamily: titleFontFamily as string,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+      marginBottom: -titleDescenderAllowance,
+      paddingBottom: titleDescenderAllowance,
+    },
+    descriptionStyle: {
+      color: descriptionColor as string,
+      fontFamily: descriptionFontFamily as string,
+      fontSize: descriptionFontSize,
+      fontWeight: descriptionFontWeight,
+      lineHeight: descriptionLineHeight,
+      width: '100%',
+    },
+    iconColor: (getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f') as string,
+    iconSize: toNumber(getVariableByName('cardAdvisory/icon/size', modes), 18),
+  }
+}
+
+function CardAdvisory({
+  title = 'Spending',
+  description = 'Track your spending habits and stay within your budget.',
+  value = 70,
+  valueLabel,
+  showInfoIcon = true,
+  showNudge = true,
+  nudgeBody = 'Data confidence is low, add more accounts for better insights.',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  titleEndSlot,
+  progressSlot,
+  nudgeSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  mainContentStyle,
+  titleStyle,
+  descriptionStyle,
+  progressStyle,
+  nudgeStyle,
+  accessibilityLabel,
+  ...rest
+}: CardAdvisoryProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+  const tokens = useMemo(() => resolveCardAdvisoryTokens(modes), [modes])
+
+  const processedTitleEndSlot = useMemo(() => {
+    if (!titleEndSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(titleEndSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [titleEndSlot, modes])
+
+  const processedProgressSlot = useMemo(() => {
+    if (!progressSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(progressSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [progressSlot, modes])
+
+  const processedNudgeSlot = useMemo(() => {
+    if (!nudgeSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(nudgeSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [nudgeSlot, modes])
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? `${title}. ${description}. ${Math.round(value)} out of 100. ${nudgeBody}`
+
+  return (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      <View style={[tokens.mainContentStyle, mainContentStyle]}>
+        <View style={tokens.contentStyle}>
+          <View style={tokens.headerStyle}>
+            <Text numberOfLines={1} style={[tokens.titleStyle, titleStyle]}>
+              {title}
+            </Text>
+            {processedTitleEndSlot || (showInfoIcon ? (
+              <Icon
+                name="ic_info"
+                size={tokens.iconSize}
+                color={tokens.iconColor}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+              />
+            ) : null)}
+          </View>
+          <Text style={[tokens.descriptionStyle, descriptionStyle]}>
+            {description}
+          </Text>
+        </View>
+
+        {processedProgressSlot || (
+          <CircularProgressBar
+            state="Active"
+            value={value}
+            modes={modes}
+            style={progressStyle}
+            {...(valueLabel ? { valueLabel } : {})}
+          />
+        )}
+      </View>
+
+      {showNudge ? (
+        processedNudgeSlot || (
+          <Nudge
+            type="inline-compact"
+            body={nudgeBody}
+            buttonLabel={nudgeButtonLabel}
+            modes={modes}
+            style={[{ width: '100%' }, nudgeStyle]}
+            {...(onPressNudgeButton ? { onPressButton: onPressNudgeButton } : {})}
+          />
+        )
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(CardAdvisory)

package/src/components/CardCTA/CardCTA.tsx

@@ -1,12 +1,36 @@
 import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { findVariablesByPattern, getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
+import Badge from '../Badge/Badge'
+import ButtonGroup from '../ButtonGroup/ButtonGroup'
+import IconButton from '../IconButton/IconButton'
+
+export type CardCTAType = 'cta' | 'rating'
+
+const optionalTokenAvailability = new Map<string, boolean>()
+
+function getOptionalVariableByName<T>(name: string, modes: Record<string, any>, fallback: T): T {
+    let isAvailable = optionalTokenAvailability.get(name)
+
+    if (isAvailable === undefined) {
+        isAvailable = findVariablesByPattern(name).some((variable) => variable.name === name)
+        optionalTokenAvailability.set(name, isAvailable)
+    }
+
+    if (!isAvailable) {
+        return fallback
+    }
+
+    return (getVariableByName(name, modes) ?? fallback) as T
+}
 
 export type CardCTAProps = {
+    /** Visual layout variant */
+    type?: CardCTAType;
     /** Title text */
     title?: string;
     /** Body / subtitle text */
@@ -17,29 +41,49 @@ export type CardCTAProps = {
     buttonLabel?: string;
     /** Callback for the default Button press */
     onPressButton?: () => void;
+    /** Label shown in the rating badge */
+    ratingLabel?: string;
+    /** Show like/dislike actions in the rating footer */
+    showRatingActions?: boolean;
+    /** Callback for the default like action */
+    onPressLike?: () => void;
+    /** Callback for the default dislike action */
+    onPressDislike?: () => void;
     /** Mode configuration for design token resolution */
     modes?: Record<string, any>;
     /** Slot: replaces the default icon area (right side) */
     iconSlot?: React.ReactNode;
     /** Slot: replaces the default Button */
     buttonSlot?: React.ReactNode;
+    /** Slot: replaces the default rating badge */
+    ratingBadgeSlot?: React.ReactNode;
+    /** Slot: replaces the default like/dislike action group */
+    ratingActionsSlot?: React.ReactNode;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };
 
 function CardCTA({
+    type = 'cta',
     title = 'If you have 1 line',
     body = 'Then you can have up to 3 lines in the subtext as well. This is for demonstration.',
     iconName = 'ic_upi_number',
-    buttonLabel = 'Button',
+    buttonLabel,
     onPressButton,
+    ratingLabel = '+28 Rating',
+    showRatingActions = true,
+    onPressLike,
+    onPressDislike,
     modes: propModes = EMPTY_MODES,
     iconSlot,
     buttonSlot,
+    ratingBadgeSlot,
+    ratingActionsSlot,
     style,
 }: CardCTAProps) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
+    const isRating = type === 'rating'
 
     const background = getVariableByName('cardCTA/background', modes) || '#ffffff'
     const radius = getVariableByName('cardCTA/radius', modes) || 12
@@ -69,13 +113,50 @@ function CardCTA({
     const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400
     const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
 
+    const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12)
+    const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16)
+    const ratingContentPaddingV = getOptionalVariableByName('cardCTA/rating/content/padding/vertical', modes, 12)
+
+    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)
+
+    const buttonModes = {...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'}
+    const iconButtonModes = {'Button / Size': 'S', 'Emphasis': 'Low', 'AppearanceBrand':'Neutral',...modes }
+    const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button')
+    const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0')
+    const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState<number | null>(null)
+
+    const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20
+    const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1
+    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)
+        )
+        if (nextWidth <= 0) return
+
+        setMeasuredButtonLabelWidth((currentWidth) => {
+            if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
+                return currentWidth
+            }
+            return nextWidth
+        })
+    }, [])
+
     const containerStyle: ViewStyle = {
         backgroundColor: background,
         borderRadius: radius,
         borderWidth: borderSize,
         borderColor,
-        flexDirection: 'row',
-        overflow: 'hidden',
+        flexDirection: isRating ? 'column' : 'row',
+        overflow: 'visible',
     }
 
     // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -93,6 +174,8 @@ function CardCTA({
         gap: leftGap,
         alignItems: 'flex-start',
         justifyContent: 'center',
+        overflow: 'visible',
+        zIndex: 1,
     }
 
     // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
@@ -123,6 +206,28 @@ function CardCTA({
         minWidth: 0,
     }
 
+    // Keep text shrink/wrap behavior on the left column, but let the CTA keep
+    // its own intrinsic width. On native, Yoga otherwise measures the Button
+    // with the left column's available width and the single-line label
+    // truncates even when the Button itself has no width/maxWidth constraint.
+    const buttonWrapStyle: ViewStyle = {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        overflow: 'visible',
+        zIndex: 1,
+    }
+
+    const buttonStyle: ViewStyle = {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        overflow: 'visible',
+        ...(measuredButtonWidth !== undefined ? { width: measuredButtonWidth } : {}),
+    }
+
     const titleStyle: TextStyle = {
         color: titleColor,
         fontFamily: titleFontFamily,
@@ -139,6 +244,113 @@ function CardCTA({
         fontWeight: bodyFontWeight,
     }
 
+    const ratingContentStyle: ViewStyle = {
+        paddingHorizontal: ratingContentPaddingH,
+        paddingVertical: ratingContentPaddingV,
+        gap: ratingContentGap,
+        alignItems: 'flex-start',
+    }
+
+    const ratingFooterStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        paddingHorizontal: ratingFooterPaddingH,
+        paddingTop: ratingFooterPaddingTop,
+        paddingBottom: ratingFooterPaddingBottom,
+        overflow: 'visible',
+    }
+
+    const buttonLabelStyle: TextStyle = {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexWrap: 'nowrap',
+    }
+
+    // Keep the rating CTA on an overflow-visible, non-shrinking path. The
+    // footer's row width stays fixed by the card, but Yoga must not use that
+    // width to shrink or clip the button label.
+    const ratingButtonWrapStyle: ViewStyle = {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        alignItems: 'flex-start',
+        overflow: 'visible',
+    }
+
+    const ratingButtonStyle: ViewStyle = {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        overflow: 'visible',
+        ...(measuredButtonWidth !== undefined ? { width: measuredButtonWidth } : {}),
+    }
+
+    const ratingButtonLabelStyle: TextStyle = {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexWrap: 'nowrap',
+    }
+
+    if (isRating) {
+        return (
+            <View style={[containerStyle, style]}>
+                <View style={ratingContentStyle}>
+                    {ratingBadgeSlot ? (
+                        cloneChildrenWithModes(ratingBadgeSlot, modes)
+                    ) : (
+                        <Badge label={ratingLabel} modes={modes} />
+                    )}
+                    <View style={textWrapStyle}>
+                        <Text style={titleStyle}>{title}</Text>
+                        <Text style={bodyStyle}>{body}</Text>
+                    </View>
+                </View>
+                <View style={ratingFooterStyle}>
+                    <View style={ratingButtonWrapStyle}>
+                        {buttonSlot ? (
+                            cloneChildrenWithModes(buttonSlot, buttonModes)
+                        ) : (
+                            <Button
+                                label={effectiveButtonLabel}
+                                onPress={onPressButton || (() => {})}
+                                modes={buttonModes}
+                                style={ratingButtonStyle}
+                                renderContent={(labelStyles) => (
+                                    <Text
+                                        onTextLayout={handleButtonLabelTextLayout}
+                                        style={[labelStyles, ratingButtonLabelStyle]}
+                                    >
+                                        {nonWrappingButtonLabel}
+                                    </Text>
+                                )}
+                            />
+                        )}
+                    </View>
+                    {showRatingActions ? (
+                        ratingActionsSlot ? (
+                            cloneChildrenWithModes(ratingActionsSlot, iconButtonModes)
+                        ) : (
+                            <ButtonGroup modes={iconButtonModes}>
+                                <IconButton
+                                    iconName="ic_like"
+                                    accessibilityLabel="Like"
+                                    {...(onPressLike ? { onPress: onPressLike } : {})}
+                                />
+                                <IconButton
+                                    iconName="ic_dislike"
+                                    accessibilityLabel="Dislike"
+                                    {...(onPressDislike ? { onPress: onPressDislike } : {})}
+                                />
+                            </ButtonGroup>
+                        )
+                    ) : null}
+                </View>
+            </View>
+        )
+    }
+
     return (
         <View style={[containerStyle, style]}>
             <View style={leftWrapStyle}>
@@ -146,15 +358,26 @@ function CardCTA({
                     <Text style={titleStyle}>{title}</Text>
                     <Text style={bodyStyle}>{body}</Text>
                 </View>
-                {buttonSlot ? (
-                    cloneChildrenWithModes(buttonSlot, {...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'})
-                ) : (
-                    <Button
-                        label={buttonLabel}
-                        onPress={onPressButton || (() => {})}
-                        modes={{...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'}}
-                    />
-                )}
+                <View style={buttonWrapStyle}>
+                    {buttonSlot ? (
+                        cloneChildrenWithModes(buttonSlot, buttonModes)
+                    ) : (
+                        <Button
+                            label={effectiveButtonLabel}
+                            onPress={onPressButton || (() => {})}
+                            modes={buttonModes}
+                            style={buttonStyle}
+                            renderContent={(labelStyles) => (
+                                <Text
+                                    onTextLayout={handleButtonLabelTextLayout}
+                                    style={[labelStyles, buttonLabelStyle]}
+                                >
+                                    {nonWrappingButtonLabel}
+                                </Text>
+                            )}
+                        />
+                    )}
+                </View>
             </View>
             <View style={rightWrapStyle}>
                 {iconSlot ? (