jfs-components 0.0.77 → 0.0.78

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -0,0 +1,350 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text, ScrollView } 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.
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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;
+
+// ---------------------------------------------------------------------------
+// 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.
+// ---------------------------------------------------------------------------
+
+function HeroText({
+  eyebrow,
+  headline,
+  supportingText,
+  priceText,
+  modes
+}) {
+  const styles = useMemo(() => {
+    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+    const eyebrowStyle = {
+      color: getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700),
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      textAlign: 'center'
+    };
+    const headlineStyle = {
+      color: getVariableByName('PageHero/headline/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900),
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      textAlign: 'center',
+      width: '100%'
+    };
+    const supportingTextStyle = {
+      color: getVariableByName('PageHero/supportingText/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500),
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      textAlign: 'center'
+    };
+    const priceTextStyle = {
+      color: getVariableByName('PageHero/body/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/body/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500),
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      textAlign: 'center'
+    };
+    return {
+      container: {
+        width: '100%',
+        alignItems: 'center',
+        gap
+      },
+      textWrap: {
+        width: '100%',
+        alignItems: 'center',
+        gap: textWrapGap
+      },
+      eyebrowStyle,
+      headlineStyle,
+      supportingTextStyle,
+      priceTextStyle
+    };
+  }, [modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.textWrap,
+      children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
+        style: styles.eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/_jsx(Text, {
+        style: styles.headlineStyle,
+        children: headline
+      }) : null]
+    }), supportingText ? /*#__PURE__*/_jsx(Text, {
+      style: styles.supportingTextStyle,
+      children: supportingText
+    }) : null, priceText ? /*#__PURE__*/_jsx(Text, {
+      style: styles.priceTextStyle,
+      children: priceText
+    }) : null]
+  });
+}
+
+/**
+ * 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
+}) {
+  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(() => ({
+    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(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: heroHeight,
+    alignItems: 'stretch'
+  }), [heroHeight]);
+  const heroTextRegionStyle = useMemo(() => ({
+    height: heroHeight,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  }), [heroHeight]);
+  const bodyStyle = useMemo(() => [{
+    backgroundColor,
+    gap: rootGap,
+    paddingTop: rootGap,
+    paddingBottom: 24
+  }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
+  const heroClip = /*#__PURE__*/_jsx(Animated.View, {
+    style: [heroClipBaseStyle, parallax ? heroAnimatedStyle : {
+      height: heroHeight
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(View, {
+      style: heroMediaWrapStyle,
+      children: processedHeroMedia
+    })
+  });
+
+  // Footer: a fully custom node, or the default Button + Disclaimer column.
+  let footerContent = null;
+  if (footer) {
+    footerContent = footer;
+  } else if (primaryActionLabel) {
+    footerContent = /*#__PURE__*/_jsxs(View, {
+      style: footerColumnStyle,
+      children: [/*#__PURE__*/_jsx(Button, {
+        label: primaryActionLabel,
+        modes: modes,
+        style: fullWidthStyle,
+        ...(onPrimaryAction ? {
+          onPress: onPrimaryAction
+        } : {})
+      }), disclaimer ? /*#__PURE__*/_jsx(Disclaimer, {
+        disclaimer: disclaimer,
+        modes: modes
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [rootStyle, {
+      backgroundColor
+    }, style],
+    testID: testID,
+    children: [processedHeroMedia ? heroClip : null, /*#__PURE__*/_jsxs(AnimatedScrollView, {
+      style: scrollViewStyle,
+      contentContainerStyle: scrollContentStyle,
+      showsVerticalScrollIndicator: false,
+      onScroll: onScroll,
+      scrollEventThrottle: 16,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: heroTextRegionStyle,
+        children: /*#__PURE__*/_jsx(HeroText, {
+          eyebrow: eyebrow,
+          headline: headline,
+          supportingText: supportingText,
+          priceText: priceText,
+          modes: modes
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: bodyStyle,
+        children: processedChildren
+      })]
+    }), footerContent ? /*#__PURE__*/_jsx(ActionFooter, {
+      modes: modes,
+      children: footerContent
+    }) : null, showClose ? /*#__PURE__*/_jsx(IconButton, {
+      iconName: "ic_close",
+      modes: modes,
+      accessibilityLabel: closeAccessibilityLabel,
+      style: closeButtonStyle,
+      ...(onClose ? {
+        onPress: onClose
+      } : {})
+    }) : null]
+  });
+}
+
+// Module-scope style constants — never re-allocated per render.
+const rootStyle = {
+  flex: 1,
+  width: '100%',
+  position: 'relative'
+};
+const scrollViewStyle = {
+  flex: 1
+};
+const scrollContentStyle = {
+  flexGrow: 1
+};
+const footerColumnStyle = {
+  width: '100%',
+  gap: 8
+};
+const fullWidthStyle = {
+  width: '100%'
+};
+const closeButtonStyle = {
+  position: 'absolute',
+  top: 12,
+  right: 12
+};
+export default FullscreenModal;

package/lib/module/components/ListItem/ListItem.js

@@ -32,27 +32,42 @@ const pressedOverlayStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveListItemTokens(modes) {
+  // 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;
   const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0;
   const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0;
   const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
-  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;
   return {
     baseContainerStyle: {