jfs-components 0.0.72 → 0.0.74

package/src/components/PageHero/PageHero.tsx

@@ -0,0 +1,200 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import Button from '../Button/Button'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type PageHeroProps = {
+  /** Small eyebrow text shown above the headline. */
+  eyebrow?: string
+  /** Main headline text. Centered and bold. */
+  headline?: string
+  /** Optional supporting text shown below the headline. */
+  supportingText?: string
+  /** Whether to render the supporting text. */
+  showSupportingText?: boolean
+  /** Label for the default action button. Ignored when `buttonSlot` is provided. */
+  buttonLabel?: string
+  /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
+  onButtonPress?: () => void
+  /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
+  showButton?: boolean
+  /**
+   * Optional slot to fully override the action button.
+   * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
+   * `modes` are automatically cascaded into this slot.
+   */
+  buttonSlot?: React.ReactNode
+  /** Mode configuration for design-token theming. */
+  modes?: Record<string, any>
+  /** Style overrides applied to the outer container. */
+  style?: StyleProp<ViewStyle>
+  testID?: string
+}
+
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an eyebrow line, a large headline, an optional
+ * supporting line (e.g. price/timeline), and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. The button slot cascades the active `modes` to its
+ * children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ * />
+ * ```
+ */
+function PageHero({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Resume earning cashback, extra points, and 1% gold',
+  supportingText = '₹999/year · ₹0 until 2027',
+  showSupportingText = true,
+  buttonLabel = 'Renew for free',
+  onButtonPress,
+  showButton = true,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID,
+}: PageHeroProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => ({ ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  const gap = Number(getVariableByName('PageHero/gap', modes)) || 16
+  const paddingHorizontal =
+    Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0
+
+  const textWrapGap =
+    Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
+
+  const eyebrowColor =
+    getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff'
+  const eyebrowFontFamily =
+    getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System'
+  const eyebrowFontSize =
+    Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18
+  const eyebrowFontWeight =
+    getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700
+  const eyebrowLineHeight =
+    Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20
+
+  const headlineColor =
+    getVariableByName('PageHero/headline/color', modes) || '#ffffff'
+  const headlineFontFamily =
+    getVariableByName('PageHero/headline/fontFamily', modes) || 'System'
+  const headlineFontSize =
+    Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29
+  const headlineFontWeight =
+    getVariableByName('PageHero/headline/fontWeight', modes) || 900
+  const headlineLineHeight =
+    Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29
+
+  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
+  // Color, font size and weight are inline literals in the design (12px medium
+  // white) — we mirror that here so the visual stays faithful when no token
+  // exists.
+  const supportingTextLineHeight =
+    Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+    width: '100%',
+  }
+
+  const textWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%',
+  }
+
+  const eyebrowStyle: TextStyle = {
+    color: eyebrowColor as string,
+    fontFamily: eyebrowFontFamily as string,
+    fontSize: eyebrowFontSize,
+    fontWeight: String(eyebrowFontWeight) as TextStyle['fontWeight'],
+    lineHeight: eyebrowLineHeight,
+    textAlign: 'center',
+  }
+
+  const headlineStyle: TextStyle = {
+    color: headlineColor as string,
+    fontFamily: headlineFontFamily as string,
+    fontSize: headlineFontSize,
+    fontWeight: String(headlineFontWeight) as TextStyle['fontWeight'],
+    lineHeight: headlineLineHeight,
+    textAlign: 'center',
+    width: '100%',
+  }
+
+  const supportingTextStyle: TextStyle = {
+    color: '#ffffff',
+    fontFamily: 'System',
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: supportingTextLineHeight,
+    textAlign: 'center',
+  }
+
+  const buttonWrapStyle: ViewStyle = {
+    width: '100%',
+  }
+
+  const buttonContent = useMemo<React.ReactNode>(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes)
+    }
+    if (!showButton) {
+      return null
+    }
+    return (
+      <Button
+        label={buttonLabel}
+        onPress={onButtonPress}
+        modes={modes}
+        style={buttonWrapStyle}
+      />
+    )
+  // buttonWrapStyle is a literal object created above; it is intentionally
+  // omitted from deps because its identity changes on every render but its
+  // shape never does.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes])
+
+  return (
+    <View style={[containerStyle, style]} testID={testID}>
+      <View style={textWrapStyle}>
+        {eyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
+        {headline ? <Text style={headlineStyle}>{headline}</Text> : null}
+      </View>
+      {showSupportingText && supportingText ? (
+        <Text style={supportingTextStyle}>{supportingText}</Text>
+      ) : null}
+      {buttonContent}
+    </View>
+  )
+}
+
+export default PageHero

package/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -0,0 +1,221 @@
+import React, { useMemo } from 'react'
+import {
+    Text,
+    View,
+    type ImageStyle,
+    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 MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
+
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+const DEFAULT_LOGO: UnifiedSource = require('./finvu.png')
+
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator'
+const DEFAULT_IMAGE_WIDTH = 33
+const DEFAULT_IMAGE_HEIGHT = 12
+
+export type PoweredByLabelProps = {
+    /**
+     * Label copy. Defaults to "Powered by RBI-regulated account aggregator"
+     * to match the Figma reference.
+     */
+    label?: string
+    /**
+     * Brand logo source. Accepts any {@link UnifiedSource} — remote URI, SVG
+     * XML string, `require()` asset, SVG React component, or React element.
+     * Defaults to the bundled FINVU logo so the component renders correctly
+     * without any caller-provided image.
+     *
+     * Ignored when `imageSlot` is provided.
+     */
+    imageSource?: UnifiedSource
+    /**
+     * Rendered width of the logo in px. Defaults to `33` to match Figma.
+     */
+    imageWidth?: number
+    /**
+     * Rendered height of the logo in px. Defaults to `12` to match Figma.
+     */
+    imageHeight?: number
+    /**
+     * Replace the default `Image` entirely (e.g. with a vector logo,
+     * `BrandChip`, or custom layout). Receives `modes` recursively.
+     * Overrides `imageSource`.
+     */
+    imageSlot?: React.ReactNode
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
+     */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Label text style override. */
+    textStyle?: StyleProp<TextStyle>
+    /** Logo image style override (size/resize behaviour, etc.). */
+    imageStyle?: StyleProp<ImageStyle>
+    /**
+     * Accessibility label. Defaults to the visible `label` so the brand image
+     * (which is decorative) does not need to be announced separately.
+     */
+    accessibilityLabel?: string
+}
+
+const toNumber = (value: unknown, fallback: number): 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']
+): TextStyle['fontWeight'] => {
+    if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+    if (typeof value === 'string') return value as TextStyle['fontWeight']
+    return fallback
+}
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+    label = DEFAULT_LABEL,
+    imageSource,
+    imageWidth = DEFAULT_IMAGE_WIDTH,
+    imageHeight = DEFAULT_IMAGE_HEIGHT,
+    imageSlot,
+    modes: propModes = EMPTY_MODES,
+    style,
+    textStyle,
+    imageStyle,
+    accessibilityLabel,
+}: PoweredByLabelProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(
+        () =>
+            globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+                ? EMPTY_MODES
+                : { ...globalModes, ...propModes },
+        [globalModes, propModes]
+    )
+
+    const background =
+        (getVariableByName('poweredByLabel/background', modes) as string | null) ??
+        '#f5f5f5'
+    const foreground =
+        (getVariableByName('poweredByLabel/foreground', modes) as string | null) ??
+        '#191b1e'
+    const fontFamily =
+        (getVariableByName('poweredByLabel/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const fontSize = toNumber(getVariableByName('poweredByLabel/fontSize', modes), 10)
+    const lineHeight = toNumber(
+        getVariableByName('poweredByLabel/lineHeight', modes),
+        12
+    )
+    const fontWeight = toFontWeight(
+        getVariableByName('poweredByLabel/fontWeight', modes),
+        '400'
+    )
+    const gap = toNumber(getVariableByName('poweredByLabel/gap', modes), 10)
+    const paddingHorizontal = toNumber(
+        getVariableByName('poweredByLabel/padding/horizontal', modes),
+        16
+    )
+    const paddingVertical = toNumber(
+        getVariableByName('poweredByLabel/padding/vertical', modes),
+        6
+    )
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: background,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        // Hug content horizontally so the pill does not stretch to fill the
+        // parent (matches Badge, BrandChip, etc.). Override via `style` if
+        // you want it full-width (e.g. inside a card footer).
+        alignSelf: 'flex-start',
+    }
+
+    const labelTextStyle: TextStyle = {
+        color: foreground,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        textAlign: 'center',
+        flexShrink: 1,
+    }
+
+    const renderImage = (): React.ReactNode => {
+        if (imageSlot !== undefined && imageSlot !== null) {
+            const processed = cloneChildrenWithModes(imageSlot, modes)
+            if (processed.length === 0) return null
+            return processed.length === 1 ? processed[0] : processed
+        }
+
+        const resolvedSource: UnifiedSource =
+            (imageSource as UnifiedSource | undefined) ?? DEFAULT_LOGO
+
+        return (
+            <MediaSource
+                source={resolvedSource}
+                width={imageWidth}
+                height={imageHeight}
+                resizeMode="contain"
+                style={imageStyle}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+            />
+        )
+    }
+
+    return (
+        <View
+            accessibilityRole="text"
+            accessibilityLabel={accessibilityLabel ?? label}
+            style={[containerStyle, style]}
+        >
+            <Text
+                style={[labelTextStyle, textStyle]}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+                numberOfLines={1}
+            >
+                {label}
+            </Text>
+            {renderImage()}
+        </View>
+    )
+}
+
+export default PoweredByLabel

package/src/components/ProductOverview/ProductOverview.tsx

@@ -0,0 +1,236 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Image from '../Image/Image'
+import ProductLabel from '../ProductLabel/ProductLabel'
+
+export type ProductOverviewStat = {
+    /** The large prominent value shown on top, e.g. "995", "3%". */
+    value: string
+    /** The descriptive label rendered beneath the value, e.g. "Purity". */
+    label: string
+}
+
+export type ProductOverviewProps = {
+    /** Hero image source rendered at the top of the card. */
+    imageSource?: ImageSourcePropType | string
+    /** Aspect ratio for the hero image. Defaults to the Figma frame (288:170). */
+    imageRatio?: number
+    /** Avatar source for the inline ProductLabel chip. */
+    labelImageSource?: ImageSourcePropType | string
+    /** Text shown next to the avatar in the ProductLabel chip. */
+    label?: string
+    /** The large product name, e.g. "0.5g Gold Coin". */
+    productName?: string
+    /** The short multi-line description below the product name. */
+    description?: string
+    /**
+     * Stats rendered in the bottom row. Each stat shows a large value above a
+     * smaller label. Pass an empty array (or `null`) to hide the row.
+     */
+    stats?: ProductOverviewStat[]
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /**
+     * Custom slot rendered between the description and the stats row, useful
+     * for badges, callouts, etc. Receives the same `modes` as the parent.
+     */
+    children?: React.ReactNode
+}
+
+const DEFAULT_STATS: ProductOverviewStat[] = [
+    { value: '995', label: 'Purity' },
+    { value: '3%', label: 'GST' },
+]
+
+const ProductOverview = ({
+    imageSource,
+    imageRatio = 288 / 170,
+    labelImageSource,
+    label = 'Gold',
+    productName = '0.5g Gold Coin',
+    description = 'Your gold is insured from our vault to you. If lost or damaged, we’ll replace it.',
+    stats = DEFAULT_STATS,
+    modes = EMPTY_MODES,
+    style,
+    children,
+}: ProductOverviewProps) => {
+    const padding = (getVariableByName('productOverview/padding', modes) as number | null) ?? 24
+    const gap = (getVariableByName('productOverview/gap', modes) as number | null) ?? 12
+    const background =
+        (getVariableByName('productOverview/background', modes) as string | null) ?? '#ffffff'
+
+    const productNameColor =
+        (getVariableByName('productOverview/productName/color', modes) as string | null) ??
+        '#0d0d0f'
+    const productNameFontFamily =
+        (getVariableByName('productOverview/productName/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const productNameFontSize =
+        (getVariableByName('productOverview/productName/fontSize', modes) as number | null) ?? 26
+    const productNameFontWeight =
+        getVariableByName('productOverview/productName/fontWeight', modes) ?? 900
+    const productNameLineHeight =
+        (getVariableByName('productOverview/productName/lineHeight', modes) as number | null) ?? 26
+
+    const descriptionColor =
+        (getVariableByName('productOverview/description/color', modes) as string | null) ??
+        '#1a1c1f'
+    const descriptionFontFamily =
+        (getVariableByName('productOverview/description/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const descriptionFontSize =
+        (getVariableByName('productOverview/description/fontSize', modes) as number | null) ?? 14
+    const descriptionFontWeight =
+        getVariableByName('productOverview/description/fontWeight', modes) ?? 500
+    const descriptionLineHeight =
+        (getVariableByName('productOverview/description/lineHeight', modes) as number | null) ??
+        18.2
+
+    const statGap = (getVariableByName('productOverview/stat/gap', modes) as number | null) ?? 2
+    const statValueColor =
+        (getVariableByName('productOverview/stat/value/color', modes) as string | null) ??
+        '#141414'
+    const statValueFontFamily =
+        (getVariableByName('productOverview/stat/value/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const statValueFontSize =
+        (getVariableByName('productOverview/stat/value/fontSize', modes) as number | null) ?? 20
+    const statValueFontWeight =
+        getVariableByName('productOverview/stat/value/fontWeight', modes) ?? 900
+    const statValueLineHeight =
+        (getVariableByName('productOverview/stat/value/lineHeight', modes) as number | null) ?? 20
+
+    const statLabelColor = productNameColor
+    const statLabelFontFamily =
+        (getVariableByName('productOverview/stat/label/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const statLabelFontSize =
+        (getVariableByName('productOverview/stat/label/fontSize', modes) as number | null) ?? 12
+    const statLabelFontWeight =
+        getVariableByName('productOverview/stat/label/fontWeight', modes) ?? 400
+    const statLabelLineHeight =
+        (getVariableByName('productOverview/stat/label/lineHeight', modes) as number | null) ??
+        15.6
+
+    const productNameStyle: TextStyle = {
+        color: productNameColor,
+        fontFamily: productNameFontFamily,
+        fontSize: productNameFontSize,
+        fontWeight: String(productNameFontWeight) as TextStyle['fontWeight'],
+        lineHeight: productNameLineHeight,
+        textAlign: 'center',
+    }
+
+    const descriptionStyle: TextStyle = {
+        color: descriptionColor,
+        fontFamily: descriptionFontFamily,
+        fontSize: descriptionFontSize,
+        fontWeight: String(descriptionFontWeight) as TextStyle['fontWeight'],
+        lineHeight: descriptionLineHeight,
+        textAlign: 'center',
+    }
+
+    const statValueStyle: TextStyle = {
+        color: statValueColor,
+        fontFamily: statValueFontFamily,
+        fontSize: statValueFontSize,
+        fontWeight: String(statValueFontWeight) as TextStyle['fontWeight'],
+        lineHeight: statValueLineHeight,
+    }
+
+    const statLabelStyle: TextStyle = {
+        color: statLabelColor,
+        fontFamily: statLabelFontFamily,
+        fontSize: statLabelFontSize,
+        fontWeight: String(statLabelFontWeight) as TextStyle['fontWeight'],
+        lineHeight: statLabelLineHeight,
+        textAlign: 'center',
+    }
+
+    const showStats = Array.isArray(stats) && stats.length > 0
+
+    return (
+        <View
+            style={[
+                {
+                    backgroundColor: background,
+                    padding,
+                    gap,
+                    alignItems: 'center',
+                    width: '100%',
+                },
+                style,
+            ]}
+        >
+            {imageSource != null && (
+                <Image
+                    imageSource={imageSource}
+                    ratio={imageRatio}
+                    resizeMode="contain"
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                />
+            )}
+
+            <ProductLabel
+                label={label}
+                {...(labelImageSource != null && { imageSource: labelImageSource })}
+                modes={modes}
+            />
+
+            {productName ? (
+                <Text style={productNameStyle} accessibilityRole="header">
+                    {productName}
+                </Text>
+            ) : null}
+
+            {description ? <Text style={descriptionStyle}>{description}</Text> : null}
+
+            {children ? <>{cloneChildrenWithModes(children, modes)}</> : null}
+
+            {showStats && (
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                    }}
+                >
+                    {stats.map((stat, index) => (
+                        <View
+                            key={`${stat.label}-${index}`}
+                            style={{
+                                flex: 1,
+                                minWidth: 0,
+                                alignItems: 'center',
+                                gap: statGap,
+                                overflow: 'hidden',
+                            }}
+                        >
+                            <Text style={statValueStyle} numberOfLines={1}>
+                                {stat.value}
+                            </Text>
+                            <Text style={statLabelStyle} numberOfLines={1}>
+                                {stat.label}
+                            </Text>
+                        </View>
+                    ))}
+                </View>
+            )}
+        </View>
+    )
+}
+
+export default ProductOverview