jfs-components 0.1.34 → 0.1.35

package/lib/module/components/LottiePlayer/LottiePlayer.js

@@ -22,8 +22,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number(getVariableByName('media/width', modes));
-  const height = Number(getVariableByName('media/height', modes));
+  const width = Number(getVariableByName('video/width', modes)) || DEFAULT_SIZE;
+  const height = Number(getVariableByName('video/height', modes)) || DEFAULT_SIZE;
   return {
     width,
     height
@@ -50,8 +50,8 @@ function resolveSize(size, modes) {
  * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
  *
  * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
- * `media/width` and `media/height` from the Figma variables resolver, so the
- * animation matches the surrounding component's `Media / Output` mode
+ * `video/width` and `video/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Video / Output` mode
  * automatically. This is the same sizing contract `PageHero` and
  * `LottieIntroBlock` use for their `media` slots.
  *
@@ -62,7 +62,7 @@ function resolveSize(size, modes) {
  *
  * <LottiePlayer source={animation} />                    // 117 × 117 (default)
  * <LottiePlayer source={animation} size={70} />          // 70 × 70
- * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <LottiePlayer source={animation} modes={{ 'Video / Output': 'S' }} />  // 20 × 20
  * <PageHero media={<LottiePlayer source={animation} />} />
  * ```
  */

package/lib/module/components/LottiePlayer/LottiePlayer.web.js

@@ -13,8 +13,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number(getVariableByName('media/width', modes));
-  const height = Number(getVariableByName('media/height', modes));
+  const width = Number(getVariableByName('video/width', modes)) || DEFAULT_SIZE;
+  const height = Number(getVariableByName('video/height', modes)) || DEFAULT_SIZE;
   return {
     width,
     height

package/lib/module/components/PageHero/PageHero.js

@@ -7,16 +7,24 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Button from '../Button/Button';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Figma media frame is 117×117 ("Video / Output" L). Used when the token
+// collection is missing from a consumer's variables JSON so the media slot
+// never collapses to 0.
+const MEDIA_FALLBACK = 117;
 /**
  * PageHero displays a centered hero block typically used at the top of a page
  * or feature screen. It contains an optional media slot (illustration / image
  * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
- * headline, an optional supporting line (e.g. price / timeline), and an
- * optional action button.
+ * headline, an optional supporting line (e.g. price), an optional body line
+ * (e.g. timeline), 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`.
+ * `getVariableByName` (Figma node 4453:2348 — "Page Hero"). Text colors react
+ * to the `Page type` (`MainPage | SubPage | JioPlus`) and `Color Mode`
+ * (`Light | Dark`) collections; type scale reacts to `PageHero Size`
+ * (`M | S`); the media box reacts to `Video / Output` (`L | M | S`). Slots
+ * cascade the active `modes` to their children through
+ * `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -27,21 +35,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
- *   media={
- *     <Image
- *       imageSource={require('./assets/upgrade.png')}
- *       width={117}
- *       height={117}
- *     />
- *   }
+ *   modes={{ 'Page type': 'JioPlus' }}
+ *   media={<LottiePlayer source={animation} />}
  * />
  * ```
  */
 function PageHero({
   eyebrow = 'Upgrade to JioFinance+',
+  showEyebrow = true,
   headline = 'Resume earning cashback, extra points, and 1% gold',
   supportingText = '₹999/year · ₹0 until 2027',
   showSupportingText = true,
+  body,
+  showBody = true,
   buttonLabel = 'Renew for free',
   onButtonPress,
   showButton = true,
@@ -59,34 +65,49 @@ function PageHero({
     ...propModes
   }), [globalModes, propModes]);
   const gap = Number(getVariableByName('PageHero/gap', modes));
-  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes));
   const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes));
 
