Merge branch 'feature/2509-consolidate-google-account-cards' into upd…

…ate/2603-create-ads-account

js/src/components/account-card/index.js

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 
@@ -125,6 +124,11 @@ const alignStyleName = {
 	top: `gla-account-card__styled--align-top`,
 };
 
+const indicatorAlignStyleName = {
+	...alignStyleName,
+	toDetail: 'gla-account-card__indicator--align-to-detail',
+};
+
 /**
  * Renders a Card component with account info and status.
  *
@@ -142,6 +146,9 @@ const alignStyleName = {
  * @param {JSX.Element} [props.indicator] Indicator of actions or status on the right side of the card.
  * @param {'center'|'top'} [props.alignIcon='center'] Specify the vertical alignment of leading icon.
  * @param {'center'|'top'} [props.alignIndicator='center'] Specify the vertical alignment of `indicator`.
+ * @param {JSX.Element} [props.detail] Detail content below the card description.
+ * @param {boolean} [props.expandedDetail=false] Whether to expand the detail content.
+ * @param {JSX.Element} [props.actions] Actions content below the card detail.
  * @param {Array<JSX.Element>} [props.children] Children to be rendered if needs more content within the card.
  * @param {Object} [props.restProps] Props to be forwarded to Section.Card.
  */
@@ -156,12 +163,16 @@ export default function AccountCard( {
 	alignIcon = 'center',
 	indicator,
 	alignIndicator = 'center',
+	detail,
+	expandedDetail = false,
+	actions,
 	children,
 	...restProps
 } ) {
 	const cardClassName = classnames(
 		'gla-account-card',
 		disabled ? 'gla-account-card--is-disabled' : false,
+		expandedDetail ? 'gla-account-card--is-expanded-detail' : false,
 		className
 	);
 
@@ -172,19 +183,15 @@ export default function AccountCard( {
 
 	const indicatorClassName = classnames(
 		'gla-account-card__indicator',
-		alignStyleName[ alignIndicator ]
+		indicatorAlignStyleName[ alignIndicator ]
 	);
 
 	return (
 		<Section.Card className={ cardClassName } { ...restProps }>
 			<Section.Card.Body>
-				<Flex gap={ 4 }>
-					{ icon && (
-						<FlexItem className={ iconClassName }>
-							{ icon }
-						</FlexItem>
-					) }
-					<FlexBlock>
+				<div className="gla-account-card__body-layout">
+					{ icon && <div className={ iconClassName }>{ icon }</div> }
+					<div className="gla-account-card__subject">
 						{ title && (
 							<Subsection.Title className="gla-account-card__title">
 								{ title }
@@ -200,13 +207,23 @@ export default function AccountCard( {
 								{ helper }
 							</div>
 						) }
-					</FlexBlock>
+					</div>
+					{ detail && (
+						<div className="gla-account-card__detail">
+							{ detail }
+						</div>
+					) }
 					{ indicator && (
-						<FlexItem className={ indicatorClassName }>
+						<div className={ indicatorClassName }>
 							{ indicator }
-						</FlexItem>
+						</div>
+					) }
+					{ actions && (
+						<div className="gla-account-card__actions">
+							{ actions }
+						</div>
 					) }
-				</Flex>
+				</div>
 			</Section.Card.Body>
 			{ children }
 		</Section.Card>

js/src/components/account-card/index.scss

@@ -5,18 +5,60 @@
 		opacity: 0.5;
 	}
 
+	&--is-expanded-detail {
+		.gla-account-card__indicator {
+			grid-area: 1/3;
+		}
+
+		.gla-account-card__detail {
+			grid-area: 2/2/auto/span 2;
+		}
+	}
+
 	&__styled {
 		&--align-top {
 			align-self: flex-start;
 		}
 	}
 
+	&__body-layout {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+	}
+
 	&__icon {
+		grid-area: 1/1/span 2;
+		margin-right: $grid-unit-20;
 		line-height: 0;
 	}
 
+	&__subject {
+		grid-area: 1/2;
+	}
+
+	&__indicator {
+		grid-area: 1/3/span 2;
+		margin-left: $grid-unit-20;
+
+		&--align-to-detail {
+			grid-area: 2/3;
+			margin-top: $grid-unit-15;
+		}
+	}
+
+	&__detail {
+		grid-area: 2/2;
+		margin-top: $grid-unit-15;
+	}
+
+	&__actions {
+		grid-area: 3/2/auto/span 2;
+		margin-top: $grid-unit-15;
+	}
+
 	&__title {
-		margin-bottom: $grid-unit-05;
+		margin: 0;
 		color: $black;
 	}
 
@@ -25,6 +67,7 @@
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 1em;
+		margin-top: $grid-unit-05;
 		color: $gray-900;
 
 		> p {
@@ -65,11 +108,12 @@
 	}
 
 	@media (max-width: $break-small) {
-		.components-card__body > .components-flex {
+		&__body-layout {
+			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			> .components-flex-block,
-			> .components-flex-item {
+
+			> div {
 				margin: $grid-unit-10;
 			}
 		}

js/src/components/app-select-control/index.js

@@ -58,8 +58,9 @@ const AppSelectControl = ( props ) => {
 	if ( isNonInteractive ) {
 		selectProps = {
 			...selectProps,
-			suffix: ' ',
 			readOnly: true,
+			suffix: ' ',
+			tabIndex: '-1',
 		};
 	}
 

js/src/components/app-select-control/index.scss

@@ -2,8 +2,8 @@
 	.components-base-control__field {
 		margin-bottom: 0;
 	}
-}
 
-.app-select-control--is-non-interactive {
-	pointer-events: none;
+	&.app-select-control--is-non-interactive {
+		pointer-events: none;
+	}
 }