Remove ConsolidateStatsCard and StepSection temporary core style prop.

jkguidaven · jkguidaven · commit 5e04a57e7825 · 2025-03-19T19:14:28.000+08:00
diff --git a/client/a8c-for-agencies/components/consolidated-stats-card/index.tsx b/client/a8c-for-agencies/components/consolidated-stats-card/index.tsx
@@ -82,7 +82,6 @@ interface ConsolidatedStatsCardProps {
 	popoverTitle?: string;
 	popoverContent: React.ReactNode;
 	isLoading?: boolean;
-	applyCoreStyles?: boolean;
 }
 
 export function ConsolidatedStatsCard( {
@@ -91,27 +90,16 @@ export function ConsolidatedStatsCard( {
 	popoverTitle,
 	popoverContent,
 	isLoading = false,
-	applyCoreStyles = false,
 }: ConsolidatedStatsCardProps ) {
 	const cardRef = useRef< HTMLDivElement | null >( null );
 
 	return (
-		<Card
-			compact
-			ref={ cardRef }
-			className={ clsx( 'consolidated-stats-card', { 'is-core-styles': applyCoreStyles } ) }
-		>
+		<Card compact ref={ cardRef } className="consolidated-stats-card">
 			<div className="consolidated-stats-card__value">
 				{ isLoading ? <TextPlaceholder /> : value }
 			</div>
 			<CardInfo title={ popoverTitle } wrapperRef={ cardRef } footerText={ footerText }>
-				<div
-					className={ clsx( 'consolidated-stats-card__popover-content', {
-						'is-core-styles': applyCoreStyles,
-					} ) }
-				>
-					{ popoverContent }
-				</div>
+				<div className="consolidated-stats-card__popover-content">{ popoverContent }</div>
 			</CardInfo>
 		</Card>
 	);
diff --git a/client/a8c-for-agencies/components/consolidated-stats-card/style.scss b/client/a8c-for-agencies/components/consolidated-stats-card/style.scss
@@ -36,8 +36,7 @@
 
 .consolidated-stats-card__value {
 	color: var(--color-accent-100);
-	font-size: rem(24px);
-	font-weight: 700;
+	@include heading-x-large;
 	margin-block-end: 8px;
 }
 
@@ -81,7 +80,7 @@
 
 .consolidated-stats-card__label {
 	color: var(--color-accent);
-	font-size: rem(12px);
+	@include body-medium;
 	text-wrap: balance;
 }
 
@@ -94,7 +93,7 @@
 
 .consolidated-stats-card__popover-content {
 	min-width: 200px;
-	@include a4a-font-body-md;
+	@include body-medium;
 
 	@include break-mobile {
 		min-width: 300px;
@@ -109,21 +108,3 @@
 		outline: none;
 	}
 }
-
-// Core styles
-
-.consolidated-stats-card.is-core-styles {
-	.consolidated-stats-card__value {
-		@include heading-x-large;
-	}
-
-	.consolidated-stats-card__label {
-		@include body-medium;
-	}
-}
-
-.consolidated-stats-card__popover-content.is-core-styles {
-	@include body-medium;
-}
-
-// End of core styles
diff --git a/client/a8c-for-agencies/components/step-section-item/index.tsx b/client/a8c-for-agencies/components/step-section-item/index.tsx
@@ -20,7 +20,6 @@ interface StepSectionItemProps {
 	iconClassName?: string;
 	isNewLayout?: boolean;
 	stepNumber?: number;
-	applyCoreStyles?: boolean;
 }
 
 export default function StepSectionItem( {
@@ -33,7 +32,6 @@ export default function StepSectionItem( {
 	iconClassName,
 	isNewLayout = false,
 	stepNumber,
-	applyCoreStyles = false,
 }: StepSectionItemProps ) {
 	const status = <StatusBadge statusProps={ statusProps } />;
 
@@ -48,9 +46,7 @@ export default function StepSectionItem( {
 	);
 
 	return (
-		<div
-			className={ clsx( 'step-section-item', className, { 'is-core-styles': applyCoreStyles } ) }
-		>
+		<div className={ clsx( 'step-section-item', className ) }>
 			{ icon && (
 				<div className={ clsx( 'step-section-item__icon', iconClassName ) }>
 					<Icon className="sidebar__menu-icon" icon={ icon } size={ ICON_SIZE } />
diff --git a/client/a8c-for-agencies/components/step-section-item/style.scss b/client/a8c-for-agencies/components/step-section-item/style.scss
@@ -22,14 +22,12 @@
 	}
 
 	.step-section-item__heading {
-		font-size: rem(16px);
-		font-weight: 500;
+		@include heading-medium;
 	}
 
 	.step-section-item__description {
 		margin-block-start: 4px;
-		font-size: rem(14px);
-		line-height: 1.7;
+		@include body-medium;
 		color: var(--color-accent);
 	}
 
@@ -48,16 +46,6 @@
 			}
 		}
 	}
-
-	&.is-core-styles {
-		.step-section-item__heading {
-			@include heading-medium;
-		}
-
-		.step-section-item__description {
-			@include body-medium;
-		}
-	}
 }
 
 .step-section-item__status {
diff --git a/client/a8c-for-agencies/components/step-section/index.tsx b/client/a8c-for-agencies/components/step-section/index.tsx
@@ -8,18 +8,16 @@ interface StepSectionProps {
 	stepCount?: number;
 	children: React.ReactNode;
 	className?: string;
-	applyCoreStyles?: boolean;
 }
 
 export default function StepSection( {
 	stepCount,
 	heading,
 	children,
 	className,
-	applyCoreStyles = false,
 }: StepSectionProps ) {
 	return (
-		<div className={ clsx( 'step-section', className, { 'is-core-styles': applyCoreStyles } ) }>
+		<div className={ clsx( 'step-section', className ) }>
 			<div className="step-section__header">
 				{ !! stepCount && <div className="step-section__step-count">{ stepCount }</div> }
 				<div className="step-section__step-heading">{ heading }</div>
diff --git a/client/a8c-for-agencies/components/step-section/style.scss b/client/a8c-for-agencies/components/step-section/style.scss
@@ -1,6 +1,7 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 @import "@wordpress/base-styles/variables";
+
 .step-section {
 	.step-section__header {
 		display: flex;
@@ -16,25 +17,17 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			font-size: rem(12px);
-			font-weight: 600;
+			@include heading-small;
 			background: var(--color-primary-50);
 			width: 24px;
 			border-radius: 50%;
 			height: 24px;
 			color: var(--color-text-inverted);
 		}
 
-		.step-section__step-heading {
-			font-size: rem(20px);
-			font-weight: 600;
-			text-wrap: pretty;
-		}
-	}
-
-	&.is-core-styles {
 		.step-section__step-heading {
 			@include heading-large;
+			text-wrap: pretty;
 		}
 	}
 }
diff --git a/client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/empty-state.tsx b/client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/empty-state.tsx
@@ -25,12 +25,8 @@ export default function MigrationsCommissionsEmptyState( {
 	const a4aPluginUrl = 'https://wordpress.org/plugins/automattic-for-agencies-client';
 
 	return (
-		<StepSection
-			applyCoreStyles
-			heading={ translate( 'View your migrated websites and commisions right here.' ) }
-		>
+		<StepSection heading={ translate( 'View your migrated websites and commisions right here.' ) }>
 			<StepSectionItem
-				applyCoreStyles
 				isNewLayout
 				heading={ translate( "We'll tag the sites we moved for you once they're transferred." ) }
 				description={ preventWidows(
@@ -41,7 +37,6 @@ export default function MigrationsCommissionsEmptyState( {
 			/>
 			<StepSectionItem
 				isNewLayout
-				applyCoreStyles
 				heading={ translate( 'Tag your transferred sites so we can pay you for them.' ) }
 				description={
 					<>
diff --git a/client/a8c-for-agencies/sections/partner-directory/dashboard/index.tsx b/client/a8c-for-agencies/sections/partner-directory/dashboard/index.tsx
@@ -212,7 +212,6 @@ const PartnerDirectoryDashboard = () => {
 
 	const programLinks = (
 		<StepSection
-			applyCoreStyles
 			className="partner-directory-dashboard__learn-more-section"
 			heading={ translate( 'Learn more about the program' ) }
 		>
@@ -291,7 +290,6 @@ const PartnerDirectoryDashboard = () => {
 
 						return (
 							<StepSectionItem
-								applyCoreStyles
 								key={ application.brand }
 								isNewLayout
 								iconClassName={ clsx( brandMeta.className ) }
@@ -302,7 +300,6 @@ const PartnerDirectoryDashboard = () => {
 						);
 					} ) }
 				<StepSection
-					applyCoreStyles
 					className="partner-directory-dashboard__edit-section"
 					heading={ translate( "Edit your agency's information" ) }
 				>
@@ -344,9 +341,8 @@ const PartnerDirectoryDashboard = () => {
 					'List your agency in our partner directories. Showcase your skills, attract clients, and grow your business.'
 				) }
 			</div>
-			<StepSection applyCoreStyles heading={ translate( 'How do I start?' ) }>
+			<StepSection heading={ translate( 'How do I start?' ) }>
 				<StepSectionItem
-					applyCoreStyles
 					isNewLayout
 					className={
 						currentApplicationStep > 0 ? 'partner-directory-dashboard__checked-step' : ''
@@ -392,7 +388,6 @@ const PartnerDirectoryDashboard = () => {
 					} }
 				/>
 				<StepSectionItem
-					applyCoreStyles
 					isNewLayout
 					className={
 						currentApplicationStep > 1 ? 'partner-directory-dashboard__checked-step' : ''
@@ -413,7 +408,6 @@ const PartnerDirectoryDashboard = () => {
 					} }
 				/>
 				<StepSectionItem
-					applyCoreStyles
 					isNewLayout
 					stepNumber={ currentApplicationStep > 2 ? undefined : 3 }
 					icon={ currentApplicationStep > 2 ? check : undefined }
diff --git a/client/a8c-for-agencies/sections/referrals/consolidated-view/index.tsx b/client/a8c-for-agencies/sections/referrals/consolidated-view/index.tsx
@@ -29,7 +29,6 @@ export default function ConsolidatedViews( { referrals, totalPayouts }: Consolid
 		<ConsolidatedStatsGroup className="consolidated-view">
 			{ totalPayouts !== undefined && (
 				<ConsolidatedStatsCard
-					applyCoreStyles
 					value={ formatCurrency( totalPayouts, 'USD' ) }
 					footerText={ translate( 'All time referral payouts' ) }
 					popoverTitle={ translate( 'Total payouts' ) }
@@ -46,7 +45,6 @@ export default function ConsolidatedViews( { referrals, totalPayouts }: Consolid
 				/>
 			) }
 			<ConsolidatedStatsCard
-				applyCoreStyles
 				value={ formatCurrency( expectedCommission, 'USD' ) }
 				footerText={ translate( 'Next estimated payout amount' ) }
 				popoverTitle={ translate( 'Estimated amount' ) }
@@ -70,7 +68,6 @@ export default function ConsolidatedViews( { referrals, totalPayouts }: Consolid
 				isLoading={ isFetching }
 			/>
 			<ConsolidatedStatsCard
-				applyCoreStyles
 				value={ nextPayoutDate + '*' }
 				footerText={ translate( 'Next estimated payout date' ) }
 				popoverTitle={ translate( 'Estimated date' ) }
@@ -87,7 +84,6 @@ export default function ConsolidatedViews( { referrals, totalPayouts }: Consolid
 				) }
 			/>
 			<ConsolidatedStatsCard
-				applyCoreStyles
 				value={ pendingOrders }
 				footerText={ translate( 'Pending referral orders' ) }
 				popoverTitle={ translate( 'Pending orders' ) }
diff --git a/client/a8c-for-agencies/sections/referrals/primary/commission-overview/index.tsx b/client/a8c-for-agencies/sections/referrals/primary/commission-overview/index.tsx
@@ -99,7 +99,7 @@ export default function CommissionOverview( {
 					</>
 				) }
 				<div className="commission-overview__section-container">
-					<StepSection applyCoreStyles heading={ translate( 'How much can I earn?' ) }>
+					<StepSection heading={ translate( 'How much can I earn?' ) }>
 						<FoldableCard
 							header={
 								<>
@@ -181,10 +181,7 @@ export default function CommissionOverview( {
 						</FoldableCard>
 					</StepSection>
 
-					<StepSection
-						applyCoreStyles
-						heading={ translate( 'Eligibility requirements and terms of use?' ) }
-					>
+					<StepSection heading={ translate( 'Eligibility requirements and terms of use?' ) }>
 						<FoldableCard
 							header={ translate( 'Active referrals' ) }
 							expanded
diff --git a/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/layout-body-content.tsx b/client/a8c-for-agencies/sections/referrals/primary/referrals-overview/layout-body-content.tsx
@@ -213,15 +213,13 @@ export default function LayoutBodyContent( {
 					<>
 						{ ! isAutomatedReferral && <MigrationOffer /> }
 						<StepSection
-							applyCoreStyles
 							heading={
 								isAutomatedReferral
 									? translate( 'How do I start?' )
 									: translate( 'How do I get started?' )
 							}
 						>
 							<StepSectionItem
-								applyCoreStyles
 								isNewLayout={ isAutomatedReferral }
 								icon={ tipaltiLogo }
 								heading={
@@ -268,7 +266,6 @@ export default function LayoutBodyContent( {
 							/>
 							{ isAutomatedReferral ? (
 								<StepSectionItem
-									applyCoreStyles
 									iconClassName="referrals-overview__opacity-70-percent"
 									isNewLayout
 									icon={ reusableBlock }
@@ -285,7 +282,6 @@ export default function LayoutBodyContent( {
 								/>
 							) : (
 								<StepSectionItem
-									applyCoreStyles
 									iconClassName="referrals-overview__opacity-70-percent"
 									icon={ plugins }
 									heading={ translate( 'Verify your relationship with your clients' ) }
@@ -301,7 +297,6 @@ export default function LayoutBodyContent( {
 								/>
 							) }
 							<StepSectionItem
-								applyCoreStyles
 								isNewLayout={ isAutomatedReferral }
 								className="referrals-overview__step-section-woo-payments"
 								icon={ <WooLogo /> }
@@ -343,7 +338,6 @@ export default function LayoutBodyContent( {
 						</StepSection>
 						{ isAutomatedReferral && (
 							<StepSection
-								applyCoreStyles
 								className="referrals-overview__step-section-learn-more"
 								heading={ translate( 'Find out more' ) }
 							>
diff --git a/client/a8c-for-agencies/sections/team/primary/get-started/index.tsx b/client/a8c-for-agencies/sections/team/primary/get-started/index.tsx
@@ -58,9 +58,8 @@ export default function GetStarted() {
 					) }
 				</div>
 
-				<StepSection applyCoreStyles heading={ translate( 'How do I start?' ) }>
+				<StepSection heading={ translate( 'How do I start?' ) }>
 					<StepSectionItem
-						applyCoreStyles
 						isNewLayout
 						stepNumber={ 1 }
 						heading={ translate( 'Invite a team member' ) }
@@ -88,7 +87,7 @@ export default function GetStarted() {
 					/>
 				</StepSection>
 
-				<StepSection applyCoreStyles heading={ translate( 'Learn more about team members' ) }>
+				<StepSection heading={ translate( 'Learn more about team members' ) }>
 					<Button
 						className="team-list-get-started__learn-more-button"
 						variant="link"
diff --git a/client/a8c-for-agencies/sections/team/primary/team-accept-invite/no-multi-agency-message.tsx b/client/a8c-for-agencies/sections/team/primary/team-accept-invite/no-multi-agency-message.tsx
diff --git a/client/a8c-for-agencies/sections/woopayments/dashboard-content/consolidated-views.tsx b/client/a8c-for-agencies/sections/woopayments/dashboard-content/consolidated-views.tsx
diff --git a/client/a8c-for-agencies/sections/woopayments/primary/woopayments-site-setup/index.tsx b/client/a8c-for-agencies/sections/woopayments/primary/woopayments-site-setup/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -22,14 +22,12 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.step-section-item__heading {`
`25`		`- font-size: rem(16px);`
`26`		`- font-weight: 500;`
	`25`	`+ @include heading-medium;`
`27`	`26`	`}`
`28`	`27`
`29`	`28`	`.step-section-item__description {`
`30`	`29`	`margin-block-start: 4px;`
`31`		`- font-size: rem(14px);`
`32`		`- line-height: 1.7;`
	`30`	`+ @include body-medium;`
`33`	`31`	`color: var(--color-accent);`
`34`	`32`	`}`
`35`	`33`
`@@ -48,16 +46,6 @@`
`48`	`46`	`}`
`49`	`47`	`}`
`50`	`48`	`}`
`51`		`-`
`52`		`- &.is-core-styles {`
`53`		`- .step-section-item__heading {`
`54`		`- @include heading-medium;`
`55`		`- }`
`56`		`-`
`57`		`- .step-section-item__description {`
`58`		`- @include body-medium;`
`59`		`- }`
`60`		`- }`
`61`	`49`	`}`
`62`	`50`
`63`	`51`	`.step-section-item__status {`