jfs-components 0.1.28 → 0.1.32

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';

package/lib/module/design-tokens/figma-modes.generated.js

@@ -321,6 +321,7 @@ export const FIGMA_COMPONENT_MODES = {
   "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "Carousel": ["peekOffset"],
   "CarouselCardAccounts": ["peekOffset"],
+  "CategoryCard": ["AppearanceBrand", "Badge Size", "Color Mode", "Emphasis", "Radius"],
   "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Radius", "Selectable", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "Checkbox": ["Color Mode"],
   "CheckboxGroup": ["Color Mode"],
@@ -350,6 +351,7 @@ export const FIGMA_COMPONENT_MODES = {
   "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
   "Grid": ["Background", "Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis"],
   "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
   "HoldingsCard": ["AppearanceBrand", "Color Mode"],
   "HStack": ["Context", "Padding", "Page type", "Slot gap"],
@@ -418,6 +420,7 @@ export const FIGMA_COMPONENT_MODES = {
   "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
   "TransactionStatus": ["Transaction Status"],
   "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
+  "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
   "VStack": ["Context", "Padding", "Page type", "Slot gap"]
 };