jfs-components 0.1.2 → 0.1.12

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -0,0 +1,490 @@
+import React, { useId, useMemo } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    Platform,
+    Image as RNImage,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+    type ImageSourcePropType,
+} from 'react-native'
+import MaskedView from '@react-native-masked-view/masked-view'
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import Avatar from '../Avatar/Avatar'
+import Badge from '../Badge/Badge'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import GlassFill from '../../utils/GlassFill/GlassFill'
+import type { Modes } from '../../design-tokens'
+
+function normalizeImageSource(
+    src: ImageSourcePropType | string | undefined
+): ImageSourcePropType | undefined {
+    if (src == null) return undefined
+    return typeof src === 'string' ? { uri: src } : src
+}
+
+export interface ProductMerchandisingCardProps {
+    /**
+     * Background media for the card. Accepts a URL string or any RN
+     * `ImageSourcePropType` (same shape as `Avatar`, `MediaCard`, etc.). The
+     * image is rendered full-bleed behind the header and glass footer.
+     */
+    imageSource?: ImageSourcePropType | string
+    /** Footer title (bold, white). */
+    title?: string
+    /** Footer subtitle (muted). */
+    subtitle?: string
+    /**
+     * Header badge label (top-right). The badge is hidden when this is
+     * `undefined` and no `badge` override is provided.
+     */
+    badgeLabel?: string
+    /**
+     * Full override for the header badge. Takes precedence over `badgeLabel`.
+     */
+    badge?: React.ReactNode
+    /** Show the header avatar (top-left). Defaults to `true`. */
+    showAvatar?: boolean
+    /** Avatar image source. */
+    avatarSource?: ImageSourcePropType | string
+    /** Avatar monogram fallback when no image is supplied. */
+    avatarMonogram?: string
+    /** Full override for the header avatar. Takes precedence over avatar props. */
+    avatar?: React.ReactNode
+    /**
+     * Footer "special badge" label (small frosted pill above the title). The
+     * badge is hidden when this is `undefined` and no `specialBadge` override
+     * is provided.
+     */
+    specialBadgeLabel?: string
+    /** Optional leading node (icon/image) rendered inside the special badge. */
+    specialBadgeIcon?: React.ReactNode
+    /** Full override for the special badge. Takes precedence over the props above. */
+    specialBadge?: React.ReactNode
+    /** CTA button label. Defaults to `"CTA"`. */
+    ctaLabel?: string
+    /** CTA button press handler. */
+    onCtaPress?: () => void
+    /** Full override for the CTA. Takes precedence over `ctaLabel`/`onCtaPress`. */
+    cta?: React.ReactNode
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card height in px. Defaults to `223` (Figma spec). */
+    height?: 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
+    /**
+     * 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
+}
+
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+function ProductMerchandisingCard({
+    imageSource,
+    title = 'Title',
+    subtitle = 'Subtitle',
+    badgeLabel,
+    badge,
+    showAvatar = true,
+    avatarSource,
+    avatarMonogram,
+    avatar,
+    specialBadgeLabel,
+    specialBadgeIcon,
+    specialBadge,
+    ctaLabel = 'CTA',
+    onCtaPress,
+    cta,
+    onPress,
+    height = 223,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+    disableTruncation,
+}: ProductMerchandisingCardProps) {
+    // Unique gradient ids so multiple cards on one (web) document never collide.
+    const rawId = useId()
+    const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '')
+    const scrimId = `pmc-footer-scrim-${safeId}`
+    const blurMaskId = `pmc-footer-blurmask-${safeId}`
+
+    const normalizedImageSource = useMemo(() => normalizeImageSource(imageSource), [imageSource])
+
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    const containerStyle: ViewStyle = {
+        height,
+        borderRadius: tokens.radius,
+        overflow: 'hidden',
+        position: 'relative',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+    }
+
+    // Header avatar defaults to the design's 36px (Avatar Size = M). A
+    // consumer-supplied `modes['Avatar Size']` still wins via spread order.
+    const avatarModes = useMemo<Modes>(() => ({ 'Avatar Size': 'M', ...modes }), [modes])
+
+    // The Figma node renders the header badge with the brand "Secondary"
+    // appearance at "Medium" emphasis (lilac fill + dark label). These are set
+    // as defaults so the card matches the design out of the box; a
+    // consumer-supplied `modes` value still wins via spread order.
+    const badgeModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Secondary', Emphasis: 'Medium', ...modes }),
+        [modes]
+    )
+
+    const headerBadge =
+        badge ?? (badgeLabel != null ? <Badge label={badgeLabel} modes={badgeModes} /> : null)
+
+    const headerAvatar = showAvatar
+        ? avatar ?? (
+              <Avatar
+                  style={avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image'}
+                  imageSource={avatarSource}
+                  monogram={avatarMonogram}
+                  modes={avatarModes}
+              />
+          )
+        : null
+
+    // The footer "special badge" is now the shared <Badge type="glass">. The
+    // hardcoded literals that defined its look (warm frosted overlay, gentle
+    // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
+    // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
+    // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
+    // instantiation renders byte-for-byte the same as before.
+    const footerSpecialBadge =
+        specialBadge ??
+        (specialBadgeLabel != null ? (
+            <Badge
+                type="glass"
+                label={specialBadgeLabel}
+                leading={specialBadgeIcon}
+                glassOverlayColor={SPECIAL_BADGE_BG}
+                glassIntensity={SPECIAL_BADGE_INTENSITY}
+                modes={modes}
+                style={styles.specialBadge}
+                labelStyle={tokens.specialBadgeText}
+                {...(disableTruncation != null ? { disableTruncation } : null)}
+            />
+        ) : null)
+
+    // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
+    // label) at the small size. Defaults match the design; consumer `modes`
+    // win via spread order.
+    const ctaModes = useMemo<Modes>(
+        () => ({ 'Button / Size': 'S', AppearanceBrand: 'Secondary', ...modes }),
+        [modes]
+    )
+
+    const footerCta =
+        cta ?? <Button label={ctaLabel} modes={ctaModes} onPress={onCtaPress} />
+
+    const content = (
+        <>
+            {imageSource != null ? (
+                <Image
+                    imageSource={imageSource}
+                    style={StyleSheet.absoluteFillObject as any}
+                    width="100%"
+                    height={height}
+                    resizeMode="cover"
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                />
+            ) : null}
+
+            <View style={tokens.header} pointerEvents="box-none">
+                <View style={styles.avatarContainer}>{headerAvatar}</View>
+                {headerBadge}
+            </View>
+
+            <View style={tokens.footer} pointerEvents="box-none">
+                {/* Progressive blur — clear at the top of the footer, ramping to
+                    a soft blur at the bottom. Rather than the unmaintained native
+                    BlurView (which renders as a flat black tint on Android +
+                    Fabric and can hide the image on iOS), we reveal a *blurred
+                    copy of the card's own image* through a vertical gradient
+                    mask. `Image.blurRadius` is a built-in RN prop with a real
+                    Gaussian blur on BOTH iOS and Android and needs no native
+                    module. The blurred copy is pinned to the card's bottom at the
+                    full card height so it lines up pixel-for-pixel with the
+                    full-bleed background, and the mask makes the blur swell in
+                    smoothly toward the bottom (true progressive blur). */}
+                {normalizedImageSource != null ? (
+                    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+                        <MaskedView
+                            style={StyleSheet.absoluteFill}
+                            maskElement={
+                                <Svg width="100%" height="100%">
+                                    <Defs>
+                                        <LinearGradient id={blurMaskId} x1="0" y1="0" x2="0" y2="1">
+                                            <Stop offset="0" stopColor="#000000" stopOpacity={0} />
+                                            <Stop offset="0.35" stopColor="#000000" stopOpacity={0.5} />
+                                            <Stop offset="0.7" stopColor="#000000" stopOpacity={0.92} />
+                                            <Stop offset="1" stopColor="#000000" stopOpacity={1} />
+                                        </LinearGradient>
+                                    </Defs>
+                                    <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${blurMaskId})`} />
+                                </Svg>
+                            }
+                        >
+                            <RNImage
+                                source={normalizedImageSource}
+                                blurRadius={tokens.imageBlurRadius}
+                                resizeMode="cover"
+                                style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height }}
+                            />
+                        </MaskedView>
+                    </View>
+                ) : (
+                    <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
+                )}
+                {/* Transparent -> black gradient scrim for text legibility,
+                    identical on all platforms. Kept lighter than a solid fill so
+                    the blurred image stays visible behind the footer text. */}
+                <View style={[StyleSheet.absoluteFill, styles.scrim]} pointerEvents="none">
+                    <Svg width="100%" height="100%">
+                        <Defs>
+                            <LinearGradient id={scrimId} x1="0" y1="0" x2="0" y2="1">
+                                <Stop offset="0.018" stopColor="#000000" stopOpacity={0} />
+                                <Stop offset="0.974" stopColor="#000000" stopOpacity={1} />
+                            </LinearGradient>
+                        </Defs>
+                        <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${scrimId})`} />
+                    </Svg>
+                </View>
+
+                {footerSpecialBadge}
+
+                <View style={styles.footerRow}>
+                    <View style={tokens.textWrap}>
+                        <Text style={tokens.title} {...resolveTruncation(disableTruncation, 1)}>
+                            {title}
+                        </Text>
+                        {subtitle != null ? (
+                            <Text style={tokens.subtitle} {...resolveTruncation(disableTruncation, 1)}>
+                                {subtitle}
+                            </Text>
+                        ) : null}
+                    </View>
+                    {footerCta}
+                </View>
+            </View>
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View
+            style={[containerStyle, style]}
+            accessibilityLabel={accessibilityLabel}
+        >
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// Figma footer backdrop-blur token (`blur/minimal`). The footer uses a
+// *progressive* blur, so this maps the token to the intensity at the BOTTOM of
+// the ramp (the strongest point); the upper part fades to fully clear. Kept
+// intentionally small to match the design's subtle "minimal" blur.
+const BLUR_INTENSITY_FACTOR = 1.0
+
+// Special badge ("frosted" pill) — values are literals in the Figma node
+// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
+const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)'
+const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
+
+interface ResolvedTokens {
+    radius: number
+    blurIntensity: number
+    imageBlurRadius: number
+    header: ViewStyle
+    footer: ViewStyle
+    textWrap: ViewStyle
+    title: TextStyle
+    subtitle: TextStyle
+    specialBadgeText: 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 radius = asNum(getVariableByName('productMerchandisingcard/radius', modes), 12)
+    const headerPadH = asNum(getVariableByName('productMerchandisingcard/header/padding/horizontal', modes), 12)
+    const headerPadV = asNum(getVariableByName('productMerchandisingcard/header/padding/vertical', modes), 12)
+    const footerGap = asNum(getVariableByName('productMerchandisingcard/footer/gap', modes), 8)
+    const footerPadH = asNum(getVariableByName('productMerchandisingcard/footer/padding/horizontal', modes), 16)
+    const footerPadV = asNum(getVariableByName('productMerchandisingcard/footer/padding/vertical', modes), 16)
+    const textGap = asNum(getVariableByName('productMerchandisingcard/footer/text/gap', modes), 2)
+    const blurRadius = asNum(getVariableByName('blur/minimal', modes), 29)
+
+    const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff')
+    const titleSize = asNum(getVariableByName('productMerchandisingcard/footer/title/fontsize', modes), 14)
+    const titleFamily = asStr(getVariableByName('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('productMerchandisingcard/footer/title/fontweight', modes), '700')
+
+    const subtitleColor = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5')
+    const subtitleSize = asNum(getVariableByName('productMerchandisingcard/footer/subtitle/fontsize', modes), 12)
+    const subtitleFamily = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var')
+    const subtitleWeight = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontweight', modes), '400')
+
+    const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12)
+    const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var')
+    const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500')
+
+    // `Image.blurRadius` is interpreted differently per platform — iOS applies a
+    // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
+    // numeric radius — so we tune each platform to land on the same perceived
+    // "minimal" frosted strength as the Figma design.
+    const imageBlurRadius = Platform.select({
+        ios: Math.max(6, Math.round(blurRadius * 0.5)),
+        android: Math.max(12, Math.round(blurRadius * 0.95)),
+        default: Math.max(8, Math.round(blurRadius * 0.6)),
+    }) as number
+
+    return {
+        radius,
+        blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+        imageBlurRadius,
+        header: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            paddingHorizontal: headerPadH,
+            paddingVertical: headerPadV,
+            zIndex: 1,
+        },
+        footer: {
+            paddingHorizontal: footerPadH,
+            paddingVertical: footerPadV,
+            gap: footerGap,
+            overflow: 'hidden',
+            zIndex: 2,
+        },
+        textWrap: {
+            flex: 1,
+            gap: textGap,
+            justifyContent: 'center',
+        },
+        title: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(titleSize * 1.2),
+            includeFontPadding: false as any,
+        },
+        subtitle: {
+            color: subtitleColor,
+            fontSize: subtitleSize,
+            fontFamily: subtitleFamily,
+            fontWeight: subtitleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(subtitleSize * 1.2),
+            includeFontPadding: false as any,
+        },
+        specialBadgeText: {
+            color: '#ffffff',
+            fontSize: sbSize,
+            fontFamily: sbFamily,
+            fontWeight: sbWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(sbSize * 1.2),
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const styles = StyleSheet.create({
+    avatarContainer: {
+        flexShrink: 1,
+        justifyContent: 'center',
+    },
+    footerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    scrim: {
+        // The footer node sits at 90% opacity in Figma; applying it to the
+        // scrim (not the content) keeps the title/CTA crisp while preserving
+        // the intended fade strength.
+        opacity: 0.9,
+    },
+    // Overrides layered on top of <Badge type="glass">. Badge already supplies
+    // the row layout + 4px gap (when a leading icon is present), `overflow:
+    // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
+    // pin the special badge's literal Figma box (6/2 padding, 4px radius)
+    // regardless of the badge size tokens resolved by the active modes.
+    specialBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default ProductMerchandisingCard

package/src/components/ProductOverview/ProductOverview.tsx

@@ -8,7 +8,7 @@ import {
     type ImageSourcePropType,
 } 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 Image from '../Image/Image'
 import ProductLabel from '../ProductLabel/ProductLabel'
 import type { Modes } from '../../design-tokens'
@@ -47,6 +47,12 @@ export type ProductOverviewProps = {
      * for badges, callouts, etc. Receives the same `modes` as the parent.
      */
     children?: React.ReactNode
+    /**
+     * 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_STATS: ProductOverviewStat[] = [
@@ -65,6 +71,7 @@ const ProductOverview = ({
     modes = EMPTY_MODES,
     style,
     children,
+    disableTruncation,
 }: ProductOverviewProps) => {
     const padding = (getVariableByName('productOverview/padding', modes) as number | null) ?? 24
     const gap = (getVariableByName('productOverview/gap', modes) as number | null) ?? 12
@@ -220,10 +227,10 @@ const ProductOverview = ({
                                 overflow: 'hidden',
                             }}
                         >
-                            <Text style={statValueStyle} numberOfLines={1}>
+                            <Text style={statValueStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {stat.value}
                             </Text>
-                            <Text style={statLabelStyle} numberOfLines={1}>
+                            <Text style={statLabelStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {stat.label}
                             </Text>
                         </View>

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type ProgressBadgeProps = {
@@ -26,6 +26,12 @@ export type ProgressBadgeProps = {
     textStyle?: StyleProp<TextStyle>
     /** Accessibility label for screen readers */
     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
 } & React.ComponentProps<typeof View>
 
 /**
@@ -51,6 +57,7 @@ function ProgressBadge({
     style,
     textStyle: textStyleOverride,
     accessibilityLabel,
+    disableTruncation,
     ...rest
 }: ProgressBadgeProps) {
     // Resolve layout tokens
@@ -158,8 +165,7 @@ function ProgressBadge({
                 ) : null}
                 <Text
                     style={[textStyle, textStyleOverride]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
+                    {...resolveTruncation(disableTruncation, 1, 'tail')}
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no"
                 >