Composite checkout: Update radio buttons (#37557)

Automattic · Nov 13, 2019 · f46b704 · f46b704
1 parent 23501ee
commit f46b704
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 14 deletions.
diff --git a/packages/composite-checkout/README.md b/packages/composite-checkout/README.md
@@ -403,7 +403,7 @@ Each payment method has the following schema:
 {
 	id: string,
 	LabelComponent: component,
-	PaymentMethodComponent: component,
+	PaymentMethodComponent: ?component,
 	BillingContactComponent: component,
 	SubmitButtonComponent: component,
 	CheckoutWrapper: ?component,

diff --git a/packages/composite-checkout/src/components/checkout-provider.js b/packages/composite-checkout/src/components/checkout-provider.js
@@ -111,7 +111,6 @@ function validatePaymentMethods( paymentMethods ) {
 function validatePaymentMethod( {
 	id,
 	LabelComponent,
-	PaymentMethodComponent,
 	BillingContactComponent,
 	SubmitButtonComponent,
 	SummaryComponent,
@@ -123,10 +122,6 @@ function validatePaymentMethod( {
 		BillingContactComponent,
 		`Invalid payment method '${ id }'; missing BillingContactComponent`
 	);
-	validateArg(
-		PaymentMethodComponent,
-		`Invalid payment method '${ id }'; missing PaymentMethodComponent`
-	);
 	validateArg(
 		SubmitButtonComponent,
 		`Invalid payment method '${ id }'; missing SubmitButtonComponent`

diff --git a/packages/composite-checkout/src/components/radio-button.js b/packages/composite-checkout/src/components/radio-button.js
@@ -16,6 +16,7 @@ export default function RadioButton( {
 	ariaLabel,
 } ) {
 	const [ isFocused, changeFocus ] = useState( false );
+
 	return (
 		<RadioButtonWrapper isFocused={ isFocused } checked={ checked }>
 			<Radio
@@ -37,7 +38,7 @@ export default function RadioButton( {
 			<Label checked={ checked } htmlFor={ id }>
 				{ label }
 			</Label>
-			{ children }
+			{ children && <RadioButtonChildren checked={ checked }>{ children }</RadioButtonChildren> }
 		</RadioButtonWrapper>
 	);
 }
@@ -128,6 +129,11 @@ const Label = styled.label`
 	}
 `;
 
+const RadioButtonChildren = styled.div`
+	height: ${getChildrenHeight};
+	overflow: hidden;
+`;
+
 function getBorderColor( { checked, theme } ) {
 	return checked ? theme.colors.highlight : theme.colors.borderColor;
 }
@@ -140,6 +146,10 @@ function getRadioBorderWidth( { checked } ) {
 	return checked ? '5px' : '1px';
 }
 
+function getChildrenHeight( { checked } ) {
+	return checked ? 'auto' : '0';
+}
+
 function getGrayscaleValue( { checked } ) {
 	return checked ? 0 : '100%';
 }

diff --git a/packages/composite-checkout/src/components/stripe-credit-card-fields.js b/packages/composite-checkout/src/components/stripe-credit-card-fields.js
@@ -154,7 +154,7 @@ export function createStripeMethod( {
 	};
 }
 
-function StripeCreditCardFields( { isActive, summary } ) {
+function StripeCreditCardFields() {
 	const localize = useLocalize();
 	const theme = useTheme();
 	const { onFailure } = useCheckoutHandlers();
@@ -201,9 +201,6 @@ function StripeCreditCardFields( { isActive, summary } ) {
 		},
 	};
 
-	if ( ! isActive || summary ) {
-		return null;
-	}
 	if ( stripeLoadingError ) {
 		return <span>Error!</span>;
 	}

diff --git a/packages/composite-checkout/src/lib/payment-methods/apple-pay.js b/packages/composite-checkout/src/lib/payment-methods/apple-pay.js
@@ -63,7 +63,6 @@ export function createApplePayMethod( { registerStore, fetchStripeConfiguration
 	return {
 		id: 'apple-pay',
 		LabelComponent: ApplePayLabel,
-		PaymentMethodComponent: () => null,
 		BillingContactComponent: BillingFields,
 		SubmitButtonComponent: ApplePaySubmitButton,
 		SummaryComponent: ApplePaySummary,

diff --git a/packages/composite-checkout/src/lib/payment-methods/credit-card.js b/packages/composite-checkout/src/lib/payment-methods/credit-card.js
@@ -18,7 +18,7 @@ export function createCreditCardMethod() {
 	return {
 		id: 'card',
 		LabelComponent: CreditCardLabel,
-		PaymentMethodComponent: ( { isActive } ) => ( isActive ? <CreditCardFields /> : null ),
+		PaymentMethodComponent: CreditCardFields,
 		BillingContactComponent: BillingFields,
 		SubmitButtonComponent: CreditCardSubmitButton,
 		SummaryComponent: CreditCardSummary,

diff --git a/packages/composite-checkout/src/lib/payment-methods/paypal.js b/packages/composite-checkout/src/lib/payment-methods/paypal.js
@@ -80,7 +80,6 @@ export function createPayPalMethod( { registerStore, makePayPalExpressRequest }
 	return {
 		id: 'paypal',
 		LabelComponent: PaypalLabel,
-		PaymentMethodComponent: () => null,
 		BillingContactComponent: BillingFields,
 		SubmitButtonComponent: PaypalSubmitButton,
 		SummaryComponent: () => {