Fix basket expanding view and other style issues

client/my-sites/plugins/marketplace/components/marketplace-shopping-cart/index.tsx

@@ -18,25 +18,23 @@ import { MobileHiddenHorizontalRule } from 'calypso/my-sites/plugins/marketplace
 interface PropsForMarketplaceShoppingCart {
 	onAddDomainToCart: () => void;
 	selectedDomain: DomainSuggestions.DomainSuggestion | null;
+	isExpandedBasketView: boolean;
+	toggleExpandedBasketView: () => void;
 }
 
 const ShoppingCart = styled.div< { theme?: MarketplaceThemeType } >`
 	width: 100%;
 	background-color: var( --studio-gray-0 );
 	padding: 15px 25px;
-	height: 275px;
-
+	max-width: 611px;
 	@media ( ${ ( { theme } ) => theme.breakpoints.tabletDown } ) {
-		position: fixed;
-		bottom: 0;
-		height: auto;
-		max-height: 226px;
 		overflow-y: scroll;
 		-ms-overflow-style: none;
 		scrollbar-width: none;
 		&::-webkit-scrollbar {
 			display: none;
 		}
+		padding: 0 35px;
 	}
 `;
 
@@ -72,12 +70,47 @@ const ShoppingCartTotal = styled.div< { theme?: MarketplaceThemeType } >`
 const FullWidthButton = styled( Button )`
 	justify-content: center;
 	width: 100%;
+	margin-bottom: 15px;
+`;
+
+const MarketPlaceBasketItem = styled( LineItem )`
+	div,
+	span {
+		font-size: 0.875rem;
+	}
+	padding: 4px 0;
+`;
+
+const MobileToggleExpandedBasket = styled.a< { theme?: MarketplaceThemeType } >`
+	display: none;
+	background-color: transparent;
+	border-color: transparent;
+	color: var( --color-accent-60 );
+	margin-bottom: 20px;
+	box-shadow: none;
+	cursor: pointer;
+	&:hover {
+		color: var( --color-accent-60 );
+	}
+
+	@media ( ${ ( { theme } ) => theme.breakpoints.tabletDown } ) {
+		display: block;
+	}
+`;
+
+const ItemContainer = styled.div< { theme?: MarketplaceThemeType } >`
+	margin: 8px 0;
 `;
 
 export default function MarketplaceShoppingCart(
 	props: PropsForMarketplaceShoppingCart
 ): JSX.Element {
-	const { onAddDomainToCart, selectedDomain } = props;
+	const {
+		onAddDomainToCart,
+		selectedDomain,
+		isExpandedBasketView,
+		toggleExpandedBasketView,
+	} = props;
 	const { responseCart, isLoading } = useShoppingCart();
 	const { products, sub_total_display } = responseCart;
 
@@ -89,18 +122,26 @@ export default function MarketplaceShoppingCart(
 				<h1>{ translate( 'Your cart' ) } </h1>
 				<MobileTotal>{ sub_total_display }</MobileTotal>
 			</ShoppingCartTitle>
-
-			<div>
-				{ products.map( ( product ) => {
-					return <LineItem key={ product.uuid } product={ product } />;
-				} ) }
-			</div>
+			{ isExpandedBasketView ? (
+				<ItemContainer>
+					{ products.map( ( product ) => {
+						return <MarketPlaceBasketItem key={ product.uuid } product={ product } />;
+					} ) }
+					{ products.map( ( product ) => {
+						return <MarketPlaceBasketItem key={ product.uuid } product={ product } />;
+					} ) }
+				</ItemContainer>
+			) : null }
 			<MobileHiddenHorizontalRule />
 			<ShoppingCartTotal>
 				<div>{ translate( 'Total' ) }</div>
 				<div>{ sub_total_display }</div>
 			</ShoppingCartTotal>
-
+			<MobileToggleExpandedBasket onClick={ toggleExpandedBasketView } isLink isPrimary>
+				{ isExpandedBasketView
+					? translate( 'View less details' )
+					: translate( 'View more details' ) }
+			</MobileToggleExpandedBasket>
 			<FullWidthButton
 				onClick={ onAddDomainToCart }
 				isBusy={ false }

client/my-sites/plugins/marketplace/marketplace-domain-upsell/index.tsx

@@ -10,6 +10,8 @@ import { DomainSuggestions } from '@automattic/data-stores';
 import { ThemeProvider } from 'emotion-theming';
 import styled from '@emotion/styled';
 import { translate } from 'i18n-calypso';
+import classnames from 'classnames';
+import { isDesktop } from '@automattic/viewport';
 
 /**
  * Internal dependencies
@@ -73,12 +75,18 @@ function CalypsoWrappedMarketplaceDomainUpsell(): JSX.Element {
 	const [ selectedDomain, setDomain ] = useState< DomainSuggestions.DomainSuggestion | null >(
 		null
 	);
+
+	const [ isExpandedBasketView, setIsExpandedBasketView ] = useState( false );
 	const { addProductsToCart, replaceProductsInCart } = useShoppingCart();
 	const products = useSelector( getProductsList );
 	const previousPath = useSelector( getPreviousPath );
 	const isFetchingProducts = useSelector( isProductsListFetching );
 	const selectedSite = useSelector( getSelectedSite );
 
+	useEffect( () => {
+		setIsExpandedBasketView( isDesktop() );
+	}, [ setIsExpandedBasketView ] );
+
 	useEffect( () => {
 		//FIXME: This code segment simulates yoast premium already being added when arriving here. To be removed when plugins page is completed.
 		if ( ! isFetchingProducts && products[ 'yoast_premium' ] ) {
@@ -131,7 +139,11 @@ function CalypsoWrappedMarketplaceDomainUpsell(): JSX.Element {
 					tipTarget="close"
 				/>
 			</Masterbar>
-			<div className="marketplace-domain-upsell__root">
+			<div
+				className={ classnames( 'marketplace-domain-upsell__root', {
+					'expanded-basket-view': isExpandedBasketView,
+				} ) }
+			>
 				<div className="marketplace-domain-upsell__domain-picker-container">
 					<DomainPicker
 						header={ <MarketplaceDomainUpsellHeader /> }
@@ -147,6 +159,12 @@ function CalypsoWrappedMarketplaceDomainUpsell(): JSX.Element {
 					<MarketplaceShoppingCart
 						onAddDomainToCart={ onAddDomainToCart }
 						selectedDomain={ selectedDomain }
+						isExpandedBasketView={ isExpandedBasketView }
+						toggleExpandedBasketView={ () =>
+							isExpandedBasketView
+								? setIsExpandedBasketView( false )
+								: setIsExpandedBasketView( true )
+						}
 					/>
 				</div>
 			</div>

client/my-sites/plugins/marketplace/marketplace-domain-upsell/style.scss

@@ -5,7 +5,7 @@
 	@media ( max-width: 782px ) {
 		padding: 0;
 		background-color: var( --studio-white );
-		height: calc( 100vh - 50px );
+		height: 100vh;
 		.layout__primary {
 			height: 100vh;
 			.marketplace-domain-upsell__root {
@@ -33,15 +33,16 @@
 	grid-template-columns: 60% 40%;
 	grid-template-areas: 'domainpicker basket';
 
-	margin-top: 40px;
 	@media ( max-width: 782px ) {
-		grid-template-rows: 1fr 226px;
+		grid-template-rows: 1fr 157px;
 		grid-template-columns: 100%;
 		grid-template-areas:
 			'domainpicker'
 			'basket';
-
-		margin: calc( var( --masterbar-height ) + 30px ) 0 0;
+		margin: var( --masterbar-height ) 0 0;
+		&.expanded-basket-view {
+			grid-template-rows: 1fr 225px;
+		}
 	}
 
 	> div {
@@ -66,13 +67,15 @@
 		display: flex;
 		width: 100%;
 		justify-content: space-around;
+
 		.domain-picker {
 			max-width: 611px;
+			width: 611px;
 			padding: 0 20px;
 		}
 
 		@media ( max-width: 782px ) {
-			padding: 0;
+			padding: 30px 0 0;
 			overflow: scroll;
 			-ms-overflow-style: none;
 			scrollbar-width: none;
@@ -88,9 +91,12 @@
 		display: flex;
 		width: 100%;
 		justify-content: space-around;
-
+		height: 250px;
 		@media ( max-width: 782px ) {
+			background-color: var( --studio-gray-0 );
 			padding: 0;
+			align-items: flex-end;
+			height: auto;
 		}
 	}
 }