jfs-components 0.0.73 → 0.0.74

package/src/components/LottieIntroBlock/LottieIntroBlock.tsx

@@ -0,0 +1,202 @@
+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'
+
+const DEFAULT_MEDIA_SIZE = 117
+
+export type LottieIntroBlockProps = {
+  /** Headline text shown below the media area. */
+  title?: string
+  /** Whether to render the supportive paragraph below the title. */
+  showSupportText?: boolean
+  /** Body/supportive text shown below the title. */
+  supportText?: string
+  /** Whether to render the action button at the bottom. */
+  showButton?: 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
+  /**
+   * Custom slot for the media area (Lottie animation, illustration, or image).
+   * Should render at the design size of 117x117. If omitted, a neutral
+   * placeholder of the same size is rendered so the layout stays stable.
+   * `modes` are automatically cascaded into this slot.
+   */
+  media?: React.ReactNode
+  /**
+   * 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
+}
+
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+function LottieIntroBlock({
+  title = "Let's get to know how your financial health is doing",
+  showSupportText = true,
+  supportText = 'From assets to taxes, stay on top of everything in one simple view.',
+  showButton = true,
+  buttonLabel = 'Button',
+  onButtonPress,
+  media,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID,
+}: LottieIntroBlockProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => ({ ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  // Container
+  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes)) || 36
+  const paddingHorizontal =
+    Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes)) || 0
+  const paddingVertical =
+    Number(getVariableByName('lottieIntroBlock/padding/vertical', modes)) || 16
+
+  // Text wrap
+  const textWrapGap =
+    Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes)) || 16
+
+  // Title
+  const titleColor =
+    getVariableByName('lottieIntroBlock/title/foreground', modes) || '#0d0d0f'
+  const titleFontSize =
+    Number(getVariableByName('lottieIntroBlock/title/fontSize', modes)) || 23
+  const titleFontFamily =
+    getVariableByName('lottieIntroBlock/title/fontFamily', modes) || 'System'
+  const titleLineHeight =
+    Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes)) || 23
+  const titleFontWeight =
+    getVariableByName('lottieIntroBlock/title/fontWeight', modes) || 900
+
+  // Support text
+  const supportColor =
+    getVariableByName('lottieIntroBlock/supportText/foreground', modes) ||
+    '#0d0d0f'
+  const supportFontSize =
+    Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes)) ||
+    14
+  const supportFontFamily =
+    getVariableByName('lottieIntroBlock/supportText/fontFamily', modes) ||
+    'System'
+  const supportLineHeight =
+    Number(
+      getVariableByName('lottieIntroBlock/supportText/lineHeight', modes)
+    ) || 18
+  const supportFontWeight =
+    getVariableByName('lottieIntroBlock/supportText/fontWeight', modes) || 400
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+  }
+
+  const textWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%',
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  const supportTextStyle: TextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    fontFamily: supportFontFamily,
+    lineHeight: supportLineHeight,
+    fontWeight: String(supportFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  const mediaContent = useMemo(() => {
+    if (media === undefined || media === null) {
+      return (
+        <View
+          style={{
+            width: DEFAULT_MEDIA_SIZE,
+            height: DEFAULT_MEDIA_SIZE,
+          }}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        />
+      )
+    }
+    return cloneChildrenWithModes(media, modes)
+  }, [media, modes])
+
+  const buttonContent = useMemo(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes)
+    }
+    if (!showButton) {
+      return null
+    }
+    return <Button label={buttonLabel} onPress={onButtonPress} modes={modes} />
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes])
+
+  return (
+    <View style={[containerStyle, style]} testID={testID}>
+      {mediaContent}
+      <View style={textWrapStyle}>
+        <Text style={titleStyle}>{title}</Text>
+        {showSupportText && supportText ? (
+          <Text style={supportTextStyle}>{supportText}</Text>
+        ) : null}
+        {buttonContent}
+      </View>
+    </View>
+  )
+}
+
+export default LottieIntroBlock

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

@@ -4,8 +4,17 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type TextProps = {
-  /** The text content to display. */
+  /**
+   * The text content to display. You may also pass content as JSX children
+   * (e.g. `<Text>Hello</Text>`) — when both are provided, `children` wins.
+   */
   text?: string
+  /**
+   * Child nodes (string, number, or nested <Text>/<RNText> elements). This
+   * mirrors the standard React Native `<Text>` API so the component is a
+   * near-drop-in replacement.
+   */
+  children?: React.ReactNode
   /** Horizontal alignment of the text. */
   textAlign?: 'Left' | 'Center'
   /** Modes configuration for design token resolution. */
@@ -22,7 +31,8 @@ const TEXT_ALIGN_MAP: Record<NonNullable<TextProps['textAlign']>, TextStyle['tex
 }
 
 function Text({
-  text = 'Korem ipsum ',
+  text,
+  children,
   textAlign = 'Left',
   modes = EMPTY_MODES,
   style,
@@ -45,12 +55,23 @@ function Text({
     textAlign: TEXT_ALIGN_MAP[textAlign],
   }
 
+  // Prefer JSX children when present, otherwise fall back to the `text` prop.
+  // Keep the storybook placeholder as a last resort so the Default story
+  // still renders something visible when no content is supplied via either
+  // route.
+  const content =
+    children !== undefined && children !== null && children !== false
+      ? children
+      : text !== undefined
+        ? text
+        : 'Korem ipsum '
+
   return (
     <RNText
       style={[textStyle, style]}
       numberOfLines={numberOfLines}
     >
-      {text}
+      {content}
     </RNText>
   )
 }