jfs-components 0.1.51 → 0.1.55

package/src/components/Card/Card.tsx

@@ -1,179 +1,292 @@
-import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react';
-import { View, Text, Pressable, 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 React, {
+  createContext,
+  useContext,
+  useMemo,
+} from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import {
+  EMPTY_MODES,
+  cloneChildrenWithModes,
+} from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
- * Context to share 'modes' with child components like Card.Title and Card.SupportText.
- * This ensures that nested components can resolve their tokens correctly without 
- * needing explicit mode prop passing for every child.
+ * Context so `Card.Title` / `Card.SupportText` resolve tokens from the parent
+ * card's `modes` without every call site having to pass them explicitly.
  */
-const CardContext = createContext<{ modes?: Modes }>({});
+const CardContext = createContext<{ modes: Modes }>({ modes: EMPTY_MODES })
+
+/** Canonical variant values. Maps 1:1 to Figma `Property 1`. */
+export type CardVariant = 'default' | 'slim'
+
+/**
+ * Accepts both the canonical lowercase API and Figma's PascalCase property
+ * values so Code Connect / design tooling can pass either.
+ */
+export type CardVariantInput = CardVariant | 'Default' | 'Slim'
+
+const normalizeVariant = (value: CardVariantInput | undefined): CardVariant => {
+  if (value === 'slim' || value === 'Slim') return 'slim'
+  return 'default'
+}
+
+const toNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+  return fallback
+}
+
+const toFontWeight = (
+  value: unknown,
+  fallback: TextStyle['fontWeight']
+): TextStyle['fontWeight'] => {
+  if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+  if (typeof value === 'string' && value.length > 0) {
+    return value as TextStyle['fontWeight']
+  }
+  return fallback
+}
+
+/**
+ * Figma `Ratio` default for the media slot (node 766:6258) — 154×116.
+ * Kept as a named constant so stories / docs stay aligned with the design.
+ */
+export const CARD_MEDIA_ASPECT_RATIO = 154 / 116
 
 export interface CardProps {
-    /**
-     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
-     * Sits above the media slot, with its own padding.
-     */
-    header?: React.ReactNode;
-    /**
-     * The content to be rendered in the media slot (e.g. an Image).
-     * This content is wrapped in a container that respects the `aspectRatio`.
-     */
-    media?: React.ReactNode;
-    /**
-     * Content to render inside the card (e.g. Card.Title, Card.SupportText).
-     */
-    children?: React.ReactNode;
-    /**
-     * Modes object for token resolution (e.g. { "Mode": "Dark" }).
-     */
-    modes?: Modes;
-    /**
-     * Aspect ratio for the media slot container.
-     * Default is based on Figma design 154/116 (~1.328).
-     */
-    mediaAspectRatio?: number;
-    /**
-     * Style overrides for the card container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Press handler for the whole card. When set, the card becomes pressable
-     * (rendered through a `Pressable` with `accessibilityRole="button"`).
-     */
-    onPress?: () => void;
-    /** Disable interaction when `onPress` is set. */
-    disabled?: boolean;
-    /** Accessibility label forwarded to the pressable wrapper. */
-    accessibilityLabel?: string;
+  /**
+   * Visual layout variant matching Figma `Property 1`.
+   * - `'default'` — header + optional media + content (Figma Default)
+   * - `'slim'` — header + content only; `media` is ignored (Figma Slim)
+   *
+   * Defaults to `'default'`. Existing call sites that omit `media` continue
+   * to render a media-less default card (backward compatible). Prefer
+   * `variant="slim"` when you want the Slim contract explicitly.
+   */
+  variant?: CardVariantInput
+  /**
+   * Content rendered in the header slot at the top of the card (e.g. a brand
+   * logo). Sits above the media slot, padded with `card/content/padding/*`.
+   */
+  header?: React.ReactNode
+  /**
+   * Media slot content (e.g. `<Image />`). Wrapped in a container that
+   * respects `mediaAspectRatio`. Ignored when `variant="slim"`.
+   */
+  media?: React.ReactNode
+  /** Content slot (e.g. `Card.Title`, `Card.SupportText`). */
+  children?: React.ReactNode
+  /** Modes object for token resolution. Cascades into all slots. */
+  modes?: Modes
+  /**
+   * Aspect ratio for the media slot container.
+   * Defaults to the Figma Ratio 154/116 (~1.328).
+   */
+  mediaAspectRatio?: number
+  /** Style overrides for the card container. */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Press handler for the whole card. When set, the card becomes pressable
+   * (`Pressable` + `accessibilityRole="button"`).
+   */
+  onPress?: () => void
+  /** Disable interaction when `onPress` is set. */
+  disabled?: boolean
+  /** Accessibility label forwarded to the root. */
+  accessibilityLabel?: string
+}
+
+interface CardTokens {
+  containerStyle: ViewStyle
+  headerWrapperStyle: ViewStyle
+  mediaWrapperStyle: ViewStyle
+  contentWrapperStyle: ViewStyle
+}
+
+function resolveCardTokens(
+  modes: Modes,
+  mediaAspectRatio: number
+): CardTokens {
+  const backgroundColor =
+    (getVariableByName('card/background/color', modes) as string | null) ??
+    '#ffffff'
+  const borderColor =
+    (getVariableByName('card/border/color', modes) as string | null) ??
+    '#ffffff'
+  const borderWidth = toNumber(
+    getVariableByName('card/strokeWidth', modes),
+    0.5
+  )
+  const radius = toNumber(getVariableByName('card/radius', modes), 12)
+  // Figma root uses itemSpacing=4 (bound conceptually to card/gap). The
+  // component-set frames also use SPACE_BETWEEN + fixed heights for gallery
+  // layout — we hug content and apply gap only, so consumers aren't stuck
+  // with empty distributed space.
+  const gap = toNumber(getVariableByName('card/gap', modes), 4)
+  const paddingHorizontal = toNumber(
+    getVariableByName('card/padding-horizontal', modes),
+    0
+  )
+  const paddingVertical = toNumber(
+    getVariableByName('card/padding-vertical', modes),
+    0
+  )
+
+  const contentGap = toNumber(
+    getVariableByName('card/content/gap', modes),
+    4
+  )
+  const contentPaddingHorizontal = toNumber(
+    getVariableByName('card/content/padding/horizontal', modes),
+    12
+  )
+  const contentPaddingVertical = toNumber(
+    getVariableByName('card/content/padding/vertical', modes),
+    12
+  )
+
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      borderRadius: radius,
+      gap,
+      paddingHorizontal,
+      paddingVertical,
+      overflow: 'hidden',
+    },
+    // Header wrap binds the same content-padding tokens as the content wrap
+    // in Figma (12/12) — not a separate header token set.
+    headerWrapperStyle: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingHorizontal: contentPaddingHorizontal,
+      paddingVertical: contentPaddingVertical,
+    },
+    mediaWrapperStyle: {
+      width: '100%',
+      aspectRatio: mediaAspectRatio,
+      overflow: 'hidden',
+    },
+    contentWrapperStyle: {
+      width: '100%',
+      gap: contentGap,
+      paddingHorizontal: contentPaddingHorizontal,
+      paddingVertical: contentPaddingVertical,
+    },
+  }
 }
 
 /**
- * Card component implementation from Figma node 765:6186.
- * 
- * Supports a `media` slot (with aspect ratio) and a content area.
- * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
- * (with aspect ratio) and a content area.
- * Usage:
+ * `Card` — Figma node 5739:794 (`Property 1=Default` / `Property 1=Slim`).
+ *
+ * Slots: optional `header`, optional `media` (Default only), and `children`
+ * for the content stack. Typography subcomponents (`Card.Title`,
+ * `Card.SupportText`) read tokens via context.
+ *
+ * @example
  * ```tsx
- * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
+ * <Card
+ *   variant="default"
+ *   header={<GoldLogo />}
+ *   media={<Image imageSource={uri} ratio={154 / 116} />}
+ *   modes={{ AppearanceBrand: 'Neutral' }}
+ * >
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
  * </Card>
  * ```
+ *
+ * @component
  */
 export function Card({
-    header,
-    media,
-    children,
-    modes = EMPTY_MODES,
-    mediaAspectRatio = 154 / 116,
-    style,
-    onPress,
-    disabled,
-    accessibilityLabel,
+  variant: variantProp = 'default',
+  header,
+  media,
+  children,
+  modes: propModes = EMPTY_MODES,
+  mediaAspectRatio = CARD_MEDIA_ASPECT_RATIO,
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel,
 }: CardProps) {
-    // Resolve Card Container Tokens
-    const backgroundColor = getVariableByName('card/background/color', modes);
-    const borderColor = getVariableByName('card/border/color', modes);
-    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes)); // Ensure number
-    const radius = parseFloat(getVariableByName('card/radius', modes));
-    const gap = parseFloat(getVariableByName('card/gap', modes));
-    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes));
-    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes));
-
-    // Resolve Content Wrapper Tokens
-    const contentGap = parseFloat(getVariableByName('card/content/gap', modes));
-    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes));
-    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes));
-
-    // Clone media to pass modes if it's a valid element, facilitating nested style resolution
-    const mediaWithModes = isValidElement(media)
-        ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
-        : media;
-
-    // Clone header to pass modes if it's a valid element
-    const headerWithModes = isValidElement(header)
-        ? cloneElement(header as any, { modes: { ...(header.props as any).modes, ...modes } })
-        : header;
-
-    const containerStyle: ViewStyle = {
-        backgroundColor,
-        borderColor,
-        borderWidth,
-        borderRadius: radius,
-        gap,
-        paddingHorizontal,
-        paddingVertical,
-        overflow: 'hidden', // Ensure border radius clips content
-    };
-
-    // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
-    const headerWrapperStyle: ViewStyle = {
-        width: '100%',
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        paddingHorizontal: 12,
-        paddingVertical: 16,
-    };
-
-    const mediaWrapperStyle: ViewStyle = {
-        width: '100%',
-        aspectRatio: mediaAspectRatio,
-        overflow: 'hidden',
-        // Figma has 'bg-[#3a46f7]' on the Ratio definition, but that's a placeholder.
-        // We assume the media content handles its own fill, or we can add a placeholder bg if needed.
-        // For now, we leave it transparent or rely on media.
-    };
-
-    const contentWrapperStyle: ViewStyle = {
-        width: '100%',
-        gap: contentGap,
-        paddingHorizontal: contentPaddingHorizontal,
-        paddingVertical: contentPaddingVertical,
-    };
-
-    const content = (
-        <>
-            {header && (
-                <View style={headerWrapperStyle}>
-                    {headerWithModes}
-                </View>
-            )}
-            {media && (
-                <View style={mediaWrapperStyle}>
-                    {mediaWithModes}
-                </View>
-            )}
-            <View style={contentWrapperStyle}>
-                {children}
-            </View>
-        </>
-    );
-
-    return (
-        <CardContext.Provider value={{ modes }}>
-            {onPress ? (
-                <Pressable
-                    style={[containerStyle, style]}
-                    onPress={onPress}
-                    disabled={disabled}
-                    accessibilityRole="button"
-                    accessibilityLabel={accessibilityLabel}
-                    accessibilityState={{ disabled: !!disabled }}
-                >
-                    {content}
-                </Pressable>
-            ) : (
-                <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
-                    {content}
-                </View>
-            )}
-        </CardContext.Provider>
-    );
+  const variant = normalizeVariant(variantProp)
+  const modes = propModes ?? EMPTY_MODES
+
+  const tokens = useMemo(
+    () => resolveCardTokens(modes, mediaAspectRatio),
+    [modes, mediaAspectRatio]
+  )
+
+  // Slim suppresses media even if a consumer still passes it — matches Figma
+  // Property 1=Slim. Default keeps prior behavior: media renders when provided.
+  const showMedia = variant === 'default' && media != null
+
+  const processedHeader =
+    header != null
+      ? cloneChildrenWithModes(React.Children.toArray(header), modes)
+      : null
+
+  const processedMedia = showMedia
+    ? cloneChildrenWithModes(React.Children.toArray(media), modes)
+    : null
+
+  const processedChildren = cloneChildrenWithModes(
+    React.Children.toArray(children ?? null),
+    modes
+  )
+
+  const content = (
+    <>
+      {processedHeader ? (
+        <View style={tokens.headerWrapperStyle}>{processedHeader}</View>
+      ) : null}
+      {processedMedia ? (
+        <View style={tokens.mediaWrapperStyle}>{processedMedia}</View>
+      ) : null}
+      <View style={tokens.contentWrapperStyle}>{processedChildren}</View>
+    </>
+  )
+
+  const rootStyle: StyleProp<ViewStyle> = [tokens.containerStyle, style]
+
+  return (
+    <CardContext.Provider value={{ modes }}>
+      {onPress ? (
+        <Pressable
+          style={rootStyle}
+          onPress={onPress}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled: !!disabled }}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        <View style={rootStyle} accessibilityLabel={accessibilityLabel}>
+          {content}
+        </View>
+      )}
+    </CardContext.Provider>
+  )
 }
 
 // ----------------------------------------------------------------------------
