jfs-components 0.0.71 → 0.0.73

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/CardInsight/CardInsight.tsx

@@ -0,0 +1,239 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Badge from '../Badge/Badge'
+import Divider from '../Divider/Divider'
+import Nudge from '../Nudge/Nudge'
+import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary'
+
+export type CardInsightProps = {
+    /** Card title rendered in the header (left of the badge). */
+    title?: string
+    /** One-line explanation rendered under the title. */
+    subtitle?: string
+    /**
+     * Header badge. Pass a string to render the default `Badge` with that
+     * label, or a custom `ReactNode` for full control. Pass `false` or
+     * `null` to hide the badge entirely.
+     */
+    badge?: React.ReactNode | string | false
+    /**
+     * Main content slot. Defaults to a `SavingsGoalSummary` to match the
+     * Figma reference. Pass any `ReactNode` to override.
+     */
+    children?: React.ReactNode
+    /**
+     * Footer Nudge. Pass a `ReactNode` to override the default inline-compact
+     * `Nudge`, or `false`/`null` to hide it.
+     */
+    footer?: React.ReactNode | false
+    /**
+     * Whether to render a `Divider` between the content slot and the footer.
+     * Defaults to `true` whenever a footer is shown. Pass `false` to hide it,
+     * or a custom `ReactNode` to override.
+     */
+    divider?: React.ReactNode | boolean
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * `CardInsight` renders a single insight card composed of:
+ *
+ * 1. A header with a title, subtitle and a trailing `Badge`.
+ * 2. A flexible content slot — defaults to `SavingsGoalSummary`.
+ * 3. A `Divider` separating the slot from the footer.
+ * 4. A footer slot — defaults to an inline-compact `Nudge`.
+ *
+ * @component
+ * @param {CardInsightProps} props
+ */
+function CardInsight({
+    title = 'Emergency savings',
+    subtitle = 'One line explanation here.',
+    badge = 'Label',
+    children,
+    footer,
+    divider,
+    modes = EMPTY_MODES,
+    style,
+}: CardInsightProps) {
+    const background =
+        (getVariableByName('cardInsight/background', modes) as string | null) ?? '#ffffff'
+    const radius =
+        (getVariableByName('cardInsight/radius', modes) as number | null) ?? 16
+    const paddingHorizontal =
+        (getVariableByName('cardInsight/padding/horizontal', modes) as number | null) ?? 12
+    const paddingVertical =
+        (getVariableByName('cardInsight/padding/vertical', modes) as number | null) ?? 16
+    const gap = (getVariableByName('cardInsight/gap', modes) as number | null) ?? 12
+    const contentGap =
+        (getVariableByName('cardInsight/contentGap', modes) as number | null) ?? 8
+    const width = (getVariableByName('cardInsight/width', modes) as number | null) ?? 356
+    const slotBackground =
+        (getVariableByName('cardInsight/slot/background', modes) as string | null) ?? '#ffffff'
+
+    const headerGap =
+        (getVariableByName('cardInsight/header/gap', modes) as number | null) ?? 8
+    const textGap =
+        (getVariableByName('cardInsight/text/gap', modes) as number | null) ?? 4
+
+    const titleColor =
+        (getVariableByName('cardInsight/title/color', modes) as string | null) ?? '#0d0d0f'
+    const titleFontFamily =
+        (getVariableByName('cardInsight/title/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const titleFontSize =
+        (getVariableByName('cardInsight/title/fontSize', modes) as number | null) ?? 16
+    const titleLineHeight =
+        (getVariableByName('cardInsight/title/lineHeight', modes) as number | null) ?? 17.6
+    const titleFontWeightRaw =
+        getVariableByName('cardInsight/title/fontWeight', modes) ?? 700
+    const titleFontWeight = String(titleFontWeightRaw) as TextStyle['fontWeight']
+
+    const bodyColor =
+        (getVariableByName('cardInsight/body/color', modes) as string | null) ?? '#0d0d0f'
+    const bodyFontFamily =
+        (getVariableByName('cardInsight/body/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const bodyFontSize =
+        (getVariableByName('cardInsight/body/fontSize', modes) as number | null) ?? 12
+    const bodyLineHeight =
+        (getVariableByName('cardInsight/body/lineHeight', modes) as number | null) ?? 15.6
+    const bodyFontWeightRaw =
+        getVariableByName('cardInsight/body/fontWeight', modes) ?? 400
+    const bodyFontWeight = String(bodyFontWeightRaw) as TextStyle['fontWeight']
+
+    const renderBadge = (): React.ReactNode => {
+        if (badge === false || badge === null || badge === undefined) return null
+        if (typeof badge === 'string') {
+            return <Badge label={badge} modes={modes} />
+        }
+        const processed = cloneChildrenWithModes(badge, modes)
+        return processed.length === 1 ? processed[0] : processed
+    }
+
+    const renderSlot = (): React.ReactNode => {
+        if (!children) {
+            return <SavingsGoalSummary modes={modes} />
+        }
+        const processed = cloneChildrenWithModes(children, modes)
+        return processed.length === 1 ? processed[0] : processed
+    }
+
+    const renderFooter = (): React.ReactNode => {
+        if (footer === false || footer === null) return null
+        if (footer === undefined) {
+            return (
+                <Nudge
+                    type="inline-compact"
+                    modes={{ AppearanceBrand: 'Neutral', Context: 'Nudge&Alert', ...modes }}
+                />
+            )
+        }
+        const processed = cloneChildrenWithModes(footer, modes)
+        return processed.length === 1 ? processed[0] : processed
+    }
+
+    const renderDivider = (): React.ReactNode => {
+        if (divider === false || divider === null) return null
+        if (divider === undefined || divider === true) {
+            return <Divider modes={modes} />
+        }
+        const processed = cloneChildrenWithModes(divider, modes)
+        return processed.length === 1 ? processed[0] : processed
+    }
+
+    const footerNode = renderFooter()
+    const showDivider = footerNode !== null && divider !== false && divider !== null
+
+    return (
+        <View
+            style={[
+                {
+                    width,
+                    backgroundColor: background,
+                    borderRadius: radius,
+                    paddingHorizontal,
+                    paddingVertical,
+                    gap,
+                    overflow: 'hidden',
+                    alignItems: 'stretch',
+                },
+                style,
+            ]}
+        >
+            <View
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'flex-start',
+                    gap: headerGap,
+                    width: '100%',
+                }}
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        minWidth: 0,
+                        gap: textGap,
+                        alignItems: 'flex-start',
+                    }}
+                >
+                    <Text
+                        style={{
+                            color: titleColor,
+                            fontFamily: titleFontFamily,
+                            fontSize: titleFontSize,
+                            lineHeight: titleLineHeight,
+                            fontWeight: titleFontWeight,
+                            width: '100%',
+                        }}
+                    >
+                        {title}
+                    </Text>
+                    <Text
+                        style={{
+                            color: bodyColor,
+                            fontFamily: bodyFontFamily,
+                            fontSize: bodyFontSize,
+                            lineHeight: bodyLineHeight,
+                            fontWeight: bodyFontWeight,
+                            width: '100%',
+                        }}
+                    >
+                        {subtitle}
+                    </Text>
+                </View>
+
+                {renderBadge()}
+            </View>
+
+            <View
+                style={{
+                    width: '100%',
+                    backgroundColor: slotBackground,
+                    gap: contentGap,
+                    overflow: 'hidden',
+                    alignItems: 'stretch',
+                }}
+            >
+                {renderSlot()}
+            </View>
+
+            {showDivider ? renderDivider() : null}
+
+            {footerNode}
+        </View>
+    )
+}
+
+export default CardInsight

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(