/**
 * CTA component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import classnames from 'classnames';

/**
 * Internal dependencies
 */
import Link from '../Link';

const CTA = ( {
	title,
	description,
	ctaLink,
	ctaLabel,
	ctaLinkExternal,
	error,
	onClick,
	'aria-label': ariaLabel,
} ) => (
	<div
		className={ classnames( 'googlesitekit-cta', {
			'googlesitekit-cta--error': error,
		} ) }
	>
		{ title && <h3 className="googlesitekit-cta__title">{ title }</h3> }
		{ description && typeof description === 'string' && (
			<p className="googlesitekit-cta__description">{ description }</p>
		) }
		{ description && typeof description !== 'string' && (
			<div className="googlesitekit-cta__description">
				{ description }
			</div>
		) }
		{ ctaLabel && (
			<Link
				href={ ctaLink }
				onClick={ onClick }
				inverse={ ! error }
				caps
				arrow
				aria-label={ ariaLabel }
				external={ ctaLinkExternal }
				hideExternalIndicator={ ctaLinkExternal }
			>
				{ ctaLabel }
			</Link>
		) }
	</div>
);

CTA.propTypes = {
	title: PropTypes.string.isRequired,
	description: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
	ctaLink: PropTypes.string,
	ctaLinkExternal: PropTypes.bool,
	ctaLabel: PropTypes.string,
	'aria-label': PropTypes.string,
	error: PropTypes.bool,
	onClick: PropTypes.func,
};

CTA.defaultProps = {
	title: '',
	description: '',
	ctaLink: '',
	ctaLabel: '',
	error: false,
	onClick: () => {},
};

export default CTA;

@@ -738,16 +738,89 @@
 ames';%0A%0A
+/**%0A * WordPress dependencies%0A */%0Aimport %7B __ %7D from '@wordpress/i18n';%0A%0A
 /**%0A * I
@@ -871,16 +871,48 @@
 ./Link';
+%0Aimport Button from '../Button';
 %0A%0Aconst 
@@ -1000,16 +1000,34 @@
 nClick,%0A
+%09retry,%0A%09onRetry,%0A
 %09'aria-l
@@ -1499,24 +1499,131 @@
 /div%3E%0A%09%09) %7D%0A
+%09%09%7B retry && (%0A%09%09%09%3CButton onClick=%7B onRetry %7D%3E%0A%09%09%09%09%7B __( 'Retry', 'google-site-kit' ) %7D%0A%09%09%09%3C/Button%3E%0A%09%09) %7D%0A
 %09%09%7B ctaLabel
@@ -2188,16 +2188,66 @@
 s.func,%0A
+%09retry: PropTypes.bool,%0A%09onRetry: PropTypes.func,%0A
 %7D;%0A%0ACTA.
@@ -2357,16 +2357,51 @@
  =%3E %7B%7D,%0A
+%09retry: false,%0A%09onRetry: () =%3E %7B%7D,%0A
 %7D;%0A%0Aexpo

Add retry button in the CTA component.