Add initial use of styled-components

Automattic · Oct 14, 2019 · 6a89656 · 6a89656
1 parent 67d8736
commit 6a89656
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 37 deletions.
diff --git 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
@@ -4,6 +4,16 @@
 <head>
 	<title>Checkout Sample</title>
 	<meta charset="UTF-8" />
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+			background: #F3F4F5;
+		}
+	</style>
 </head>
 
 <body>

diff --git a/packages/wp-checkout/src/components/basics.js 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
@@ -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 (
-		<CheckoutProvider paymentMethod={ paymentMethod } localize={ localize }>
-			<section className={ joinClasses( [ className, 'checkout' ] ) }>
-				<div>{ checkoutHeader || <h2>{ localize( 'Complete your purchase' ) }</h2> }</div>
-				<PaymentMethodsStep
-					availablePaymentMethods={ availablePaymentMethods }
-					setStepNumber={ setStepNumber }
-					collapsed={ stepNumber === 1 }
-					paymentMethod={ paymentMethod }
-					setPaymentMethod={ setPaymentMethod }
-				/>
-				{ upSell && <div>{ upSell }</div> }
-			</section>
-		</CheckoutProvider>
+		<ThemeProvider theme={theme}>
+			<CheckoutProvider paymentMethod={paymentMethod} localize={localize}>
+				<Container className={joinClasses([className, 'checkout'])}>
+					<LeftColumn>
+						<div>
+							{checkoutHeader || <PageTitle>{localize('Complete your purchase')}</PageTitle>}
+						</div>
+						<PaymentMethodsStep
+							availablePaymentMethods={availablePaymentMethods}
+							setStepNumber={setStepNumber}
+							collapsed={stepNumber === 1}
+							paymentMethod={paymentMethod}
+							setPaymentMethod={setPaymentMethod}
+						/>
+						{upSell && <div>{upSell}</div>}
+					</LeftColumn>
+				</Container>
+			</CheckoutProvider>
+		</ThemeProvider>
 	);
 }
 
@@ -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 (
 		<div>
-			<CheckoutStep
-				collapsed={ collapsed }
-				stepNumber={ 1 }
-				title={ localize( 'Pick a payment method' ) }
-			>
+			<CheckoutStep collapsed={collapsed} stepNumber={1} title={localize('Pick a payment method')}>
 				<CheckoutPaymentMethods
-					availablePaymentMethods={ availablePaymentMethods }
-					onChange={ setPaymentMethod }
-					paymentMethod={ paymentMethod }
+					availablePaymentMethods={availablePaymentMethods}
+					onChange={setPaymentMethod}
+					paymentMethod={paymentMethod}
 				/>
 			</CheckoutStep>
 			<CheckoutStep
-				collapsed={ ! collapsed }
-				stepNumber={ 1 }
-				title={ localize( 'Payment method' ) }
-				onEdit={ () => setStepNumber( 1 ) }
+				collapsed={!collapsed}
+				stepNumber={1}
+				title={localize('Payment method')}
+				onEdit={() => setStepNumber(1)}
 			>
 				<CheckoutPaymentMethods
 					collapsed
-					availablePaymentMethods={ availablePaymentMethods }
-					onChange={ setPaymentMethod }
-					paymentMethod={ paymentMethod }
+					availablePaymentMethods={availablePaymentMethods}
+					onChange={setPaymentMethod}
+					paymentMethod={paymentMethod}
 				/>
 			</CheckoutStep>
 		</div>

diff --git a/packages/wp-checkout/src/theme.js 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;