WooPayments payment method logos component

[timmy5685]

Description

Create shared components for the WooPayments payment method logos so they can be reused and are consistent across all places.

@elizaan36 has created 3 versions of the component: VLWDmeuIXQ7XAK4flyqTFO-fi-2196_11373

The "Expanded" component should be implemented in the following locations:

• Connect Page V1 - Located in Core (payments nav item)
  

• Connect Page V2 - Located in Core (Get paid task page)
  

• Connect Page V3 - Located in client
  

• Payments Settings Page Marketing Tile (requires WooPayments to be installed, but disabled)
  

The "Abbreviated 1" component should be implemented in the following location:

• Payments Settings Page (WooPayments not installed)
  

Acceptance criteria

• 3 variations of the shared component are created
• Pages specified above use their respective components

Designs

WooPayments payment method logos shared component variations: VLWDmeuIXQ7XAK4flyqTFO-fi-2196_11373

[timmy5685]

@elizaan36 - do you think we should wait to create the "Abbreviated 2" version until we have a place that it's needed?

@dmallory42 - will creating / not creating this version have a serious impact on the effort?

[dmallory42]

@dmallory42 - will creating / not creating this version have a serious impact on the effort?

Good question! I would say it may have a small impact on the effort, but I also think it probably saves time in the long run to think about all the possible variations of the component that we may need in future at this point. 🙂

also cc. @anu-rock as this issue probably needs to be on our radar soon!

[elizaan36]

Thanks for creating the issue, @timmy5685

do you think we should wait to create the "Abbreviated 2" version until we have a place that it's needed?

To clarify, it's one component with three variants. The thinking is that the appropriate variant is presented depending on the device size. So Expanded and Abbreviated 2 could appear in the same placement on Payments Connect depending on the viewport. Here's a mockup of Abbreviated 2 for Payments Connect on mobile.

I think abbreviated 2 would also need to be used for the Payments settings example, when WooPayments isn't installed.

I'm in the process of putting up a P2 with all of the details.

[anu-rock]

Update: The P2 that @elizaan36 mentioned above was published at paJDYF-dA0-p2.