fix translation quantities

Author: senadir

assets/js/atomic/components/product/button/index.js

@@ -3,7 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { __, sprintf } from '@wordpress/i18n';
+import { _n, sprintf } from '@wordpress/i18n';
 import {
 	useMemo,
 	useCallback,
@@ -103,7 +103,12 @@ const ProductButton = ( { product, className } ) => {
 	const getButtonText = () => {
 		if ( Number.isFinite( cartQuantity ) && addedToCart ) {
 			return sprintf(
-				__( '%d in cart', 'woo-gutenberg-products-block' ),
+				_n(
+					'%d in cart',
+					'%d in cart',
+					cartQuantity,
+					'woo-gutenberg-products-block'
+				),
 				cartQuantity
 			);
 		}

assets/js/base/components/checkbox-list/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import { Fragment, useMemo, useState } from '@wordpress/element';
 import classNames from 'classnames';
@@ -48,17 +48,21 @@ const CheckboxList = ( {
 						} }
 						aria-expanded={ false }
 						aria-label={ sprintf(
-							__(
+							_n(
+								'Show %s more option',
 								'Show %s more options',
+								optionCount - limit,
 								'woo-gutenberg-products-block'
 							),
 							optionCount - limit
 						) }
 					>
 						{ // translators: %s number of options to reveal.
 						sprintf(
-							__(
+							_n(
 								'Show %s more',
+								'Show %s more',
+								optionCount - limit,
 								'woo-gutenberg-products-block'
 							),
 							optionCount - limit
@@ -99,9 +103,9 @@ const CheckboxList = ( {
 				{ options.map( ( option, index ) => (
 					<Fragment key={ option.key }>
 						<li
-							{ ...shouldTruncateOptions &&
+							{ ...( shouldTruncateOptions &&
 								! showExpanded &&
-								index >= limit && { hidden: true } }
+								index >= limit && { hidden: true } ) }
 						>
 							<input
 								type="checkbox"

assets/js/base/components/checkout/form-step/index.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Label from '../../label';
+import './style.scss';
+
+const StepNumber = ( { stepNumber } ) => {
+	return (
+		<div className="wc-components-checkout-step__number">
+			<Label
+				label={ stepNumber }
+				screenReaderLabel={ sprintf(
+					__(
+						// translators: %s is a step number (1, 2, 3...)
+						'Step %d',
+						'woo-gutenberg-products-block'
+					),
+					stepNumber
+				) }
+			/>
+		</div>
+	);
+};
+
+const StepHeading = ( { title, stepHeadingContent } ) => (
+	<div className="wc-components-checkout-step__heading">
+		<h4 className="wc-components-checkout-step__title">{ title }</h4>
+		<span className="wc-components-checkout-step__heading-content">
+			{ stepHeadingContent }
+		</span>
+	</div>
+);
+
+const FormStep = ( {
+	id,
+	className,
+	stepNumber,
+	title,
+	description,
+	children,
+	stepHeadingContent = () => null,
+} ) => {
+	return (
+		<div
+			className={ classnames( className, 'wc-components-checkout-step' ) }
+			id={ id }
+		>
+			<StepNumber stepNumber={ stepNumber } />
+			<StepHeading
+				title={ title }
+				stepHeadingContent={ stepHeadingContent() }
+			/>
+			<span className="wc-components-checkout-step__description">
+				{ description }
+			</span>
+			<div className="wc-components-checkout-step__content">
+				{ children }
+			</div>
+		</div>
+	);
+};
+
+FormStep.propTypes = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	stepNumber: PropTypes.number,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	children: PropTypes.node,
+	stepHeadingContent: PropTypes.func,
+};
+
+export default FormStep;