YPE-1343: Bible Reader next and prev chapter btns#168
Merged
cameronapak merged 47 commits intomainfrom Feb 25, 2026
Conversation
Adds a button to select the introduction chapter for a book in the bible chapter picker. This allows users to easily navigate to the book's introduction.
Conditionally renders the book and chapter header in the bible reader component. This ensures the header is only displayed when the chapter is a valid numerical value.
Adjust the `grid-cols` class in the Bible reader toolbar to dynamically render either `auto_1fr_auto` or `1fr_auto` based on the `authEnabled` state from the `yvContext`.
This class handles intended list items, ensuring correct styling for elements like the Acts Intro in certain Bible versions.
Corrected "Intended" to "Indented" in a CSS comment for clarity.
This commit adds and updates several CSS classes within the bible reader styling to ensure accurate rendering of scripture content. Key changes include: - Applying `display: block` to the root element for better layout control. - Inheriting typography from the root for improved cascade and em-based sizing. - Adding detailed styling for various scripture formatting tags such as titles, headings, paragraphs, poetry, quotes, and special text styles. - Updating comments to better reflect the purpose of each CSS class.
This commit introduces CSS rules for the `.yv-vlbl` class, ensuring that verse labels are displayed with the correct sans-serif font. This enhances the visual consistency and readability of biblical content within the UI.
This commit introduces CSS styling for additional USFM tags within the Bible reader component. These additions include: - Hiding metadata and navigation tags like `\usfm`, `\h`, `\toca1`, `\toca2`, `\toca3`. - Correcting the display of scripture quotations in introductions (`\iqt`). - Adjusting the styling for inline elements like footnotes (`\fl`). - Improving the handling of proper names (`\pn`). - Updating styling for footnotes and endnotes (`\f`, `\fe`). - Adding styling for secondary language text (`\sls`). - Refining styles for major section headings (`\ms2`). - Ensuring proper alignment for table cells (`\tcr`, `\tcr1`). - Adding styling for indented list items (`\ph3`, `\lim3`).
spacing on the wrong side. Every other property in the file was converted to logical properties, but this one slipped through.
- Replace parseInt with regex for chapterIsNumerical check - Make chapterUnavailable validate against chapters array and intro ID - Remove redundant || false in toolbar grid conditional - Add JSDoc on chapter render prop clarifying it's a display label - Add IntroChapter Storybook story with play function - Add JHN intro mock data and MSW handler using real API response
Wait for the "Intro" label to appear in the bible reader toolbar in the story. This ensures that the test correctly accounts for asynchronous data loading before asserting the label's presence.
Refine the bible reader story for intro chapters to accurately reflect real-world content. This includes using the TPT version for Joshua's intro, which contains structured sections, and updating assertions to verify specific formatting and content elements.
- Add top margin to .is/.s/.heading section headings for spacing - Add IntroChapter story for JHN.INTRO rendering - Fix JoshuaIntroChapter story to wait for content before assertions
This commit refactors the `BibleChapterPicker` component to correctly display the chapter label in the toolbar trigger. Previously, it was using the raw chapter ID, which could lead to incorrect display for introductory chapters. The `TriggerProps` type has been updated to include `chapterLabel` and the component logic now correctly derives and uses this label for rendering. Unit tests have also been updated to reflect this change and ensure accurate display.
Organize the CSS rules for the bible reader component into logical sections. This improves readability and maintainability. New sections include major titles, section headings, introduction outlines, paragraphs, character styles, and notes. Additionally, styles for specific USFM tags have been refined for better accuracy and consistency.
Adjust CSS for bible reader component to use shorthand margin properties and more consistent text indentation for blockquotes.
Update text-indent for list items within the bible reader styles to improve readability and visual consistency.
Extract chapter selection logic into a reusable handler function to improve code clarity and maintainability.
Replace "Loading..." text with a spinning loader icon in the Bible reader toolbar when data is being fetched.
Adjusted the layout of the Bible reader toolbar to use flexbox for better responsiveness and simplified the structure for chapter and version pickers. Modified button sizes for better visual hierarchy.
…pter' into cp/YPE-1343-react-sdk-bible-reader-toolbar-add-prev-and-next-chapter-buttons-in-the-bible-reader-toolbar-according-to-designs-from-tim-watson
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
🦋 Changeset detectedLatest commit: afd79ba The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
Greptile SummaryThis PR adds previous/next chapter navigation buttons to the Bible Reader toolbar with full cross-book navigation support and intro chapter handling. The implementation follows clean separation of concerns: pure navigation logic in Key Changes:
Confidence Score: 5/5
Important Files Changed
Last reviewed commit: a620e96 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Adjust CSS for list items (`li`, `lim`) to use hanging indents and block display, improving readability and visual consistency within the Bible reader component.
cameronapak
commented
Feb 24, 2026
- Add aria-label to prev/next chevron buttons for screen readers - Remove unnecessary !! double negation on bookData?.intro - Simplify getNext by removing else block in favor of guard clause - Use genChapters.at(-1) for clarity in cross-book test
- Add aria-label to prev/next chevron buttons for accessibility - Remove !! double negation on bookData?.intro - Simplify getNext by replacing else with guard clause - Use genChapters.at(-1) for clarity in cross-book test - Add explicit list-style-type: none to li/lim rules per USFM spec - Add test for mixed intro/no-intro cross-book navigation - Add changeset for patch bump across all packages
Collaborator
Author
|
@greptileai, I've made changes since you last reviewed. Please re-review this PR |
Refine the aria-label for the BibleChapterPicker.Trigger and remove an assertion from a story that incorrectly expected the H1 to be absent from intro chapters.
Collaborator
Author
|
Hey @camrun91, this PR is now ready for review. This PR adds the previous chapter and next chapter buttons to the React web One important thing to know is that this is built upon the work of #151 for intro chapters. That is being reviewed by David at this time, but it doesn't block this from being reviewed. If you have any questions, please let me know. I'm an open book. |
Collaborator
Author
|
@bmanquen here's how I approached the previous and next chapter buttons and functionality on React web. It may be able to help you with Kotlin |
Expose the fetched book data and loading state from the `useBooks` hook within the `BibleReaderContext`. This allows child components to directly access and utilize this information without re-fetching or reimplementing logic.
Collaborator
Author
|
@greptileai, please re-re-review. I've made the updates you requested |
Base automatically changed from
YPE-1332-react-sdk-bible-reader-render-introduction-chapter
to
main
February 24, 2026 22:29
…dd-prev-and-next-chapter-buttons-in-the-bible-reader-toolbar-according-to-designs-from-tim-watson
cameronapak
commented
Feb 24, 2026
camrun91
approved these changes
Feb 24, 2026
Collaborator
camrun91
left a comment
camrun91
left a comment
There was a problem hiding this comment.
LGTM I only have one question
…dd-prev-and-next-chapter-buttons-in-the-bible-reader-toolbar-according-to-designs-from-tim-watson
cameronapak
deleted the
cp/YPE-1343-react-sdk-bible-reader-toolbar-add-prev-and-next-chapter-buttons-in-the-bible-reader-toolbar-according-to-designs-from-tim-watson
branch
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
This PR adds the next and previous chapter buttons to the Bible Reader in alignment with https://lifechurch.atlassian.net/browse/YPE-1343. This ticket came about in a conversation with myself and Tim Watson when processing the UX of the Bible Reader and felt like this was very important.
We got a new design approach for the Bible Reader Toolbar actions. Here's the figma design Tim gave me:
CleanShot.2026-02-24.at.12.15.11.mp4
And, based on how the Android YV Bible app, they do not hide the Intro title header, so... we're now showing it on web