diff --git a/packages/wp-checkout/package.json b/packages/wp-checkout/package.json
index 56064a63af25e..6a0d74dff9776 100644
--- a/packages/wp-checkout/package.json
+++ b/packages/wp-checkout/package.json
@@ -33,6 +33,7 @@
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.10.2",
- "react-dom": "^16.10.2"
+ "react-dom": "^16.10.2",
+ "styled-components": "^4.4.0"
}
}
diff --git a/packages/wp-checkout/public/index.html b/packages/wp-checkout/public/index.html
index b5ce0d7e9d97e..0e251b5ce6a9f 100644
--- a/packages/wp-checkout/public/index.html
+++ b/packages/wp-checkout/public/index.html
@@ -4,6 +4,16 @@
Checkout Sample
+
diff --git a/packages/wp-checkout/src/components/basics.js b/packages/wp-checkout/src/components/basics.js
new file mode 100644
index 0000000000000..8c9154f37e988
--- /dev/null
+++ b/packages/wp-checkout/src/components/basics.js
@@ -0,0 +1,42 @@
+/* @format */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+
+export const Container = styled.div`
+ @media (${props => props.theme.breakpoints.tabletUp}) {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ max-width: 910px;
+ margin: 0 auto;
+ }
+`;
+
+const Column = styled.div`
+ background: ${props => props.theme.colours.white};
+ padding: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ @media (${props => props.theme.breakpoints.tabletUp}) {
+ border: 1px solid ${props => props.theme.colours.gray5};
+ margin-top: 32px;
+ box-sizing: border-box;
+ padding: 24px;
+ }
+`;
+
+export const LeftColumn = styled(Column)`
+ @media (${props => props.theme.breakpoints.tabletUp}) {
+ max-width: 532px;
+ }
+`;
+
+export const PageTitle = styled.h1`
+ margin: 0;
+ font-weight: normal;
+ font-size: 24px;
+ color: ${props => props.theme.colours.black};
+`;
diff --git a/packages/wp-checkout/src/components/checkout.js b/packages/wp-checkout/src/components/checkout.js
index 66468b874742a..5102150b2af11 100644
--- a/packages/wp-checkout/src/components/checkout.js
+++ b/packages/wp-checkout/src/components/checkout.js
@@ -5,17 +5,20 @@
*/
import React, { useState } from 'react';
import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
/**
* Internal dependencies
*/
import joinClasses from '../lib/join-classes';
import localizeFactory, { useLocalize } from '../lib/localize';
+import { Container, LeftColumn, PageTitle } from './basics';
import { CheckoutProvider } from './checkout-context';
import CheckoutStep from './checkout-step';
import CheckoutPaymentMethods from './checkout-payment-methods';
+import theme from '../theme';
-export default function Checkout( {
+export default function Checkout({
locale,
items,
total,
@@ -32,25 +35,31 @@ export default function Checkout( {
orderReviewTOS,
orderReviewFeatures,
className,
-} ) {
- const localize = localizeFactory( locale );
- const [ stepNumber, setStepNumber ] = useState( 1 );
- const [ paymentMethod, setPaymentMethod ] = useState( 'apple-pay' );
+}) {
+ const localize = localizeFactory(locale);
+ const [stepNumber, setStepNumber] = useState(1);
+ const [paymentMethod, setPaymentMethod] = useState('apple-pay');
return (
-
-
- { checkoutHeader ||
{ localize( 'Complete your purchase' ) }
}
-
- { upSell && { upSell }
}
-
-
+
+
+
+
+
+ {checkoutHeader ||
{localize('Complete your purchase')}}
+
{upSell}
}
+
+
+
+
);
}
@@ -60,7 +69,7 @@ Checkout.propTypes = {
items: PropTypes.array.isRequired,
total: PropTypes.object.isRequired,
onChangeBillingContact: PropTypes.func,
- availablePaymentMethods: PropTypes.arrayOf( PropTypes.string ),
+ availablePaymentMethods: PropTypes.arrayOf(PropTypes.string),
onSuccess: PropTypes.func.isRequired,
onFailure: PropTypes.func.isRequired,
successRedirectUrl: PropTypes.string.isRequired,
@@ -73,41 +82,37 @@ Checkout.propTypes = {
orderReviewFeatures: PropTypes.element,
};
-function PaymentMethodsStep( {
+function PaymentMethodsStep({
setStepNumber,
collapsed,
availablePaymentMethods,
setPaymentMethod,
paymentMethod,
-} ) {
+}) {
const localize = useLocalize();
// We must always display both the expanded and the collapsed version to keep
// their data available, using CSS to hide whichever is relevant.
return (
-
+
setStepNumber( 1 ) }
+ collapsed={!collapsed}
+ stepNumber={1}
+ title={localize('Payment method')}
+ onEdit={() => setStepNumber(1)}
>
diff --git a/packages/wp-checkout/src/theme.js b/packages/wp-checkout/src/theme.js
new file mode 100644
index 0000000000000..80942dd07330b
--- /dev/null
+++ b/packages/wp-checkout/src/theme.js
@@ -0,0 +1,32 @@
+/* @format */
+
+const theme = {
+ colours: {
+ blue5: '#BEDAE6',
+ blue40: '#187AA2',
+ blue80: '#002C40',
+ gray0: '#F6F7F7',
+ gray5: '#DCDCDE',
+ gray10: '#C3C4C7',
+ gray20: '#A7AAAD',
+ gray30: '#8E9196',
+ gray50: '#646970',
+ gray80: '#2C3338',
+ pink70: '#8C1749',
+ green50: '#008A20',
+ red50: '#D63638',
+ red0: '#F7EBEC',
+ highlight: '#006088',
+ background: '#F6F7F7',
+ primary: '#C9356E',
+ white: '#FFF',
+ black: '#000',
+ paypalGold: '#F0C443',
+ paypalGoldHover: '#FFB900',
+ },
+ breakpoints: {
+ tabletUp: 'min-width: 700px',
+ },
+};
+
+export default theme;