jfs-components 0.1.34 → 0.1.35

package/lib/commonjs/components/LottiePlayer/LottiePlayer.js

@@ -27,8 +27,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
-  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('video/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('video/height', modes)) || DEFAULT_SIZE;
   return {
     width,
     height
@@ -55,8 +55,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.
  *
@@ -67,7 +67,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/commonjs/components/LottiePlayer/LottiePlayer.web.js

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

package/lib/commonjs/components/PageHero/PageHero.js

@@ -13,16 +13,24 @@ var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// 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
@@ -33,21 +41,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   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,
@@ -65,34 +71,49 @@ function PageHero({
     ...propModes
   }), [globalModes, propModes]);
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes));
   const textWrapGap = Number((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
-  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
-  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes);
-  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes);
-  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes));
-  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes);
-  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes));
-  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes);
-  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes);
-  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes));
-  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes);
-  const headlineLineHeight = Number((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('video/width', modes)) || MEDIA_FALLBACK;
+  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('video/height', modes)) || MEDIA_FALLBACK;
+  const eyebrowStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
+  const headlineStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)),
+    textAlign: 'center',
+    width: '100%'
+  }), [modes]);
+  const supportingTextStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
+  const bodyStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',
-    paddingHorizontal,
     gap,
     width: '100%'
   };
@@ -102,34 +123,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 = (0, _react.useMemo)(() => {
     if (buttonSlot !== undefined && buttonSlot !== null) {
       return (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes);
@@ -141,20 +134,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 = (0, _react.useMemo)(() => {
     if (media === undefined || media === null) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -168,22 +157,30 @@ function PageHero({
       children: (0, _reactUtils.cloneChildrenWithModes)(media, modes)
     });
   }, [media, mediaWidth, mediaHeight, modes]);
+  const hasEyebrow = showEyebrow && !!eyebrow;
+  const hasHeadline = !!headline;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     testID: testID,
-    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [mediaContent, hasEyebrow || hasHeadline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: textWrapStyle,
-      children: [eyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: [hasEyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: eyebrowStyle,
         children: eyebrow
-      }) : null, headline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }) : null, hasHeadline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: headlineStyle,
         children: headline
       }) : null]
-    }), showSupportingText && supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    }) : null, showSupportingText && supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: supportingTextStyle,
       children: supportingText
+    }) : null, showBody && body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: bodyStyle,
+      children: body
     }) : null, buttonContent]
   });
 }
+const FULL_WIDTH = {
+  width: '100%'
+};
 var _default = exports.default = PageHero;