jfs-components 0.1.36 → 0.1.48

package/src/components/ValueBackMetric/ValueBackMetric.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   View,
-  Text,
+  Text as RNText,
   Pressable,
   type StyleProp,
   type ViewStyle,
@@ -11,35 +11,18 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Icon from '../Icon/Icon'
-import Link from '../Link/Link'
+import Text from '../Text/Text'
 import type { Modes } from '../../design-tokens'
 
 const TITLE_LINE_HEIGHT_RATIO = 1.2
 const VALUE_LINE_HEIGHT_RATIO = 1.2
 const CAPTION_LINE_HEIGHT_RATIO = 1.5
-
-// The Figma node binds the header-icon size and the per-part font sizes/weights
-// to `valueBackMetric/*` variables, but those tokens are NOT in the committed
-// variables snapshot (`npm run tokens -- find valueBackMetric` → no matches).
-// They also intentionally differ from the `metricdata/*` typography defaults
-// (e.g. `metricdata/value` resolves to 20px/700, whereas this component's value
-// is 16px/500). So the sizes/weights below are encoded as literal constants
-// matching the Figma design exactly. Colours, gaps and padding DO exist as real
-// `metricdata/*` tokens (and match the design), so those resolve through
-// `getVariableByName` and stay themeable.
-const TITLE_FONT_SIZE = 12
-const TITLE_FONT_WEIGHT: TextStyle['fontWeight'] = '500'
-const VALUE_FONT_SIZE = 16
-const VALUE_FONT_WEIGHT: TextStyle['fontWeight'] = '500'
-const CAPTION_FONT_SIZE = 12
-const CAPTION_FONT_WEIGHT: TextStyle['fontWeight'] = '400'
-const FONT_FAMILY = 'JioType Var'
-const CARD_BACKGROUND = '#ffffff'
 const CARD_MIN_HEIGHT = 82
 const ICON_SIZE = 18
+const TEXT_WRAP_GAP = 4
+
 // Figma renders the header glyph flush (all `icon/padding/*` tokens are 0); the
