WIP: YPE-642 - Verse Action Popover #131
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This commit introduces the ability to select individual verses within the Verse and BibleTextView components. Key changes include: - Added `selectedVerses` and `onVerseSelect` props to `VerseHtml`, `Verse`, and `BibleTextView` components. - Implemented click handlers in `HtmlWithNotes` to manage verse selection and deselection. - Added styling for selected verses in `bible-reader.css`. - Introduced a new `VerseSelection` story to demonstrate the new functionality.
Introduce DEFAULT_BIBLE_VERSION constant and apply it to storybook examples. BSB (Berean Standard Bible) is chosen as the default version as it is freely usable.
Rename HtmlWithNotes to BibleTextHtml and integrate it as a child component within the Verse component's main rendering logic. This improves code organization and clarity.
Switch from React conditional rendering to CSS visibility for footnotes. DOM now stays stable when renderNotes changes, preventing selection loss.
- Add highlightedVerses prop (Record<number, boolean>) to BibleTextView - Add .yv-v-highlighted CSS class with yellow-30 at 20% opacity - Update VerseSelection story with Highlight/Clear buttons
Reverting the default Bible version because that's supposed to be for another ticket and these are mocked anyway so it doesn't matter.
When onVerseSelect is not provided, verses now display default cursor instead of pointer cursor to avoid misleading users that verses are clickable. - Added data-selectable attribute to verse container - Updated CSS to conditionally apply cursor: pointer only when selectable
- Add optimizeDeps.include for React/Radix to prevent mid-test reloads - Add quiet: true to MSW initialize to reduce test output noise
The `optimizeDeps` configuration in Storybook's `main.ts` is no longer necessary. Recent updates to Vite and Storybook have resolved the CI test execution issues that this configuration aimed to prevent.
This commit introduces the `BoxStackIcon` component to the `ui` package. It also updates the `icons/index.ts` file to export the new icon.
Add the BoxArrowUpIcon to the UI package. This icon will be used to represent the action of uploading or exporting content.
- Switch popover colors from named to hex (matches core schema)
- Update highlightedVerses type: Record<number, boolean> →
Record<number, string>
- Add VerseActionPopoverStory for visual testing
- Auto-open/close popover on verse selection
The popover should only be rendered when there are selected verses, preventing it from appearing unnecessarily.
Conditionally render the `VerseActionPopover` or return null if the `open` prop is false. This prevents unnecessary rendering of the popover when it's not intended to be visible. Additionally, the storybook example has been updated to ensure the popover is only rendered when `selectedVerses.length > 0`.
Remove `hasUnhighlightedVerses` prop. The popover will now always display all highlight color options, showing an 'x' icon for active highlights and no 'x' for inactive ones. This simplifies the UI and logic by consistently presenting available actions.
- Rename onClearHighlight -> onClearHighlights (no color param) - Clear all selected verses regardless of highlight color
- Remove guard that prevented overwriting existing highlights
- Active colors with X appear left-aligned - Inactive colors follow in standard order
- Active colors shown with X (to clear) - Only inactive colors shown as apply options - Prevents useless same-color re-highlight action
- AC 6 & 7: When hasUnhighlightedVerses, show ALL colors as apply options - Allows applying active color to unhighlighted verse in mixed selection - When only re-highlighting (no unhighlighted), show only inactive colors
- Remove hasUnhighlightedVerses prop (no longer needed) - Active colors with X shown first, then all 5 colors for apply/change - Allows changing multiple highlights to same color
Introduce a new popover component for verse actions and associated highlight colors. This component is exported from the `ui` package and includes mock implementations for the Popover API in the test setup.
Add comprehensive tests for the VerseActionPopover component, covering basic display, highlight actions, copy and share functionality, and accessibility. This ensures the component behaves as expected under various conditions and adheres to best practices.
highlight colors Previously, when a verse was highlighted (e.g., yellow), both a "remove" button and an "apply" button for the same color were displayed, creating unnecessary duplication. Now, apply buttons only appear for colors that are not currently active, eliminating the duplicate and making the UI clearer: - 1 active highlight: 1 remove + 4 apply buttons (5 total) - 2 active highlights: 2 remove + 3 apply buttons (5 total) - All 5 active: 5 remove + 0 apply buttons (5 total) Also updated test expectations to match the new behavior.
Adds `selectedVerses` and `highlightedVerses` props to the `VerseActionPopover` component. This allows the component to correctly determine which highlight colors to display for applying or clearing, based on the current selection of verses and their existing highlights. The logic for displaying apply color buttons has been updated to consider scenarios with unhighlighted verses and multiple active highlight colors, ensuring all relevant options are presented.
Update the `VerseActionPopover` component to support clearing highlights on a per-color basis. This involves renaming the `onClearHighlights` callback to `onClearHighlight` and passing the specific color being cleared. The component's logic, tests, and demo stories have been updated to reflect this change, ensuring that only highlights of the specified color are removed and the popover's visibility is managed correctly.
- Fix TypeScript "Object possibly undefined" errors in test file - Add color-specific aria-labels for screen readers (e.g., "Apply yellow highlight") - Export COLOR_NAMES map for color hex-to-name lookup - Implement Copy/Share callbacks in Storybook demo per AC3/AC4 - Simplify showAllApplyColors logic
The previous regex for highlight button labels was too specific, matching exact color names. This commit broadens the match to any highlight action, improving accessibility for users who might not see the color options directly.
Changes the text of the "Clear yellow highlight" button in tests to "Clear highlight" to be more generic.
cameronapak
force-pushed
the
YPE-642-react-sdk-bible-reader-ui-verse-action-popover-with-highlight-colors-copy-and-share
branch
from
ca57d4b to
4fffc78
Compare
Remove unused CSS for selectable and selected verses in the bible reader component.
The `PRD-verse-action-popover.md` and `tasks/tasks-ac10-per-color-removal.md` files are no longer relevant and have been removed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://lifechurch.atlassian.net/browse/YPE-642
Important
Vitest tests appear for this component because there were a lot of edge-cases that this component needed testing and instead of creating a Storybook story for each one, it was easier and more organized to write vitests for it.
Remaining Items
Acceptance Criteria
AC 1 - Basic popover display
Given I select a verse, the popover shows 5 color circles (yellow, green, blue, orange, pink).
AC 2 - Apply highlight
Given popover is open, clicking a color circle applies that highlight to all selected verses. Popover dismisses.
AC 3 - Copy
Clicking Copy puts verse text in clipboard as
"Verse text" - Book Chapter:Verse Version(e.g.,"Romans 8:1 BSB"). Popover dismisses.AC 4 - Share
Clicking Share opens native Web Share API. On successful share only, popover dismisses. On failure/cancel, popover remains open.
AC 5 - Single highlighted verse selected
Popover shows that verse's color with X (remove action), plus only the 4 inactive apply colors (no duplicate). Total: 5 circles.
AC 5a - Ordering
X circles (remove) appear leftmost. Apply circles follow in standard order (yellow, green, blue, orange, pink).
AC 6 - Mixed selection (highlighted + unhighlighted)
Yellow highlighted verse + unhighlighted verse selected -> popover shows: Yellow X, then all 5 apply colors (Yellow, Green, Blue, Orange, Pink) (6 total). This allows applying any color to the unhighlighted verse.
AC 7 - Multiple different highlights selected
Yellow verse + Green verse selected -> popover shows: Yellow X, Green X, then Yellow, Green, Blue, Orange, Pink (7 total). Clicking Yellow X removes only yellow from the yellow verse. Green verse unchanged. Both verses remain selected. Popover remains open.
AC 8 - Dismiss on remove (single highlight)
When only one highlight color is active in selection, clicking its X removes it and dismisses popover.
AC 8a - Popover stays open (multiple highlights)
When multiple highlight colors are active in selection, clicking an X removes only that color. Popover remains open (so user can remove other highlights if desired).
AC 9 - All 5 colors highlighted
When all 5 verses with all 5 different colors are selected (or all 5 colors are already active), popover shows all 5 remove buttons (X) with no apply buttons (no new colors available). Total: 5 circles.