jfs-components 0.1.2 → 0.1.12

package/src/components/PdpCcCard/PdpCcCard.tsx

@@ -0,0 +1,356 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+    type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Title from '../Title/Title'
+import Divider from '../Divider/Divider'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import Icon from '../Icon/Icon'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+export interface PdpCcCardMetric {
+    /** Small label rendered above the value (e.g. `"Weight"`). */
+    title?: string
+    /** The prominent value (e.g. `"24K"`). */
+    value?: string
+    /** Optional muted caption rendered below the value. */
+    caption?: string
+}
+
+export interface PdpCcCardProps {
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string
+    /** Default media image width. Defaults to the Figma spec (`100`). */
+    imageWidth?: number
+    /** Default media image height. Defaults to the Figma spec (`60`). */
+    imageHeight?: number
+    /**
+     * Full override for the media slot (top of the card). Takes precedence over
+     * `imageSource`. `modes` cascade into it automatically.
+     */
+    media?: React.ReactNode
+    /** Headline title (26px black). */
+    title?: string
+    /** Subtitle rendered below the title (14px medium). */
+    subtitle?: string
+    /**
+     * The metric columns rendered in the stats row. Vertical dividers are
+     * inserted automatically between adjacent metrics. Defaults to two sample
+     * metrics.
+     */
+    metrics?: PdpCcCardMetric[]
+    /** CTA button label. Defaults to `"button"`. */
+    buttonLabel?: string
+    /**
+     * Registry icon name for the button's leading glyph. Defaults to
+     * `'ic_add_circle'`. Pass `null` to hide the leading icon.
+     */
+    buttonIcon?: string | null
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /** Toggles the CTA button. Defaults to `true`. */
+    showButton?: boolean
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+function PdpCcCard({
+    imageSource,
+    imageWidth = 100,
+    imageHeight = 60,
+    media,
+    title = 'Title',
+    subtitle = 'Subtitle',
+    metrics = DEFAULT_METRICS,
+    buttonLabel = 'button',
+    buttonIcon = 'ic_add_circle',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 344,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: PdpCcCardProps) {
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    // The CTA uses the brand "Secondary" appearance at "Medium" emphasis (lilac
+    // fill + purple label) and the small size — matching the design. A
+    // consumer-supplied `modes` value still wins via spread order.
+    const ctaModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Secondary', Emphasis: 'Medium', 'Button / Size': 'S', ...modes }),
+        [modes]
+    )
+
+    const buttonForeground = useMemo(
+        () => asStr(getVariableByName('button/foreground', ctaModes), '#5d00b5'),
+        [ctaModes]
+    )
+
+    const mediaNode = media ? (
+        cloneChildrenWithModes(media, modes)
+    ) : (
+        <Image
+            imageSource={imageSource}
+            width={imageWidth}
+            height={imageHeight}
+            borderRadius={tokens.imageRadius}
+            resizeMode="cover"
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+        />
+    )
+
+    const ctaNode = button ? (
+        cloneChildrenWithModes(button, ctaModes)
+    ) : (
+        <Button
+            label={buttonLabel}
+            modes={ctaModes}
+            onPress={onButtonPress}
+            leading={
+                buttonIcon ? (
+                    <Icon iconName={buttonIcon} size={tokens.buttonIconSize} color={buttonForeground} />
+                ) : undefined
+            }
+        />
+    )
+
+    const content = (
+        <>
+            <View style={styles.mediaSlot}>{mediaNode}</View>
+
+            <Title title={title} subtitle={subtitle} textAlign="Center" modes={modes} />
+
+            {metrics.length > 0 ? (
+                <View style={styles.metricsRow}>
+                    {metrics.map((metric, index) => (
+                        <React.Fragment key={index}>
+                            {index > 0 ? (
+                                <Divider direction="vertical" modes={modes} style={styles.metricDivider} />
+                            ) : null}
+                            <Metricdata metric={metric} tokens={tokens} />
+                        </React.Fragment>
+                    ))}
+                </View>
+            ) : null}
+
+            {showButton ? ctaNode : null}
+        </>
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Metricdata — internal metric column (Figma node 5352:256)
+// ---------------------------------------------------------------------------
+
+function Metricdata({ metric, tokens }: { metric: PdpCcCardMetric; tokens: ResolvedTokens }) {
+    return (
+        <View style={tokens.metric}>
+            {metric.title != null ? <Text style={tokens.metricTitle}>{metric.title}</Text> : null}
+            {metric.value != null ? <Text style={tokens.metricValue}>{metric.value}</Text> : null}
+            {metric.caption != null ? <Text style={tokens.metricCaption}>{metric.caption}</Text> : null}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+interface ResolvedTokens {
+    container: ViewStyle
+    imageRadius: number
+    buttonIconSize: number
+    metric: ViewStyle
+    metricTitle: TextStyle
+    metricValue: TextStyle
+    metricCaption: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('PDPcccard/bg/color', modes), '#ffffff')
+    const paddingHorizontal = asNum(getVariableByName('PDPcccard/padding/horizontal', modes), 16)
+    const paddingVertical = asNum(getVariableByName('PDPcccard/padding/vertical', modes), 20)
+    const gap = asNum(getVariableByName('PDPcccard/gap', modes), 12)
+
+    const imageRadius = asNum(getVariableByName('image/radius', modes), 8)
+    const buttonIconSize = asNum(getVariableByName('button/iconSize', modes), 16)
+
+    const metricGap = asNum(getVariableByName('metricdata/gap', modes), 4)
+    const metricPadH = asNum(getVariableByName('metricdata/padding/horizontal', modes), 10)
+    const metricPadV = asNum(getVariableByName('metricdata/padding/vertical', modes), 10)
+
+    const titleColor = asStr(getVariableByName('metricdata/title/color', modes), '#000000')
+    const titleSize = asNum(getVariableByName('metricdata/title/fontsize', modes), 12)
+    const titleFamily = asStr(getVariableByName('metricdata/title/fontfamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('metricdata/title/fontweight', modes), '400')
+
+    const valueColor = asStr(getVariableByName('metricdata/value/color', modes), '#000000')
+    const valueSize = asNum(getVariableByName('metricdata/value/fontsize', modes), 20)
+    const valueFamily = asStr(getVariableByName('metricdata/value/fontfamily', modes), 'JioType Var')
+    const valueWeight = asStr(getVariableByName('metricdata/value/fontweight', modes), '700')
+
+    const captionColor = asStr(getVariableByName('metricdata/caption/color', modes), '#777777')
+    const captionSize = asNum(getVariableByName('metricdata/caption/fontsize', modes), 12)
+    const captionFamily = asStr(getVariableByName('metricdata/caption/fontfamily', modes), 'JioType Var')
+    const captionWeight = asStr(getVariableByName('metricdata/caption/fontweight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            paddingHorizontal,
+            paddingVertical,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        imageRadius,
+        buttonIconSize,
+        metric: {
+            flex: 1,
+            gap: metricGap,
+            paddingHorizontal: metricPadH,
+            paddingVertical: metricPadV,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        metricTitle: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(titleSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+        metricValue: {
+            color: valueColor,
+            fontSize: valueSize,
+            fontFamily: valueFamily,
+            fontWeight: valueWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(valueSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+        metricCaption: {
+            color: captionColor,
+            fontSize: captionSize,
+            fontFamily: captionFamily,
+            fontWeight: captionWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(captionSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_METRICS: PdpCcCardMetric[] = [
+    { title: 'Title', value: 'Value', caption: 'caption' },
+    { title: 'Title', value: 'Value', caption: 'caption' },
+]
+
+const styles = StyleSheet.create({
+    mediaSlot: {
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    metricsRow: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+    },
+    metricDivider: {
+        alignSelf: 'center',
+        height: '70%',
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default PdpCcCard

package/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import type { Modes } from '../../design-tokens'
 
@@ -65,6 +65,12 @@ export type PoweredByLabelProps = {
      * (which is decorative) does not need to be announced separately.
      */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const toNumber = (value: unknown, fallback: number): number => {
@@ -115,6 +121,7 @@ function PoweredByLabel({
     textStyle,
     imageStyle,
     accessibilityLabel,
+    disableTruncation,
 }: PoweredByLabelProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(
@@ -210,7 +217,7 @@ function PoweredByLabel({
                 style={[labelTextStyle, textStyle]}
                 accessibilityElementsHidden={true}
                 importantForAccessibility="no"
-                numberOfLines={1}
+                {...resolveTruncation(disableTruncation, 1)}
             >
                 {label}
             </Text>