Add previous and next buttons for doc navigation

[lvoytek]

Done

This change allows users to navigate through documentation pages by clicking a previous or next page button, making navigation faster when reading sequentially. The buttons show the name of the previous and upcoming pages, and the links correspond to the adjacent pages, regardless of section, with section pages included.

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/
  • Be sure to test on mobile, tablet and desktop screen sizes
• [List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

Fixes #

Screenshots

Here are some examples: The end of the Server Documentation munin page will show:

The introduction to the Server Documentation will show:

Likewise, Ubuntu Core's How-To home page will show:

Help

QA steps - Commit guidelines

[webteam-app]

Demo starting at https://ubuntu-com-12132.demos.haus

[codecov[bot]]

Codecov Report

Merging #12132 (d8cb33f) into main (f8d7d6f) will increase coverage by 0.08%. The diff coverage is n/a.

:exclamation: Current head d8cb33f differs from pull request most recent head bc6bd83. Consider uploading reports for the commit bc6bd83 to get more accurate results

@@            Coverage Diff             @@
##             main   #12132      +/-   ##
==========================================
+ Coverage   63.42%   63.50%   +0.08%     
==========================================
  Files         117      117              
  Lines        2685     2691       +6     
  Branches      785      791       +6     
==========================================
+ Hits         1703     1709       +6     
  Misses        940      940              
  Partials       42       42              

Impacted Files	Coverage Δ
...riptions/ExpiryNotification/ExpiryNotification.tsx	100.00% <0.00%> (ø)
...DetailsTabs/components/FeaturesTab/FeaturesTab.tsx	85.29% <0.00%> (ø)
...ns/SubscriptionDetails/DetailsTabs/DetailsTabs.tsx	92.77% <0.00%> (+0.17%)	:arrow_up:
...ptions/SubscriptionDetails/SubscriptionDetails.tsx	74.48% <0.00%> (+0.26%)	:arrow_up:

[marinacastejon]

Hi @lvoytek , could you please provide us with more context?

• Why was this changed? Had a problem been identified?
• Was any designer involved in the decision?
• Did you or the person who made this proposal look at the internal UX guidelines on pagination? Any information you could provide would help us in the QA. Thanks!

@al-bakalova FYI

[lvoytek]

Hi @marinacastejon,

I've been working on cleaning up the Server Guide for the past few months, focused mainly on order and format of the pages. One suggestion my team had was to add prev/next pagination make it easier to navigate through everything. This allows for a similar use case to the offline pdf server guide that we publish in which the user reads pages sequentially.

The UX is based on the same style as the Ubuntu blog, but with page names instead of numbers. I didn't work with a designer or see the internal guidelines though. It's fine if the style needs to be updated or if this change ends up being discarded.

Thanks!

[anthonydillon]

Personally, I think it works well and is kinda common. We do in fact has an exact pattern for this use: https://vanillaframework.io/docs/patterns/pagination#article-pagination

[lvoytek]

@anthonydillon Thanks for the code reference, I can update the pull request to match that if preferred. Here are what the above pages look like in this style:

[marinacastejon]

Hi @lvoytek , @al-bakalova and I took a look and chatted about this solution and its pros and cons. Firstly, it'd be better as Ant suggested if we used the existing Vanilla pattern for article pagination. The main reasons: adding previous and next labels helps users understand that it is article pagination (vs a button with a random name that might be confused with an action-triggering button) and also, this pattern was created also considering the visual design and makes the content feel more balanced visually speaking.

The second recommendation is about the logic. The pagination right now goes from one expanded section (of the side nav) to another. And if the user browses the page only by clicking on the Previous/Next buttons, they might not realise they are up to browsing a new section of the side nav. So maybe we can consider Previous/Next buttons only for the subpages within a selected section. The advantage of keeping the current logic is of course that it is faster if the user wants to go through all pages. I would take into account how knowledgeable your typical users are and take a decision based on that. A third option could be that when the user is going to move to a new section, the next label could be updated to specify the new section and the page.

I also found this case when I'm in the tutorials so I'd recommend you also take a look at this particular case. I'm not sure why it's showing Introduction also in the previous-content button.

[lvoytek]

Thanks for the help @marinacastejon. I updated the code with the new style and added additional info about the section for relevant pages. For example, the Tutorials page now shows:

[marinacastejon]

Hi @lvoytek , I'm glad our comments helped. Could you please share another demo URL so that we QA it again? The one above doesn't work. Thanks

[lvoytek]

@marinacastejon Sure, is there any way I can get the @webteam-app bot to rerun it?

[sowasred2012]

@lvoytek @marinacastejon I just manually triggered the demo build again, it's working now: https://ubuntu-com-12132.demos.haus/

[marinacastejon]

Nice work @lvoytek , looks great, thank you. I removed the Design review needed label because this is just using our Vanilla component.