@@ -181,68 +294,113 @@ export function Card({
 // ----------------------------------------------------------------------------
 
 export interface CardTextProps {
-    children?: React.ReactNode;
-    style?: StyleProp<TextStyle>;
-    modes?: Modes;
+  children?: React.ReactNode
+  style?: StyleProp<TextStyle>
+  modes?: Modes
+  /**
+   * Line clamp before ellipsis. `Card.Title` defaults to `3` (Figma).
+   * Pass a different number to override, or `0` for no clamp.
+   */
+  numberOfLines?: number
 }
 
 /**
- * Title component for Card content.
- * Uses tokens: card/title/*
+ * Title — tokens: `card/title/*`
  */
-function Title({ children, style, modes: propModes }: CardTextProps) {
-    const context = useContext(CardContext);
-    const modes = propModes || context.modes || {};
-
-    const color = getVariableByName('card/title/color', modes);
-    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes));
-    const fontFamily = getVariableByName('card/title/fontFamily', modes);
-    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes));
-
-    // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
-    // We check both keys to be safe.
-    const rawFontWeight = getVariableByName('card/title/fontWeight', modes);
-    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
-
-    const textStyle: TextStyle = {
-        color,
-        fontSize,
-        fontFamily,
-        lineHeight,
-        fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
-
-    return <Text style={[textStyle, style]}>{children}</Text>;
+function Title({
+  children,
+  style,
+  modes: propModes,
+  numberOfLines = 3,
+}: CardTextProps) {
+  const context = useContext(CardContext)
+  const modes = propModes ?? context.modes ?? EMPTY_MODES
+
+  const color =
+    (getVariableByName('card/title/color', modes) as string | null) ?? '#000000'
+  const fontSize = toNumber(
+    getVariableByName('card/title/fontSize', modes),
+    16
+  )
+  const fontFamily =
+    (getVariableByName('card/title/fontFamily', modes) as string | null) ??
+    'JioType Var'
+  const lineHeight = toNumber(
+    getVariableByName('card/title/lineHeight', modes),
+    18
+  )
+  const fontWeight = toFontWeight(
+    getVariableByName('card/title/fontWeight', modes),
+    '900'
+  )
+
+  const textStyle: TextStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight,
+  }
+
+  return (
+    <Text
+      style={[textStyle, style]}
+      numberOfLines={numberOfLines > 0 ? numberOfLines : undefined}
+    >
+      {children}
+    </Text>
+  )
 }
 
 /**
- * SupportiveText component for Card content.
- * Uses tokens: card/supportive-text/*
+ * Supportive text — tokens: `card/supportive-text/*`
  */
