PFE-7 Update component links

[Joelhagg]

Update the link component for payex design guide as new ux figma design

Case PFE-7 in jira

Description

This PR will include an update to the Link component and its colors. The issue and its fix was that colors when hovering on the "bright color" mode on the link turned green.

Motivation and Context

How Has This Been Tested?

Test passed:

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have updated the CHANGELOG document.
• I have added tests to cover my changes.
• All new and existing tests passed.

Review instructions

Review instructions

[CLAassistant]

All committers have signed the CLA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (504e9d7) 72.30% compared to head (d2f3bad) 72.30%.
Report is 3 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #934   +/-   ##
========================================
  Coverage    72.30%   72.30%           
========================================
  Files          212      212           
  Lines         4586     4586           
  Branches      1306     1306           
========================================
  Hits          3316     3316           
  Misses        1126     1126           
  Partials       144      144           

Files	Coverage Δ
src/App/Home/constants.js	100.00% <ø> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b148903...d2f3bad. Read the comment docs.

[github-actions]

Size Change: +228 B (0%)

Total Size: 1.12 MB

Filename	Size	Change
dist/designguide/styles/payex.css	44.5 kB	+101 B (0%)
dist/styles/payex.css	44.5 kB	+101 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
dist/designguide/scripts/dg-dashboard.js	72.9 kB	0 B
dist/designguide/scripts/dg.js	24.7 kB	0 B
dist/designguide/styles/documentation-payex.css	9.91 kB	+13 B (0%)
dist/designguide/styles/documentation-swedbankpay.css	8.98 kB	0 B
dist/designguide/styles/swedbankpay.css	42.3 kB	0 B
dist/scripts/9438.js	71.8 kB	0 B
dist/scripts/dg-dashboard.js	72.9 kB	0 B
dist/scripts/dg.js	24.7 kB	0 B
dist/scripts/payex.js	322 kB	0 B
dist/scripts/swedbankpay.js	322 kB	0 B
dist/styles/documentation-payex.css	9.91 kB	+13 B (0%)
dist/styles/documentation-swedbankpay.css	8.98 kB	0 B
dist/styles/swedbankpay.css	42.3 kB	0 B

_{compressed-size-action}

[goldenraphti]

@Joelhagg Thanks a lot for your contribution !!! 🌟 🚀
It seems great 👍

1 question & 1 suggestion:

• there is no visual feedback anymore when user hovers the link on non-bright color alternative (beside cursor switching to a pointer). Is that the intended result?
• suggestion: could you replace the "LESS variables" you've introduced with CSS custom properties? The idea is to slowly migrate to it, and hopefully one day leave preprocessors behind 😅 . Variables for PayEx are there: "src/less/variables-payex.less" They should pretty much all exist in both LESS and pure CSS variables I think 😉 I'm not saying to also change the ones you haven't touched, just the ones you're introducing 😉 For the future tickets you'll be puching (which I hope they'll be plenty 🤩 ) it's only a rule if it's not meaning creating new CSS custom properties & not too complicated (e.g. in some places some LESS variables are fed to LESS functions to iterate over a list of colors. Then nevermind, use as is and I'll migrate them myself in a dedicated effort )

Thanks again for your time ! 💫

[Joelhagg]

1 question & 1 suggestion:

• there is no visual feedback anymore when user hovers the link on non-bright color alternative (beside cursor switching to a pointer). Is that the intended result?

I made som changes after the UX Design in Figma was updated and you were right about the hover state!

• suggestion: could you replace the "LESS variables" you've introduced with CSS custom properties? The idea is to slowly migrate to it, and hopefully one day leave preprocessors behind 😅 . Variables for PayEx are there: "src/less/variables-payex.less" They should pretty much all exist in both LESS and pure CSS variables I think 😉 I'm not saying to also change the ones you haven't touched, just the ones you're introducing 😉 For the future tickets you'll be puching (which I hope they'll be plenty 🤩 ) it's only a rule if it's not meaning creating new CSS custom properties & not too complicated (e.g. in some places some LESS variables are fed to LESS functions to iterate over a list of colors. Then nevermind, use as is and I'll migrate them myself in a dedicated effort )

I accepted your review changes and made some new updates so that it uses CSS Custom property's
Also added 2 new color variables

[WMeander]

@Joelhagg Looks good, might add padding in focus state to the sides:

[Joelhagg]

@WMeander

Will do in future case 👌

[goldenraphti]

I'll merge it once SWED-2276 gets approved and merged (hopefully today 😉) 👍