Add Show less and chevron icons

Author: emma-imber

dotcom-rendering/src/components/StackedProducts.tsx

@@ -1,19 +1,27 @@
 import { css } from '@emotion/react';
-import { space } from '@guardian/source/foundations';
-import { palette, textSans15 } from '@guardian/source/foundations';
+import { palette, space, textSans15 } from '@guardian/source/foundations';
+import {
+	SvgChevronDownSingle,
+	SvgChevronUpSingle,
+} from '@guardian/source/react-components';
 import { useState } from 'react';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { ProductBlockElement } from '../types/content';
 import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
 
 const buttonStyles = css`
-	${textSans15};
-	color: ${palette.lifestyle[400]};
-	font-weight: 700;
 	background-color: transparent;
 	padding: ${space[4]}px 0px 0px 0px;
 	border: none;
+	display: flex;
+`;
+
+const buttonTextStyles = css`
+	${textSans15};
+	color: ${palette.lifestyle[400]};
+	font-weight: 700;
 	border-bottom: 1px solid ${palette.neutral[86]};
+	padding-right: ${space[1]}px;
 `;
 
 export const StackedProducts = ({
@@ -46,12 +54,25 @@ export const StackedProducts = ({
 				)}
 			</div>
 
-			{products.length > 3 && !isExpanded && (
+			{products.length > 3 && (
 				<button
 					onClick={() => setIsExpanded(!isExpanded)}
 					css={buttonStyles}
 				>
-					Show all
+					<p css={buttonTextStyles}>
+						{isExpanded ? 'Show less' : 'Show all'}
+					</p>
+					{isExpanded ? (
+						<SvgChevronUpSingle
+							size="xsmall"
+							theme={{ fill: palette.lifestyle[400] }}
+						/>
+					) : (
+						<SvgChevronDownSingle
+							size="xsmall"
+							theme={{ fill: palette.lifestyle[400] }}
+						/>
+					)}
 				</button>
 			)}
 		</div>