-// shared Icon pulls padding from those tokens, so mirror MetricData and zero it
-// explicitly to keep the icon flush against the title.
+// shared Icon pulls padding from those tokens, so zero it explicitly.
 const ICON_PADDING_RESET: ViewStyle = {
   paddingLeft: 0,
   paddingRight: 0,
@@ -69,19 +52,31 @@ export type ValueBackMetricProps = {
   value?: string | React.ReactNode
   /** Muted caption below the value (12px, `#777`). Hidden when omitted. */
   caption?: string
-  /** Bottom link label (underlined, brand accent). Hidden when omitted. */
+  /**
+   * Bottom CTA label rendered as the shared {@link Text} (purple 12px via
+   * seeded `Text Appearance: Secondary` + `Text Sizes: Small`). Hidden when
+   * omitted. Ignored when the {@link link} slot is provided.
+   */
   linkLabel?: string
-  /** Fired when the link is pressed. Navigation is the consumer's job. */
+  /**
+   * Real slot for the bottom CTA. Highest precedence — when provided, these
+   * children render instead of the declarative `linkLabel` Text. Seeded
+   * `Text Appearance: Secondary` + `Text Sizes: Small` cascade into the slot
+   * (so a bare `<Text text="Earn" />` matches the design); child-level modes
+   * still win.
+   */
+  link?: React.ReactNode
+  /** Fired when the declarative CTA (`linkLabel`) is pressed. */
   onLinkPress?: (event: GestureResponderEvent) => void
   /**
    * Press handler for the whole card. When set, the card becomes pressable
    * (rendered through a `Pressable` with `accessibilityRole="button"`).
-   * Independent of {@link onLinkPress} — the bottom link keeps its own handler.
+   * Independent of {@link onLinkPress} — the bottom CTA keeps its own handler.
    */
   onPress?: (event: GestureResponderEvent) => void
   /** Disable interaction when `onPress` is set. */
   disabled?: boolean
-  /** Design-token modes for theming. */
+  /** Design-token modes for theming. Cascaded to slot children. */
   modes?: Modes
   /** Override the container styles. */
   style?: StyleProp<ViewStyle>
@@ -98,22 +93,114 @@ export type ValueBackMetricProps = {
   accessibilityLabel?: string
 }
 
+interface ValueBackMetricTokens {
+  titleColor: string
+  titleFontFamily: string
+  titleFontSize: number
+  titleFontWeight: TextStyle['fontWeight']
+  valueColor: string
+  valueFontFamily: string
+  valueFontSize: number
+  valueFontWeight: TextStyle['fontWeight']
+  captionColor: string
+  captionFontFamily: string
+  captionFontSize: number
+  captionFontWeight: TextStyle['fontWeight']
+  gap: number
+  valueWrapGap: number
+  paddingHorizontal: number
+  paddingVertical: number
+  backgroundColor: string
+  iconColor: string
+  iconSize: number
+}
+
+// The `valueBackMetric/*` layout + typography tokens are bound on the Figma
+// node but are NOT yet in the committed variables snapshot
+// (`npm run tokens -- find valueBackMetric` → no matches). Colours and the
+// header-row gap do exist as `metricdata/*` / `icon/*` tokens. Until the
+// export is re-synced, `getVariableByName` returns undefined for the
+// valueBackMetric names and the Figma-node fallbacks below take over.
+function resolveTokens(modes: Modes): ValueBackMetricTokens {
+  const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
+  const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
+  const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
+
+  const titleFontFamily =
+    (getVariableByName('valueBackMetric/title/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const titleFontSize =
+    (getVariableByName('valueBackMetric/title/fontsize', modes) as number | null) ?? 12
+  const titleFontWeight = String(
+    getVariableByName('valueBackMetric/title/fontweight', modes) ?? 500
+  ) as TextStyle['fontWeight']
+
+  const valueFontFamily =
+    (getVariableByName('valueBackMetric/value/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const valueFontSize =
+    (getVariableByName('valueBackMetric/value/fontsize', modes) as number | null) ?? 16
+  // Figma binds the value face to JioType Medium; there is no dedicated
+  // valueBackMetric/value/fontweight token yet, so fall back to 500.
+  const valueFontWeight = '500' as TextStyle['fontWeight']
+
+  const captionFontFamily =
+    (getVariableByName('valueBackMetric/caption/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const captionFontSize =
+    (getVariableByName('valueBackMetric/caption/fontsize', modes) as number | null) ?? 12
+  const captionFontWeight = String(
+    getVariableByName('valueBackMetric/caption/fontweight', modes) ?? 400
+  ) as TextStyle['fontWeight']
+
+  const gap = (getVariableByName('valueBackMetric/gap', modes) as number | null) ?? 4
+  const valueWrapGap = (getVariableByName('metricdata/valueWrap/gap', modes) as number | null) ?? 4
+  // Design padding is 0 — do NOT fall back to metricdata/padding (10).
+  const paddingHorizontal =
+    (getVariableByName('valueBackMetric/padding/horizontal', modes) as number | null) ?? 0
+  const paddingVertical =
+    (getVariableByName('valueBackMetric/padding/vertical', modes) as number | null) ?? 0
+  const backgroundColor =
+    (getVariableByName('valueBackMetric/background/color', modes) as string | null) ?? '#ffffff'
+
+  const iconColor = (getVariableByName('icon/color', modes) as string | null) ?? '#ad8444'
+  const iconSize = (getVariableByName('icon/size', modes) as number | null) ?? ICON_SIZE
+
+  return {
+    titleColor,
+    titleFontFamily,
+    titleFontSize,
+    titleFontWeight,
+    valueColor,
+    valueFontFamily,
+    valueFontSize,
+    valueFontWeight,
+    captionColor,
+    captionFontFamily,
+    captionFontSize,
+    captionFontWeight,
+    gap,
+    valueWrapGap,
+    paddingHorizontal,
+    paddingVertical,
+    backgroundColor,
+    iconColor,
+    iconSize,
+  }
+}
+
 /**
  * ValueBackMetric — a compact, left-aligned "value back" card.
  *
  * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
- * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
- * `value`, `caption` and `linkLabel` each render only when provided; the header
- * (icon + title) always shows.
+ * `value`, a muted `caption`, and an optional bottom CTA (`linkLabel` / `link`
+ * slot, e.g. "Earn"). `value`, `caption` and the CTA each render only when
+ * provided; the header (icon + title) always shows.
  *
- * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
- * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
- * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
- * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
- * purple at 12px like the design (caller `modes` win). The per-part font
- * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
- * not yet in the committed token snapshot, so they are encoded as constants
- * matching the design.
+ * Colours resolve from the `metricdata/*` tokens; the header glyph from the
+ * `icon/*` tokens (default 18px gold); the CTA from the shared {@link Text}
+ * with `Text Appearance: Secondary` + `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). Layout/typography
+ * follow the Figma `valueBackMetric/*` variables — not yet in the committed
+ * token snapshot, so they resolve through `getVariableByName` with Figma-node
+ * fallbacks.
  *
  * @example
  * ```tsx
@@ -133,6 +220,7 @@ function ValueBackMetric({
   value,
   caption,
   linkLabel,
+  link,
   onLinkPress,
   onPress,
   disabled,
@@ -143,76 +231,56 @@ function ValueBackMetric({
   captionStyle,
   accessibilityLabel,
 }: ValueBackMetricProps) {
-  const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
-  const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
-  const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
-  // The design's link is purple (`text/foreground` under `Text Appearance:
-  // Secondary`) at 12px (`link/fontSize` under `Text Sizes: Small`), while the
-  // header icon keeps the default gold `icon/color`. Seed only the link's
-  // modes; caller-supplied modes win.
-  const linkModes = React.useMemo<Modes>(
+  const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+  // Figma Code-Connects the CTA to Text (not Link): purple, no underline.
+  // Seed Secondary + Small so it matches the design; caller modes win.
+  const linkModes = useMemo<Modes>(
     () => ({ 'Text Appearance': 'Secondary', 'Text Sizes': 'Small', ...modes }),
     [modes]
   )
 
-  // The header glyph is token-driven: `icon/color` (gold by default, retinted
-  // via `AppearanceBrand`) and `icon/size` (18px). Passing them explicitly — as
-  // MetricData does — makes the glyph deterministic instead of relying on the
-  // shared Icon's internal token lookups.
-  const iconColor = (getVariableByName('icon/color', modes) as string | null) ?? '#ad8444'
-  const iconSize = (getVariableByName('icon/size', modes) as number | null) ?? ICON_SIZE
-
-  const gap = (getVariableByName('metricdata/gap', modes) as number | null) ?? 4
-  const valueWrapGap = (getVariableByName('metricdata/valueWrap/gap', modes) as number | null) ?? 4
-  const paddingHorizontal = (getVariableByName('metricdata/padding/horizontal', modes) as number | null) ?? 10
-  const paddingVertical = (getVariableByName('metricdata/padding/vertical', modes) as number | null) ?? 10
-
   const containerStyle: ViewStyle = {
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    gap,
-    paddingHorizontal,
-    paddingVertical,
+    gap: tokens.gap,
+    paddingHorizontal: tokens.paddingHorizontal,
+    paddingVertical: tokens.paddingVertical,
     minHeight: CARD_MIN_HEIGHT,
-    backgroundColor: CARD_BACKGROUND,
+    backgroundColor: tokens.backgroundColor,
   }
 
   const titleTextStyle: TextStyle = {
-    color: titleColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: TITLE_FONT_SIZE,
-    fontWeight: TITLE_FONT_WEIGHT,
-    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO,
+    color: tokens.titleColor,
+    fontFamily: tokens.titleFontFamily,
+    fontSize: tokens.titleFontSize,
+    fontWeight: tokens.titleFontWeight,
+    lineHeight: tokens.titleFontSize * TITLE_LINE_HEIGHT_RATIO,
   }
 
   const valueTextStyle: TextStyle = {
-    color: valueColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: VALUE_FONT_SIZE,
-    fontWeight: VALUE_FONT_WEIGHT,
-    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO,
+    color: tokens.valueColor,
+    fontFamily: tokens.valueFontFamily,
+    fontSize: tokens.valueFontSize,
+    fontWeight: tokens.valueFontWeight,
+    lineHeight: tokens.valueFontSize * VALUE_LINE_HEIGHT_RATIO,
   }
 
   const captionTextStyle: TextStyle = {
-    color: captionColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: CAPTION_FONT_SIZE,
-    fontWeight: CAPTION_FONT_WEIGHT,
-    lineHeight: CAPTION_FONT_SIZE * CAPTION_LINE_HEIGHT_RATIO,
+    color: tokens.captionColor,
+    fontFamily: tokens.captionFontFamily,
+    fontSize: tokens.captionFontSize,
+    fontWeight: tokens.captionFontWeight,
+    lineHeight: tokens.captionFontSize * CAPTION_LINE_HEIGHT_RATIO,
   }
 
-  // Mirrors the Figma swap slot, whose preferred instances are `Icon` and
-  // `Image`. A registry name renders the token-driven `Icon` (18px, gold,
-  // flush — all from the `icon/*` tokens); a custom node (`<Icon/>`,
-  // `<Image/>`, anything) renders as-is with `modes` cascaded into it, so an
-  // Icon instance follows the icon tokens while an Image keeps its own sizing.
   const iconNode =
     icon == null ? null : typeof icon === 'string' ? (
       <Icon
         iconName={icon}
-        size={iconSize}
-        color={iconColor}
+        size={tokens.iconSize}
+        color={tokens.iconColor}
         modes={modes}
         style={ICON_PADDING_RESET}
       />
@@ -222,6 +290,8 @@ function ValueBackMetric({
 
   const hasValue = value !== undefined && value !== null && value !== ''
   const hasCaption = caption !== undefined && caption !== ''
+  const hasLinkSlot = link !== undefined && link !== null && link !== false
+  const hasLinkLabel = linkLabel !== undefined && linkLabel !== ''
 
   const resolvedLabel =
     accessibilityLabel ??
@@ -229,43 +299,47 @@ function ValueBackMetric({
       .filter(Boolean)
       .join(', ') || undefined)
 
+  // Seed Secondary + Small into the CTA slot too, so a bare `<Text text="Earn" />`
+  // matches the design without the consumer re-seeding. Child-level modes still win.
+  const ctaNode = hasLinkSlot ? (
+    cloneChildrenWithModes(link, linkModes)
+  ) : hasLinkLabel ? (
+    onLinkPress ? (
+      <Pressable
+        onPress={onLinkPress}
+        accessibilityRole="link"
+        accessibilityLabel={linkLabel}
+      >
+        <Text text={linkLabel} textAlign="Left" modes={linkModes} />
+      </Pressable>
+    ) : (
+      <Text text={linkLabel} textAlign="Left" modes={linkModes} />
+    )
+  ) : null
+
   const content = (
     <>
-      {/* Header row: brand glyph + title (always shown). */}
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: valueWrapGap }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.valueWrapGap }}>
         {iconNode}
         {title !== undefined && title !== '' ? (
-          <Text style={[titleTextStyle, titleStyle]}>{title}</Text>
+          <RNText style={[titleTextStyle, titleStyle]}>{title}</RNText>
         ) : null}
       </View>
 
-      {/* Value + caption block (each optional). */}
       {hasValue || hasCaption ? (
-        <View style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
+        <View style={{ flexDirection: 'column', alignItems: 'flex-start', gap: TEXT_WRAP_GAP }}>
           {hasValue ? (
             typeof value === 'string' ? (
-              <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+              <RNText style={[valueTextStyle, valueStyle]}>{value}</RNText>
             ) : (
               value
             )
           ) : null}
-          {hasCaption ? <Text style={[captionTextStyle, captionStyle]}>{caption}</Text> : null}
+          {hasCaption ? <RNText style={[captionTextStyle, captionStyle]}>{caption}</RNText> : null}
         </View>
       ) : null}
 
-      {/* Bottom link (optional). Fully token-driven via the seeded `linkModes`
-          (purple 12px, see above). `linkLabel` is checked inline (narrows it to
-          a non-undefined `string`) and `onPress` is spread conditionally, since
-          `exactOptionalPropertyTypes` forbids passing `undefined` to Link's
-          non-`undefined` optional props. */}
-      {linkLabel ? (
-        <Link
-          text={linkLabel}
-          autolayout="Hug"
-          modes={linkModes}
-          {...(onLinkPress ? { onPress: onLinkPress } : null)}
-        />
-      ) : null}
+      {ctaNode}
     </>
   )
 

package/src/components/index.ts

@@ -1,7 +1,12 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard'
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter'
 export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached'
-export { default as AppBar } from './AppBar/AppBar'
+export {
+  default as AppBar,
+  JioDot,
+  type AppBarProps,
+  type JioDotProps,
+} from './AppBar/AppBar'
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar'
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup'
 export { default as Badge, type BadgeProps, type BadgeType } from './Badge/Badge'