Merge pull request #105 from saucal/feature/refactor-plugin-navigation

Feature/refactor plugin navigation

assets/source/catalog-sync/app/App.js → assets/source/catalog-sync/App.js

@@ -10,13 +10,16 @@ import SyncState from './sections/SyncState';
 import SyncIssues from './sections/SyncIssues';
 import TransientNotices from './components/TransientNotices';
 import { useCreateNotice } from './helpers/effects';
+import NavigationClassic from '../components/navigation-classic';
 
-const App = () => {
+const CatalogSyncApp = () => {
 	useCreateNotice( wcSettings.pin4wc.error );
 
 	return (
 		<div className="woocommerce-layout">
-			<div className="woocommerce-layout__main">
+			<div className="woocommerce-layout__main pin4wc-catalog-sync">
+				<NavigationClassic />
+
 				<TransientNotices />
 				<div className="pin4wc-catalog-sync__container">
 					<SyncState />
@@ -27,4 +30,4 @@ const App = () => {
 	);
 };
 
-export default App;
+export default CatalogSyncApp;

assets/source/catalog-sync/app/sections/SyncIssuesTable.js → assets/source/catalog-sync/sections/SyncIssuesTable.js

@@ -38,9 +38,9 @@ const SyncIssuesTable = ( {
 
 	const getRows = ( data ) => {
 		const statuses = {
-			success: 'green',
-			warning: 'yellow',
-			error: 'red',
+			success: 'success',
+			warning: 'warning',
+			error: 'error',
 		};
 
 		const icons = {

assets/source/catalog-sync/app/sections/SyncState.js → assets/source/catalog-sync/sections/SyncState.js

@@ -7,7 +7,7 @@ import {
 	Card,
 	CardHeader,
 	CardBody,
-	__experimentalText as Text,
+	__experimentalText as Text, // eslint-disable-line @wordpress/no-unsafe-wp-apis --- _experimentalText unlikely to change/disappear and also used by WC Core
 } from '@wordpress/components';
 
 /**

assets/source/catalog-sync/app/sections/SyncStateTable.js → assets/source/catalog-sync/sections/SyncStateTable.js

@@ -26,10 +26,10 @@ const SyncStateTable = ( { workflow } ) => {
 
 	const getRows = ( data ) => {
 		const statuses = {
-			success: 'green',
-			pending: 'yellow',
-			warning: 'yellow',
-			error: 'red',
+			success: 'success',
+			pending: 'warning',
+			warning: 'warning',
+			error: 'error',
 		};
 
 		const icons = {

assets/source/components/app-tab-nav/index.js

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { NavigableMenu } from '@wordpress/components';
+import { Link } from '@woocommerce/components';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const TabLink = ( { tabId, href, children, selected, ...rest } ) => {
+	return (
+		<Link
+			role="tab"
+			tabIndex={ selected ? null : -1 }
+			aria-selected={ selected }
+			id={ tabId }
+			href={ href }
+			{ ...rest }
+		>
+			{ children }
+		</Link>
+	);
+};
+
+const AppTabNav = ( props ) => {
+	const { selectedKey, tabs } = props;
+
+	return (
+		<div className="app-tab-nav">
+			<NavigableMenu
+				role="tablist"
+				orientation="horizontal"
+				className="app-tab-nav__tabs"
+			>
+				{ tabs.map( ( tab ) => (
+					<TabLink
+						className={ classnames(
+							'components-button',
+							'app-tab-nav__tabs-item',
+							{
+								'is-active': tab.key === selectedKey,
+							}
+						) }
+						tabId={ `${ tab.key }` }
+						aria-controls={ `${ tab.key }-view` }
+						selected={ tab.key === selectedKey }
+						key={ tab.key }
+						href={ tab.href }
+					>
+						{ tab.title }
+					</TabLink>
+				) ) }
+			</NavigableMenu>
+		</div>
+	);
+};
+
+export default AppTabNav;

assets/source/components/app-tab-nav/style.scss

@@ -0,0 +1,61 @@
+.app-tab-nav__tabs {
+	display: flex;
+	align-items: stretch;
+	box-shadow: inset 0 -1px 0 #ccc;
+	margin-bottom: var(--main-gap);
+
+	&-item {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		border-radius: 0;
+		cursor: pointer;
+		height: 48px;
+		padding: 3px 16px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
+		margin-left: 0;
+		font-weight: 500;
+		//transition: box-shadow 0.1s linear;
+		box-sizing: border-box;
+
+		// This pseudo-element "duplicates" the tab label and sets the text to bold.
+		// This ensures that the tab doesn't change width when selected.
+		// See: https://github.com/WordPress/gutenberg/pull/9793
+		&::after {
+			content: attr(data-label);
+			display: block;
+			height: 0;
+			overflow: hidden;
+			speak: none;
+			visibility: hidden;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 2px var(--wp-admin-theme-color);
+		}
+
+		&.is-active {
+			// The transparent shadow ensures no jumpiness when focus animates on an active tab.
+			box-shadow: inset 0 0 0 2px transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
+			position: relative;
+
+			// This border appears in Windows High Contrast mode instead of the box-shadow.
+			&::before {
+				content: "";
+				position: absolute;
+				top: 0;
+				bottom: 1px;
+				right: 0;
+				left: 0;
+				border-bottom: 4px solid transparent;
+			}
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+		}
+
+		&.is-active:focus {
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color), inset 0 0 -4px 0 0 var(--wp-admin-theme-color);
+		}
+	}
+}

assets/source/components/navigation-classic/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import MainTabNav from './main-tab-nav';
+
+/**
+ * Display tab-based navigation when the new WC Navigation is not enabled.
+ *
+ * @return {import("./main-tab-nav")} Retuns MainTabNav if WC Navigation is not enabled.
+ */
+const NavigationClassic = () => {
+	const navigationEnabled = !! window.wcAdminFeatures?.navigation;
+
+	return navigationEnabled ? null : <MainTabNav />;
+};
+
+export default NavigationClassic;