jfs-components 0.1.34 → 0.1.36

package/src/components/PageHero/PageHero.tsx

@@ -12,15 +12,26 @@ import Button from '../Button/Button'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
+// 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
+
 export type PageHeroProps = {
   /** Small eyebrow text shown above the headline. */
   eyebrow?: string
+  /** Whether to render the eyebrow line. */
+  showEyebrow?: boolean
   /** Main headline text. Centered and bold. */
   headline?: string
-  /** Optional supporting text shown below the headline. */
+  /** Supporting text shown directly below the headline (e.g. price). */
   supportingText?: string
   /** Whether to render the supporting text. */
   showSupportingText?: boolean
+  /** Optional second supporting line shown below `supportingText`. */
+  body?: string
+  /** Whether to render the body line. */
+  showBody?: boolean
   /** Label for the default action button. Ignored when `buttonSlot` is provided. */
   buttonLabel?: string
   /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
@@ -28,9 +39,10 @@ export type PageHeroProps = {
   /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
   showButton?: boolean
   /**
-   * Optional slot to fully override the action button.
-   * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
-   * `modes` are automatically cascaded into this slot.
+   * Optional slot to fully override the action button area (e.g. a
+   * `ButtonGroup` with several buttons). When provided, `showButton`,
+   * `buttonLabel`, and `onButtonPress` are ignored. `modes` are automatically
+   * cascaded into this slot.
    */
   buttonSlot?: React.ReactNode
   /**
@@ -38,16 +50,18 @@ export type PageHeroProps = {
    *
    * Intentionally typed as `React.ReactNode` so the consumer can bring any
    * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
-   * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
-   * from `react-native-svg`, a `<Video />` from `react-native-video`, a
-   * gradient view, or a custom illustration. The library deliberately does
-   * NOT wrap Lottie / video runtimes (they require native modules + pod
-   * autolinking on every consumer's app), so PageHero just allocates a
-   * token-sized container and lets the slot render whatever it wants.
+   * (`LottiePlayer` / `lottie-react-native`), an `<SvgXml />` from
+   * `react-native-svg`, a `<Video />` from `react-native-video`, a gradient
+   * view, or a custom illustration. The library deliberately does NOT wrap
+   * Lottie / video runtimes (they require native modules + pod autolinking on
+   * every consumer's app), so PageHero just allocates a token-sized container
+   * and lets the slot render whatever it wants.
    *
-   * The slot is rendered inside a `width × height` box driven by
-   * `media/width` and `media/height` tokens (default 117×117). `modes` are
-   * automatically cascaded into the slot via `cloneChildrenWithModes`.
+   * The slot is rendered inside a `width × height` box driven by the
+   * `video/width` and `video/height` tokens from the `Video / Output`
+   * collection (`L | M | S` → 117 / 70 / 20; default `L` = 117×117).
+   * `modes` are automatically cascaded into the slot via
+   * `cloneChildrenWithModes`.
    */
   media?: React.ReactNode
   /** Mode configuration for design-token theming. */
@@ -61,12 +75,16 @@ export type PageHeroProps = {
  * 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
@@ -77,21 +95,19 @@ export type PageHeroProps = {
  *   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,
@@ -108,51 +124,99 @@ function PageHero({
   )
 
   const gap = Number(getVariableByName('PageHero/gap', modes))
-  const paddingHorizontal =
-    Number(getVariableByName('PageHero/padding/horizontal', modes))
+  const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes))
 
-  const textWrapGap =
-    Number(getVariableByName('PageHero/textWrap/gap', 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
 
-  // 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 eyebrowStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName('PageHero/eyebrow/color', modes) as string,
+      fontFamily: getVariableByName(
+        'PageHero/eyebrow/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(
+        getVariableByName('PageHero/eyebrow/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(
+        getVariableByName('PageHero/eyebrow/lineHeight', modes)
+      ),
+      textAlign: 'center',
+    }),
+    [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 headlineStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName('PageHero/headline/color', modes) as string,
+      fontFamily: getVariableByName(
+        'PageHero/headline/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(
+        getVariableByName('PageHero/headline/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(
+        getVariableByName('PageHero/headline/lineHeight', modes)
+      ),
+      textAlign: 'center',
+      width: '100%',
+    }),
+    [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))
+  const supportingTextStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName(
+        'PageHero/supportingText/color',
+        modes
+      ) as string,
+      fontFamily: getVariableByName(
+        'PageHero/supportingText/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(
+        getVariableByName('PageHero/supportingText/fontSize', modes)
+      ),
+      fontWeight: String(
+        getVariableByName('PageHero/supportingText/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(
+        getVariableByName('PageHero/supportingText/lineHeight', modes)
+      ),
+      textAlign: 'center',
+    }),
+    [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))
+  const bodyStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName('PageHero/body/color', modes) as string,
+      fontFamily: getVariableByName(
+        'PageHero/body/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(
+        getVariableByName('PageHero/body/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
+      textAlign: 'center',
+    }),
+    [modes]
+  )
 
   const containerStyle: ViewStyle = {
     flexDirection: 'column',
     alignItems: 'center',
-    paddingHorizontal,
     gap,
     width: '100%',
   }
