Introduce Checkout Form skeleton and Checkout Form Step Component

assets/css/abstracts/_colors.scss

@@ -43,3 +43,9 @@ $notice-yellow: #ffb900;
 $error-red: #d94f4f;
 $box-shadow-blue: #5b9dd9;
 $core-orange: #ca4a1f;
+
+// @todo: replace those colors with the correct values once we settle on a design system palette.
+$gray-10: #c3c4c7;
+$gray-20: #a7aaad;
+$gray-60: #50575e;
+$gray-80: #2c3338;

assets/js/base/components/checkout/form-step/index.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Label from '../../label';
+import './style.scss';
+
+const StepNumber = ( { stepNumber } ) => {
+	return (
+		<div className="wc-components-checkout-step__number">
+			<Label
+				label={ stepNumber }
+				screenReaderLabel={ sprintf(
+					__(
+						// translators: %s is a step number (1, 2, 3...)
+						'Step %s',
+						'woo-gutenberg-products-block'
+					),
+					stepNumber
+				) }
+			/>
+		</div>
+	);
+};
+
+const StepHeading = ( { title, stepHeadingContent } ) => (
+	<div className="wc-components-checkout-step__heading">
+		<h4 className="wc-components-checkout-step__title">{ title }</h4>
+		<span className="wc-components-checkout-step__heading-content">
+			{ stepHeadingContent }
+		</span>
+	</div>
+);
+
+const FormStep = ( {
+	id,
+	className,
+	stepNumber,
+	title,
+	description,
+	children,
+	stepHeadingContent = () => null,
+} ) => {
+	return (
+		<div
+			className={ classnames( className, 'wc-components-checkout-step' ) }
+			id={ id }
+		>
+			<StepNumber stepNumber={ stepNumber } />
+			<StepHeading
+				title={ title }
+				stepHeadingContent={ stepHeadingContent() }
+			/>
+			<span className="wc-components-checkout-step__description">
+				{ description }
+			</span>
+			<div className="wc-components-checkout-step__content">
+				{ children }
+			</div>
+		</div>
+	);
+};
+
+FormStep.propTypes = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	stepNumber: PropTypes.number,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	children: PropTypes.node,
+	stepHeadingContent: PropTypes.func,
+};
+
+export default FormStep;

assets/js/base/components/checkout/form-step/style.scss