-function SupportText({ children, style, modes: propModes }: CardTextProps) {
-    const context = useContext(CardContext);
-    const modes = propModes || context.modes || {};
-
-    const color = getVariableByName('card/supportive-text/color', modes);
-    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes));
-    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes);
-    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes));
-    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes);
-    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
-
-    const textStyle: TextStyle = {
-        color,
-        fontSize,
-        fontFamily,
-        lineHeight,
-        fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
-
-    return <Text style={[textStyle, style]}>{children}</Text>;
+function SupportText({
+  children,
+  style,
+  modes: propModes,
+  numberOfLines,
+}: CardTextProps) {
+  const context = useContext(CardContext)
+  const modes = propModes ?? context.modes ?? EMPTY_MODES
+
+  const color =
+    (getVariableByName('card/supportive-text/color', modes) as string | null) ??
+    '#1a1c1f'
+  const fontSize = toNumber(
+    getVariableByName('card/supportive-text/fontSize', modes),
+    12
+  )
+  const fontFamily =
+    (getVariableByName(
+      'card/supportive-text/fontFamily',
+      modes
+    ) as string | null) ?? 'JioType Var'
+  const lineHeight = toNumber(
+    getVariableByName('card/supportive-text/lineHeight', modes),
+    16
+  )
+  const fontWeight = toFontWeight(
+    getVariableByName('card/supportive-text/fontWeight', modes),
+    '400'
+  )
+
+  const textStyle: TextStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight,
+  }
+
+  return (
+    <Text style={[textStyle, style]} numberOfLines={numberOfLines}>
+      {children}
+    </Text>
+  )
 }
 
-// Attach sub-components to Card
-Card.Title = Title;
-Card.SupportText = SupportText;
+Card.Title = Title
+Card.SupportText = SupportText
 
-export default Card;
+export default Card