Limit Global Styles: Add notice to newsletter onboarding (#68841)

client/landing/stepper/declarative-flow/internals/steps-repository/components/accent-color-control/index.tsx

@@ -11,6 +11,7 @@ import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormLabel from 'calypso/components/forms/form-label';
 import FormInput from 'calypso/components/forms/form-text-input';
 import { tip } from 'calypso/signup/icons';
+import GlobalStylesPremiumBadge from '../global-styles-premium-badge';
 
 import './style.scss';
 
@@ -79,6 +80,7 @@ const AccentColorControl = ( { accentColor, setAccentColor }: AccentColorControl
 					{ hasTranslation( 'Favorite color' ) || locale === 'en'
 						? __( 'Favorite color' )
 						: __( 'Accent color' ) }
+					<GlobalStylesPremiumBadge />
 				</FormLabel>
 				<FormInput
 					inputRef={ accentColorRef }

client/landing/stepper/declarative-flow/internals/steps-repository/components/global-styles-premium-badge/index.js

@@ -0,0 +1,66 @@
+import { isEnabled } from '@automattic/calypso-config';
+import { Popover } from '@automattic/components';
+import { useState } from '@wordpress/element';
+import { Icon, starFilled } from '@wordpress/icons';
+import { useI18n } from '@wordpress/react-i18n';
+import Badge from 'calypso/components/badge';
+import { hasTouch } from 'calypso/lib/touch-detect';
+
+import './style.scss';
+
+const GlobalStylesPremiumBadge = () => {
+	const { __ } = useI18n();
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+	if ( ! isEnabled( 'limit-global-styles' ) ) {
+		return null;
+	}
+
+	const isTouch = hasTouch();
+
+	return (
+		<>
+			<button
+				ref={ setPopoverAnchor }
+				className="global-styles-premium-badge"
+				onClick={ () => {
+					if ( ! isTouch ) {
+						return;
+					}
+					setIsPopoverVisible( ( state ) => ! state );
+				} }
+				onMouseEnter={ () => {
+					if ( isTouch ) {
+						return;
+					}
+					setIsPopoverVisible( true );
+				} }
+				onMouseLeave={ () => {
+					if ( isTouch ) {
+						return;
+					}
+					setIsPopoverVisible( false );
+				} }
+				type="button"
+			>
+				<Badge type="info">
+					<Icon icon={ starFilled } size={ 18 } />
+					<span>{ __( 'Premium' ) }</span>
+				</Badge>
+			</button>
+			<Popover
+				className="global-styles-premium-badge__popover"
+				context={ popoverAnchor }
+				isVisible={ isPopoverVisible }
+				onClose={ () => setIsPopoverVisible( false ) }
+			>
+				{ __(
+					'Upgrade to a paid plan for color changes to take effect and to unlock the advanced design customization'
+				) }
+			</Popover>
+		</>
+	);
+};
+
+export default GlobalStylesPremiumBadge;

client/landing/stepper/declarative-flow/internals/steps-repository/components/global-styles-premium-badge/style.scss

@@ -0,0 +1,44 @@
+.global-styles-premium-badge {
+	padding: 0;
+	margin: 0;
+	background: none;
+	border: none;
+	position: relative;
+
+	.badge {
+		background-color: var(--color-neutral-80);
+		color: var(--color-neutral-0);
+		font-size: 0.75rem;
+		margin-left: 8px;
+		padding-left: 6px;
+	}
+
+	svg {
+		fill: var(--color-neutral-0);
+		vertical-align: top;
+	}
+}
+
+.global-styles-premium-badge__popover {
+	margin-left: 4px;
+	outline: none;
+
+	.popover__inner {
+		background-color: var(--color-neutral-80);
+		color: var(--color-neutral-0);
+		max-width: 320px;
+		text-align: center;
+		padding: 8px;
+		border: none;
+		box-shadow: none;
+	}
+
+	&.is-top .popover__arrow {
+		border-top-color: var(--color-neutral-80);
+		bottom: 4px;
+
+		&::before {
+			display: none;
+		}
+	}
+}

config/wpcalypso.json

@@ -73,6 +73,7 @@
 		"layout/query-selected-editor": true,
 		"layout/support-article-dialog": true,
 		"legal-updates-banner": false,
+		"limit-global-styles": true,
 		"login/magic-login": true,
 		"logmein": true,
 		"mailchimp": true,