jfs-components 0.0.74 → 0.0.78

package/lib/module/components/RechargeCard/RechargeCard.js

@@ -7,7 +7,23 @@ import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
+
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_BUTTON_GROUP_MODES = {
+  AppearanceBrand: 'Secondary',
+  'Button / Size': 'S',
+  Emphasis: 'High'
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES = {
+  Context3: 'Balance & Cards'
+};
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
@@ -23,17 +39,19 @@ export default function RechargeCard({
   modes = EMPTY_MODES,
   style
 }) {
-  // Container Tokens
-  const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
+  // Container Tokens (defaults mirror Figma node 2235:937).
+  const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#ffffff';
   const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
   const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
   const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
   const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
-  const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 328, 10);
+  const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 312, 10);
+  const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes) || 1, 10);
+  const strokeColor = getVariableByName('rechargeCard/stroke/color', modes) || '#ebebed';
 
   // Header Tokens
   const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-  const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
+  const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#000000';
   const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
   const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
   const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
@@ -44,30 +62,25 @@ export default function RechargeCard({
   const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
 
   // Spec Label Tokens
-  const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
+  const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#000000';
   const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
   const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
   const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
   const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
 
   // Spec Value Tokens
-  const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
+  const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#000000';
   const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
   const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
   const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
   const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
 
   // Disclaimer Tokens
-  const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
+  const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#000000';
   const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
   const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
   const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
   const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
-
-  // Button Group Tokens
-  // Handled by ButtonGroup component directly
-
-  // Helpers
   const resolveFontWeight = weight => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)
@@ -80,6 +93,8 @@ export default function RechargeCard({
       paddingVertical,
       gap,
       borderRadius: radius,
+      borderWidth: strokeWidth,
+      borderColor: strokeColor,
       minWidth,
       alignItems: 'flex-start'
     }, style],
@@ -100,7 +115,10 @@ export default function RechargeCard({
       }), /*#__PURE__*/_jsx(MoneyValue, {
         value: price,
         currency: "\u20B9",
-        modes: modes
+        modes: {
+          ...DEFAULT_MONEY_VALUE_MODES,
+          ...modes
+        }
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: {
@@ -189,10 +207,8 @@ export default function RechargeCard({
       children: disclaimer
     }), /*#__PURE__*/_jsx(ButtonGroup, {
       modes: {
-        ...modes,
-        "Appearance.Brand": "Secondary",
-        "Button / Size": "S",
-        "Emphasis": "High"
+        ...DEFAULT_BUTTON_GROUP_MODES,
+        ...modes
       },
       children: actions
     })]

package/lib/module/components/Stepper/Step.js

@@ -5,56 +5,52 @@ import { View, Text } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { StepLabel } from './StepLabel';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Step({
   children,
   modes = EMPTY_MODES,
   style,
   index = 0,
+  showLine = true,
   connectorStyle,
   title,
   supportingText,
+  metaText,
   subtitle = true,
+  meta = true,
   status = 'number'
 }) {
-  // Container styles
   const minHeight = Number(getVariableByName('steperItem/minHeight', modes)) || 52;
-  const gap = Number(getVariableByName('steperItem/gap', modes)) || 8;
-
-  // Indicator dimensions and styles
-  const indicatorSize = Number(getVariableByName('stepIndicator/size', modes)) || 24;
+  const gap = Number(getVariableByName('steperItem/gap', modes)) || 16;
+  const indicatorSize = Number(getVariableByName('stepIndicator/size', modes)) || 36;
   const indicatorRadius = Number(getVariableByName('stepIndicator/radius', modes)) || 9999;
-  const indicatorBg = getVariableByName('stepIndicator/background', modes) || '#5c00b5';
-  const indicatorBorderColor = getVariableByName('stepIndicator/border/color', modes) || '#5c00b5';
+  const indicatorBg = getVariableByName('stepIndicator/background', modes) || '#5d00b5';
+  const indicatorBorderColor = getVariableByName('stepIndicator/border/color', modes) || '#5d00b5';
   const indicatorBorderSize = Number(getVariableByName('stepIndicator/border/size', modes)) || 1;
   const iconColor = getVariableByName('stepIndicator/icon/color', modes) || '#ffffff';
-
-  // Label styles (for number)
+  const stepStatusSize = Number(getVariableByName('stepStatus/size', modes)) || 18;
   const labelFontSize = Number(getVariableByName('stepIndicator/label/fontSize', modes)) || 12;
   const labelFontFamily = getVariableByName('stepIndicator/label/fontFamily', modes) || undefined;
   const labelLineHeight = Number(getVariableByName('stepIndicator/label/lineHeight', modes)) || 14;
   const labelFontWeight = getVariableByName('stepIndicator/label/fontWeight', modes) || '500';
-
-  // Vertical line styles
   const lineSize = Number(getVariableByName('steperItem/lineSize', modes)) || 2;
-  const lineColor = getVariableByName('steperItem/line', modes) || '#5c00b5';
+  const lineColor = getVariableByName('steperItem/line', modes) || '#5d00b5';
   const badgeWrapGap = Number(getVariableByName('steperItem/badgeWrap/gap', modes)) || 2;
   const containerStyle = {
     flexDirection: 'row',
     minHeight,
+    gap,
     ...style
   };
-
-  // FIX: This wrapper should NOT expand. It should be exact width of the indicator.
   const indicatorWrapperStyle = {
     flexDirection: 'column',
     alignItems: 'center',
     width: indicatorSize,
     flexGrow: 0,
-    // Do NOT grow
     flexShrink: 0,
-    gap: badgeWrapGap
+    gap: badgeWrapGap,
+    alignSelf: 'stretch'
   };
   const indicatorStyle = {
     width: indicatorSize,
@@ -67,6 +63,12 @@ export function Step({
     justifyContent: 'center',
     overflow: 'hidden'
   };
+  const stepStatusContainerStyle = {
+    width: stepStatusSize,
+    height: stepStatusSize,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
   const labelStyle = {
     color: iconColor,
     fontSize: labelFontSize,
@@ -75,24 +77,19 @@ export function Step({
     lineHeight: labelLineHeight,
     textAlign: 'center'
   };
-
-  // Combine base line style with injected connectorStyle
   const lineStyle = {
     width: lineSize,
     backgroundColor: lineColor,
     flexGrow: 1,
-    // Line should take up remaining vertical space in this column
-    ...connectorStyle // Allow overriding display, color, etc.
+    minHeight: 1,
+    ...connectorStyle
   };
-
-  // Helper for icons
   const renderIcon = () => {
     switch (status) {
       case 'complete':
-        // Checkmark
         return /*#__PURE__*/_jsx(Svg, {
-          width: 12,
-          height: 12,
+          width: stepStatusSize,
+          height: stepStatusSize,
           viewBox: "0 0 24 24",
           fill: "none",
           children: /*#__PURE__*/_jsx(Path, {
@@ -104,10 +101,9 @@ export function Step({
           })
         });
       case 'error':
-        // X mark
         return /*#__PURE__*/_jsx(Svg, {
-          width: 12,
-          height: 12,
+          width: stepStatusSize,
+          height: stepStatusSize,
           viewBox: "0 0 24 24",
           fill: "none",
           children: /*#__PURE__*/_jsx(Path, {
@@ -119,10 +115,9 @@ export function Step({
           })
         });
       case 'warning':
-        // Exclamation / Triangle
         return /*#__PURE__*/_jsx(Svg, {
-          width: 12,
-          height: 12,
+          width: stepStatusSize,
+          height: stepStatusSize,
           viewBox: "0 0 24 24",
           fill: "none",
           children: /*#__PURE__*/_jsx(Path, {
@@ -141,46 +136,38 @@ export function Step({
         });
     }
   };
-
-  // Clone children to pass modes if they are StepLabel
-  const childrenWithProps = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        modes
-      });
-    }
-    return child;
-  });
-
-  // Determine if we have content to pad
-  // Default padding bottom to 16 if line is shown, but also respect connectorStyle display
-  // If display is none, we probably don't want the padding bottom either.
-  const isLineHidden = connectorStyle?.display === 'none';
-  const contentPaddingBottom = isLineHidden ? 0 : 16;
+  const hasSlotChildren = React.Children.count(children) > 0;
   return /*#__PURE__*/_jsxs(View, {
     style: containerStyle,
     children: [/*#__PURE__*/_jsxs(View, {
       style: indicatorWrapperStyle,
       children: [/*#__PURE__*/_jsx(View, {
         style: indicatorStyle,
-        children: renderIcon()
-      }), /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(View, {
+          style: stepStatusContainerStyle,
+          children: renderIcon()
+        })
+      }), showLine ? /*#__PURE__*/_jsx(View, {
         style: lineStyle
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        width: gap
-      }
+      }) : null]
     }), /*#__PURE__*/_jsx(View, {
       style: {
-        flex: 1,
-        paddingBottom: contentPaddingBottom
+        flex: 1
       },
-      children: title ? /*#__PURE__*/_jsx(StepLabel, {
-        title: title,
-        supportingText: subtitle ? supportingText || undefined : undefined,
+      children: hasSlotChildren ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsx(StepLabel, {
+        ...(title !== undefined ? {
+          title
+        } : {}),
+        ...(supportingText !== undefined ? {
+          supportingText
+        } : {}),
+        ...(metaText !== undefined ? {
+          metaText
+        } : {}),
+        subtitle: subtitle,
+        meta: meta,
         modes: modes
-      }) : childrenWithProps
+      })
     })]
   });
 }

package/lib/module/components/Stepper/StepLabel.js

@@ -8,24 +8,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StepLabel({
   title = 'Stepper Item',
   supportingText,
+  metaText,
+  subtitle = true,
+  meta = true,
   modes = EMPTY_MODES,
   style
 }) {
-  // Title styles
   const titleColor = getVariableByName('steperItem/title/color', modes) || '#0d0d0f';
   const titleFontSize = Number(getVariableByName('steperItem/title/fontSize', modes)) || 14;
   const titleFontFamily = getVariableByName('steperItem/title/fontFamily', modes) || undefined;
   const titleLineHeight = Number(getVariableByName('steperItem/title/lineHeight', modes)) || 18;
   const titleFontWeight = getVariableByName('steperItem/title/fontWeight', modes) || '700';
 
-  // Subtitle styles
-  const subtitleColor = getVariableByName('steperItem/subtitle/color', modes) || '#3d4047';
-  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', modes)) || 12;
-  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', modes) || undefined;
-  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', modes)) || 16;
-  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', modes) || '400';
-
-  // Layout gap
+  // The Subtitle (supportingText) and Meta both default to the "Neutral"
+  // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
+  // spread after the default), so each remains overridable. The Title keeps
+  // its own appearance resolution.
+  const subtitleModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes
+  };
+  const metaModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes
+  };
+  const subtitleColor = getVariableByName('steperItem/subtitle/color', subtitleModes) || '#3d4047';
+  const subtitleFontSize = Number(getVariableByName('steperItem/subtitle/fontSize', subtitleModes)) || 12;
+  const subtitleFontFamily = getVariableByName('steperItem/subtitle/fontFamily', subtitleModes) || undefined;
+  const subtitleLineHeight = Number(getVariableByName('steperItem/subtitle/lineHeight', subtitleModes)) || 16;
+  const subtitleFontWeight = getVariableByName('steperItem/subtitle/fontWeight', subtitleModes) || '400';
+  const metaColor = getVariableByName('steperItem/meta/color', metaModes) || '#f7ab21';
+  const metaFontSize = Number(getVariableByName('steperItem/meta/fontSize', metaModes)) || 10;
+  // The Figma variable is authored as "fontFamily Copy" (with a space + suffix).
+  // Match the literal Figma name to avoid a missing-variable warning.
+  const metaFontFamily = getVariableByName('steperItem/meta/fontFamily Copy', metaModes) || undefined;
+  const metaLineHeight = Number(getVariableByName('steperItem/meta/lineHeight', metaModes)) || 12;
+  const metaFontWeight = getVariableByName('steperItem/meta/fontWeight', metaModes) || '700';
   const textGap = Number(getVariableByName('steperItem/textWrap/gap', modes)) || 2;
   const titleStyle = {
     color: titleColor,
@@ -41,6 +59,15 @@ export function StepLabel({
     fontWeight: subtitleFontWeight,
     lineHeight: subtitleLineHeight
   };
+  const metaStyle = {
+    color: metaColor,
+    fontSize: metaFontSize,
+    fontFamily: metaFontFamily,
+    fontWeight: metaFontWeight,
+    lineHeight: metaLineHeight
+  };
+  const showSubtitle = subtitle && !!supportingText;
+  const showMeta = meta && !!metaText;
   return /*#__PURE__*/_jsxs(View, {
     style: [{
       gap: textGap,
@@ -49,9 +76,12 @@ export function StepLabel({
     children: [/*#__PURE__*/_jsx(Text, {
       style: titleStyle,
       children: title
-    }), supportingText ? /*#__PURE__*/_jsx(Text, {
+    }), showSubtitle ? /*#__PURE__*/_jsx(Text, {
       style: subtitleStyle,
       children: supportingText
+    }) : null, showMeta ? /*#__PURE__*/_jsx(Text, {
+      style: metaStyle,
+      children: metaText
     }) : null]
   });
 }

package/lib/module/components/Stepper/Stepper.js

@@ -13,7 +13,6 @@ export default function Stepper({
   modes = EMPTY_MODES,
   style
 }) {
-  // Stepper container styles
   const paddingHorizontal = Number(getVariableByName('stepper/padding/horizontal', modes)) || 8;
   const paddingVertical = Number(getVariableByName('stepper/padding/vertical', modes)) || 0;
   const gap = Number(getVariableByName('stepper/gap', modes)) || 2;
@@ -23,25 +22,24 @@ export default function Stepper({
     gap,
     ...style
   };
-
-  // Inject index and connectorStyle logic into Step children
   const steps = React.Children.toArray(children);
-  const childrenWithProps = steps.map((child, index) => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      const isLast = index === steps.length - 1;
-      return /*#__PURE__*/React.cloneElement(child, {
-        index,
-        modes,
-        // Pass modes down
-        connectorStyle: isLast ? {
-          display: 'none'
-        } : undefined
-      });
-    }
-    return child;
+  const stepsWithProps = steps.map((child, stepIndex) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const isLast = stepIndex === steps.length - 1;
+    const childProps = child.props || {};
+    const childModes = childProps.modes ? {
+      ...modes,
+      ...childProps.modes
+    } : modes;
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...childProps,
+      index: childProps.index ?? stepIndex,
+      modes: childModes,
+      showLine: childProps.showLine !== undefined ? childProps.showLine : !isLast
+    });
   });
   return /*#__PURE__*/_jsx(View, {
     style: containerStyle,
-    children: childrenWithProps
+    children: stepsWithProps
   });
 }