YPE-2479 - feat(ui): add onFootnotePress callback to BibleCard

.changeset/bible-card-footnote-press.md

@@ -0,0 +1,4 @@
+---
+"@youversion/platform-react-ui": patch
+---
+Add optional `onFootnotePress` callback to `BibleCard` for custom footnote handling (same pattern as `BibleReader`).

packages/ui/src/components/bible-card.test.tsx

@@ -2,8 +2,10 @@
  * @vitest-environment jsdom
  */
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, act, within } from '@testing-library/react';
+import { render, act, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { BibleCard } from './bible-card';
+import type { FootnoteData } from './verse';
 import { usePassage, useVersion, useTheme } from '@youversion/platform-react-hooks';
 import type { BiblePassage, BibleVersion } from '@youversion/platform-core';
 
@@ -119,3 +121,48 @@ describe('BibleCard - Delayed spinner', () => {
     );
   });
 });
+
+describe('BibleCard - onFootnotePress callback', () => {
+  const mockPassageWithFootnote: BiblePassage = {
+    id: 'JHN.1',
+    content: `<div class="p"><span class="yv-v" v="5"></span><span class="yv-vlbl">5</span>The light shines<span class="yv-n f"><span class="fr">1:5 </span><span class="ft">Or understood</span></span>.</div>`,
+    reference: 'JHN.1',
+  };
+
+  beforeEach(() => {
+    vi.mocked(useTheme).mockReturnValue('light');
+    vi.mocked(useVersion).mockReturnValue({
+      version: mockVersion,
+      loading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    vi.mocked(usePassage).mockReturnValue({
+      passage: mockPassageWithFootnote,
+      loading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+  });
+
+  it('should call onFootnotePress when provided via BibleCard', async () => {
+    const onFootnotePress = vi.fn();
+
+    const { container } = render(
+      <BibleCard reference="JHN.1" versionId={3034} onFootnotePress={onFootnotePress} />,
+    );
+
+    const button = await waitFor(() => {
+      const btn = container.querySelector('[data-verse-footnote="5"] button');
+      expect(btn).not.toBeNull();
+      return btn as HTMLButtonElement;
+    });
+
+    await userEvent.click(button);
+
+    expect(onFootnotePress).toHaveBeenCalledTimes(1);
+    const data = onFootnotePress.mock.calls[0]![0] as FootnoteData;
+    expect(data.verseNum).toBe('5');
+    expect(data.reference).toBe('JHN.1');
+  });
+});

packages/ui/src/components/bible-card.tsx

@@ -1,5 +1,5 @@
 import { usePassage, useVersion, useTheme } from '@youversion/platform-react-hooks';
-import { BibleTextView } from './verse';
+import { BibleTextView, type FootnoteData } from './verse';
 import { BibleAppLogoLockup } from './bible-app-logo-lockup';
 import { BibleVersionPicker } from './bible-version-picker';
 import { Button } from './ui/button';
@@ -32,6 +32,7 @@ export type BibleCardProps = {
   versionId: number;
   background?: 'light' | 'dark';
   showVersionPicker?: boolean;
+  onFootnotePress?: (data: FootnoteData) => void;
 };
 
 function BibleCardHeaderError(): React.ReactNode {
@@ -116,6 +117,7 @@ export function BibleCard({
   versionId,
   background,
   showVersionPicker = false,
+  onFootnotePress,
 }: BibleCardProps): React.ReactNode {
   const [versionNum, setVersionNum] = useState(versionId);
   const { version } = useVersion(versionNum);
@@ -177,6 +179,7 @@ export function BibleCard({
             loading: passageLoading,
             error: passageError,
           }}
+          onFootnotePress={onFootnotePress}
         />
       </AnimatedHeight>