jfs-components 0.0.48 → 0.0.49

package/lib/module/components/CardCTA/CardCTA.js

@@ -0,0 +1,136 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = getVariableByName('cardCTA/background', modes) || '#ffffff';
+  const radius = getVariableByName('cardCTA/radius', modes) || 12;
+  const borderSize = getVariableByName('cardCTA/border/size', modes) || 1;
+  const borderColor = getVariableByName('cardCTA/border/color', modes) || '#e3e4e4';
+  const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes) || 16;
+  const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes) || 22;
+  const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes) || 16;
+  const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes) || 16;
+  const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes) || 22;
+  const textGap = getVariableByName('cardCTA/text-wrap/gap', modes) || 6;
+  const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10';
+  const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var';
+  const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16;
+  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 17.6;
+  const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d';
+  const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 10;
+  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 12;
+  const bodyFontWeightRaw = 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__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: leftWrapStyle,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: textWrapStyle,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: titleStyle,
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: bodyStyle,
+          children: body
+        })]
+      }), buttonSlot ? cloneChildrenWithModes(buttonSlot, {
+        ...modes,
+        AppearanceBrand: 'Secondary',
+        'Button / Size': 'S'
+      }) : /*#__PURE__*/_jsx(Button, {
+        label: buttonLabel,
+        onPress: onPressButton || (() => {}),
+        modes: {
+          ...modes,
+          AppearanceBrand: 'Secondary',
+          'Button / Size': 'S'
+        }
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: rightWrapStyle,
+      children: iconSlot ? cloneChildrenWithModes(iconSlot, {
+        ...modes,
+        'IconCapsule / Size': 'M',
+        Emphasis: 'Medium',
+        AppearanceBrand: 'Secondary'
+      }) : /*#__PURE__*/_jsx(IconCapsule, {
+        iconName: iconName,
+        modes: {
+          ...modes,
+          'IconCapsule / Size': 'M',
+          Emphasis: 'Medium',
+          AppearanceBrand: 'Secondary'
+        }
+      })
+    })]
+  });
+}
+export default CardCTA;

package/lib/module/components/DebitCard/DebitCard.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Image } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = getVariableByName('debitCard/background', modes) || '#cea15a';
+  const radius = getVariableByName('debitCard/radius', modes) || 16;
+  const width = getVariableByName('debitCard/width', modes) || 328;
+  const height = getVariableByName('debitCard/height', modes) || 224;
+  const paddingBottom = getVariableByName('debitCard/padding/bottom', modes) || 24;
+  const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes) || 20;
+  const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes) || 16;
+  const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes) || 28;
+  const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes) || 50;
+  const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes) || 4;
+  const footerGap = getVariableByName('debitCard/footer/gap', modes) || 16;
+  const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes) || 20;
+  const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes) || 16;
+  const foreground = getVariableByName('debitCard/foreground', modes) || '#141414';
+  const fontSize = getVariableByName('debitCard/fontSize', modes) || 14;
+  const fontFamily = getVariableByName('debitCard/fontFamily', modes) || 'JioType Var';
+  const lineHeight = getVariableByName('debitCard/lineHeight', modes) || 17;
+  const fontWeightRaw = 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.useMemo(() => {
+    if (!cardArtSource) return null;
+    if (typeof cardArtSource === 'string') return {
+      uri: cardArtSource
+    };
+    return cardArtSource;
+  }, [cardArtSource]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: headerStyle,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: headerLeftStyle,
+        children: [bankLogoSlot ? cloneChildrenWithModes(bankLogoSlot, modes) : null, /*#__PURE__*/_jsx(Text, {
+          style: headerTextStyle,
+          children: bankName
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: headerRightStyle,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: headerTextStyle,
+          children: cardType
+        }), providerLogoSlot ? cloneChildrenWithModes(providerLogoSlot, modes) : null]
+      })]
+    }), normalizedCardArt && /*#__PURE__*/_jsx(View, {
+      style: cardArtContainerStyle,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: normalizedCardArt,
+        style: cardArtImageStyle,
+        resizeMode: "cover"
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: footerStyle,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: textStyle,
+        children: cardNumber
+      }), /*#__PURE__*/_jsxs(View, {
+        style: stackStyle,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: textStyle,
+          children: cardholderName
+        }), /*#__PURE__*/_jsx(Text, {
+          style: textStyle,
+          children: expireDate
+        })]
+      })]
+    })]
+  });
+}
+export default DebitCard;

package/lib/module/components/Section/Section.js

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Icon from '../../icons/Icon';
+import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -138,12 +138,9 @@ function Section({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: title
-      }), onPress && /*#__PURE__*/_jsx(Icon, {
-        name: "ic_chevron_right",
-        size: 24,
-        color: titleColor,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
+      }), onPress && /*#__PURE__*/_jsx(NavArrow, {
+        direction: "Forward",
+        modes: modes
       })]
     }), showSupportText && /*#__PURE__*/_jsx(Text, {
       style: supportTextStyle,
@@ -201,7 +198,7 @@ function Section({
         flexDirection: slotDirection,
         gap
       },
-      children: slot
+      children: cloneChildrenWithModes(React.Children.toArray(slot), modes)
     })]
   });
 }

package/lib/module/components/index.js

@@ -15,7 +15,8 @@ export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
-export { default as CtaCard } from './CtaCard/CtaCard';
+export { default as CardCTA } from './CardCTA/CardCTA';
+export { default as DebitCard } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as Form } from './Form/Form';
 export { useFormContext } from './Form/Form';