jfs-components 0.0.77 → 0.0.78

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -0,0 +1,414 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+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 Disclaimer from '../Disclaimer/Disclaimer'
+import IconButton from '../IconButton/IconButton'
+import ActionFooter from '../ActionFooter/ActionFooter'
+
+// ---------------------------------------------------------------------------
+// Forced modes
+//
+// `FullscreenModal` always themes itself with the `context5: 'Fullscreen Modal'`
+// collection mode. This is what flips the section / list-item / hero text
+// tokens to their white-on-dark values (see the Figma "Fullscreen Modal"
+// context). It is intentionally NON-overridable: callers can pass any other
+// modes (Color Mode, AppearanceBrand, …) but never context5. The frozen
+// object keeps its identity stable so the token resolver's per-modes cache
+// stays hot, and so `cloneChildrenWithModes` can use it as the
+// always-wins `forcedModes` argument.
+// ---------------------------------------------------------------------------
+const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({ context5: 'Fullscreen Modal' })
+
+// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
+// Module scope so the wrapped component identity is stable across renders.
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
+
+// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
+// its full width is preserved and the media keeps a fixed aspect ratio (it is
+// cropped, never scaled or squished, like a `cover` background). When no
+// explicit `heroMinHeight` is given, the hero collapses to this fraction of
+// its resting height.
+const HERO_MIN_HEIGHT_RATIO = 0.45
+
+export type FullscreenModalProps = {
+  /** Small eyebrow line above the headline. */
+  eyebrow?: string
+  /** Large hero headline. */
+  headline?: string
+  /** Supporting paragraph shown below the headline. */
+  supportingText?: string
+  /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
+  priceText?: string
+  /**
+   * Media rendered full-bleed behind the hero text and driven by the parallax
+   * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
+   * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
+   * (`heroHeight` tall, full modal width) and let it `cover` so that as the
+   * hero collapses in height the art is cropped, never distorted. `modes` are
+   * cascaded into it.
+   */
+  heroMedia?: React.ReactNode
+  /** Resting height of the hero region. Defaults to 420. */
+  heroHeight?: number
+  /**
+   * Collapsed height the hero shrinks to at full scroll. Defaults to
+   * `heroHeight * 0.45`. Only the height changes — the width is always full.
+   */
+  heroMinHeight?: number
+  /** Enable the scroll-driven hero collapse. Defaults to true. */
+  parallax?: boolean
+  /** Whether to render the floating close button (top-right). Defaults to true. */
+  showClose?: boolean
+  /** Press handler for the close button. */
+  onClose?: () => void
+  /** Accessibility label for the close button. */
+  closeAccessibilityLabel?: string
+  /**
+   * Fully custom footer content rendered inside the sticky `ActionFooter`.
+   * When provided, `primaryActionLabel` / `disclaimer` are ignored.
+   */
+  footer?: React.ReactNode
+  /** Label for the default primary action button in the footer. */
+  primaryActionLabel?: string
+  /** Press handler for the default primary action button. */
+  onPrimaryAction?: () => void
+  /** Disclaimer text shown below the default primary action button. */
+  disclaimer?: string
+  /** Solid backdrop color for the scrollable body. Defaults to a near-black. */
+  backgroundColor?: string
+  /** Body content (typically `Section`s). `modes` are cascaded automatically. */
+  children?: React.ReactNode
+  /** Mode configuration. `context5` is always forced to `'Fullscreen Modal'`. */
+  modes?: Record<string, any>
+  /** Style overrides for the outer container. */
+  style?: StyleProp<ViewStyle>
+  /** Style overrides for the scroll body wrapper (the dark content area). */
+  contentContainerStyle?: StyleProp<ViewStyle>
+  testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// Hero text — the eyebrow / headline / supporting / price block. Built inline
+// (rather than reusing <PageHero>) so we can render BOTH a supporting
+// paragraph AND a price line with the exact PageHero token gaps, and overlay
+// it on the parallax media without PageHero's media/button scaffolding.
+// ---------------------------------------------------------------------------
+type HeroTextProps = {
+  eyebrow?: string
+  headline?: string
+  supportingText?: string
+  priceText?: string
+  modes: Record<string, any>
+}
+
+function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroTextProps) {
+  const styles = useMemo(() => {
+    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
+
+    const eyebrowStyle: TextStyle = {
+      color: (getVariableByName('PageHero/eyebrow/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/eyebrow/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      textAlign: 'center',
+    }
+    const headlineStyle: TextStyle = {
+      color: (getVariableByName('PageHero/headline/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/headline/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      textAlign: 'center',
+      width: '100%',
+    }
+    const supportingTextStyle: TextStyle = {
+      color: (getVariableByName('PageHero/supportingText/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/supportingText/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      textAlign: 'center',
+    }
+    const priceTextStyle: TextStyle = {
+      color: (getVariableByName('PageHero/body/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/body/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      textAlign: 'center',
+    }
+
+    return {
+      container: { width: '100%', alignItems: 'center', gap } as ViewStyle,
+      textWrap: { width: '100%', alignItems: 'center', gap: textWrapGap } as ViewStyle,
+      eyebrowStyle,
+      headlineStyle,
+      supportingTextStyle,
+      priceTextStyle,
+    }
+  }, [modes])
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrap}>
+        {eyebrow ? <Text style={styles.eyebrowStyle}>{eyebrow}</Text> : null}
+        {headline ? <Text style={styles.headlineStyle}>{headline}</Text> : null}
+      </View>
+      {supportingText ? <Text style={styles.supportingTextStyle}>{supportingText}</Text> : null}
+      {priceText ? <Text style={styles.priceTextStyle}>{priceText}</Text> : null}
+    </View>
+  )
+}
+
+/**
+ * FullscreenModal — a full-screen takeover surface with a parallax media hero,
+ * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ *
+ * The component always themes itself with `context5: 'Fullscreen Modal'`
+ * (non-overridable) so every nested component (Section, ListItem, Button,
+ * Disclaimer, …) resolves the white-on-dark "fullscreen modal" token values.
+ * That mode is cascaded into `children`, the footer, and the hero text via
+ * `cloneChildrenWithModes` / the merged `modes` object.
+ *
+ * ### Parallax
+ * As the user scrolls up, the hero collapses by **height only** (from
+ * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
+ * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
+ * the collapsing clip, so it keeps a perfect aspect ratio the whole time
+ * (never scaled or squished). Because it collapses slower than the content
+ * scrolls, the media lags behind for the parallax depth cue. Disable with
+ * `parallax={false}`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FullscreenModal
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Get more from your money."
+ *   supportingText="JioFinance+ is your upgraded financial experience…"
+ *   priceText="₹999/year · ₹0 until 2027"
+ *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   primaryActionLabel="Upgrade for free"
+ *   disclaimer="By upgrading, we'll check your eligibility with Experian."
+ *   onPrimaryAction={() => upgrade()}
+ *   onClose={() => navigation.goBack()}
+ * >
+ *   <Section title="Key Benefits" slotDirection="column" slot={…} />
+ *   <Section title="Compare plans" slotDirection="column" slot={…} />
+ * </FullscreenModal>
+ * ```
+ */
+function FullscreenModal({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Get more from your money.',
+  supportingText = 'JioFinance+ is your upgraded financial experience, designed to work harder in the background so your money works smarter in real life.',
+  priceText = '₹999/year · ₹0 until 2027',
+  heroMedia,
+  heroHeight = 420,
+  heroMinHeight,
+  parallax = true,
+  showClose = true,
+  onClose,
+  closeAccessibilityLabel = 'Close',
+  footer,
+  primaryActionLabel = 'Upgrade for free',
+  onPrimaryAction,
+  disclaimer = "By upgrading, we'll check your eligibility with Experian.",
+  backgroundColor = '#0f0d0a',
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  contentContainerStyle,
+  testID,
+}: FullscreenModalProps) {
+  const { modes: globalModes } = useTokens()
+
+  // context5 is appended last so it always wins, regardless of what the
+  // caller (or the global theme) passes.
+  const modes = useMemo(
+    () => ({ ...globalModes, ...propModes, ...FULLSCREEN_MODAL_FORCED_MODES }),
+    [globalModes, propModes]
+  )
+
+  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16
+
+  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO)
+
+  const scrollY = useSharedValue(0)
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollY.value = event.contentOffset.y
+  })
+
+  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
+  // never changes and the media inside is pinned full-size at the top, so the
+  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
+  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
+  // hero never grows past its resting height.
+  const heroAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      scrollY.value,
+      [0, heroHeight],
+      [heroHeight, minHeight],
+      Extrapolation.CLAMP
+    )
+    return { height }
+  })
+
+  const processedHeroMedia = useMemo(
+    () =>
+      heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null,
+    [heroMedia, modes]
+  )
+
+  const processedChildren = useMemo(
+    () =>
+      children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null,
+    [children, modes]
+  )
+
+  // The clip is full-width and top-pinned; its height is what animates. Width
+  // is intentionally never animated.
+  const heroClipBaseStyle = useMemo<ViewStyle>(
+    () => ({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      overflow: 'hidden',
+    }),
+    []
+  )
+
+  // The media sits at a fixed full-size box pinned to the top of the clip, so
+  // the collapsing clip crops it from the bottom (cover) instead of resizing
+  // it. Full width, fixed height — a perfect, constant aspect ratio.
+  const heroMediaWrapStyle = useMemo<ViewStyle>(
+    () => ({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: heroHeight,
+      alignItems: 'stretch',
+    }),
+    [heroHeight]
+  )
+
+  const heroTextRegionStyle = useMemo<ViewStyle>(
+    () => ({
+      height: heroHeight,
+      justifyContent: 'flex-end',
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+    }),
+    [heroHeight]
+  )
+
+  const bodyStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      {
+        backgroundColor,
+        gap: rootGap,
+        paddingTop: rootGap,
+        paddingBottom: 24,
+      },
+      contentContainerStyle,
+    ],
+    [backgroundColor, rootGap, contentContainerStyle]
+  )
+
+  const heroClip = (
+    <Animated.View
+      style={[heroClipBaseStyle, parallax ? heroAnimatedStyle : { height: heroHeight }]}
+      pointerEvents="none"
+    >
+      <View style={heroMediaWrapStyle}>{processedHeroMedia}</View>
+    </Animated.View>
+  )
+
+  // Footer: a fully custom node, or the default Button + Disclaimer column.
+  let footerContent: React.ReactNode = null
+  if (footer) {
+    footerContent = footer
+  } else if (primaryActionLabel) {
+    footerContent = (
+      <View style={footerColumnStyle}>
+        <Button
+          label={primaryActionLabel}
+          modes={modes}
+          style={fullWidthStyle}
+          {...(onPrimaryAction ? { onPress: onPrimaryAction } : {})}
+        />
+        {disclaimer ? <Disclaimer disclaimer={disclaimer} modes={modes} /> : null}
+      </View>
+    )
+  }
+
+  return (
+    <View style={[rootStyle, { backgroundColor }, style]} testID={testID}>
+      {processedHeroMedia ? heroClip : null}
+
+      <AnimatedScrollView
+        style={scrollViewStyle}
+        contentContainerStyle={scrollContentStyle}
+        showsVerticalScrollIndicator={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      >
+        <View style={heroTextRegionStyle}>
+          <HeroText
+            eyebrow={eyebrow}
+            headline={headline}
+            supportingText={supportingText}
+            priceText={priceText}
+            modes={modes}
+          />
+        </View>
+        <View style={bodyStyle}>{processedChildren}</View>
+      </AnimatedScrollView>
+
+      {footerContent ? (
+        <ActionFooter modes={modes}>{footerContent}</ActionFooter>
+      ) : null}
+
+      {showClose ? (
+        <IconButton
+          iconName="ic_close"
+          modes={modes}
+          accessibilityLabel={closeAccessibilityLabel}
+          style={closeButtonStyle}
+          {...(onClose ? { onPress: onClose } : {})}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+// Module-scope style constants — never re-allocated per render.
+const rootStyle: ViewStyle = { flex: 1, width: '100%', position: 'relative' }
+const scrollViewStyle: ViewStyle = { flex: 1 }
+const scrollContentStyle: ViewStyle = { flexGrow: 1 }
+const footerColumnStyle: ViewStyle = { width: '100%', gap: 8 }
+const fullWidthStyle: ViewStyle = { width: '100%' }
+const closeButtonStyle: ViewStyle = { position: 'absolute', top: 12, right: 12 }
+
+export default FullscreenModal

package/src/components/ListItem/ListItem.tsx

@@ -72,8 +72,19 @@ interface ListItemTokens {
 }
 
 function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
+  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // We do NOT inject an `AppearanceBrand` default here: slot content such as
+  // Buttons or Badges carry their own intended appearance, so forcing one onto
+  // them would be surprising.
   const resolvedModes = { ...modes, Context: 'ListItem' }
 
+  // Modes used to resolve the ListItem's OWN title + support text. Within this
+  // component, `AppearanceBrand` only affects `listItem/title/color` and
+  // `listItem/supportText/color`, so the text defaults to the "Neutral"
+  // appearance (in both Vertical and Horizontal layouts). A caller-supplied
+  // `AppearanceBrand` still wins; `Context` is always forced to 'ListItem'.
+  const textModes = { AppearanceBrand: 'Neutral', ...modes, Context: 'ListItem' }
+
   const gap = (getVariableByName('listItem/gap', resolvedModes) ?? 8) as number
   const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0
   const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0
@@ -81,19 +92,19 @@ function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
   const textWrapGap = (getVariableByName('listItem/text wrap', resolvedModes) ?? 0) as number
 
-  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System'
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700
+  const titleColor = getVariableByName('listItem/title/color', textModes) || '#0f0d0a'
+  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes) || 14
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes) || 16
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes) || 'System'
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes) || 700
   const titleFontWeight =
     typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
-  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14'
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System'
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500
+  const supportColor = getVariableByName('listItem/supportText/color', textModes) || '#1f1a14'
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes) || 12
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes) || 14
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes) || 'System'
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes) || 500
   const supportFontWeight =
     typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw