Split the Global Styles variations in two: default and premium (#77333)

* Split the variations in two: default (free) and premium * Separate the free Style Variation from the paid ones * Remove props and CSS that are not needed anymore * Move description in the header and make CSS changes on mobile viewports * Add props to control the layout and label. With these props, we'll be able to display the style variations for different theme types. * Disable the split for non-free themes. * Remove margin * Fix regression in the Design Picker, align margins and remove <p> tag when there's no description * Change font color * Keep the previous heading color. * Increase the font size on the paragraph * Fix issues after code review, align horizontally the UI on mobile viewports in Theme showcase and set the item size on mobile view ports to 80px in the theme showcase. * Update packages/global-styles/src/components/global-styles-variations/index.tsx Co-authored-by: Miguel Torres <1233880+mmtr@users.noreply.github.com> --------- Co-authored-by: Miguel Torres <1233880+mmtr@users.noreply.github.com>
Automattic · Jun 2, 2023 · 08ac29c · 08ac29c
1 parent 49f693a
commit 08ac29c
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 110 deletions.
diff --git a/...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
@@ -643,14 +643,20 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 						require="@automattic/design-preview"
 						placeholder={ null }
 						previewUrl={ previewUrl }
+						splitPremiumVariations={
+							! selectedDesign.is_premium &&
+							! isBundledWithWooCommerce &&
+							! isPremiumThemeAvailable &&
+							! didPurchaseSelectedTheme &&
+							! isPluginBundleEligible
+						}
 						title={ headerDesignTitle }
 						description={ selectedDesign.description }
 						variations={ selectedDesignDetails?.style_variations }
 						selectedVariation={ selectedStyleVariation }
 						onSelectVariation={ previewDesignVariation }
 						actionButtons={ actionButtons }
 						recordDeviceClick={ recordDeviceClick }
-						showGlobalStylesPremiumBadge={ shouldLimitGlobalStyles }
 					/>
 				) : (
 					<WebPreview

diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
@@ -618,10 +618,17 @@ class ThemeSheet extends Component {
 	renderStyleVariations = () => {
 		const { styleVariations } = this.props;
 
+		const splitPremiumVariations =
+			! this.props.isExternallyManagedTheme &&
+			! this.props.isThemePurchased &&
+			! this.props.isBundledSoftwareSet &&
+			! this.props.isPremium;
+
 		return (
 			styleVariations.length > 0 && (
 				<ThemeStyleVariations
 					description={ this.getStyleVariationDescription() }
+					splitPremiumVariations={ splitPremiumVariations }
 					selectedVariation={ this.getSelectedStyleVariation() }
 					variations={ styleVariations }
 					onClick={ this.onStyleVariationClick }
@@ -1103,13 +1110,11 @@ class ThemeSheet extends Component {
 			} );
 		}
 
-		if ( ! shouldLimitGlobalStyles ) {
-			return '';
+		if ( ! shouldLimitGlobalStyles || isWpcomTheme ) {
+			return;
 		}
 
-		return isWpcomTheme
-			? translate( 'Additional styles require the Premium plan or higher.' )
-			: translate( 'Additional styles require the Business plan or higher.' );
+		return translate( 'Additional styles require the Business plan or higher.' );
 	};
 
 	renderSheet = () => {

diff --git a/client/my-sites/theme/theme-style-variations/index.tsx b/client/my-sites/theme/theme-style-variations/index.tsx
@@ -1,41 +1,37 @@
-import { PremiumBadge } from '@automattic/design-picker';
-import { translate } from 'i18n-calypso';
 import AsyncLoad from 'calypso/components/async-load';
 import type { StyleVariation } from '@automattic/design-picker/src/types';
 import type { TranslateResult } from 'i18n-calypso';
-
 import './style.scss';
 
 interface ThemeStyleVariationsProps {
 	description: TranslateResult;
 	selectedVariation: StyleVariation;
 	variations: StyleVariation[];
+	splitPremiumVariations: boolean;
 	onClick: ( variation: StyleVariation ) => void;
 }
 
 const ThemeStyleVariations = ( {
 	description,
 	selectedVariation,
 	variations,
+	splitPremiumVariations,
 	onClick,
 }: ThemeStyleVariationsProps ) => {
 	return (
 		<div className="theme__sheet-style-variations">
-			<div className="theme__sheet-style-variations-header">
-				<h2>
-					{ translate( 'Styles' ) }
-					<PremiumBadge shouldHideTooltip />
-				</h2>
-				<p>{ description }</p>
-			</div>
+			{ !! description && <p>{ description }</p> }
+
 			<div className="theme__sheet-style-variations-previews">
 				<AsyncLoad
-					require="@automattic/design-preview/src/components/style-variation"
+					require="@automattic/global-styles/src/components/global-styles-variations"
 					placeholder={ null }
-					selectedVariation={ selectedVariation }
-					variations={ variations }
-					showOnlyHoverViewDefaultVariation
-					onClick={ onClick }
+					globalStylesVariations={ variations }
+					selectedGlobalStylesVariation={ selectedVariation }
+					splitPremiumVariations={ splitPremiumVariations }
+					displayFreeLabel={ splitPremiumVariations }
+					showOnlyHoverViewDefaultVariation={ false }
+					onSelect={ onClick }
 				/>
 			</div>
 		</div>

diff --git a/client/my-sites/theme/theme-style-variations/style.scss b/client/my-sites/theme/theme-style-variations/style.scss
@@ -15,24 +15,6 @@
 		}
 	}
 
-	.global-styles-variations {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-		overflow: scroll;
-		padding: 12px 2px;
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		@include breakpoint-deprecated( "<960px" ) {
-			flex-wrap: nowrap;
-			padding: 12px 24px 16px 2px;
-		}
-	}
-
 	.theme__sheet-style-variations-header {
 		display: flex;
 		flex-direction: column;
@@ -63,7 +45,7 @@
 	}
 
 	.global-styles-variations__item {
-		flex-basis: 100px;
+		flex-basis: 80px;
 		flex-shrink: 0;
 
 		@include break-xlarge {

diff --git a/packages/design-preview/src/components/index.tsx b/packages/design-preview/src/components/index.tsx
@@ -15,10 +15,10 @@ interface PreviewProps {
 	variations?: StyleVariation[];
 	selectedVariation?: StyleVariation;
 	onSelectVariation: ( variation: StyleVariation ) => void;
+	splitPremiumVariations: boolean;
 	onClickCategory?: ( category: Category ) => void;
 	actionButtons: React.ReactNode;
 	recordDeviceClick: ( device: string ) => void;
-	showGlobalStylesPremiumBadge: boolean;
 }
 
 const INJECTED_CSS = `body{ transition: background-color 0.2s linear, color 0.2s linear; };`;
@@ -37,10 +37,10 @@ const Preview: React.FC< PreviewProps > = ( {
 	variations = [],
 	selectedVariation,
 	onSelectVariation,
+	splitPremiumVariations,
 	onClickCategory,
 	actionButtons,
 	recordDeviceClick,
-	showGlobalStylesPremiumBadge,
 } ) => {
 	const sitePreviewInlineCss = useMemo( () => {
 		if ( selectedVariation ) {
@@ -66,9 +66,9 @@ const Preview: React.FC< PreviewProps > = ( {
 				variations={ variations }
 				selectedVariation={ selectedVariation }
 				onSelectVariation={ onSelectVariation }
+				splitPremiumVariations={ splitPremiumVariations }
 				onClickCategory={ onClickCategory }
 				actionButtons={ actionButtons }
-				showGlobalStylesPremiumBadge={ showGlobalStylesPremiumBadge }
 			/>
 			<SitePreview
 				url={ previewUrl }

diff --git a/packages/design-preview/src/components/sidebar.tsx b/packages/design-preview/src/components/sidebar.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@automattic/components';
+import { GlobalStylesVariations, GlobalStylesObject } from '@automattic/global-styles';
 import { useState } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
-import StyleVariationPreviews from './style-variation';
 import type { Category, StyleVariation } from '@automattic/design-picker/src/types';
 
 interface CategoryBadgeProps {
@@ -34,9 +34,9 @@ interface SidebarProps {
 	variations: StyleVariation[];
 	selectedVariation?: StyleVariation;
 	onSelectVariation: ( variation: StyleVariation ) => void;
+	splitPremiumVariations: boolean;
 	onClickCategory?: ( category: Category ) => void;
 	actionButtons: React.ReactNode;
-	showGlobalStylesPremiumBadge: boolean;
 }
 
 const Sidebar: React.FC< SidebarProps > = ( {
@@ -49,9 +49,9 @@ const Sidebar: React.FC< SidebarProps > = ( {
 	variations = [],
 	selectedVariation,
 	onSelectVariation,
+	splitPremiumVariations,
 	onClickCategory,
 	actionButtons,
-	showGlobalStylesPremiumBadge,
 } ) => {
 	const translate = useTranslate();
 	const [ isShowFullDescription, setIsShowFullDescription ] = useState( false );
@@ -101,14 +101,16 @@ const Sidebar: React.FC< SidebarProps > = ( {
 				) }
 				{ variations.length > 0 && (
 					<div className="design-preview__sidebar-variations">
-						<h2>{ translate( 'Choose your style' ) }</h2>
-						<p>{ translate( 'You can change your style at any time.' ) }</p>
 						<div className="design-preview__sidebar-variations-grid">
-							<StyleVariationPreviews
-								variations={ variations }
-								selectedVariation={ selectedVariation }
-								onClick={ onSelectVariation }
-								showGlobalStylesPremiumBadge={ showGlobalStylesPremiumBadge }
+							<GlobalStylesVariations
+								globalStylesVariations={ variations as GlobalStylesObject[] }
+								selectedGlobalStylesVariation={ selectedVariation as GlobalStylesObject }
+								splitPremiumVariations={ splitPremiumVariations }
+								displayFreeLabel={ splitPremiumVariations }
+								showOnlyHoverViewDefaultVariation={ false }
+								onSelect={ ( globalStyleVariation: GlobalStylesObject ) =>
+									onSelectVariation( globalStyleVariation as StyleVariation )
+								}
 							/>
 						</div>
 					</div>

diff --git a/packages/design-preview/src/components/style-variation.tsx b/packages/design-preview/src/components/style-variation.tsx
@@ -1,6 +1,5 @@
-import { PremiumBadge } from '@automattic/design-picker';
 import { GlobalStylesVariations } from '@automattic/global-styles';
-import { translate } from 'i18n-calypso';
+import { TranslateResult } from 'i18n-calypso';
 import type { StyleVariation } from '@automattic/design-picker/src/types';
 import type { GlobalStylesObject } from '@automattic/global-styles/src/types';
 import './style.scss';
@@ -9,35 +8,22 @@ interface StyleVariationPreviewsProps {
 	variations: StyleVariation[];
 	selectedVariation?: StyleVariation;
 	onClick: ( variation: StyleVariation ) => void;
-	showGlobalStylesPremiumBadge: boolean;
+	description?: TranslateResult;
 	showOnlyHoverViewDefaultVariation?: boolean;
 }
 
 const StyleVariationPreviews: React.FC< StyleVariationPreviewsProps > = ( {
 	variations = [],
 	selectedVariation,
 	onClick,
-	showGlobalStylesPremiumBadge,
+	description,
 	showOnlyHoverViewDefaultVariation,
 } ) => {
 	return (
 		<GlobalStylesVariations
 			globalStylesVariations={ variations as GlobalStylesObject[] }
 			selectedGlobalStylesVariation={ selectedVariation as GlobalStylesObject }
-			premiumBadge={
-				showGlobalStylesPremiumBadge && (
-					<PremiumBadge
-						className="design-picker__premium-badge"
-						labelText={ translate( 'Upgrade' ) }
-						tooltipClassName="design-picker__premium-badge-tooltip"
-						tooltipPosition="top"
-						tooltipContent={ translate(
-							'Unlock this style, and tons of other features, by upgrading to a Premium plan.'
-						) }
-						focusOnShow={ false }
-					/>
-				)
-			}
+			description={ description }
 			showOnlyHoverViewDefaultVariation={ showOnlyHoverViewDefaultVariation }
 			onSelect={ ( globalStyleVariation: GlobalStylesObject ) =>
 				onClick( globalStyleVariation as StyleVariation )

diff --git a/packages/design-preview/src/components/style.scss b/packages/design-preview/src/components/style.scss
@@ -21,11 +21,10 @@
 	box-shadow: -4px 0 8px rgb(0 0 0 / 7%);
 	box-sizing: border-box;
 	display: flex;
-	height: 96px;
 	inset-inline-start: 0;
 	inset-inline-end: 0;
 	overflow: auto;
-	padding: 8px 24px 0;
+	padding: 8px 8px 0;
 	position: fixed;
 	top: 0;
 	z-index: z-index(".is-section-stepper", ".design-preview__sticky-variations");
@@ -70,12 +69,20 @@
 }
 
 .design-preview__sidebar-content {
+
+	.global-styles-variations__type.combined-variations {
+		.global-styles-variations__header {
+			display: none;
+			@include break-xlarge {
+				display: flex;
+			}
+		}
+	}
+
 	h2 {
 		color: var(--studio-gray-100);
-		display: none;
 		font-size: $font-body-small;
 		font-weight: 500;
-		margin-bottom: 0.5rem;
 	}
 
 	.design-preview__sidebar-title {
@@ -178,12 +185,6 @@
 			margin-top: 2rem;
 		}
 	}
-
-	@include break-xlarge {
-		h2 {
-			display: block;
-		}
-	}
 }
 
 .design-preview__sidebar-variations {
@@ -196,6 +197,14 @@
 		line-height: 20px;
 	}
 
+	.global-styles-variations__header {
+
+		h2 {
+			font-size: $font-body-small;
+			font-weight: 500;
+		}
+	}
+
 	.global-styles-variations {
 		align-items: center;
 		display: flex;
@@ -218,10 +227,8 @@
 		.global-styles-variations {
 			box-sizing: border-box;
 			display: grid;
-			gap: 12px;
+			column-gap: 12px;
 			grid-template-columns: repeat(2, 1fr);
-			margin: 24px -5px 0;
-			padding: 2px;
 			width: 100%;
 
 			.global-styles-variations__item {