jfs-components 0.0.48 → 0.0.49

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CardCTA({
+  title = 'If you have 1 line',
+  body = 'Then you can have up to 3 lines in the subtext as well. This is for demonstration.',
+  iconName = 'ic_upi_number',
+  buttonLabel = 'Button',
+  onPressButton,
+  modes: propModes = {},
+  iconSlot,
+  buttonSlot,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes) || '#e3e4e4';
+  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes) || 16;
+  const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes) || 22;
+  const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes) || 16;
+  const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes) || 16;
+  const rightPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/vertical', modes) || 22;
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/text-wrap/gap', modes) || 6;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes) || '#0c0d10';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes) || 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes) || 16;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 17.6;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes) || '#13002d';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 10;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    borderWidth: borderSize,
+    borderColor,
+    flexDirection: 'row',
+    overflow: 'hidden'
+  };
+  const leftWrapStyle = {
+    flex: 3,
+    paddingHorizontal: leftPaddingH,
+    paddingVertical: leftPaddingV,
+    gap: leftGap,
+    alignItems: 'flex-start',
+    justifyContent: 'center'
+  };
+  const rightWrapStyle = {
+    flex: 2,
+    paddingHorizontal: rightPaddingH,
+    paddingVertical: rightPaddingV,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-start'
+  };
+  const textWrapStyle = {
+    gap: textGap
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontFamily: bodyFontFamily,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontWeight: bodyFontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: leftWrapStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: textWrapStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: titleStyle,
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: bodyStyle,
+          children: body
+        })]
+      }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, {
+        ...modes,
+        AppearanceBrand: 'Secondary',
+        'Button / Size': 'S'
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        label: buttonLabel,
+        onPress: onPressButton || (() => {}),
+        modes: {
+          ...modes,
+          AppearanceBrand: 'Secondary',
+          'Button / Size': 'S'
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: rightWrapStyle,
+      children: iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, {
+        ...modes,
+        'IconCapsule / Size': 'M',
+        Emphasis: 'Medium',
+        AppearanceBrand: 'Secondary'
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: iconName,
+        modes: {
+          ...modes,
+          'IconCapsule / Size': 'M',
+          Emphasis: 'Medium',
+          AppearanceBrand: 'Secondary'
+        }
+      })
+    })]
+  });
+}
+var _default = exports.default = CardCTA;

package/lib/commonjs/components/DebitCard/DebitCard.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png');
+function DebitCard({
+  cardholderName = 'Shruti Shukla',
+  cardNumber = '•••• 1234',
+  expireDate = '02/28',
+  bankName = 'JioFinance',
+  cardType = 'Debit',
+  cardArtSource = defaultCardArt,
+  bankLogoSlot,
+  providerLogoSlot,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = (0, _figmaVariablesResolver.getVariableByName)('debitCard/background', modes) || '#cea15a';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/radius', modes) || 16;
+  const width = (0, _figmaVariablesResolver.getVariableByName)('debitCard/width', modes) || 328;
+  const height = (0, _figmaVariablesResolver.getVariableByName)('debitCard/height', modes) || 224;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/padding/bottom', modes) || 24;
+  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/horizontal', modes) || 20;
+  const headerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/top', modes) || 16;
+  const headerPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('debitCard/header/padding/bottom', modes) || 28;
+  const cardArtHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/height', modes) || 50;
+  const cardArtRadius = (0, _figmaVariablesResolver.getVariableByName)('debitCard/cardArt/radius', modes) || 4;
+  const footerGap = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/gap', modes) || 16;
+  const footerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/horizontal', modes) || 20;
+  const footerPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('debitCard/footer/padding/top', modes) || 16;
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('debitCard/foreground', modes) || '#141414';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontSize', modes) || 14;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontFamily', modes) || 'JioType Var';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('debitCard/lineHeight', modes) || 17;
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('debitCard/fontWeight', modes) || 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    width,
+    height,
+    paddingBottom,
+    overflow: 'hidden'
+  };
+  const headerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: headerPaddingH,
+    paddingTop: headerPaddingTop,
+    paddingBottom: headerPaddingBottom,
+    overflow: 'hidden'
+  };
+  const headerLeftStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4
+  };
+  const headerRightStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  };
+  const headerTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight: fontSize * 1.2
+  };
+  const cardArtContainerStyle = {
+    height: cardArtHeight,
+    width: '100%',
+    borderRadius: cardArtRadius,
+    overflow: 'hidden'
+  };
+  const cardArtImageStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: cardArtRadius
+  };
+  const footerStyle = {
+    flex: 1,
+    gap: footerGap,
+    paddingHorizontal: footerPaddingH,
+    paddingTop: footerPaddingTop,
+    overflow: 'hidden'
+  };
+  const textStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight
+  };
+  const stackStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  };
+  const normalizedCardArt = _react.default.useMemo(() => {
+    if (!cardArtSource) return null;
+    if (typeof cardArtSource === 'string') return {
+      uri: cardArtSource
+    };
+    return cardArtSource;
+  }, [cardArtSource]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: headerStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: headerLeftStyle,
+        children: [bankLogoSlot ? (0, _reactUtils.cloneChildrenWithModes)(bankLogoSlot, modes) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: headerTextStyle,
+          children: bankName
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: headerRightStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: headerTextStyle,
+          children: cardType
+        }), providerLogoSlot ? (0, _reactUtils.cloneChildrenWithModes)(providerLogoSlot, modes) : null]
+      })]
+    }), normalizedCardArt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: cardArtContainerStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: normalizedCardArt,
+        style: cardArtImageStyle,
+        resizeMode: "cover"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: footerStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: textStyle,
+        children: cardNumber
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: stackStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: textStyle,
+          children: cardholderName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: textStyle,
+          children: expireDate
+        })]
+      })]
+    })]
+  });
+}
+var _default = exports.default = DebitCard;

package/lib/commonjs/components/Section/Section.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -144,12 +144,9 @@ function Section({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: title
-      }), onPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        name: "ic_chevron_right",
-        size: 24,
-        color: titleColor,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
+      }), onPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
+        direction: "Forward",
+        modes: modes
       })]
     }), showSupportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: supportTextStyle,
@@ -207,7 +204,7 @@ function Section({
         flexDirection: slotDirection,
         gap
       },
-      children: slot
+      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(slot), modes)
     })]
   });
 }

package/lib/commonjs/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "Card", {
     return _Card.default;
   }
 });
+Object.defineProperty(exports, "CardCTA", {
+  enumerable: true,
+  get: function () {
+    return _CardCTA.default;
+  }
+});
 Object.defineProperty(exports, "CardFeedback", {
   enumerable: true,
   get: function () {
@@ -123,10 +129,10 @@ Object.defineProperty(exports, "ChipSelect", {
     return _ChipSelect.default;
   }
 });
-Object.defineProperty(exports, "CtaCard", {
+Object.defineProperty(exports, "DebitCard", {
   enumerable: true,
   get: function () {
-    return _CtaCard.default;
+    return _DebitCard.default;
   }
 });
 Object.defineProperty(exports, "Disclaimer", {
@@ -498,7 +504,8 @@ var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
-var _CtaCard = _interopRequireDefault(require("./CtaCard/CtaCard"));
+var _CardCTA = _interopRequireDefault(require("./CardCTA/CardCTA"));
+var _DebitCard = _interopRequireDefault(require("./DebitCard/DebitCard"));
 var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
 var _Form = _interopRequireWildcard(require("./Form/Form"));
 var _FormField = _interopRequireDefault(require("./FormField/FormField"));