fix(collective-page): add hover tooltip to collective names displayed in hero header

[simonv3]

adds a component that shows a tooltip and truncates the name of a collective if its more than x
amount of characters, used to prevent collective names from showing as too long in the header of the
hero page

Happy to add tests to this, just wanted to get a directional "okay" first.

Resolve opencollective/opencollective#4495

Screenshots

[vercel]

@simonv3 is attempting to deploy a commit to the Open Collective Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

opencollective-styleguide – ./

🔍 Inspect: https://vercel.com/opencollective/opencollective-styleguide/9BsCE5KNmpik3gk9aP8wnaYJtHU7
✅ Preview: https://opencollective-styleguide-git-fork-simonv-699324-opencollective.vercel.app

opencollective-frontend – ./

🔍 Inspect: https://vercel.com/opencollective/opencollective-frontend/P8CfdZgriADvYki6tWnQ6tMyaxXB
✅ Preview: https://opencollective-frontend-git-fork-simonv3-b54e4a-opencollective.vercel.app

[SudharakaP]

@simonv3 : Thanks much for the PR. I've added some comments.

@Betree : Could you take a look as well on this please. Thanks. 🙂

[simonv3]

Wanted to set-up a unit test for the Hero component that would have caught the above errors, but it looks like there's some issues with dynamicImports and Jest (eg vercel/next.js#24566). Fixing that feels like it's beyond the scope of this?

[SudharakaP]

@simonv3 : Thanks much for the changes and sorry for taking time on this. Some of our core members are on vacation so we are a bit short staffed.

Now I tested this PR and it seems that the tool-tip is appearing twice. Think there is two tool tips, one which is the default HTML tool-tip and the one you added. We need only one tool-tip; the user should ideally see the one you added and not the default tool-tip. 😉

[SudharakaP]

Wanted to set-up a unit test for the Hero component that would have caught the above errors, but it looks like there's some issues with dynamicImports and Jest (eg vercel/next.js#24566). Fixing that feels like it's beyond the scope of this?

Yes, I don't think we have to do that here, maybe we can wait a bit as there's a fix for this in next; vercel/next.js#24751 which will probably take effect in some future release. Or we can also add a small E2E test for this at 04-collective.test.js. Let us wait for some feedback from @Betree. 🤔

@Betree : WDYT?

[Betree]

Wanted to set-up a unit test for the Hero component that would have caught the above errors, but it looks like there's some issues with dynamicImports and Jest (eg vercel/next.js#24566). Fixing that feels like it's beyond the scope of this?

Yes, I don't think we have to do that here, maybe we can wait a bit as there's a fix for this in next; vercel/next.js#24751 which will probably take effect in some future release. Or we can also add a small E2E test for this at 04-collective.test.js. Let us wait for some feedback from @Betree. thinking

@Betree : WDYT?

Yes, having a test in the Hero section of

opencollective-frontend/test/cypress/integration/04-collective.test.js

Line 44 in 249ee7d

describe('Hero', () => {

seems more appropriate.

[simonv3]

Hey all, I'm sorry about the slow response - work picked up again and I likely won't have the time to get back to this.

[SudharakaP]

Hey all, I'm sorry about the slow response - work picked up again and I likely won't have the time to get back to this.

No worries; thanks for your work. I'll complete the remaining part of this. 😉

[SudharakaP]

@Betree : I've corrected the double tooltip problem I mentioned before; #6678 (review). Therefore I think this is all good to review and merge if you are okay. let me know. 👍🏽

[SudharakaP]

@Betree : Thanks for the reviews. I've corrected the things you mentioned. Let me know if you see any further issues. 👍🏽

[Betree]

The code looks good