jfs-components 0.1.8 → 0.1.12

package/src/components/AreaLineChart/AreaLineChart.tsx

@@ -23,7 +23,7 @@ import {
 import Svg, { Circle, Line, Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 import {
@@ -149,6 +149,12 @@ export type AreaLineChartProps = {
     children?: React.ReactNode
     /** Accessibility label for the whole chart. */
     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
 }
 
 // --- Internal resolved types ----------------------------------------------
@@ -184,6 +190,7 @@ type ChartContextValue = {
     formatY: (value: number) => React.ReactNode
     showDots: boolean
     modes: Modes
+    disableTruncation?: boolean
 }
 
 const ChartContext = createContext<ChartContextValue | null>(null)
@@ -307,6 +314,7 @@ function AreaLineChart({
     style,
     children,
     accessibilityLabel,
+    disableTruncation,
 }: AreaLineChartProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
@@ -440,6 +448,7 @@ function AreaLineChart({
             formatY,
             showDots,
             modes,
+            disableTruncation,
         }),
         [
             plotWidth,
@@ -459,6 +468,7 @@ function AreaLineChart({
             formatY,
             showDots,
             modes,
+            disableTruncation,
         ]
     )
 
@@ -650,7 +660,7 @@ function ChartYAxis({
     showAxisLine = false,
     formatLabel,
 }: ChartYAxisProps) {
-    const { height, inset, yScale, yTicks, formatY, modes } = useChart()
+    const { height, inset, yScale, yTicks, formatY, modes, disableTruncation } = useChart()
     const typo = useAxisTypography(modes)
     const format = formatLabel ?? formatY
 
@@ -673,7 +683,7 @@ function ChartYAxis({
                             }}
                         >
                             {showLabels ? (
-                                <Text style={typo.style} numberOfLines={1}>
+                                <Text style={typo.style} {...resolveTruncation(disableTruncation, 1)}>
                                     {format(t)}
                                 </Text>
                             ) : null}
@@ -736,7 +746,7 @@ function ChartXAxis({
     selectable = true,
     formatLabel,
 }: ChartXAxisProps) {
-    const { width, inset, xScale, indexXs, count, xLabels, formatX, modes, activeIndex, setActiveIndex } =
+    const { width, inset, xScale, indexXs, count, xLabels, formatX, modes, activeIndex, setActiveIndex, disableTruncation } =
         useChart()
     const typo = useAxisTypography(modes)
     const format = formatLabel ?? formatX
@@ -787,7 +797,7 @@ function ChartXAxis({
                                     typo.style,
                                     isActive ? { color: activeColor, fontWeight: '700' } : null,
                                 ]}
-                                numberOfLines={1}
+                                {...resolveTruncation(disableTruncation, 1)}
                             >
                                 {format(label, i)}
                             </Text>

package/src/components/Badge/Badge.tsx

@@ -7,14 +7,24 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
+import GlassFill from '../../utils/GlassFill/GlassFill'
 
-type BadgeProps = {
+export type BadgeType = 'default' | 'glass'
+
+export type BadgeProps = {
   /** Visible label text shown inside the badge */
   label?: string
+  /**
+   * Visual style (matches the Figma `type` property). `'default'` is a solid
+   * token-colored pill; `'glass'` is a frosted, translucent pill backed by a
+   * real background blur (`GlassFill`) — the same glass surface used at the
+   * bottom of media/merchandising cards.
+   */
+  type?: BadgeType
   /** Modes used to resolve design tokens (e.g. Appearance, Size) */
   modes?: Modes
   /** Optional press handler to make the badge interactive */
@@ -22,29 +32,66 @@ type BadgeProps = {
   accessibilityLabel?: string
   style?: ViewStyle
   labelStyle?: TextStyle
+  /**
+   * Optional leading node (icon/image) rendered before the label, inside the
+   * badge surface. When present, the badge lays its contents out in a row.
+   */
+  leading?: React.ReactNode
+  /**
+   * Glass-only override for the translucent overlay color painted over the live
+   * blur. Defaults to the `badge/glass/color/background` token. Ignored for the
+   * `'default'` type.
+   */
+  glassOverlayColor?: string
+  /**
+   * Glass-only override for the blur intensity on the 0–100 scale. Defaults to
+   * the `blur/minimal` token. Ignored for the `'default'` type.
+   */
+  glassIntensity?: number
   /**
    * Explicit per-instance loading override. When `true`, renders a
    * badge-shaped skeleton placeholder instead of the badge. Defaults to
    * inheriting from the surrounding `<SkeletonGroup>`.
    */
   loading?: boolean
+  /**
+   * 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
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>
 
 function Badge({
   label = 'Label',
+  type = 'default',
   modes = EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,
   labelStyle,
   loading,
+  disableTruncation,
+  leading,
+  glassOverlayColor,
+  glassIntensity,
   ...rest
 }: BadgeProps) {
-  // Resolve token values (fall back to sensible defaults)
+  const isGlass = type === 'glass'
+  const hasLeading = leading != null
+
+  // Resolve token values (fall back to sensible defaults). The glass type
+  // swaps the solid fill for a translucent overlay + white label, matching the
+  // Figma `badge/glass/*` tokens.
   const backgroundColor =
     (getVariableByName('badge/color/background', modes) as string) || '#d8effe'
-  const labelColor =
-    (getVariableByName('badge/color/label', modes) as string) || '#000000'
+  const glassBackground =
+    (getVariableByName('badge/glass/color/background', modes) as string) || '#ffffff26'
+  const glassLabelColor =
+    (getVariableByName('badge/glass/color/label', modes) as string) || '#ffffff'
+  const labelColor = isGlass
+    ? glassLabelColor
+    : (getVariableByName('badge/color/label', modes) as string) || '#000000'
   const fontSize =
     Number(getVariableByName('badge/label/fontSize', modes) as unknown) || 12
   const fontFamily =
@@ -60,6 +107,12 @@ function Badge({
   const lineHeight =
     Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
     Math.round(fontSize * 1.2)
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
+  // same 1:1 mapping the merchandising card footer uses.
+  const blurIntensity = Math.max(
+    0,
+    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes) as unknown) || 29)),
+  )
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -82,13 +135,20 @@ function Badge({
   const Container: any = onPress ? Pressable : View
 
   const containerStyle: ViewStyle = {
-    backgroundColor,
+    // Glass keeps the container transparent so the GlassFill blur shows through;
+    // `overflow: 'hidden'` clips the native blur view to the rounded pill (the
+    // blur view does not honor borderRadius itself).
+    backgroundColor: isGlass ? 'transparent' : backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius,
     alignSelf: 'flex-start',
     alignItems: 'center',
     justifyContent: 'center',
+    // A leading node sits in-line before the label, so switch to a row with a
+    // small gap. Consumer `style` (spread last) can still override either.
+    ...(hasLeading ? { flexDirection: 'row' as const, gap: 4 } : null),
+    ...(isGlass ? { overflow: 'hidden' as const } : null),
     ...((style as any) || {}),
   }
 
@@ -112,10 +172,18 @@ function Badge({
       onPress={onPress}
       {...rest}
     >
+      {isGlass ? (
+        <GlassFill
+          tint="light"
+          intensity={glassIntensity ?? blurIntensity}
+          overlayColor={glassOverlayColor ?? glassBackground}
+          androidTintWash={false}
+        />
+      ) : null}
+      {hasLeading ? <View style={LEADING_WRAP}>{leading}</View> : null}
       <Text
         style={textStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
         accessibilityElementsHidden={false}
       >
         {label}
@@ -124,6 +192,8 @@ function Badge({
   )
 }
 
+const LEADING_WRAP: ViewStyle = { justifyContent: 'center', alignItems: 'center' }
+
 export default Badge
 
 

package/src/components/BrandChip/BrandChip.tsx

@@ -10,7 +10,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 Avatar from '../Avatar/Avatar'
 import type { Modes } from '../../design-tokens'
 
@@ -38,6 +38,12 @@ export type BrandChipProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `label`. */
   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
 }
 
 interface BrandChipTokens {
@@ -164,6 +170,7 @@ function BrandChip({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: BrandChipProps) {
   const { modes: globalModes } = useTokens()
   const modes = useMemo(
@@ -202,8 +209,7 @@ function BrandChip({
       {avatarNode}
       <Text
         style={[tokens.labelStyle, labelStyle]}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
       >
         {label}
       </Text>

package/src/components/Button/Button.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
@@ -64,6 +64,12 @@ export type ButtonProps = SafePressableProps & {
    * the group.
    */
   loading?: boolean;
+  /**
+   * 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;
 };
 
 // ---------------------------------------------------------------------------
@@ -235,6 +241,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }: ButtonProps) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -294,7 +301,7 @@ function ButtonImpl({
     content = (
       <Text
         style={activeLabelStyle}
-        numberOfLines={1}
+        {...resolveTruncation(disableTruncation, 1)}
       >
         {label}
       </Text>

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -9,7 +9,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
 import Nudge from '../Nudge/Nudge'
 import type { Modes } from '../../design-tokens'
@@ -57,6 +57,12 @@ export type CardAdvisoryProps = CardAdvisoryBaseProps & {
   nudgeStyle?: StyleProp<ViewStyle>
   /** Accessibility label for the full card. */
   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
 }
 
 interface CardAdvisoryTokens {
@@ -195,6 +201,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: CardAdvisoryProps) {
   const { modes: globalModes } = useTokens()
@@ -236,7 +243,7 @@ function CardAdvisory({
       <View style={[tokens.mainContentStyle, mainContentStyle]}>
         <View style={tokens.contentStyle}>
           <View style={tokens.headerStyle}>
-            <Text numberOfLines={1} style={[tokens.titleStyle, titleStyle]}>
+            <Text {...resolveTruncation(disableTruncation, 1)} style={[tokens.titleStyle, titleStyle]}>
               {title}
             </Text>
             {processedTitleEndSlot || (showInfoIcon ? (

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -7,7 +7,7 @@ import {
     type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Badge from '../Badge/Badge'
 import Button from '../Button/Button'
 import InstitutionBadge from '../InstitutionBadge/InstitutionBadge'
@@ -80,6 +80,12 @@ export type CardBankAccountProps = {
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the card region. */
     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 DEFAULT_ITEMS: CardBankAccountItem[] = [
@@ -138,6 +144,7 @@ function CardBankAccount({
     modes: propModes = EMPTY_MODES,
     style,
     accessibilityLabel,
+    disableTruncation,
 }: CardBankAccountProps) {
     // Merge caller modes on top of `DEFAULT_MODES` so every default key
     // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -268,7 +275,7 @@ function CardBankAccount({
                             <Text style={labelStyle}>{item.label}</Text>
                         </View>
                         {typeof item.value === 'string' || typeof item.value === 'number' ? (
-                            <Text style={valueTextStyle} numberOfLines={1}>
+                            <Text style={valueTextStyle} {...resolveTruncation(disableTruncation, 1)}>
                                 {item.value}
                             </Text>
                         ) : (