jfs-components 0.0.95 → 0.1.0

package/src/components/TestimonialsCard/TestimonialsCard.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Avatar, { type AvatarProps } from '../Avatar/Avatar'
+
+export type TestimonialsCardProps = {
+  /**
+   * The testimonial heading, typically the author's name.
+   */
+  title?: string
+  /**
+   * The testimonial body copy.
+   */
+  body?: string
+  /**
+   * Mode configuration passed to the token resolver. Also forwarded to the
+   * Avatar child for consistent theming.
+   */
+  modes?: Record<string, any>
+  /**
+   * Optional style overrides for the card container.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Props forwarded to the Avatar component (e.g. a custom `imageSource`).
+   */
+  avatarProps?: Partial<AvatarProps>
+  /**
+   * Accessibility label for the card region. Falls back to a label generated
+   * from the title and body.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * 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,
+}: TestimonialsCardProps) {
+  // 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: ViewStyle = {
+    width: 180,
+    backgroundColor: background as string,
+    borderColor: borderColor as string,
+    borderWidth: 1,
+    borderRadius: radius as number,
+    paddingHorizontal: paddingHorizontal as number,
+    paddingVertical: paddingVertical as number,
+    alignItems: 'flex-start',
+    gap: gap as number,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor as string,
+    fontSize: titleFontSize as number,
+    lineHeight: bodyLineHeight as number,
+    fontFamily: titleFontFamily as string,
+    fontWeight: titleFontWeight as TextStyle['fontWeight'],
+    width: '100%',
+  }
+
+  const bodyTextStyle: TextStyle = {
+    color: bodyColor as string,
+    fontSize: bodyFontSize as number,
+    lineHeight: bodyLineHeight as number,
+    fontFamily: bodyFontFamily as string,
+    fontWeight: bodyFontWeight as TextStyle['fontWeight'],
+    width: '100%',
+  }
+
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {}),
+  }
+
+  const resolvedAccessibilityLabel =
+    accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={resolvedAccessibilityLabel}
+    >
+      <Avatar
+        style="Image"
+        modes={avatarModes}
+        {...avatarProps}
+      />
+      <View style={textContainerStyle}>
+        {!!title && (
+          <Text style={titleTextStyle} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {title}
+          </Text>
+        )}
+        {!!body && (
+          <Text style={bodyTextStyle} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {body}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const textContainerStyle: ViewStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4,
+}
+
+export default React.memo(TestimonialsCard)

package/src/components/index.ts

@@ -22,7 +22,7 @@ export { default as CardFinancialCondition, type CardFinancialConditionProps } f
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
-export { default as Drawer } from './Drawer/Drawer';
+export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
@@ -149,6 +149,7 @@ export { default as StatItem, type StatItemProps, type StatItemLabelPosition } f
 export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
 export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
+export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-06-04T14:40:09.533Z
+ * Generated: 2026-06-09T13:55:40.250Z
  */
 
 // Icon name to SVG data mapping

package/src/skeleton/Skeleton.tsx

@@ -1,7 +1,6 @@
 import React, { useId, useMemo, useState } from 'react'
 import {
   type LayoutChangeEvent,
-  StyleSheet,
   View,
   type DimensionValue,
   type StyleProp,
@@ -60,13 +59,21 @@ const SOLID_OVERLAY_COLOR = 'rgba(255, 255, 255, 1)'
 // `pointerEvents: 'none'` lives on the style (not the deprecated prop) so it
 // works on both native and React Native Web without warnings.
 const absoluteFillStyle: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   overflow: 'hidden',
   pointerEvents: 'none',
 }
 
 const solidOverlayStyle: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   backgroundColor: SOLID_OVERLAY_COLOR,
 }