creating story for cancel button

[rohiiittttt]

Explanation

• This PR is a part of Replace deprecated Button component with new Button component #18896
• created story for cancel button and replaced deprecated button component

Screenshots/Screencaps

Manual Testing Steps

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[garrettbear]

Thanks for helping out @rohiiittttt

Our old Button is not a 1 to 1 transition to the new Button. I've made a few comments on changes to closely align.

But upon looking at this and with the recommended changes, there still might be some concerns about the font size of our new button when next to an old button.

Before

After

This will begin to make this PR a bit larger since now the Primary buttons paired next to the CancelButton also need to be updated to the latest version.

With that being all said, you are still welcome to add the cancel-button.stories.js file and undo any changes to cancel-button.js

[garrettbear]

This needs to be a boolean, not a string

Suggested change

	detailsModal: 'true',
	detailsModal: true,

[garrettbear]

The new Button component is not a 1 to 1 transition from the old one. Instead of using type, it now uses variant. Need to use BUTTON_VARIANT to change the variant of this Button.

Suggested change

	import { Button } from '../../component-library';
	import { Button, BUTTON_VARIANT } from '../../component-library';

Then for the actual Button you will need to change
type="secondary" to variant={BUTTON_VARIANT.SECONDARY}

[rohiiittttt]

@garrettbear i have made the changes please check..

[georgewrmarshall]

Hey @rohiiittttt, thanks for your contribution but in this case updating the component here effects other UI so I'm reverting those changes and keeping the story. I think updating this components deprecated components should update the transaction details as well.

[codecov]

Codecov Report

Merging #19566 (8a8b8e6) into develop (f77b1f6) will decrease coverage by 0.01%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop   #19566      +/-   ##
===========================================
- Coverage    70.29%   70.28%   -0.01%     
===========================================
  Files          973      973              
  Lines        37250    37250              
  Branches      9603     9603              
===========================================
- Hits         26183    26181       -2     
- Misses       11067    11069       +2     

see 2 files with indirect coverage changes