jfs-components 0.0.99 → 0.1.0

package/lib/module/components/Dropdown/Dropdown.js

@@ -170,18 +170,34 @@ export function Dropdown({
   const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
   const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
   const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16;
-  const containerStyle = {
+
+  // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
+  // On native, clipping a view also clips its shadow (iOS clips the layer
+  // shadow; Android clips the elevation shadow), so the soft popup shadow
+  // that renders fine on web (CSS box-shadow paints outside the box) would
+  // get cut off. The rounded-corner clipping is moved to a separate inner
+  // view below.
+  //
+  // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
+  // single source of truth so the designed color/offset/blur are honored on
+  // iOS, Android AND web. We intentionally do NOT also set the legacy
+  // `shadow*` / `elevation` props: on the new architecture (and web) those
+  // are translated into a box-shadow internally, so combining them with an
+  // explicit `boxShadow` would stack two shadows. Android's legacy
+  // `elevation` is also undesirable here because it ignores the shadow color
+  // and only paints a generic gray shadow.
+  const shadowStyle = {
     backgroundColor: background,
+    borderRadius: radius,
+    boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`
+  };
+
+  // Inner view carries the rounded corners + clipping so list/scroll content
+  // stays inside the radius without affecting the outer view's shadow.
+  const clipStyle = {
     borderRadius: radius,
     overflow: 'hidden',
-    shadowColor,
-    shadowOffset: {
-      width: shadowOffsetX,
-      height: shadowOffsetY
-    },
-    shadowOpacity: 1,
-    shadowRadius: shadowBlur / 2,
-    elevation: 4
+    backgroundColor: background
   };
   const content = /*#__PURE__*/_jsx(View, {
     style: {
@@ -190,17 +206,20 @@ export function Dropdown({
     children: cloneChildrenWithModes(children, modes)
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [containerStyle, style],
+    style: [shadowStyle, style],
     accessibilityRole: "menu",
     accessibilityLabel: accessibilityLabel || 'Dropdown menu',
-    children: maxHeight != null ? /*#__PURE__*/_jsx(ScrollView, {
-      style: {
-        maxHeight
-      },
-      showsVerticalScrollIndicator: true,
-      keyboardShouldPersistTaps: "handled",
-      children: content
-    }) : content
+    children: /*#__PURE__*/_jsx(View, {
+      style: clipStyle,
+      children: maxHeight != null ? /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          maxHeight
+        },
+        showsVerticalScrollIndicator: true,
+        keyboardShouldPersistTaps: "handled",
+        children: content
+      }) : content
+    })
   });
 }
 export default Dropdown;

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -184,6 +184,7 @@ function FullscreenModal({
   heroMedia,
   heroHeight = 420,
   showClose = true,
+  closeOffsetY = 0,
   onClose,
   closeAccessibilityLabel = 'Close',
   footer,
@@ -220,8 +221,8 @@ function FullscreenModal({
   // SafeAreaProvider — every inset is 0, so the layout is unchanged.
   const insets = useSafeAreaInsets();
   const closeButtonInsetStyle = useMemo(() => ({
-    top: 12 + insets.top
-  }), [insets.top]);
+    top: 12 + insets.top + closeOffsetY
+  }), [insets.top, closeOffsetY]);
   // Extend (not replace) the footer's token bottom padding by the bottom inset
   // so the action button never sits under the system navigation area.
   const footerInsetStyle = useMemo(() => {

package/lib/module/components/TestimonialsCard/TestimonialsCard.js

@@ -0,0 +1,116 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
+ * a bold title, and a body paragraph. It is typically used inside a horizontal
+ * carousel of customer testimonials.
+ *
+ * All styling values are resolved from Figma design tokens using the provided
+ * `modes`.
+ *
+ * @example
+ * ```tsx
+ * <TestimonialsCard
+ *   title="Aarav S."
+ *   body="I was dreading renewing my car insurance, but JioFinance made it a breeze."
+ * />
+ * ```
+ */
+function TestimonialsCard({
+  title = 'Title',
+  body = 'I was dreading renewing my car insurance, but JioFinance made it a breeze.',
+  modes = EMPTY_MODES,
+  style,
+  avatarProps,
+  accessibilityLabel
+}) {
+  // Container tokens
+  const background = getVariableByName('testimonialsCard/background', modes) ?? '#ffffff';
+  const borderColor = getVariableByName('testimonialsCard/border/color', modes) ?? '#e8e8e8';
+  const radius = getVariableByName('testimonialsCard/radius', modes) ?? 8;
+  const gap = getVariableByName('testimonialsCard/gap', modes) ?? 8;
+  const paddingHorizontal = getVariableByName('testimonialsCard/padding/horizontal', modes) ?? 12;
+  const paddingVertical = getVariableByName('testimonialsCard/padding/vertical', modes) ?? 12;
+
+  // Title typography tokens
+  const titleColor = getVariableByName('testimonialsCard/subtitle/color', modes) ?? '#1a1c1f';
+  const titleFontSize = getVariableByName('testimonialsCard/title/fontSize', modes) ?? 14;
+  const titleFontFamily = getVariableByName('testimonialsCard/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontWeightRaw = getVariableByName('testimonialsCard/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Body typography tokens
+  const bodyColor = getVariableByName('testimonialsCard/title/color', modes) ?? '#010101';
+  const bodyFontSize = getVariableByName('testimonialsCard/subtitle/fontSize', modes) ?? 12;
+  const bodyLineHeight = getVariableByName('testimonialsCard/subtitle/lineHeight', modes) ?? 16;
+  const bodyFontFamily = getVariableByName('testimonialsCard/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontWeightRaw = getVariableByName('testimonialsCard/subtitle/fontWeight', modes) ?? 400;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const containerStyle = {
+    width: 180,
+    backgroundColor: background,
+    borderColor: borderColor,
+    borderWidth: 1,
+    borderRadius: radius,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    alignItems: 'flex-start',
+    gap: gap
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: bodyLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+    width: '100%'
+  };
+  const bodyTextStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontFamily: bodyFontFamily,
+    fontWeight: bodyFontWeight,
+    width: '100%'
+  };
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {})
+  };
+  const resolvedAccessibilityLabel = accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      style: "Image",
+      modes: avatarModes,
+      ...avatarProps
+    }), /*#__PURE__*/_jsxs(View, {
+      style: textContainerStyle,
+      children: [!!title && /*#__PURE__*/_jsx(Text, {
+        style: titleTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: title
+      }), !!body && /*#__PURE__*/_jsx(Text, {
+        style: bodyTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: body
+      })]
+    })]
+  });
+}
+const textContainerStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4
+};
+export default /*#__PURE__*/React.memo(TestimonialsCard);

package/lib/module/components/index.js

@@ -131,6 +131,7 @@ export { default as StatItem } from './StatItem/StatItem';
 export { default as StatGroup } from './StatGroup/StatGroup';
 export { default as StrengthIndicator } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile } from './SummaryTile/SummaryTile';
+export { default as TestimonialsCard } from './TestimonialsCard/TestimonialsCard';
 export { default as Text } from './Text/Text';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { default as Toggle } from './Toggle/Toggle';