Shrink Big Sky beta label and make use of partial translations (#99145)

* Shrink Big Sky beta label

* Fix typescript error

Author: p-jackson

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/goals-first-design-choice.scss

@@ -46,6 +46,13 @@
 		font-weight: 500;
 		line-height: 24px;
 		text-align: left;
+
+		.design-choices__beta-label {
+          font-size: $font-body-extra-small;
+          font-weight: 600;
+          line-height: 14px;
+          text-align: left;
+		}
 	}
 
 	.goals-first-design-choice__description {

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/goals-first-design-choice.tsx

@@ -5,7 +5,8 @@ import './goals-first-design-choice.scss';
 
 interface Props {
 	className?: string;
-	title: string;
+	title: string | number | React.ReactElement;
+	ariaLabel?: string;
 	description: string;
 	bgImageSrc?: string;
 	fgImageSrc?: string;
@@ -17,44 +18,49 @@ interface Props {
 const GoalsFirstDesignChoice = ( {
 	className,
 	title,
+	ariaLabel: _ariaLabel,
 	description,
 	bgImageSrc,
 	fgImageSrc,
 	destination,
 	onSelect,
 	badgeLabel,
-}: Props ) => (
-	<button
-		className={ clsx( 'goals-first-design-choice', className ) }
-		aria-label={ title }
-		onClick={ () => onSelect( destination ) }
-	>
-		<div className="goals-first-design-choice__content">
-			<div className="goals-first-design-choice__background">
-				{ badgeLabel && (
-					<Badge type="info-blue" className="goals-first-design-choice__price-badge">
-						{ badgeLabel }
-					</Badge>
-				) }
-				<div className="goals-first-design-choice__background-item">
-					{ bgImageSrc && <img src={ bgImageSrc } alt={ title } /> }
-					{ fgImageSrc && (
-						<img
-							className="goals-first-design-choice__foreground-image"
-							src={ fgImageSrc }
-							alt={ title }
-						/>
+}: Props ) => {
+	const ariaLabel = ! _ariaLabel && typeof title === 'string' ? title : _ariaLabel;
+
+	return (
+		<button
+			className={ clsx( 'goals-first-design-choice', className ) }
+			aria-label={ ariaLabel }
+			onClick={ () => onSelect( destination ) }
+		>
+			<div className="goals-first-design-choice__content">
+				<div className="goals-first-design-choice__background">
+					{ badgeLabel && (
+						<Badge type="info-blue" className="goals-first-design-choice__price-badge">
+							{ badgeLabel }
+						</Badge>
 					) }
+					<div className="goals-first-design-choice__background-item">
+						{ bgImageSrc && <img src={ bgImageSrc } alt={ ariaLabel } /> }
+						{ fgImageSrc && (
+							<img
+								className="goals-first-design-choice__foreground-image"
+								src={ fgImageSrc }
+								alt={ ariaLabel }
+							/>
+						) }
+					</div>
 				</div>
-			</div>
-			<div className="goals-first-design-choice__foreground">
-				<div className="goals-first-design-choice__title">{ title }</div>
-				<div className="goals-first-design-choice__description">
-					{ preventWidows( description ) }
+				<div className="goals-first-design-choice__foreground">
+					<div className="goals-first-design-choice__title">{ title }</div>
+					<div className="goals-first-design-choice__description">
+						{ preventWidows( description ) }
+					</div>
 				</div>
 			</div>
-		</div>
-	</button>
-);
+		</button>
+	);
+};
 
 export default GoalsFirstDesignChoice;

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/index.tsx

@@ -2,7 +2,7 @@ import { isEnabled } from '@automattic/calypso-config';
 import { PLAN_PERSONAL } from '@automattic/calypso-products';
 import { OnboardSelect, ProductsList } from '@automattic/data-stores';
 import { themesIllustrationImage } from '@automattic/design-picker';
-import { localizeUrl } from '@automattic/i18n-utils';
+import { localizeUrl, useHasEnTranslation } from '@automattic/i18n-utils';
 import { StepContainer, isOnboardingFlow } from '@automattic/onboarding';
 import { useSelect } from '@wordpress/data';
 import clsx from 'clsx';
@@ -32,6 +32,7 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 		isOnboardingFlow( flow ) && isEnabled( 'onboarding/big-sky-before-plans' );
 
 	const translate = useTranslate();
+	const hasEnTranslation = useHasEnTranslation();
 	const { submit, goBack } = navigation;
 	const headerText = isGoalsFirstVariation
 		? translate( 'How would you like to start?' )
@@ -75,6 +76,28 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 		submit?.( { destination } );
 	};
 
+	const getCreateWithAILabel = () => {
+		if ( hasEnTranslation( 'Create with AI {{small}}(BETA){{/small}}' ) ) {
+			return translate( 'Create with AI {{small}}(BETA){{/small}}', {
+				components: {
+					small: <span className="design-choices__beta-label" />,
+				},
+			} );
+		}
+
+		if ( hasEnTranslation( 'Create with AI' ) ) {
+			return translate( '%s {{small}}(BETA){{/small}}', {
+				args: [ translate( 'Create with AI' ) ],
+				components: {
+					small: <span className="design-choices__beta-label" />,
+				},
+				comment: 'Do not translate',
+			} );
+		}
+
+		return translate( 'Create with AI (BETA)' );
+	};
+
 	const bigSkyBadgeLabel =
 		! isLoading && isEligible && personalProduct?.cost_per_month_display && isGoalsFirstVariation
 			? translate( 'Starting at %(price)s a month', {
@@ -160,7 +183,8 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 							) }
 							{ ! isLoading && isEligible && isGoalsFirstVariation && (
 								<GoalsFirstDesignChoice
-									title={ translate( 'Create with AI (BETA)' ) }
+									title={ getCreateWithAILabel() }
+									ariaLabel={ translate( 'Create with AI (BETA)' ) }
 									description={ translate(
 										'Use our AI website builder to easily and quickly build the site of your dreams.'
 									) }