Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add storybook for CardField components #432

Merged
merged 20 commits into from
Apr 30, 2024
Merged

Conversation

sebastianfdz
Copy link
Contributor

@sebastianfdz sebastianfdz commented Apr 23, 2024

Add PayPalCardFields Components Story in Storybook

This PR includes the following Storybook items:

  • PayPalCardFieldsForm
  • Individual Components
    • PayPalNameField
    • PayPalNumberField
    • PayPalExpiryField
    • PayPalCVVField
  • PayPalCardFieldsProvider
  • usePayPalCardFields

We include the following for each Story:

  • High level description of each individual component
  • Example code for merchants to utilize
  • Code sandbox running example code
  • Props needed for the component
  • The relevant types for the component

Note: Client-id being used in example code is not test since test is not set up for ACDC.

Implemented code
image

Source code

image

Props and types

image

@sebastianfdz sebastianfdz marked this pull request as ready for review April 24, 2024 18:10
@sebastianfdz sebastianfdz requested a review from a team as a code owner April 24, 2024 18:10
@sebastianfdz sebastianfdz changed the title docs: wip add storybook for form component docs: add storybook for form component Apr 24, 2024
@mchoun
Copy link
Contributor

mchoun commented Apr 24, 2024

We should make sure the code sample can be copy and pasted by the developer.

@mchoun mchoun changed the title docs: add storybook for form component docs: add storybook for CardField components Apr 29, 2024
Copy link
Contributor

@elizabethmv elizabethmv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good so far! There is some clean up needed on the warnings and I added some changes for a few areas to fix on naming.

I think one other main area that needs addressing is to remove clientToken any of these new stories in the PR. It shouldn't be needed for card fields- and could clean up/delete a lot of code

src/stories/payPalCardFields/code.ts Outdated Show resolved Hide resolved
src/stories/payPalCardFields/code.ts Outdated Show resolved Hide resolved
src/stories/payPalCardFields/code.ts Outdated Show resolved Hide resolved
@wallportillo
Copy link

@sebastianfdz and @mchoun could the positioning of the PayPalCardFields component be placed at the top in front of PayPalHostedFields? I would like Card Fields to be found first.

@sebastianfdz sebastianfdz force-pushed the docs/add-storybook-for-form branch 2 times, most recently from 3ff2fe9 to 20b798b Compare April 29, 2024 20:15
sebastianfdz and others added 10 commits April 29, 2024 14:18
Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
…es.tsx

Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
….stories.tsx

Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
….stories.tsx

Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
…es.tsx

Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
Co-authored-by: elizabethmv <40329316+elizabethmv@users.noreply.github.com>
@sebastianfdz
Copy link
Contributor Author

@sebastianfdz and @mchoun could the positioning of the PayPalCardFields component be placed at the top in front of PayPalHostedFields? I would like Card Fields to be found first.

Great call!

@mchoun mchoun merged commit 066a63e into main Apr 30, 2024
2 checks passed
@mchoun mchoun deleted the docs/add-storybook-for-form branch April 30, 2024 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants