Add card counter to bottom right corner

Author: emma-imber

dotcom-rendering/src/components/StackedProducts.tsx

@@ -9,21 +9,26 @@ import type { ArticleFormat } from '../lib/articleFormat';
 import type { ProductBlockElement } from '../types/content';
 import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
 
-const buttonStyles = css`
+const showAllButtonStyles = css`
 	background-color: transparent;
-	padding: ${space[4]}px 0px 0px 0px;
 	border: none;
 	display: flex;
 `;
 
-const buttonTextStyles = css`
+const showAllTextStyles = css`
 	${textSans15};
 	color: ${palette.lifestyle[400]};
 	font-weight: 700;
 	border-bottom: 1px solid ${palette.neutral[86]};
 	padding-right: ${space[1]}px;
 `;
 
+const cardCounterStyles = css`
+	${textSans15};
+	color: ${palette.neutral[46]};
+	font-weight: 700;
+`;
+
 export const StackedProducts = ({
 	products,
 	format,
@@ -55,25 +60,39 @@ export const StackedProducts = ({
 			</div>
 
 			{products.length > 3 && (
-				<button
-					onClick={() => setIsExpanded(!isExpanded)}
-					css={buttonStyles}
+				<div
+					css={[
+						css`
+							display: flex;
+							justify-content: space-between;
+							padding-top: ${space[4]}px;
+						`,
+					]}
 				>
-					<p css={buttonTextStyles}>
-						{isExpanded ? 'Show less' : 'Show all'}
+					<button
+						onClick={() => setIsExpanded(!isExpanded)}
+						css={showAllButtonStyles}
+					>
+						<p css={showAllTextStyles}>
+							{isExpanded ? 'Show less' : 'Show all'}
+						</p>
+						{isExpanded ? (
+							<SvgChevronUpSingle
+								size="xsmall"
+								theme={{ fill: palette.lifestyle[400] }}
+							/>
+						) : (
+							<SvgChevronDownSingle
+								size="xsmall"
+								theme={{ fill: palette.lifestyle[400] }}
+							/>
+						)}
+					</button>
+
+					<p css={cardCounterStyles}>
+						{isExpanded ? products.length : '3'}/{products.length}
 					</p>
-					{isExpanded ? (
-						<SvgChevronUpSingle
-							size="xsmall"
-							theme={{ fill: palette.lifestyle[400] }}
-						/>
-					) : (
-						<SvgChevronDownSingle
-							size="xsmall"
-							theme={{ fill: palette.lifestyle[400] }}
-						/>
-					)}
-				</button>
+				</div>
 			)}
 		</div>
 	);