-  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
-  // Tokens fall back to 117 when not defined in the variables collection,
-  // so the layout stays stable on consumers that haven't tokenized this yet.
-  const mediaWidth = Number(getVariableByName('media/width', modes));
-  const mediaHeight = Number(getVariableByName('media/height', modes));
-  const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes);
-  const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes);
-  const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes));
-  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes);
-  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes));
-  const headlineColor = getVariableByName('PageHero/headline/color', modes);
-  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes);
-  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes));
-  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes);
-  const headlineLineHeight = Number(getVariableByName('PageHero/headline/lineHeight', modes));
-
-  // 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));
+  // Media slot box — Figma frame 4540:7845 ("Video"), sized by the
+  // `Video / Output` collection (L=117, M=70, S=20). Falls back to 117 when
+  // the collection is absent so the slot never collapses to 0×0.
+  const mediaWidth = Number(getVariableByName('video/width', modes)) || MEDIA_FALLBACK;
+  const mediaHeight = Number(getVariableByName('video/height', modes)) || MEDIA_FALLBACK;
+  const eyebrowStyle = useMemo(() => ({
+    color: getVariableByName('PageHero/eyebrow/color', modes),
+    fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes),
+    fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+    fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes)),
+    lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
+  const headlineStyle = useMemo(() => ({
+    color: getVariableByName('PageHero/headline/color', modes),
+    fontFamily: getVariableByName('PageHero/headline/fontFamily', modes),
+    fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+    fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes)),
+    lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)),
+    textAlign: 'center',
+    width: '100%'
+  }), [modes]);
+  const supportingTextStyle = useMemo(() => ({
+    color: getVariableByName('PageHero/supportingText/color', modes),
+    fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes),
+    fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)),
+    fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes)),
+    lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
+  const bodyStyle = useMemo(() => ({
+    color: getVariableByName('PageHero/body/color', modes),
+    fontFamily: getVariableByName('PageHero/body/fontFamily', modes),
+    fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+    fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes)),
+    lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',
-    paddingHorizontal,
     gap,
     width: '100%'
   };
@@ -96,34 +117,6 @@ function PageHero({
     gap: textWrapGap,
     width: '100%'
   };
-  const eyebrowStyle = {
-    color: eyebrowColor,
-    fontFamily: eyebrowFontFamily,
-    fontSize: eyebrowFontSize,
-    fontWeight: String(eyebrowFontWeight),
-    lineHeight: eyebrowLineHeight,
-    textAlign: 'center'
-  };
-  const headlineStyle = {
-    color: headlineColor,
-    fontFamily: headlineFontFamily,
-    fontSize: headlineFontSize,
-    fontWeight: String(headlineFontWeight),
-    lineHeight: headlineLineHeight,
-    textAlign: 'center',
-    width: '100%'
-  };
-  const supportingTextStyle = {
-    color: '#ffffff',
-    fontFamily: 'System',
-    fontSize: 12,
-    fontWeight: '500',
-    lineHeight: supportingTextLineHeight,
-    textAlign: 'center'
-  };
-  const buttonWrapStyle = {
-    width: '100%'
-  };
   const buttonContent = useMemo(() => {
     if (buttonSlot !== undefined && buttonSlot !== null) {
       return cloneChildrenWithModes(buttonSlot, modes);
@@ -135,20 +128,16 @@ function PageHero({
       label: buttonLabel,
       onPress: onButtonPress,
       modes: modes,
-      style: buttonWrapStyle
+      style: FULL_WIDTH
     });
-    // 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]);
 
   // Sized container for the media slot. Always rendered when `media` is
-  // provided, so the slot has a predictable box (matches Figma frame
-  // 4540:7845 — 117×117 by default) even if the inner element omits its
-  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
-  // `clipsContent` so a slightly oversized illustration doesn't break
-  // the centered layout.
+  // provided, so the slot has a predictable box (Figma frame 4540:7845 —
+  // 117×117 at `Video / Output = L`) even if the inner element omits its own
+  // width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break the
+  // centered layout.
   const mediaContent = useMemo(() => {
     if (media === undefined || media === null) return null;
     return /*#__PURE__*/_jsx(View, {
@@ -162,22 +151,30 @@ function PageHero({
       children: cloneChildrenWithModes(media, modes)
     });
   }, [media, mediaWidth, mediaHeight, modes]);
+  const hasEyebrow = showEyebrow && !!eyebrow;
+  const hasHeadline = !!headline;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     testID: testID,
-    children: [mediaContent, /*#__PURE__*/_jsxs(View, {
+    children: [mediaContent, hasEyebrow || hasHeadline ? /*#__PURE__*/_jsxs(View, {
       style: textWrapStyle,
-      children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
+      children: [hasEyebrow ? /*#__PURE__*/_jsx(Text, {
         style: eyebrowStyle,
         children: eyebrow
-      }) : null, headline ? /*#__PURE__*/_jsx(Text, {
+      }) : null, hasHeadline ? /*#__PURE__*/_jsx(Text, {
         style: headlineStyle,
         children: headline
       }) : null]
-    }), showSupportingText && supportingText ? /*#__PURE__*/_jsx(Text, {
+    }) : null, showSupportingText && supportingText ? /*#__PURE__*/_jsx(Text, {
       style: supportingTextStyle,
       children: supportingText
+    }) : null, showBody && body ? /*#__PURE__*/_jsx(Text, {
+      style: bodyStyle,
+      children: body
     }) : null, buttonContent]
   });
 }
+const FULL_WIDTH = {
+  width: '100%'
+};
 export default PageHero;