feat(CoachmarkOverlayElements): Add next/back callbacks and currentStep properties

[gcattan]

Closes #5596

This PR:

• Adds callbacks when clicking on Next and Previous buttons.
• Allows to set the current progression.

What did you change?

Add three optional properties to CoachmarkOverlayElements:

• onNextCallback
• onBackCallback
• currentStep

How did you test and verify your work?

I modified the story book as follows:

Then manually checked that:

• next and back callbacks correctly logged into the console
• the progression was correctly set.

[netlify]

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	bcb73e6
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/675afb88475872000849897d
😎 Deploy Preview	https://deploy-preview-6548--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	bcb73e6
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/675afb882ccd0900081ff07f
😎 Deploy Preview	https://deploy-preview-6548--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 88.88889% with 1 line in your changes missing coverage. Please review.

Project coverage is 80.05%. Comparing base (f432ae4) to head (bcb73e6).
Report is 17 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6548      +/-   ##
==========================================
+ Coverage   79.91%   80.05%   +0.13%     
==========================================
  Files         394      394              
  Lines       12888    12907      +19     
  Branches     4267     4277      +10     
==========================================
+ Hits        10300    10333      +33     
+ Misses       2588     2574      -14     

Components	Coverage Δ
ibm-products	∅ <ø> (∅)
ibm-products-web-components	∅ <ø> (∅)

[gcattan]

@AlexanderMelox CI looks good. But I still cannot access the logs of percy. Can you help with this issue?

[AlexanderMelox]

@AlexanderMelox CI looks good. But I still cannot access the logs of percy. Can you help with this issue?

I just got access to Percy so i can approve now

[gcattan]

Thanks @AlexanderMelox!

[gcattan]

@AlexanderMelox Following our suggestion and summarizing here ou exchange on slack:

• I renamed the callbacks to onNext and onBack
• Added a test for the onNext.

However, testing the onBack is a bit more complicated as it is only showing when scrollPercent > 0, but this value never changes in testing (not sure why though).

Anyway, this helped me fix a bug with the scroll position not being correct (the position of the carrousel was not correctly updated).

[AlexanderMelox]

As mentioned on a slack DM, we will have the c4p team add this one in, its a bit more complicated

[AlexanderMelox]

@AlexanderMelox Following our suggestion and summarizing here ou exchange on slack:

• I renamed the callbacks to onNext and onBack
• Added a test for the onNext.

However, testing the onBack is a bit more complicated as it is only showing when scrollPercent > 0, but this value never changes in testing (not sure why though).

Anyway, this helped me fix a bug with the scroll position not being correct (the position of the carrousel was not correctly updated).

Jest doesn't really update css styles in testing so thats why it can be a little tricky to test scrolling and such, but we can handle it from now on