@financial-times/n-conversion-forms/components/proceed-with-payment-link.jsx

Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).

import React from 'react';
import PropTypes from 'prop-types';

export function ProceedWithPaymentLink({
	id = 'proceedWithPaymentLink',
	title = `By proceeding now, you're:`,
	description,
	listItems = [],
	children = (
		<button className="proceed-with-payment-link__button o3-button o3-button--primary">
			Proceed
		</button>
	),
}) {
	return (
		<div id={id} className="proceed-with-payment-link o-forms-field">
			{title && (
				<h2 className="proceed-with-payment-link__heading o3-type-title-lg">
					{title}
				</h2>
			)}
			{description && (
				<p className="proceed-with-payment-link__description">{description}</p>
			)}
			{listItems.length > 0 && (
				<ul className="proceed-with-payment-link__list">
					{listItems.map((item, index) => (
						<li key={index} className="proceed-with-payment-link__list-item">
							<span
								className="proceed-with-payment-link__icon"
								aria-hidden="true"
							></span>
							<span className="proceed-with-payment-link__list-item-text">
								{item}
							</span>
						</li>
					))}
				</ul>
			)}
			{children && (
				<div className="proceed-with-payment-link__actions">{children}</div>
			)}
		</div>
	);
}

ProceedWithPaymentLink.propTypes = {
	id: PropTypes.string,
	title: PropTypes.string,
	description: PropTypes.string,
	listItems: PropTypes.arrayOf(PropTypes.string),
	children: PropTypes.node,
};