jfs-components 0.1.30 → 0.1.33

package/lib/module/components/ValueBackMetric/ValueBackMetric.js

@@ -0,0 +1,214 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 = '500';
+const VALUE_FONT_SIZE = 16;
+const VALUE_FONT_WEIGHT = '500';
+const CAPTION_FONT_SIZE = 12;
+const CAPTION_FONT_WEIGHT = '400';
+const FONT_FAMILY = 'JioType Var';
+const CARD_BACKGROUND = '#ffffff';
+const CARD_MIN_HEIGHT = 82;
+const ICON_SIZE = 18;
+// 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.
+const ICON_PADDING_RESET = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0
+};
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <ValueBackMetric
+ *   title="JioPoints"
+ *   value="Value"
+ *   caption="Earn 10 point with UPI"
+ *   linkLabel="Earn"
+ *   onPress={() => navigation.navigate('ValueBack')}
+ *   onLinkPress={() => navigation.navigate('EarnPoints')}
+ * />
+ * ```
+ */
+function ValueBackMetric({
+  icon = 'ic_rupee_coin',
+  title = 'JioPoints',
+  value,
+  caption,
+  linkLabel,
+  onLinkPress,
+  onPress,
+  disabled,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const titleColor = getVariableByName('metricdata/title/color', modes) ?? '#000000';
+  const valueColor = getVariableByName('metricdata/value/color', modes) ?? '#000000';
+  const captionColor = getVariableByName('metricdata/caption/color', modes) ?? '#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(() => ({
+    '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) ?? '#ad8444';
+  const iconSize = getVariableByName('icon/size', modes) ?? ICON_SIZE;
+  const gap = getVariableByName('metricdata/gap', modes) ?? 4;
+  const valueWrapGap = getVariableByName('metricdata/valueWrap/gap', modes) ?? 4;
+  const paddingHorizontal = getVariableByName('metricdata/padding/horizontal', modes) ?? 10;
+  const paddingVertical = getVariableByName('metricdata/padding/vertical', modes) ?? 10;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: CARD_MIN_HEIGHT,
+    backgroundColor: CARD_BACKGROUND
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: TITLE_FONT_SIZE,
+    fontWeight: TITLE_FONT_WEIGHT,
+    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: VALUE_FONT_SIZE,
+    fontWeight: VALUE_FONT_WEIGHT,
+    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO
+  };
+  const captionTextStyle = {
+    color: captionColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: CAPTION_FONT_SIZE,
+    fontWeight: CAPTION_FONT_WEIGHT,
+    lineHeight: CAPTION_FONT_SIZE * 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' ? /*#__PURE__*/_jsx(Icon, {
+    iconName: icon,
+    size: iconSize,
+    color: iconColor,
+    modes: modes,
+    style: ICON_PADDING_RESET
+  }) : cloneChildrenWithModes(icon, modes);
+  const hasValue = value !== undefined && value !== null && value !== '';
+  const hasCaption = caption !== undefined && caption !== '';
+  const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption, linkLabel].filter(Boolean).join(', ') || undefined);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: valueWrapGap
+      },
+      children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/_jsx(Text, {
+        style: [titleTextStyle, titleStyle],
+        children: title
+      }) : null]
+    }), hasValue || hasCaption ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 4
+      },
+      children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
+        style: [valueTextStyle, valueStyle],
+        children: value
+      }) : value : null, hasCaption ? /*#__PURE__*/_jsx(Text, {
+        style: [captionTextStyle, captionStyle],
+        children: caption
+      }) : null]
+    }) : null, linkLabel ? /*#__PURE__*/_jsx(Link, {
+      text: linkLabel,
+      autolayout: "Hug",
+      modes: linkModes,
+      ...(onLinkPress ? {
+        onPress: onLinkPress
+      } : null)
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      ...(resolvedLabel !== undefined ? {
+        accessibilityLabel: resolvedLabel
+      } : null),
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessible: true,
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    children: content
+  });
+}
+export default /*#__PURE__*/React.memo(ValueBackMetric);

package/lib/module/components/index.js

@@ -24,6 +24,7 @@ export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight } from './CardInsight/CardInsight';
 export { default as CcCard } from './CcCard/CcCard';
+export { default as CategoryCard } from './CategoryCard/CategoryCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
@@ -51,6 +52,7 @@ export { default as AllocationComparisonChart } from './AllocationComparisonChar
 export { default as MonthlyStatusGrid, CalendarGlyph } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge } from './Gauge/Gauge';
 export { default as HeroSection } from './HeroSection/HeroSection';
+export { default as HelloJioInput } from './HelloJioInput/HelloJioInput';
 export { default as HoldingsCard } from './HoldingsCard/HoldingsCard';
 export { default as HStack } from './HStack/HStack';
 export { default as Icon } from './Icon/Icon';
@@ -157,4 +159,7 @@ export { default as TextSegment } from './TextSegment/TextSegment';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { default as Toggle } from './Toggle/Toggle';
 export { default as AutoplayControl } from './AutoplayControl/AutoplayControl';
-export { default as NumberPagination } from './NumberPagination/NumberPagination';
+export { default as NumberPagination } from './NumberPagination/NumberPagination';
+export { default as CounterBadge } from './CounterBadge/CounterBadge';
+export { default as FavoriteToggle } from './FavoriteToggle/FavoriteToggle';
+export { default as ValueBackMetric } from './ValueBackMetric/ValueBackMetric';