Create Pagination Component

[bmuenzenmeyer]

Create a Pagination component using the new figma design (direct link).

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.
• ❗ Review the translation guide, especially how to add new keys.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide
🌐 This story requires some internationalization support. Slow down!

• Create a new directory called Pagination within the Common directory that contains all the new code. (This location may change in the future.)
• The @heroicons/react module has the icons arrow-right and arrow-left available for use
• Add a storybook story file components/common/Pagination/index.stories.tsx which exercises each of the component's states.
• Previous and Next must be internationalized. Add new keys components.common.pagination.prev and components.common.pagination.next to the i18n/locales/en.json file. FormattedMessage from react-intl should be used to reference the keys. Look for examples elsewhere in the codebase.
• always display pages 1, 2,3 and the last three, deduplicated
• style the current page according to the figma
• display an ellipsis when the total number of pages reaches 8 or more

• use responsive styles to wrap the previous and next buttons below the page links

Suggested props include:

• currentPage (integer)
• pages, an array of objects that looks like this:

[
    {
        value: "1",
        url: "blog/en/1"
    },
    {
        value: "2",
        url: "blog/en/2"
    },
    {
        value: "3",
        url: "blog/en/3"
    },
]

urls subject to change as our blog pagination development continues

There are 3 collection states to capture with stories:

• less than 8 pages, current page visible
• 8 or more pages, current page visible
• 8 or more pages, current page in center with ellipsis on both sides

There are 4 layout states to capture within styles and stories:

• Light, Desktop
• Light, Mobile
• Dark, Desktop
• Dark, Mobile

Open Questions

If the current page is not in the displayed list per our previous rules, how should it get displayed? Research other pagination patterns to determine how this should look.

Material UI would suggest something like this:

GitHub does something similar

[shanpriyan]

Can I take this up? @ovflowd 🙇🏽‍♂️

[ovflowd]

Anyone is free to grab these issues. We usually go on an approach of anyone can contribute. If multiple PRs are opened against this, I don't see it as a bad thing and the first PR that gets merged, alright.

I would ask for people who comment on issues asking if they can work on X, to ask on just one issue per time.

[danielmarcano]

Hi, @ovflowd. I would love to work on this issue!

[danielmarcano]

Hi, @bmuenzenmeyer.

After carefully reading the requirements, I have come up with a couple of doubts:

• What is the difference between these two states? They both start with "8 or more pages," and the condition for showing the current page in the center with two ellipses on both sides is not clear.

  • "8 or more pages, current page visible"
  • "8 or more pages, current page in center with ellipsis on both sides"
  • Moreover, mimicking the behavior of the React Material UI one seems like a good idea.

• Are the ellipses clickable? If so, what should happen when they are clicked? Similar to before, though, mimicking the React Material UI one behavior and leaving them as decorative elements seems reasonable.

• Can we use the new Common/Button component for all buttons of the Pagination component? Edit: the more accessible way to implement this would be to use anchor links. Should I try to reuse the styles of the button somehow, or create these new anchor links as a sub-component of the Pagination?

[danielmarcano]

Also, is there a reason why @apply is being used in all of the component's styles, instead of using Tailwind classes directly in the index.tsx files of the components?

I ask since Tailwind docs do not recommend using @apply for making the template / HTML look cleaner, as mentioned in their docs

[ovflowd]

Also, is there a reason why @apply is being used in all of the component's styles, instead of using Tailwind classes directly in the index.tsx files of the components?

Read our Collaborator Guide.

I ask since Tailwind docs do not recommend using https://github.com/apply for making the template / HTML look cleaner, as mentioned in their docs

Right, but it's just a recommendation, not a rule. And we instead separate CSS from the Components to keep the styling separated from the Component. (And other reasons)

[danielmarcano]

Awesome, thank you @ovflowd! I have gone through the Collaborator Guide and it's all crystal clear to me now.

[ovflowd]

Hi, @bmuenzenmeyer.

After carefully reading the requirements, I have come up with a couple of doubts:

• What is the difference between these two states? They both start with "8 or more pages," and the condition for showing the current page in the center with two ellipses on both sides is not clear.

  • "8 or more pages, current page visible"
  • "8 or more pages, current page in center with ellipsis on both sides"
  • Moreover, mimicking the behavior of the React Material UI one seems like a good idea.

