feat: add external and download icons to links automatically #639
Conversation
✅ Deploy Preview for idrc ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Thanks Ned, this looks great. I found an issue with Communications Access project, where there was an extra link that caused the download icon to appear twice, so I made fix in my branch: https://github.com/chosww/idrc/tree/feat/link-styling-improvements. |
src/assets/styles/base/_base.scss
Outdated
| svg { | ||
| display: inline-block; | ||
| margin-left: 0.25em; | ||
| margin-right: 0.25em; |
There was a problem hiding this comment.
With updated focus style, it looks little off to have margin on the svg:
As shown in the image, the link has no space to the left but has some space to the right because of the margin. I am thinking, could we remove the margin on SVG, and make the wrapper to handle the gap? Here's an example:
a[rel='external'] {
display: inline-flex;
flex-direction: row;
gap: 0.1rem;
}
There was a problem hiding this comment.
That's a good call, @chosww — I will try that. Thanks!
|
I noticed that we need to apply updated focus/hover style to the IDRC logo on the footer as well. |
Actually, now I wonder. Was the style changes in the footer intended for the scope of this work? I found some focus style issue for the nav bar, so I am going to open a new issue for that and maybe we can include footer focus/hover work with the new issue. I approve the changes you made for the external link and download icons. |
npm run testwithout errorsnpm run buildwithout errorsDescription
Adds download and external link icons automatically.
Steps to test
Expected behavior: Links to downloadable files are preceded by download icons, and links to external pages are followed by external link icons.
Additional information
Not applicable.
Related issues
Not applicable.