[ic-navigation-button]: Add `router-item` slot
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
Provide a slot to allow third party routing components (i.e. Link, NavLink) to be integrated into `ic-navigation-button`
## 💬 Description
At the moment, it is not possible to pass through a third party routing component into `ic-navigation-button`. A situation where this would be useful is if there is a custom top navigation element and there is a requirement to have an icon button which goes to an internal page.
## 💰 User value
This would allow a `ic-navigation-button` go to internal pages set up by third party routing tools like React router.
## 📚 User Stories
If relevant, describe the high-level functionality as user stories.
*As an* ICDS user:
*I need to able to use a third party routing component which returns a hyperlink styled as a default/icon button*
*So that I have flexibility to how hyperlinks appear and it is still accessible and read out correctly by screen readers*
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given that I have a button styled hyperlink in the top right*
*When I click on the hyperlink*
*Then I'm taken to an different internal page*
*Given that I have a slotted third party routing component such as NavLink into `ic-navigation-button`*
*When it renders on the page*
*Then the hyperlink will wrap around the icon*
*Given that the Link or NavLink is slotted into `ic-navigation-button`*
*When I click on the link*
*Then the icon should stay as the default icon colour and not change to the :visited colour*
## ✏ Designs
N/A
## 🧾 Guidance
Would be good to see an example of this on the guidance site once built.
## Additional info
N/A
Contributor guide
Research direction
Start with the ic-navigation-button component and inspect how its current content and icon are rendered. Add the router-item slot so a Link or NavLink can wrap the icon, then verify that navigation works, the default icon colour is retained, and the guidance site includes an example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100