• Are the ellipses clickable? If so, what should happen when they are clicked? Similar to before, though, mimicking the React Material UI one behavior and leaving them as decorative elements seems reasonable.

• Can we use the new Common/Button component for all buttons of the Pagination component? Edit: the more accessible way to implement this would be to use anchor links. Should I try to reuse the styles of the button somehow, or create these new anchor links as a sub-component of the Pagination?

@bmuenzenmeyer double ping if you could support, Daniel here 🙇

[bmuenzenmeyer]

caveat this that i am just translating a static design how i see it - and that @nodejs/ux-and-design / @haydenbleasel is the final say...

• Are the ellipses clickable? If so, what should happen when they are clicked? Similar to before, though, mimicking the React Material UI one behavior and leaving them as decorative elements seems reasonable.

agree - the user can use the already existing arrows to navigate, no need to make elipses do anything

Can we use the new Common/Button component for all buttons of the Pagination component? Edit: the more accessible way to implement this would be to use anchor links. Should I try to reuse the styles of the button somehow, or create these new anchor links as a sub-component of the Pagination?

I don't have strong opinions here, excepting that if the current Button does not work, it doesn't make a ton of sense to shoehorn it in. Duplication of effort to me is acceptable usually in 1,2 places, and then a third is where we try to be more efficient. so for now I think you should go with what's easiest or ergonomic and we can work it out in PR review. Maybe implementation will reveal a more obvious approach

[danielmarcano]

Perfect, thank you both @ovflowd @bmuenzenmeyer! 😎

[DhairyaMajmudar]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

[ovflowd]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

I don't assign issues to people. You want to work on an issue, just do it. PRs are merged on a first-served. (https://www.redhat.com/en/blog/dont-lick-cookie)

[DhairyaMajmudar]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

I don't assign issues to people. You want to work on an issue, just do it. PRs are merged on a first-served. (https://www.redhat.com/en/blog/dont-lick-cookie)

Sir some of the previous issues which I saw was assigned to someone

[ovflowd]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

I don't assign issues to people. You want to work on an issue, just do it. PRs are merged on a first-served. (redhat.com/en/blog/dont-lick-cookie)

Sir some of the previous issues which I saw was assigned to someone

Right, not by me. (Can you also please not call me "sir", thanks)

[DhairyaMajmudar]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

I don't assign issues to people. You want to work on an issue, just do it. PRs are merged on a first-served. (redhat.com/en/blog/dont-lick-cookie)

Sir some of the previous issues which I saw was assigned to someone

Right, not by me. (Can you also please not call me "sir", thanks)

Oh! okay Bhaiya ( Word used to show respect in India ) then to whom should I ask for issue assignment

[ovflowd]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

I don't assign issues to people. You want to work on an issue, just do it. PRs are merged on a first-served. (redhat.com/en/blog/dont-lick-cookie)

Sir some of the previous issues which I saw was assigned to someone

Right, not by me. (Can you also please not call me "sir", thanks)

Oh! okay Bhaiya ( Word used to show respect in India ) then to whom should I ask for issue assignment

Right, no worries. (Now I learnt a word in Indian)

So, my recommendation is just work on a task. Assignment is just a formality. You can simply work on the issue and open an PR, and that's it :)

[DhairyaMajmudar]

@ovflowd sir pls. Assign this. I went through the codebase and also understood the approach as suggested by you. It would be so nice of you if this issue is assigned to me .

I don't assign issues to people. You want to work on an issue, just do it. PRs are merged on a first-served. (redhat.com/en/blog/dont-lick-cookie)

Sir some of the previous issues which I saw was assigned to someone

Right, not by me. (Can you also please not call me "sir", thanks)

Oh! okay Bhaiya ( Word used to show respect in India ) then to whom should I ask for issue assignment

Right, no worries. (Now I learnt a word in Indian)

So, my recommendation is just work on a task. Assignment is just a formality. You can simply work on the issue and open an PR, and that's it :)

Okay Bhaiya Thank you so much 😃

[danielmarcano]

Hi, @ovflowd and @bmuenzenmeyer, hope you are doing great. I have completed the development of this component in this PR.

Please let me know if you have any questions, or if there's any modifications that need to be made.

Thank you, and have a great weekend!