Show breadcrumbs in individual theme header (#94038)

* Change the theme header to breadcrumbs. * Reduce top layout padding for theme section. * Use localizeThemesPath for breadcrumb URL. * Add tracks event on click. * Translate Themes breadcrumb. * Fix box-sizing and remove header cake styles.
Automattic · Sep 9, 2024 · 53acd87 · 53acd87
1 parent 5461f53
commit 53acd87
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 51 deletions.
diff --git a/client/components/breadcrumb/README.md b/client/components/breadcrumb/README.md
@@ -29,6 +29,6 @@ const BreadcrumbExamples = () => {
 
 ## Props
 
-- `items` (`{ label: string; href?: string }[]`) - The Navigations items to be shown
+- `items` (`{ label: string; href?: string; helpBubble?: React.ReactElement; onClick?: () => void }[]`) - The Navigations items to be shown
 - `compact` (`boolean`) - Displays only the previous item URL (optional)
 - `mobileItem` (`string`) - In compact version, displays this value. If not passed defaults to "Back" (optional)
diff --git a/client/components/breadcrumb/index.tsx b/client/components/breadcrumb/index.tsx
@@ -61,7 +61,7 @@ const StyledGridicon = styled( Gridicon )`
 	color: var( --color-neutral-10 );
 `;
 
-const HelpBuble = styled( InfoPopover )`
+const HelpBubble = styled( InfoPopover )`
 	margin-left: 7px;
 	display: flex;
 	align-items: center;
@@ -79,13 +79,18 @@ const renderHelpBubble = ( item: Item ) => {
 	}
 
 	return (
-		<HelpBuble icon="help-outline" position="right">
+		<HelpBubble icon="help-outline" position="right">
 			{ item.helpBubble }
-		</HelpBuble>
+		</HelpBubble>
 	);
 };
 
-export type Item = { label: string; href?: string; helpBubble?: React.ReactElement };
+export type Item = {
+	label: string;
+	href?: string;
+	helpBubble?: React.ReactElement;
+	onClick?: () => void;
+};
 interface Props {
 	items: Item[];
 	mobileItem?: Item;
@@ -127,11 +132,13 @@ const Breadcrumb: React.FunctionComponent< Props > = ( props ) => {
 
 	return (
 		<StyledUl className="breadcrumbs">
-			{ items.map( ( item: { href?: string; label: string }, index: Key ) => (
+			{ items.map( ( item: Item, index: Key ) => (
 				<StyledLi key={ index }>
 					{ index !== 0 && <StyledGridicon icon="chevron-right" size={ 14 } /> }
 					{ item.href && index !== items.length - 1 ? (
-						<a href={ item.href }>{ item.label }</a>
+						<a href={ item.href } onClick={ item.onClick }>
+							{ item.label }
+						</a>
 					) : (
 						<span>{ item.label }</span>
 					) }

diff --git a/client/components/navigation-header/README.md b/client/components/navigation-header/README.md
@@ -2,6 +2,7 @@
 
 This component displays a header with a breadcrumb.
 It can also include children items which will be positioned to the far right.
+It will not show less than 2 items.
 
 ## How to use
 
@@ -20,7 +21,7 @@ function render() {
 
 ## Props
 
-- `navigationItems` (`{ label: string; href: string }[]`) - The Navigations items to be shown
+- `navigationItems` (`{ label: string; href?: string; helpBubble?: React.ReactElement; onClick?: () => void }[]`) - The Navigations items to be shown
 - `id` (`string`) - ID for the header (optional)
 - `className` (`string`) - A class name for the wrapped component (optional)
 - `children` (`nodes`) – Any children elements which are being rendered to the far right (optional)

diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
@@ -39,9 +39,9 @@ import QuerySitePlans from 'calypso/components/data/query-site-plans';
 import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
 import QueryUserPurchases from 'calypso/components/data/query-user-purchases';
 import SyncActiveTheme from 'calypso/components/data/sync-active-theme';
-import HeaderCake from 'calypso/components/header-cake';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import Main from 'calypso/components/main';
+import NavigationHeader from 'calypso/components/navigation-header';
 import PremiumGlobalStylesUpgradeModal from 'calypso/components/premium-global-styles-upgrade-modal';
 import ThemeSiteSelectorModal from 'calypso/components/theme-site-selector-modal';
 import { THEME_TIERS } from 'calypso/components/theme-tier/constants';
@@ -1215,18 +1215,14 @@ class ThemeSheet extends Component {
 		return styleVariations.find( ( variation ) => variation.slug === selectedStyleVariationSlug );
 	};
 
-	goBack = () => {
-		const { backPath, locale, isLoggedIn, themeId } = this.props;
-		this.props.recordTracksEvent( 'calypso_theme_sheet_back_click', { theme_name: themeId } );
-
-		// Use history back when coming from customize your store screen.
-		const urlParams = new URLSearchParams( window.location.search );
-		if ( urlParams.has( 'from', 'customize-store' ) && window.history.length > 1 ) {
-			window.history.back();
-			return;
-		}
+	getBackLink = () => {
+		const { backPath, locale, isLoggedIn } = this.props;
+		return localizeThemesPath( backPath, locale, ! isLoggedIn );
+	};
 
-		page( localizeThemesPath( backPath, locale, ! isLoggedIn ) );
+	handleBackLinkClick = () => {
+		const { themeId } = this.props;
+		this.props.recordTracksEvent( 'calypso_theme_sheet_back_click', { theme_name: themeId } );
 	};
 
 	getBannerUpsellTitle = () => <BannerUpsellTitle { ...this.props } />;
@@ -1377,6 +1373,11 @@ class ThemeSheet extends Component {
 			'is-removed': isRemoved,
 		} );
 
+		const navigationItems = [
+			{ label: translate( 'Themes' ), href: this.getBackLink(), onClick: this.handleBackLinkClick },
+			{ label: title },
+		];
+
 		return (
 			<Main className="theme__sheet">
 				<QueryCanonicalTheme themeId={ this.props.themeId } siteId={ siteId } />
@@ -1426,14 +1427,7 @@ class ThemeSheet extends Component {
 				/>
 				<ThanksModal source="details" themeId={ this.props.themeId } />
 				<ActivationModal source="details" />
-				<div className="theme__sheet-action-bar-container">
-					<HeaderCake
-						className="theme__sheet-action-bar"
-						backText={ translate( 'Back to themes' ) }
-						onClick={ this.goBack }
-						alwaysShowBackText
-					/>
-				</div>
+				<NavigationHeader navigationItems={ navigationItems } />
 				<div className={ columnsClassName }>
 					<div className="theme__sheet-column-header">
 						{ this.renderStagingPaidThemeNotice() }

diff --git a/client/my-sites/theme/style.scss b/client/my-sites/theme/style.scss
@@ -17,6 +17,7 @@ $button-border: 4px;
 
 	.layout.is-logged-in .layout__content {
 		overflow: clip;
+		padding-top: 47px;
 
 		.theme__sheet-screenshot,
 		.theme__sheet-web-preview {
@@ -61,6 +62,17 @@ $button-border: 4px;
 			overflow-y: auto;
 		}
 	}
+
+	.theme__sheet .navigation-header {
+		margin: 0 auto;
+		max-width: $theme-sheet-content-max-width;
+		padding: 24px 44px;
+
+		@media screen and (min-width: 960px) {
+			padding: 24px 20px;
+			box-sizing: initial;
+		}
+	}
 }
 
 .main.theme__sheet {
@@ -288,29 +300,6 @@ $button-border: 4px;
 	grid-area: preview;
 }
 
-.theme__sheet-action-bar-container {
-	box-shadow: 0 1px var(--color-border-subtle);
-}
-
-.header-cake.card.theme__sheet-action-bar {
-	box-shadow: none;
-	box-sizing: content-box;
-	margin: 0 auto;
-	max-width: $theme-sheet-content-max-width;
-	min-height: 70px;
-	padding: 0 20px;
-	position: relative;
-
-	@include breakpoint-deprecated( "<960px" ) {
-		margin: 0 0 32px 0;
-		min-height: 60px;
-	}
-}
-
-.is-mobile-app-view .header-cake.card.theme__sheet-action-bar {
-	display: none;
-}
-
 .theme__sheet-primary-button {
 	position: absolute;
 	top: 5px;