diff --git a/assets/css/abstracts/_colors.scss b/assets/css/abstracts/_colors.scss index 870bf6ac161..e8115fc6b0a 100644 --- a/assets/css/abstracts/_colors.scss +++ b/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; diff --git a/assets/js/base/components/checkout/form-step/index.js b/assets/js/base/components/checkout/form-step/index.js new file mode 100644 index 00000000000..0345e2787f4 --- /dev/null +++ b/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 ( +
+
+ ); +}; + +const StepHeading = ( { title, stepHeadingContent } ) => ( +
+

{ title }

+ + { stepHeadingContent } + +
+); + +const FormStep = ( { + id, + className, + stepNumber, + title, + description, + children, + stepHeadingContent = () => null, +} ) => { + return ( +
+ + + + { description } + +
+ { children } +
+
+ ); +}; + +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; diff --git a/assets/js/base/components/checkout/form-step/style.scss b/assets/js/base/components/checkout/form-step/style.scss new file mode 100644 index 00000000000..ec3727741b7 --- /dev/null +++ b/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; +} diff --git a/assets/js/base/components/checkout/form/index.js b/assets/js/base/components/checkout/form/index.js new file mode 100644 index 00000000000..69555b860b3 --- /dev/null +++ b/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 ( +
+ { children } +
+ ); +}; + +CheckoutForm.propTypes = { + className: PropTypes.string, + children: PropTypes.node, +}; + +export default CheckoutForm; diff --git a/assets/js/base/components/checkout/form/style.scss b/assets/js/base/components/checkout/form/style.scss new file mode 100644 index 00000000000..4c192367b98 --- /dev/null +++ b/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; + } +} diff --git a/assets/js/blocks/cart-checkout/checkout/block.js b/assets/js/blocks/cart-checkout/checkout/block.js index e4eaed3f9fd..882cfc319aa 100644 --- a/assets/js/blocks/cart-checkout/checkout/block.js +++ b/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 ( - Checkout block coming soon to store near you + + ( + + { __( + 'Already have an account? ', + 'woo-gutenberg-products-block' + ) } + + { __( 'Log in.', 'woo-gutenberg-products-block' ) } + + + ) } + > + A checkout step, coming soon near you + + + A checkout step, coming soon near you + + + A checkout step, coming soon near you + + + A checkout step, coming soon near you + + ); }; diff --git a/assets/js/blocks/cart-checkout/checkout/edit.js b/assets/js/blocks/cart-checkout/checkout/edit.js index a618e6009b9..ba70ef66276 100644 --- a/assets/js/blocks/cart-checkout/checkout/edit.js +++ b/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; diff --git a/assets/js/blocks/cart-checkout/checkout/editor.scss b/assets/js/blocks/cart-checkout/checkout/editor.scss new file mode 100644 index 00000000000..cccd4133194 --- /dev/null +++ b/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; +} diff --git a/assets/js/blocks/cart-checkout/checkout/index.js b/assets/js/blocks/cart-checkout/checkout/index.js index 5c25583ffce..ec44c7c9583 100644 --- a/assets/js/blocks/cart-checkout/checkout/index.js +++ b/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' ),