initial commit

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

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { Icon, bank, bill, card, checkPayment } from '@woocommerce/icons';
+import { isString, objectHasProp } from '@woocommerce/types';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface NamedIcons {
+	bank: JSX.Element;
+	bill: JSX.Element;
+	card: JSX.Element;
+	checkPayment: JSX.Element;
+}
+
+const namedIcons: NamedIcons = {
+	bank,
+	bill,
+	card,
+	checkPayment,
+};
+
+interface PaymentMethodLabelProps {
+	icon: '' | keyof NamedIcons | SVGElement;
+	text: string;
+}
+
+/**
+ * Exposed to payment methods for the label shown on checkout. Allows icons to be added as well as
+ * text.
+ *
+ * @param {Object} props Component props.
+ * @param {*} props.icon Show an icon beside the text if provided. Can be a string to use a named
+ *                       icon, or an SVG element.
+ * @param {string} props.text Text shown next to icon.
+ */
+export const PaymentMethodLabel = ( {
+	icon = '',
+	text = '',
+}: PaymentMethodLabelProps ): JSX.Element => {
+	const hasIcon = !! icon;
+	const hasNamedIcon = useCallback(
+		(
+			iconToCheck: '' | keyof NamedIcons | SVGElement
+		): iconToCheck is keyof NamedIcons =>
+			hasIcon &&
+			isString( iconToCheck ) &&
+			objectHasProp( namedIcons, iconToCheck ),
+		[ hasIcon ]
+	);
+	const className = classnames( 'wc-block-components-payment-method-label', {
+		'wc-block-components-payment-method-label--with-icon': hasIcon,
+	} );
+
+	return (
+		<span className={ className }>
+			{ hasNamedIcon( icon ) ? (
+				<Icon srcElement={ namedIcons[ icon ] } />
+			) : (
+				icon
+			) }
+			{ text }
+		</span>
+	);
+};
+
+export default PaymentMethodLabel;

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

@@ -0,0 +1,19 @@
+.wc-block-components-payment-method-label--with-icon {
+	display: inline-block;
+	vertical-align: middle;
+	> img,
+	> svg {
+		vertical-align: middle;
+		margin: -2px 4px 0 0;
+	}
+}
+
+.is-mobile,
+.is-small {
+	.wc-block-components-payment-method-label--with-icon {
+		> img,
+		> svg {
+			display: none;
+		}
+	}
+}