Introduce Checkout Form skeleton and Checkout Form Step Component

[senadir]

This PR introduces the checkout form step component that handles showing and building steps.

Closes #1328

Things that are left to do:

• Add PropTypes.
• Change colors to variables.

Inspirations:
composite-checkout/checkout-step

Screenshots

Editor: StoreFront

Frontend: StoreFront

Editor: TwentyTwenty

Frontend: TwentyTwenty

Frontend: StoreFront - Mobile

Frontend: TwentyTwenty - Mobile

[nerrad]

This is looking good so far. I do have a question about <SecondaryAction/> and how that will be used and there's the outstanding question about colors that we've discussed in slack.

[nerrad]

@Aljullu Should we be following the Component naming and schema more closely with the Figma design?

For example, the base component for the steps is: TimelineEvents (https://www.figma.com/file/Pfw5Qa1UOw03RiJere3Wlo/Automattic-Components?node-id=3182%3A1442)

[senadir]

@nerrad Naming is inherited from the Automattic Component library but it’s not relevant to this component since it’s heavily modified to resample a checkout, I tried to follow the composite-checkout/checkout-step component naming.

[nerrad]

Let's include inspiration for components etc (including links) in the pull description as well as that helps with review and rationale.

[Aljullu]

Awesome, this is looking great @senadir! Some feedback/comments below.

[senadir]

I guess this is ready for a second review, we can always iterate on this in the future as long as we have a base for further PRs

[haszari]

Code looks good, I don't see any blockers there, have added some comments.

I tested with some responsive modes with Chrome & Safari, and also tested with Twenty Twenty as well as Storefront, and found some issues. Some of these are probably blockers, others could be handled as follow up.

• Step text is truncated on mobile, needs to wrap. I'm thinking we get this layout working reasonably on mobile now, but happy to defer that til we have more fleshed-out markup.
• Steps look a little strange in Twenty Twenty. Again, we could defer this but I think it's healthy to get the containers/layout functioning well in a range of environments now (default theme x mobile).

Paging @nerrad for thoughts on how to handle these - I'll leave the follow up/fix now decision in your hands :)

[nerrad]

I've commented on things that should be addressed inline with the code.

@haszari thanks for the cross browser/theme and viewport size testing. @senadir, I think we should address his observations in this pull. I realize that this will be part of a larger container in the finished copy but I think it's still important to get it working reasonably well in various mobile views now (in keeping with the design mockup) and also address any potential resets needed to ensure cross theme consistency.

[Aljullu]

Thanks for applying the changes @senadir, this is making good progress! I added a couple of comments more on top of what @haszari and @nerrad said.

[senadir]

Another round of review and another round of commits, I hopefully fixed all the mentioned issues and some compatibility issues, I also opened a PR to handle theme things for the future #1334

I also updated the screenshots to the current state, feel free to give them a look and do another round of review

[nerrad]

I double-checked against Safari, mobile views, StoreFront, Twenty Twenty, and Twenty Nineteen and it looks good! Let's