jfs-components 0.1.2 → 0.1.12

package/src/components/BenefitCard/BenefitCard.tsx

@@ -0,0 +1,309 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text as RNText,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../Icon/Icon'
+import Text from '../Text/Text'
+import ListItem from '../ListItem/ListItem'
+import Divider from '../Divider/Divider'
+import Button from '../Button/Button'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+export interface BenefitCardItem {
+    /** Registry icon name for the leading glyph (e.g. `'ic_jewellery_diamond'`). */
+    icon?: string
+    /** Per-item override for the leading icon color. Defaults to the brand token. */
+    iconColor?: string
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode
+    /** Row title (e.g. `"JioPoints"`). */
+    title: string
+    /** Optional right-aligned trailing value (e.g. `"Up to 2000 pts"`). */
+    trailingText?: string
+    /** Full override for the trailing node. Takes precedence over `trailingText`. */
+    trailing?: React.ReactNode
+    /** Makes the row pressable. */
+    onPress?: () => void
+}
+
+export interface BenefitCardProps {
+    /** Header section title (e.g. `"You will earn"`). */
+    headerTitle?: string
+    /**
+     * Highlighted item shown directly under the header title (icon + title +
+     * optional trailing value). Rendered above the divider.
+     */
+    headerItem?: BenefitCardItem
+    /**
+     * Toggles the whole header section (title + item + divider). Mirrors the
+     * Figma `showHeader` property. Defaults to `true`.
+     */
+    showHeader?: boolean
+    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    bodyTitle?: string
+    /**
+     * Body benefit rows. Ignored when `children` is provided (the slot wins).
+     */
+    items?: BenefitCardItem[]
+    /**
+     * Real slot for the body "list wrap". When provided, these children render
+     * instead of `items`; `modes` (plus the `List Item Style: Minimal` style)
+     * cascade into every child automatically.
+     */
+    children?: React.ReactNode
+    /** CTA button label. Defaults to `"Upgrade"`. */
+    buttonLabel?: string
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /**
+     * Toggles the CTA button. Mirrors the Figma `showButton` property.
+     * Defaults to `true`.
+     */
+    showButton?: boolean
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+function BenefitCard({
+    headerTitle = 'You will earn',
+    headerItem,
+    showHeader = true,
+    bodyTitle = 'Upgrade to JioFinance+ and earn more',
+    items,
+    children,
+    buttonLabel = 'Upgrade',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 344,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: BenefitCardProps) {
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    // Sub-component modes. Consumer-supplied `modes` always win via spread order.
+    const listItemModes = useMemo<Modes>(() => ({ 'List Item Style': 'Minimal', ...modes }), [modes])
+    const iconModes = useMemo<Modes>(() => ({ AppearanceBrand: 'Secondary', ...modes }), [modes])
+    const trailingTextModes = useMemo<Modes>(
+        () => ({ 'Text Sizes': 'Small', Weight: 'Regular', ...modes }),
+        [modes]
+    )
+    const ctaModes = useMemo<Modes>(() => ({ 'Button / Size': 'S', ...modes }), [modes])
+
+    const renderItem = (item: BenefitCardItem, key: React.Key) => {
+        const leading =
+            item.leading ??
+            (item.icon != null ? (
+                <Icon iconName={item.icon} color={item.iconColor} modes={iconModes} />
+            ) : null)
+
+        const trailing =
+            item.trailing ??
+            (item.trailingText != null ? (
+                <Text modes={trailingTextModes}>{item.trailingText}</Text>
+            ) : undefined)
+
+        return (
+            <ListItem
+                key={key}
+                layout="Horizontal"
+                navArrow={false}
+                showSupportText={false}
+                title={item.title}
+                leading={leading}
+                trailing={trailing}
+                onPress={item.onPress}
+                modes={listItemModes}
+            />
+        )
+    }
+
+    const headerNode =
+        showHeader && (headerTitle != null || headerItem != null) ? (
+            <View style={styles.section}>
+                <View style={styles.cardHeader}>
+                    {headerTitle != null ? <RNText style={tokens.title}>{headerTitle}</RNText> : null}
+                    {headerItem != null ? renderItem(headerItem, 'header-item') : null}
+                </View>
+                <Divider modes={modes} />
+            </View>
+        ) : null
+
+    const bodyList = children
+        ? cloneChildrenWithModes(children, listItemModes)
+        : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index))
+
+    const ctaNode = button ?? (
+        <Button label={buttonLabel} modes={ctaModes} onPress={onButtonPress} />
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    const content = (
+        <>
+            {headerNode}
+            <View style={tokens.body}>
+                {bodyTitle != null ? <RNText style={tokens.title}>{bodyTitle}</RNText> : null}
+                <View style={tokens.listWrap}>{bodyList}</View>
+            </View>
+            {showButton ? ctaNode : null}
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? headerTitle ?? bodyTitle}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// The "card header" inner gap (title -> highlighted item) is a fixed 4px in
+// the Figma node and has no dedicated token.
+const CARD_HEADER_GAP = 4
+
+interface ResolvedTokens {
+    container: ViewStyle
+    body: ViewStyle
+    listWrap: ViewStyle
+    title: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('benefitCard/background', modes), '#ffffff')
+    const paddingHorizontal = asNum(getVariableByName('benefitCard/padding/horizontal', modes), 12)
+    const paddingVertical = asNum(getVariableByName('benefitCard/padding/vertical', modes), 12)
+    const radius = asNum(getVariableByName('benefitCard/radius', modes), 12)
+    const gap = asNum(getVariableByName('benefitCard/gap', modes), 8)
+
+    const titleColor = asStr(getVariableByName('benefitCard/title/foreground', modes), '#000000')
+    const titleSize = asNum(getVariableByName('benefitCard/title/fontsize', modes), 14)
+    const titleFamily = asStr(getVariableByName('benefitCard/title/fontFamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('benefitCard/title/fontWeight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            paddingHorizontal,
+            paddingVertical,
+            borderRadius: radius,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+        },
+        body: {
+            alignSelf: 'stretch',
+            gap,
+        },
+        listWrap: {
+            alignSelf: 'stretch',
+            gap,
+        },
+        title: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: 20,
+            letterSpacing: -0.5,
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_ITEMS: BenefitCardItem[] = [
+    { icon: 'ic_card', title: 'Up to ₹5000 cashback' },
+    { icon: 'ic_card', title: '25% extra JioPoints' },
+]
+
+const styles = StyleSheet.create({
+    section: {
+        alignSelf: 'stretch',
+        gap: 8,
+    },
+    cardHeader: {
+        alignSelf: 'stretch',
+        gap: CARD_HEADER_GAP,
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default BenefitCard

package/src/components/BrandChip/BrandChip.tsx

@@ -10,7 +10,7 @@ import {
 } 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 { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
 import type { Modes } from '../../design-tokens'
 
@@ -38,6 +38,12 @@ export type BrandChipProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `label`. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 interface BrandChipTokens {
@@ -164,6 +170,7 @@ function BrandChip({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: BrandChipProps) {
   const { modes: globalModes } = useTokens()
   const modes = useMemo(
@@ -202,8 +209,7 @@ function BrandChip({
       {avatarNode}
       <Text
         style={[tokens.labelStyle, labelStyle]}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
       >
         {label}
       </Text>

package/src/components/Button/Button.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
@@ -64,6 +64,12 @@ export type ButtonProps = SafePressableProps & {
    * the group.
    */
   loading?: boolean;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 };
 
 // ---------------------------------------------------------------------------
@@ -235,6 +241,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }: ButtonProps) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -294,7 +301,7 @@ function ButtonImpl({
     content = (
       <Text
         style={activeLabelStyle}
-        numberOfLines={1}
+        {...resolveTruncation(disableTruncation, 1)}
       >
         {label}
       </Text>

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -9,7 +9,7 @@ import {
 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 { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
 import Nudge from '../Nudge/Nudge'
 import type { Modes } from '../../design-tokens'
@@ -57,6 +57,12 @@ export type CardAdvisoryProps = CardAdvisoryBaseProps & {
   nudgeStyle?: StyleProp<ViewStyle>
   /** Accessibility label for the full card. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 interface CardAdvisoryTokens {
@@ -195,6 +201,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: CardAdvisoryProps) {
   const { modes: globalModes } = useTokens()
@@ -236,7 +243,7 @@ function CardAdvisory({
       <View style={[tokens.mainContentStyle, mainContentStyle]}>
         <View style={tokens.contentStyle}>
           <View style={tokens.headerStyle}>
-            <Text numberOfLines={1} style={[tokens.titleStyle, titleStyle]}>
+            <Text {...resolveTruncation(disableTruncation, 1)} style={[tokens.titleStyle, titleStyle]}>
               {title}
             </Text>
             {processedTitleEndSlot || (showInfoIcon ? (

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -7,7 +7,7 @@ import {
     type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Badge from '../Badge/Badge'
 import Button from '../Button/Button'
 import InstitutionBadge from '../InstitutionBadge/InstitutionBadge'
@@ -80,6 +80,12 @@ export type CardBankAccountProps = {
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the card region. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const DEFAULT_ITEMS: CardBankAccountItem[] = [
@@ -138,6 +144,7 @@ function CardBankAccount({
     modes: propModes = EMPTY_MODES,
     style,
     accessibilityLabel,
+    disableTruncation,
 }: CardBankAccountProps) {
     // Merge caller modes on top of `DEFAULT_MODES` so every default key
     // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -268,7 +275,7 @@ function CardBankAccount({
                             <Text style={labelStyle}>{item.label}</Text>
                         </View>
                         {typeof item.value === 'string' || typeof item.value === 'number' ? (
-                            <Text style={valueTextStyle} numberOfLines={1}>
+                            <Text style={valueTextStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {item.value}
                             </Text>
                         ) : (