@@ -0,0 +1,77 @@
+$circle-size: 24px;
+$line-offset-from-circle-size: 8px;
+
+.wc-components-checkout-step {
+	position: relative;
+	padding-left: $gap-large;
+	padding-bottom: $gap-larger;
+
+	&:last-child::before {
+		content: none;
+	}
+}
+
+.wc-components-checkout-step__heading {
+	display: flex;
+	justify-content: space-between;
+	align-content: center;
+	flex-wrap: wrap;
+	margin-bottom: $gap-smaller;
+}
+
+// @todo: remove the parent class once we dial the specification down.
+.wc-components-checkout-step__heading .wc-components-checkout-step__title {
+	font-size: 16px;
+	line-height: 24px;
+	color: $gray-80;
+	font-weight: 400;
+	margin: 0 $gap-small 0 0;
+}
+
+// @todo: remove the parent class once we dial the specification down.
+.wc-components-checkout-step .wc-components-checkout-step__heading-content {
+	font-size: 12px;
+	line-height: 24px;
+	color: $gray-80;
+
+	a {
+		font-weight: bold;
+		color: $gray-80;
+	}
+}
+.wc-components-checkout-step__description {
+	font-size: 14px;
+	line-height: 20px;
+	color: $gray-60;
+	// @todo: delete this after we remove placeholders
+	display: block;
+	margin-bottom: $gap-large;
+}
+
+.wc-components-checkout-step__number {
+	position: absolute;
+	width: $circle-size;
+	height: $circle-size;
+	left: -$circle-size / 2;
+	top: 0;
+	background: $gray-20;
+	color: $white;
+	font-size: 14px;
+	line-height: $circle-size;
+	text-align: center;
+	border-radius: $circle-size / 2;
+	box-sizing: content-box;
+}
+
+// because themes can register different background colors, we can't always
+// relay on using white border to offest the step left line,
+.wc-components-checkout-step::before {
+	content: "";
+	// 1 Circle size + offset of the first circle and next circle.
+	height: calc(100% - #{$circle-size + $line-offset-from-circle-size * 2});
+	width: 1px;
+	background-color: $gray-10;
+	position: absolute;
+	left: 0;
+	top: $circle-size + $line-offset-from-circle-size;
+}

assets/js/base/components/checkout/form/index.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const CheckoutForm = ( { className, children } ) => {
+	return (
+		<form
+			className={ classnames( 'wc-components-checkout-form', className ) }
+		>
+			{ children }
+		</form>
+	);
+};
+
+CheckoutForm.propTypes = {
+	className: PropTypes.string,
+	children: PropTypes.node,
+};
+
+export default CheckoutForm;

assets/js/base/components/checkout/form/style.scss

@@ -0,0 +1,14 @@
+.wc-components-checkout-form {
+	margin-left: $gap-large;
+	margin-right: $gap-large;
+	width: $content-width;
+	max-width: 100%;
+}
+
+// Responsive media styles.
+@include breakpoint( "<480px" ) {
+	.wc-components-checkout-form {
+		margin-left: $gap-smaller;
+		margin-right: $gap;
+	}
+}

assets/js/blocks/cart-checkout/checkout/block.js

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { Placeholder } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import FormStep from '@woocommerce/base-components/checkout/form-step';
+import CheckoutForm from '@woocommerce/base-components/checkout/form';
 
 /**
  * Internal dependencies
@@ -13,7 +17,76 @@ import './style.scss';
  */
 const Block = () => {
 	return (
-		<Placeholder>Checkout block coming soon to store near you</Placeholder>
+		<CheckoutForm>
+			<FormStep
+				id="billing-fields"
+				className="wc-blocks-checkout__billing-fields"
+				title={ __(
+					'Contact information',
+					'woo-gutenberg-products-block'
+				) }
+				description={ __(
+					"We'll use this email to send you details and updates about your order.",
+					'woo-gutenberg-products-block'
+				) }
+				stepNumber={ 1 }
+				stepHeadingContent={ () => (
+					<Fragment>
+						{ __(
+							'Already have an account? ',
+							'woo-gutenberg-products-block'
+						) }
+						<a href="/wp-login.php">
+							{ __( 'Log in.', 'woo-gutenberg-products-block' ) }
+						</a>
+					</Fragment>
+				) }
+			>
+				<Placeholder>A checkout step, coming soon near you</Placeholder>
+			</FormStep>
+			<FormStep
+				id="shipping-fields"
+				className="wc-blocks-checkout__shipping-fields"
+				title={ __(
+					'Shipping address',
+					'woo-gutenberg-products-block'
+				) }
+				description={ __(
+					'Enter the physical address where you want us to deliver your order.',
+					'woo-gutenberg-products-block'
+				) }
+				stepNumber={ 2 }
+			>
+				<Placeholder>A checkout step, coming soon near you</Placeholder>
+			</FormStep>
+			<FormStep
+				id="shipping-methods"
+				className="wc-blocks-checkout__shipping-methods"
+				title={ __(
+					'Shipping options',
+					'woo-gutenberg-products-block'
+				) }
+				description={ __(
+					'Select your shipping method below.',
+					'woo-gutenberg-products-block'
+				) }
+				stepNumber={ 3 }
+			>
+				<Placeholder>A checkout step, coming soon near you</Placeholder>
+			</FormStep>
+			<FormStep
+				id="payment-fields"
+				className="wc-blocks-checkout__payment-fields"
+				title={ __( 'Payment method', 'woo-gutenberg-products-block' ) }
+				description={ __(
+					'Select a payment method below.',
+					'woo-gutenberg-products-block'
+				) }
+				stepNumber={ 4 }
+			>
+				<Placeholder>A checkout step, coming soon near you</Placeholder>
+			</FormStep>
+		</CheckoutForm>
 	);
 };
 

assets/js/blocks/cart-checkout/checkout/edit.js

@@ -7,6 +7,7 @@ import { Disabled } from '@wordpress/components';
  * Internal dependencies
  */
 import Block from './block.js';
+import './editor.scss';
 
 const Edit = ( { attributes } ) => {
 	const { className } = attributes;

assets/js/blocks/cart-checkout/checkout/editor.scss

@@ -0,0 +1,5 @@
+.editor-styles-wrapper .wp-block h4.wc-components-checkout-step__title {
+	font-size: 16px;
+	line-height: 24px;
+	margin: 0 $gap-small 0 0;
+}

assets/js/blocks/cart-checkout/checkout/index.js

@@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import edit from './edit';
 import { example } from './example';
+import './editor.scss';
 
 registerBlockType( 'woocommerce/checkout', {
 	title: __( 'Checkout', 'woo-gutenberg-products-block' ),