@compsych/mobile-ui 1.0.9 → 1.0.11

package/src/{PlanCard.tsx → components/PlanCard/index.tsx}

@@ -1,15 +1,20 @@
 import React from 'react';
+
 import {
   LayoutAnimation,
   Platform,
   Pressable,
+  StyleProp,
   StyleSheet,
   UIManager,
   View,
+  ViewStyle,
 } from 'react-native';
+
 import { Ionicons } from '@expo/vector-icons';
-import { sys } from './tokens';
-import { BodyText } from './BodyText';
+
+import { sys } from '../../tokens';
+import { BodyText } from '../BodyText';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental?.(true);
@@ -67,7 +72,10 @@ export function PlanCardDropdownItem({
             {title}
           </BodyText>
           {subtitle && (
-            <BodyText variant="small" color={cr.surface.surface.sysOnSurfaceVariant}>
+            <BodyText
+              variant="small"
+              color={cr.surface.surface.sysOnSurfaceVariant}
+            >
               {subtitle}
             </BodyText>
           )}
@@ -80,9 +88,16 @@ export function PlanCardDropdownItem({
               onPress={onAudio}
               accessibilityRole="button"
               accessibilityLabel="Listen"
-              style={({ pressed }) => [itemStyles.actionBtn, pressed && itemStyles.pressed]}
+              style={({ pressed }) => [
+                itemStyles.actionBtn,
+                pressed && itemStyles.pressed,
+              ]}
             >
-              <Ionicons name="headset-outline" size={16} color={cr.surface.surface.sysOnSurface} />
+              <Ionicons
+                name="headset-outline"
+                size={16}
+                color={cr.surface.surface.sysOnSurface}
+              />
             </Pressable>
           )}
           {onOpen && (
@@ -90,9 +105,16 @@ export function PlanCardDropdownItem({
               onPress={onOpen}
               accessibilityRole="button"
               accessibilityLabel="Open"
-              style={({ pressed }) => [itemStyles.actionBtn, pressed && itemStyles.pressed]}
+              style={({ pressed }) => [
+                itemStyles.actionBtn,
+                pressed && itemStyles.pressed,
+              ]}
             >
-              <Ionicons name="arrow-up-circle-outline" size={16} color={cr.surface.surface.sysOnSurface} />
+              <Ionicons
+                name="arrow-up-circle-outline"
+                size={16}
+                color={cr.surface.surface.sysOnSurface}
+              />
             </Pressable>
           )}
         </View>
@@ -167,6 +189,7 @@ export interface PlanCardProps {
   expanded?: boolean;
   onToggle?: () => void;
   children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
 }
 
 export function PlanCard({
@@ -177,6 +200,7 @@ export function PlanCard({
   expanded = false,
   onToggle,
   children,
+  style,
 }: PlanCardProps) {
   function handleToggle() {
     if (Platform.OS !== 'web') {
@@ -188,20 +212,21 @@ export function PlanCard({
   const hasContent = expanded && (children || (items && items.length > 0));
 
   return (
-    <View style={cardStyles.card}>
+    <View style={[cardStyles.card, style]}>
       {/* Header */}
       <View style={cardStyles.header}>
         {/* Left: icon + title stacked */}
         <View style={cardStyles.left}>
           <View style={cardStyles.iconCircle}>
             {icon ?? (
-              <Ionicons name="document-text-outline" size={16} color={cr.accent.primary.sysOnPrimary} />
+              <Ionicons
+                name="document-text-outline"
+                size={16}
+                color={cr.accent.primary.sysOnPrimary}
+              />
             )}
           </View>
-          <BodyText
-            variant="medium"
-            color={cr.surface.surface.sysOnSurface}
-          >
+          <BodyText variant="medium" color={cr.surface.surface.sysOnSurface}>
             {title}
           </BodyText>
         </View>
@@ -210,7 +235,10 @@ export function PlanCard({
         <View style={cardStyles.right}>
           {tag && (
             <View style={cardStyles.chip}>
-              <BodyText variant="small" color={cr.custom.info.sysOnInfoContainer}>
+              <BodyText
+                variant="small"
+                color={cr.custom.info.sysOnInfoContainer}
+              >
                 {tag}
               </BodyText>
             </View>

package/src/components/ProgressTracker/ProgressTracker.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { ProgressBar, ProgressTracker } from './index';
+
+const steps = [
+  { label: 'Start', state: 'completed' as const },
+  { label: 'In progress', state: 'active' as const },
+  { label: 'End', state: 'pending' as const },
+];
+
+describe('ProgressTracker', () => {
+  it('renders step labels when showLabels is true', () => {
+    const { getByText } = render(<ProgressTracker steps={steps} showLabels />);
+    expect(getByText('Start')).toBeTruthy();
+    expect(getByText('In progress')).toBeTruthy();
+    expect(getByText('End')).toBeTruthy();
+  });
+
+  it('renders without labels by default', () => {
+    const { toJSON } = render(<ProgressTracker steps={steps} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it.each(['sm', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { toJSON } = render(<ProgressTracker steps={steps} size={size} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+});
+
+describe('ProgressBar', () => {
+  it('renders with progress value', () => {
+    const { toJSON } = render(<ProgressBar progress={0.5} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('clamps progress to 0–1 range', () => {
+    const { toJSON: toJSON1 } = render(<ProgressBar progress={-0.5} />);
+    const { toJSON: toJSON2 } = render(<ProgressBar progress={1.5} />);
+    expect(toJSON1()).toBeTruthy();
+    expect(toJSON2()).toBeTruthy();
+  });
+});

package/src/{ProgressTracker.tsx → components/ProgressTracker/index.tsx}

@@ -1,11 +1,13 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { sys } from './tokens';
+
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import { sys } from '../../tokens';
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
 
 // ─────────────────────────────────────────────────────────────────────────────
-// ProgressBar — standalone horizontal bar
+// ProgressBar — standalone horizontal fill bar (0–100)
 // ─────────────────────────────────────────────────────────────────────────────
 
 export interface ProgressBarProps {
@@ -23,32 +25,23 @@ export function ProgressBar({ progress }: ProgressBarProps) {
       accessibilityValue={{ min: 0, max: 100, now: clamped }}
       style={styles.track}
     >
-      {clamped > 0 && (
-        <View
-          style={[
-            styles.fill,
-            // Use percentage width — relies on the parent having a defined
-            // width (which it always does as flex-stretch in the tracker).
-            { width: `${clamped}%` },
-          ]}
-        />
-      )}
+      {clamped > 0 && <View style={[styles.fill, { width: `${clamped}%` }]} />}
     </View>
   );
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// ProgressTracker — multi-step labelled tracker
+// ProgressTracker — multi-step bar tracker
 // ─────────────────────────────────────────────────────────────────────────────
 
 export type StepState = 'completed' | 'active' | 'pending';
 
 export interface TrackerStep {
-  label: string;
+  label?: string;
   /**
    * `completed` → full green bar
-   * `active`    → partial green bar (25 % fill — the "in-progress" indicator)
-   * `pending`   → empty track
+   * `active`    → full green bar (current step — same fill as completed)
+   * `pending`   → gray track only
    */
   state: StepState;
 }
@@ -58,8 +51,9 @@ export type ProgressTrackerSize = 'sm' | 'lg';
 export interface ProgressTrackerProps {
   steps: TrackerStep[];
   size?: ProgressTrackerSize;
-  /** Show step labels — default true */
+  /** Render step labels above each bar. Default false. */
   showLabels?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 const SIZE_TOKENS = {
@@ -80,22 +74,19 @@ const SIZE_TOKENS = {
 };
 
 function stepProgress(state: StepState): number {
-  switch (state) {
-    case 'completed': return 100;
-    case 'active':    return 25;
-    case 'pending':   return 0;
-  }
+  return state === 'pending' ? 0 : 100;
 }
 
 export function ProgressTracker({
   steps,
   size = 'lg',
-  showLabels = true,
+  showLabels = false,
+  style,
 }: ProgressTrackerProps) {
   const s = SIZE_TOKENS[size];
 
   return (
-    <View style={[styles.row, { gap: s.stepGap }]}>
+    <View style={[styles.row, { gap: s.stepGap }, style]}>
       {steps.map((step, i) => {
         const isActive = step.state !== 'pending';
         const labelColor = isActive

package/src/components/PromotionCard/PromotionCard.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { PromotionCard } from './index';
+
+describe('PromotionCard', () => {
+  it('renders title and description', () => {
+    const { getByText } = render(
+      <PromotionCard title="New feature" description="Check it out" />,
+    );
+    expect(getByText('New feature')).toBeTruthy();
+    expect(getByText('Check it out')).toBeTruthy();
+  });
+
+  it('renders chip label when provided', () => {
+    const { getByText } = render(
+      <PromotionCard title="Card" chipLabel="NEW" />,
+    );
+    expect(getByText('NEW')).toBeTruthy();
+  });
+
+  it('calls onPress when tapped', () => {
+    const onPress = jest.fn();
+    const { getByRole } = render(
+      <PromotionCard
+        title="Promo"
+        accessibilityLabel="Promo card"
+        onPress={onPress}
+      />,
+    );
+    fireEvent.press(getByRole('button', { name: 'Promo card' }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders disabled state without crashing', () => {
+    const { toJSON } = render(
+      <PromotionCard
+        title="Promo"
+        accessibilityLabel="Promo card"
+        onPress={jest.fn()}
+        disabled
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it.each(['filled', 'tonal'] as const)(
+    'renders variant "%s" without crashing',
+    (variant) => {
+      const { toJSON } = render(
+        <PromotionCard title="Card" variant={variant} />,
+      );
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+
+  it.each(['md', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { toJSON } = render(<PromotionCard title="Card" size={size} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+
+  it.each(['neutral', 'informative', 'positive', 'danger', 'warning'] as const)(
+    'renders usage "%s" without crashing',
+    (usage) => {
+      const { toJSON } = render(<PromotionCard title="Card" usage={usage} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+});