jfs-components 0.0.70 → 0.0.72

package/src/components/CardFinancialCondition/CardFinancialCondition.tsx

@@ -0,0 +1,366 @@
+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 { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Button from '../Button/Button'
+import CircularProgressBar, {
+  type CircularProgressBarProps,
+} from '../CircularProgressBar/CircularProgressBar'
+import Divider from '../Divider/Divider'
+import Nudge from '../Nudge/Nudge'
+
+type CardFinancialConditionBaseProps = Omit<
+  React.ComponentProps<typeof View>,
+  'children' | 'style'
+>
+
+export type CardFinancialConditionProps = CardFinancialConditionBaseProps & {
+  /** Title text shown in the header. */
+  title?: string
+  /** Body / description shown below the title. */
+  body?: string
+  /** Progress score for the circular indicator. Forwarded to CircularProgressBar. */
+  value?: number
+  /** Visual state of the circular indicator. Forwarded to CircularProgressBar. */
+  progressState?: CircularProgressBarProps['state']
+  /** Optional formatted value label for the active state. */
+  valueLabel?: string
+  /** Show the bottom advisory nudge. */
+  showNudge?: boolean
+  /** Body text for the default nudge. Use `\n` to add a second line. */
+  nudgeBody?: string
+  /** Show the bottom divider above the action button. */
+  showDivider?: boolean
+  /** Show the action button at the bottom of the card. */
+  showButton?: boolean
+  /** Label for the default action button. */
+  buttonLabel?: string
+  /** Callback for the default action button press. */
+  onPressButton?: () => void
+  /** Slot replacing the default circular progress bar. Receives `modes` recursively. */
+  progressSlot?: React.ReactNode
+  /** Slot replacing the default Nudge. Receives `modes` recursively. */
+  nudgeSlot?: React.ReactNode
+  /** Slot replacing the default action button. Receives `modes` recursively. */
+  buttonSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and child components. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Header row style override. */
+  headerStyle?: StyleProp<ViewStyle>
+  /** Title text style override. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Body text style override. */
+  bodyStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the whole card. */
+  accessibilityLabel?: string
+}
+
+interface CardFinancialConditionTokens {
+  containerStyle: ViewStyle
+  headerStyle: ViewStyle
+  textContentStyle: ViewStyle
+  titleStyle: TextStyle
+  bodyStyle: TextStyle
+  nudgeBodyStyle: TextStyle
+  buttonWrapStyle: ViewStyle
+}
+
+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 resolveCardFinancialConditionTokens(
+  modes: Record<string, any>
+): CardFinancialConditionTokens {
+  const background =
+    (getVariableByName('financialConditionCard/background', modes) as string) ||
+    '#ffffff'
+  const radius = toNumber(
+    getVariableByName('financialConditionCard/radius', modes),
+    16
+  )
+  const paddingH = toNumber(
+    getVariableByName('financialConditionCard/padding/horizontal', modes),
+    16
+  )
+  const paddingV = toNumber(
+    getVariableByName('financialConditionCard/padding/vertical', modes),
+    16
+  )
+  const gap = toNumber(
+    getVariableByName('financialConditionCard/gap', modes),
+    8
+  )
+
+  const headerGap = toNumber(
+    getVariableByName('financialConditionCard/header/gap', modes),
+    16
+  )
+  const textContentGap = toNumber(
+    getVariableByName('financialConditionCard/textContent/gap', modes),
+    8
+  )
+
+  const titleColor =
+    (getVariableByName('financialConditionCard/title/color', modes) as string) ||
+    '#0c0d10'
+  const titleFontSize = toNumber(
+    getVariableByName('financialConditionCard/title/fontSize', modes),
+    16
+  )
+  const titleFontFamily =
+    (getVariableByName(
+      'financialConditionCard/title/fontFamily',
+      modes
+    ) as string) || 'JioType Var'
+  const titleLineHeight = toNumber(
+    getVariableByName('financialConditionCard/title/lineHeight', modes),
+    18
+  )
+  const titleFontWeight = toFontWeight(
+    getVariableByName('financialConditionCard/title/fontWeight', modes),
+    '700'
+  )
+
+  const bodyColor =
+    (getVariableByName('financialConditionCard/body/color', modes) as string) ||
+    '#0c0d10'
+  const bodyFontSize = toNumber(
+    getVariableByName('financialConditionCard/body/fontSize', modes),
+    14
+  )
+  const bodyFontFamily =
+    (getVariableByName(
+      'financialConditionCard/body/fontFamily',
+      modes
+    ) as string) || 'JioType Var'
+  const bodyLineHeight = toNumber(
+    getVariableByName('financialConditionCard/body/lineHeight', modes),
+    17
+  )
+  const bodyFontWeight = toFontWeight(
+    getVariableByName('financialConditionCard/body/fontWeight', modes),
+    '400'
+  )
+
+  const nudgeBodyColor =
+    (getVariableByName('nudge/body/color', modes) as string) || '#1a1c1f'
+  const nudgeBodyFontSize = toNumber(
+    getVariableByName('nudge/body/fontSize', modes),
+    12
+  )
+  const nudgeBodyFontFamily =
+    (getVariableByName('nudge/body/fontFamily', modes) as string) || 'JioType Var'
+  const nudgeBodyLineHeight = toNumber(
+    getVariableByName('nudge/body/lineHeight', modes),
+    16
+  )
+  const nudgeBodyFontWeight = toFontWeight(
+    getVariableByName('nudge/body/fontWeight', modes),
+    '500'
+  )
+
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV,
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%',
+    },
+    textContentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: textContentGap,
+      minWidth: 1,
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+    },
+    bodyStyle: {
+      color: bodyColor,
+      fontFamily: bodyFontFamily,
+      fontSize: bodyFontSize,
+      fontWeight: bodyFontWeight,
+      lineHeight: bodyLineHeight,
+    },
+    nudgeBodyStyle: {
+      color: nudgeBodyColor,
+      fontFamily: nudgeBodyFontFamily,
+      fontSize: nudgeBodyFontSize,
+      fontWeight: nudgeBodyFontWeight,
+      lineHeight: nudgeBodyLineHeight,
+    },
+    buttonWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'flex-start',
+    },
+  }
+}
+
+function CardFinancialCondition({
+  title = 'Protection',
+  body = 'Check your coverage and gaps',
+  value = 0,
+  progressState = 'Inactive',
+  valueLabel,
+  showNudge = true,
+  nudgeBody = 'There may be gaps in your health or life cover\nAdd coverage to stay financially secure',
+  showDivider = true,
+  showButton = true,
+  buttonLabel = 'View Details',
+  onPressButton,
+  progressSlot,
+  nudgeSlot,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  headerStyle,
+  titleStyle,
+  bodyStyle,
+  accessibilityLabel,
+  ...rest
+}: CardFinancialConditionProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(
+    () => resolveCardFinancialConditionTokens(modes),
+    [modes]
+  )
+
+  // Match Figma: the action button is the primary call-to-action and uses the
+  // Secondary brand (purple) regardless of the card's overall AppearanceBrand,
+  // while Nudge / CircularProgressBar still follow the user-supplied modes.
+  const buttonModes = useMemo(
+    () => ({ ...modes, AppearanceBrand: 'Secondary' }),
+    [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 processedButtonSlot = useMemo(() => {
+    if (!buttonSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(buttonSlot),
+      buttonModes
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [buttonSlot, buttonModes])
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? `${title}. ${body}.`
+
+  return (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      <View style={[tokens.headerStyle, headerStyle]}>
+        <View style={tokens.textContentStyle}>
+          <Text style={[tokens.titleStyle, titleStyle]}>{title}</Text>
+          <Text style={[tokens.bodyStyle, bodyStyle]}>{body}</Text>
+        </View>
+
+        {processedProgressSlot || (
+          <CircularProgressBar
+            state={progressState}
+            value={value}
+            modes={modes}
+            {...(valueLabel ? { valueLabel } : {})}
+          />
+        )}
+      </View>
+
+      {showNudge ? (
+        processedNudgeSlot || (
+          <Nudge type="inline-compact" modes={modes} style={{ width: '100%' }}>
+            <Text style={tokens.nudgeBodyStyle}>{nudgeBody}</Text>
+          </Nudge>
+        )
+      ) : null}
+
+      {showDivider ? <Divider modes={modes} /> : null}
+
+      {showButton ? (
+        <View style={tokens.buttonWrapStyle}>
+          {processedButtonSlot || (
+            <Button
+              label={buttonLabel}
+              modes={buttonModes}
+              {...(onPressButton ? { onPress: onPressButton } : {})}
+            />
+          )}
+        </View>
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(CardFinancialCondition)

package/src/components/Carousel/Carousel.tsx

@@ -102,6 +102,10 @@ export function Carousel({
   const containerPaddingV = parseFloat(
     getVariableByName('carousel/padding/vertical', modes) || '0',
   )
+  // Outer container max height per Figma (`carousel/maxHeight`).
+  const maxHeight = parseFloat(
+    getVariableByName('carousel/maxHeight', modes) || '280',
+  )
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap
 
@@ -251,6 +255,7 @@ export function Carousel({
   // ---- Render ----
   const outerStyle: ViewStyle = {
     paddingVertical: containerPaddingV,
+    maxHeight,
   }
 
   const contentContainerStyle: ViewStyle = {
@@ -364,21 +369,24 @@ export function Pagination({ modes: propModes, style }: PaginationProps) {
   const modes = propModes || ctxModes || {}
 
   // Token resolution for dots — matches Figma tokens
-  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
-  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
-  const dotSize = 6
-  const dotActiveWidth = 16
+  // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
+  const dotSize = parseFloat(
+    getVariableByName('carousel/pagination/indicator/size', modes) || '6',
+  )
+  const dotActiveWidth = parseFloat(
+    getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16',
+  )
   const dotGap = parseFloat(
     getVariableByName('carousel/pagination/gap', modes) || '4',
   )
   const dotColor =
     (getVariableByName(
-      'carousel/pagination/indicator/inactivecolor',
+      'carousel/pagination/indicator/inactiveColor',
       modes,
     ) as string) || 'rgba(0,0,0,0.3)'
   const dotActiveColor =
     (getVariableByName(
-      'carousel/pagination/indicator/activecolor',
+      'carousel/pagination/indicator/activeColor',
       modes,
     ) as string) || '#170d0a'
   const dotRadius = parseFloat(

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -0,0 +1,190 @@
+import React from 'react'
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import Svg, { Circle } 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 { IconMinus } from '../../icons/components/IconMinus'
+
+type CircularProgressBarBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CircularProgressBarState = 'Active' | 'Inactive'
+
+export type CircularProgressBarProps = CircularProgressBarBaseProps & {
+  /** Current progress value. Clamped between 0 and 100. */
+  value?: number
+  /** Active shows progress and value; inactive shows the track and minus icon. */
+  state?: CircularProgressBarState | boolean
+  /** Optional formatted value shown in the active state. */
+  valueLabel?: string
+  /** Design token modes forwarded to token lookups. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Track stroke style override. */
+  trackStyle?: StyleProp<ViewStyle>
+  /** Progress stroke style override. */
+  progressStyle?: StyleProp<ViewStyle>
+  /** Value text style override. */
+  valueStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the whole progress component. */
+  accessibilityLabel?: string
+}
+
+const STROKE_WIDTH_RATIO = 8 / 60
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+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
+}
+
+const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
+  const flattened = StyleSheet.flatten(style)
+  return typeof flattened.backgroundColor === 'string'
+    ? flattened.backgroundColor
+    : fallback
+}
+
+function CircularProgressBar({
+  value = 70,
+  state = 'Inactive',
+  valueLabel,
+  modes: propModes = EMPTY_MODES,
+  style,
+  trackStyle,
+  progressStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}: CircularProgressBarProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  const isActive = state === true || state === 'Active'
+  const normalizedValue = clamp(value, 0, 100)
+  const size = toNumber(getVariableByName('circularProgressBar/size', modes), 60)
+  const strokeWidth = Math.max(1, size * STROKE_WIDTH_RATIO)
+  const radius = Math.max(0, (size - strokeWidth) / 2)
+  const center = size / 2
+  const circumference = 2 * Math.PI * radius
+
+  const trackColor = getStrokeColor(
+    trackStyle,
+    getVariableByName('circularProgressBar/track/color', modes) as string || '#ebebed'
+  )
+  const progressColor = getStrokeColor(
+    progressStyle,
+    getVariableByName('circularProgressBar/progress/color', modes) as string || '#25ab21'
+  )
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) as string || '#666666'
+  const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24)
+
+  const foreground = getVariableByName('circularProgressBar/foreground', modes) as string || '#0d0d0f'
+  const fontSize = toNumber(getVariableByName('circularProgressBar/fontSize', modes), 18)
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) as string || 'JioType Var'
+  const lineHeight = toNumber(getVariableByName('circularProgressBar/lineHeight', modes), 21)
+  const fontWeight = toFontWeight(getVariableByName('circularProgressBar/fontWeight', modes), '700')
+
+  const computedContainerStyle: ViewStyle = {
+    alignItems: 'center',
+    height: size,
+    justifyContent: 'center',
+    position: 'relative',
+    width: size,
+  }
+
+  const computedValueStyle: TextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    position: 'absolute',
+    textAlign: 'center',
+  }
+
+  const iconStyle: ViewStyle = {
+    left: (size - iconSize) / 2,
+    position: 'absolute',
+    top: (size - iconSize) / 2,
+  }
+
+  const displayValue = valueLabel ?? String(Math.round(normalizedValue))
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? (isActive ? `${displayValue} out of 100` : 'Inactive progress')
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityValue={{ min: 0, max: 100, now: normalizedValue }}
+      style={[computedContainerStyle, style]}
+      {...rest}
+    >
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={trackColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        {isActive ? (
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={progressColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            fill="none"
+            strokeDasharray={`${circumference} ${circumference}`}
+            strokeDashoffset={circumference * (1 - normalizedValue / 100)}
+            rotation="-90"
+            originX={center}
+            originY={center}
+          />
+        ) : null}
+      </Svg>
+
+      {isActive ? (
+        <Text style={[computedValueStyle, valueStyle]}>
+          {displayValue}
+        </Text>
+      ) : (
+        <IconMinus
+          width={iconSize}
+          height={iconSize}
+          fill={iconColor}
+          color={iconColor}
+          style={iconStyle}
+        />
+      )}
+    </View>
+  )
+}
+
+export default CircularProgressBar