@@ -164,38 +228,6 @@ function PageHero({
     width: '100%',
   }
 
-  const eyebrowStyle: TextStyle = {
-    color: eyebrowColor as string,
-    fontFamily: eyebrowFontFamily as string,
-    fontSize: eyebrowFontSize,
-    fontWeight: String(eyebrowFontWeight) as TextStyle['fontWeight'],
-    lineHeight: eyebrowLineHeight,
-    textAlign: 'center',
-  }
-
-  const headlineStyle: TextStyle = {
-    color: headlineColor as string,
-    fontFamily: headlineFontFamily as string,
-    fontSize: headlineFontSize,
-    fontWeight: String(headlineFontWeight) as TextStyle['fontWeight'],
-    lineHeight: headlineLineHeight,
-    textAlign: 'center',
-    width: '100%',
-  }
-
-  const supportingTextStyle: TextStyle = {
-    color: '#ffffff',
-    fontFamily: 'System',
-    fontSize: 12,
-    fontWeight: '500',
-    lineHeight: supportingTextLineHeight,
-    textAlign: 'center',
-  }
-
-  const buttonWrapStyle: ViewStyle = {
-    width: '100%',
-  }
-
   const buttonContent = useMemo<React.ReactNode>(() => {
     if (buttonSlot !== undefined && buttonSlot !== null) {
       return cloneChildrenWithModes(buttonSlot, modes)
@@ -208,21 +240,17 @@ 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<React.ReactNode>(() => {
     if (media === undefined || media === null) return null
     return (
@@ -240,19 +268,27 @@ function PageHero({
     )
   }, [media, mediaWidth, mediaHeight, modes])
 
+  const hasEyebrow = showEyebrow && !!eyebrow
+  const hasHeadline = !!headline
+
   return (
     <View style={[containerStyle, style]} testID={testID}>
       {mediaContent}
-      <View style={textWrapStyle}>
-        {eyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
-        {headline ? <Text style={headlineStyle}>{headline}</Text> : null}
-      </View>
+      {hasEyebrow || hasHeadline ? (
+        <View style={textWrapStyle}>
+          {hasEyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
+          {hasHeadline ? <Text style={headlineStyle}>{headline}</Text> : null}
+        </View>
+      ) : null}
       {showSupportingText && supportingText ? (
         <Text style={supportingTextStyle}>{supportingText}</Text>
       ) : null}
+      {showBody && body ? <Text style={bodyStyle}>{body}</Text> : null}
       {buttonContent}
     </View>
   )
 }
 
+const FULL_WIDTH: ViewStyle = { width: '100%' }
+
 export default PageHero