initial commit

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/common-icons.ts

@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import type { PaymentMethodIcon } from '@woocommerce/type-defs/payments';
+
+/**
+ * Array of common assets.
+ */
+export const commonIcons: PaymentMethodIcon[] = [
+	{
+		id: 'alipay',
+		alt: 'Alipay',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/alipay.svg',
+	},
+	{
+		id: 'amex',
+		alt: 'American Express',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/amex.svg',
+	},
+	{
+		id: 'bancontact',
+		alt: 'Bancontact',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/bancontact.svg',
+	},
+	{
+		id: 'diners',
+		alt: 'Diners Club',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/diners.svg',
+	},
+	{
+		id: 'discover',
+		alt: 'Discover',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/discover.svg',
+	},
+	{
+		id: 'eps',
+		alt: 'EPS',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/eps.svg',
+	},
+	{
+		id: 'giropay',
+		alt: 'Giropay',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/giropay.svg',
+	},
+	{
+		id: 'ideal',
+		alt: 'iDeal',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/ideal.svg',
+	},
+	{
+		id: 'jcb',
+		alt: 'JCB',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/jcb.svg',
+	},
+	{
+		id: 'laser',
+		alt: 'Laser',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/laser.svg',
+	},
+	{
+		id: 'maestro',
+		alt: 'Maestro',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/maestro.svg',
+	},
+	{
+		id: 'mastercard',
+		alt: 'Mastercard',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/mastercard.svg',
+	},
+	{
+		id: 'multibanco',
+		alt: 'Multibanco',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/multibanco.svg',
+	},
+	{
+		id: 'p24',
+		alt: 'Przelewy24',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/p24.svg',
+	},
+	{
+		id: 'sepa',
+		alt: 'Sepa',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/sepa.svg',
+	},
+	{
+		id: 'sofort',
+		alt: 'Sofort',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/sofort.svg',
+	},
+	{
+		id: 'unionpay',
+		alt: 'Union Pay',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/unionpay.svg',
+	},
+	{
+		id: 'visa',
+		alt: 'Visa',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/visa.svg',
+	},
+	{
+		id: 'wechat',
+		alt: 'WeChat',
+		src: WC_BLOCKS_IMAGE_URL + 'payment-methods/wechat.svg',
+	},
+];
+
+/**
+ * For a given ID, see if a common icon exists and return it's props.
+ *
+ * @param {string} id Icon ID.
+ */
+export const getCommonIconProps = (
+	id: string
+): PaymentMethodIcon | Record< string, unknown > => {
+	return (
+		commonIcons.find( ( icon ) => {
+			return icon.id === id;
+		} ) || {}
+	);
+};

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { PaymentMethodIcons as PaymentMethodIconsType } from '@woocommerce/type-defs/payments';
+
+/**
+ * Internal dependencies
+ */
+import PaymentMethodIcon from './payment-method-icon';
+import { getCommonIconProps } from './common-icons';
+import { normalizeIconConfig } from './utils';
+import './style.scss';
+
+interface PaymentMethodIconsProps {
+	icons: PaymentMethodIconsType;
+	align?: 'left' | 'right' | 'center';
+}
+/**
+ * For a given list of icons, render each as a list item, using common icons
+ * where available.
+ *
+ * @param {Object} props       Component props.
+ * @param {Array}  props.icons Array of icons object configs or ids as strings.
+ * @param {string} props.align How to align the icon.
+ */
+export const PaymentMethodIcons = ( {
+	icons = [],
+	align = 'center',
+}: PaymentMethodIconsProps ): JSX.Element | null => {
+	const iconConfigs = normalizeIconConfig( icons );
+
+	if ( iconConfigs.length === 0 ) {
+		return null;
+	}
+
+	const containerClass = classnames(
+		'wc-block-components-payment-method-icons',
+		{
+			'wc-block-components-payment-method-icons--align-left':
+				align === 'left',
+			'wc-block-components-payment-method-icons--align-right':
+				align === 'right',
+		}
+	);
+
+	return (
+		<div className={ containerClass }>
+			{ iconConfigs.map( ( icon ) => {
+				const iconProps = {
+					...icon,
+					...getCommonIconProps( icon.id ),
+				};
+				return (
+					<PaymentMethodIcon
+						key={ 'payment-method-icon-' + icon.id }
+						{ ...iconProps }
+					/>
+				);
+			} ) }
+		</div>
+	);
+};
+
+export default PaymentMethodIcons;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/payment-method-icon.tsx

@@ -0,0 +1,34 @@
+/**
+ * Get a class name for an icon.
+ *
+ * @param {string} id Icon ID.
+ */
+const getIconClassName = ( id: string ): string => {
+	return `wc-block-components-payment-method-icon wc-block-components-payment-method-icon--${ id }`;
+};
+
+interface PaymentMethodIconProps {
+	id: string;
+	src?: string | null;
+	alt?: string;
+}
+/**
+ * Return an element for an icon.
+ *
+ * @param {Object}      props     Incoming props for component.
+ * @param {string}      props.id  Id for component.
+ * @param {string|null} props.src Optional src value for icon.
+ * @param {string}      props.alt Optional alt value for icon.
+ */
+const PaymentMethodIcon = ( {
+	id,
+	src = null,
+	alt = '',
+}: PaymentMethodIconProps ): JSX.Element | null => {
+	if ( ! src ) {
+		return null;
+	}
+	return <img className={ getIconClassName( id ) } src={ src } alt={ alt } />;
+};
+
+export default PaymentMethodIcon;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/style.scss

@@ -0,0 +1,48 @@
+.wc-block-components-payment-method-icons {
+	margin: 0 0 #{$gap - 2px};
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+
+	.wc-block-components-payment-method-icon {
+		display: inline-block;
+		margin: 0 4px 2px;
+		padding: 0;
+		width: auto;
+		max-width: 38px;
+		height: 24px;
+		max-height: 24px;
+	}
+
+	&--align-left {
+		justify-content: flex-start;
+
+		.wc-block-components-payment-method-icon {
+			margin-left: 0;
+			margin-right: 8px;
+		}
+	}
+
+	&--align-right {
+		justify-content: flex-end;
+
+		.wc-block-components-payment-method-icon {
+			margin-right: 0;
+			margin-left: 8px;
+		}
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.is-mobile,
+.is-small {
+	.wc-block-components-payment-method-icons {
+		.wc-block-components-payment-method-icon {
+			height: 16px;
+		}
+	}
+}

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/utils.ts

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import type {
+	PaymentMethodIcon,
+	PaymentMethodIcons,
+} from '@woocommerce/type-defs/payments';
+import { isString } from '@woocommerce/types';
+
+/**
+ * For an array of icons, normalize into objects and remove duplicates.
+ */
+export const normalizeIconConfig = (
+	icons: PaymentMethodIcons
+): PaymentMethodIcon[] => {
+	const normalizedIcons: Record< string, PaymentMethodIcon > = {};
+
+	icons.forEach( ( raw ) => {
+		let icon: Partial< PaymentMethodIcon > = {};
+
+		if ( typeof raw === 'string' ) {
+			icon = {
+				id: raw,
+				alt: raw,
+				src: null,
+			};
+		}
+
+		if ( typeof raw === 'object' ) {
+			icon = {
+				id: raw.id || '',
+				alt: raw.alt || '',
+				src: raw.src || null,
+			};
+		}
+
+		if ( icon.id && isString( icon.id ) && ! normalizedIcons[ icon.id ] ) {
+			normalizedIcons[ icon.id ] = <PaymentMethodIcon>icon;
+		}
+	} );
+
+	return Object.values( normalizedIcons );
+};