Implement UX

.gitignore

@@ -13,4 +13,3 @@ Thumbs.db
 *.map
 yarn.lock
 *.zip
-.npmrc

modules/admin/assets/js/components/link/link-with-icon-and-title.js

@@ -0,0 +1,24 @@
+import Stack from '@elementor/ui/Stack';
+import Typography from '@elementor/ui/Typography';
+import Link from '@elementor/ui/Link';
+import SettingsIcon from '@elementor/icons/SettingsIcon';
+import { __ } from '@wordpress/i18n';
+
+export const LinkWithIconAndTitle = ( {
+		title,
+		linkTitle,
+		link = '#',
+		Icon = SettingsIcon,
+		onClick = () => {},
+	} ) => {
+	const linkTitleText = linkTitle || __( 'Customize', 'hello-plus' );
+	return (
+		<Stack direction="row" gap={ 1 } sx={ { alignContent: 'flex-start' } }>
+			<Icon fontSize="tiny" color="secondary" sx={ { pt: 0.2 } } />
+			<Stack direction="column">
+				<Typography variant="subtitle1" sx={ { lineHeight: 'initial' } }>{ title }</Typography>
+				<Link color="secondary" underline="hover" onClick={ onClick } href={ link }>{ linkTitleText }</Link>
+			</Stack>
+		</Stack>
+	);
+};

modules/admin/assets/js/components/link/promotion-link.js

@@ -1,14 +1,26 @@
 import Stack from '@elementor/ui/Stack';
 import Typography from '@elementor/ui/Typography';
 import Button from '@elementor/ui/Button';
+import Paper from '@elementor/ui/Paper';
+import Image from '@elementor/ui/Image';
+import { Feature } from '../promotions/feature';
 
-export const PromotionLink = ( { image, alt, title, message, button, link } ) => {
+export const PromotionLink = ( { image, alt, title, message, button, link, features } ) => {
 	return (
-		<Stack direction="column" sx={ { alignItems: 'center', justifyContent: 'center', marginBlockStart: 2, marginBlockEnd: 1 } }>
-			<img src={ image } alt={ alt } />
-			<Typography align="center" fontWeight="bold">{ title }</Typography>
-			<Typography align="center" >{ message }</Typography>
-			<Button href={ link } target="_blank" rel="noreferrer">{ button }</Button>
-		</Stack>
+		<Paper sx={ { p: 3 } }>
+			<Stack direction="column" sx={ { alignItems: 'center', justifyContent: 'center' } }>
+				<Image src={ image } alt={ alt } variant="square" sx={ { width: 100, height: 100 } } />
+				<Typography sx={ { mt: 1 } } align="center" variant="h6">{ title }</Typography>
+				<Typography align="center" variant="body2" >{ message }</Typography>
+				<Button sx={ { mt: 2 } } color="promotion" variant="contained" href={ link } target="_blank" rel="noreferrer">{ button }</Button>
+			</Stack>
+
+			{ features && (
+				<Stack gap={ 1 } sx={ { mt: 4 } }>
+					{ features.map( ( feature, i ) => {
+					return <Feature key={ i } text={ feature } />;
+				} ) }
+				</Stack> ) }
+		</Paper>
 	);
 };

modules/admin/assets/js/components/linkGroup/column-link-group.js

@@ -0,0 +1,12 @@
+import Stack from '@elementor/ui/Stack';
+import { LinkWithIconAndTitle } from '../link/link-with-icon-and-title';
+import Typography from '@elementor/ui/Typography';
+
+export const ColumnLinkGroup = ( { links, title = '' } ) => {
+	return (
+		<Stack direction="column" gap={ 3 }>
+			{ title && ( <Typography variant="h6">{ title }</Typography> ) }
+			{ links.map( ( link ) => <LinkWithIconAndTitle key={ link.title } { ...link } /> ) }
+		</Stack>
+	);
+};

modules/admin/assets/js/components/paper/base-admin-paper.js

@@ -0,0 +1,9 @@
+import Paper from '@elementor/ui/Paper';
+
+export const BaseAdminPaper = ( { children } ) => {
+	return (
+		<Paper elevation={ 1 } sx={ { px: 4, py: 3 } }>
+			{ children }
+		</Paper>
+	);
+};

modules/admin/assets/js/components/paper/quick-links.js

@@ -0,0 +1,25 @@
+import { BaseAdminPaper } from './base-admin-paper';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import Stack from '@elementor/ui/Stack';
+import { ColumnLinkGroup } from '../linkGroup/column-link-group';
+import PhotoIcon from '@elementor/icons/PhotoIcon';
+import BrushIcon from '@elementor/icons/BrushIcon';
+import UnderlineIcon from '@elementor/icons/UnderlineIcon';
+
+export const QuickLinks = () => {
+	return (
+		<BaseAdminPaper>
+			<Typography variant="h6">{ __( 'Quick links', 'hello-plus' ) }</Typography>
+			<Typography variant="body2" sx={ { mb: 3 } }>
+				{ __( 'These quick actions will get your site airborne in a flash.', 'hello-plus' ) }
+			</Typography>
+			<Stack direction="row" gap={ 9 }>
+				<ColumnLinkGroup links={ [ { title: __( 'Site Name', 'hello-plus' ) } ] } />
+				<ColumnLinkGroup links={ [ { title: __( 'Site Logo', 'hello-plus' ), Icon: PhotoIcon } ] } />
+				<ColumnLinkGroup links={ [ { title: __( 'Site Colors', 'hello-plus' ), Icon: BrushIcon } ] } />
+				<ColumnLinkGroup links={ [ { title: __( 'Site Fonts', 'hello-plus' ), Icon: UnderlineIcon } ] } />
+			</Stack>
+		</BaseAdminPaper>
+	);
+};

modules/admin/assets/js/components/paper/site-parts.js

@@ -0,0 +1,28 @@
+import { BaseAdminPaper } from './base-admin-paper';
+import Stack from '@elementor/ui/Stack';
+import { ColumnLinkGroup } from '../linkGroup/column-link-group';
+import { __ } from '@wordpress/i18n';
+import { useAdminContext } from '../../hooks/use-admin-context';
+
+export const SiteParts = () => {
+	const { adminSettings: { siteParts: { siteParts = [], sitePages = [], general = [] } = {} } = {} } = useAdminContext();
+
+	return (
+		<BaseAdminPaper>
+			<Stack direction="row" gap={ 12 }>
+				<ColumnLinkGroup
+					title={ __( 'Site Parts', 'hello-plus' ) }
+					links={ siteParts }
+				/>
+				<ColumnLinkGroup
+					title={ __( 'Site Pages', 'hello-plus' ) }
+					links={ sitePages }
+				/>
+				<ColumnLinkGroup
+					title={ __( 'General', 'hello-plus' ) }
+					links={ general }
+				/>
+			</Stack>
+		</BaseAdminPaper>
+	);
+};

modules/admin/assets/js/components/paper/welcome.js

@@ -0,0 +1,28 @@
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import { useAdminContext } from '../../hooks/use-admin-context';
+import Stack from '@elementor/ui/Stack';
+import Button from '@elementor/ui/Button';
+import { BaseAdminPaper } from './base-admin-paper';
+
+export const Welcome = () => {
+	const { adminSettings: { welcome = [] } } = useAdminContext();
+
+	return (
+		<BaseAdminPaper>
+			<Typography variant="h6">{ __( 'Welcome to Hello Plus', 'hello-plus' ) }</Typography>
+			<Typography variant="body2" sx={ { mb: 3 } }>
+				{ __( 'Here you’ll find links to some site settings that will help you set up and get running as soon as possible. With Hello+ you’ll find creating your website is a breeze.', 'hello-plus' ) }
+			</Typography>
+			<Stack gap={ 1 } direction="row">
+				{
+					welcome.map( ( { title, link, variant } ) => {
+						return (
+							<Button key={ title } href={ link } variant={ variant } >{ title }</Button>
+						);
+					} )
+				}
+			</Stack>
+		</BaseAdminPaper>
+	);
+};

modules/admin/assets/js/components/promotions/feature.js

@@ -0,0 +1,14 @@
+import Stack from '@elementor/ui/Stack';
+import CheckedCircleIcon from '@elementor/icons/CheckedCircleIcon';
+import Typography from '@elementor/ui/Typography';
+
+export const Feature = ( { text } ) => {
+	return (
+		<Stack direction="row" gap={ 1 } alignItems="center">
+			<CheckedCircleIcon color="promotion" />
+			<Typography variant="body2">
+				{ text }
+			</Typography>
+		</Stack>
+	);
+};

modules/admin/assets/js/components/promotions/list.js

@@ -1,13 +1,15 @@
 import { PromotionLink } from '../link/promotion-link';
-import { useDashboardContext } from '../../hooks/use-dashboard-context';
+import { useAdminContext } from '../../hooks/use-admin-context';
+import Stack from '@elementor/ui/Stack';
 
 export const PromotionsList = () => {
-	const { promotionsLinks } = useDashboardContext();
+	const { promotionsLinks } = useAdminContext();
+
 	return (
-		<div className="hello_plus__action_links">
+		<Stack direction="column" gap={ 2 }>
 			{ promotionsLinks.map( ( link, i ) => {
 				return <PromotionLink key={ i } { ...link } />;
 			} ) }
-		</div>
+		</Stack>
 	);
 };

modules/admin/assets/js/components/top-bar/top-bar.js

@@ -1,18 +1,9 @@
 import AppBar from '@elementor/ui/AppBar';
-import Toolbar from '@elementor/ui/Toolbar';
-import { __ } from '@wordpress/i18n';
-import HomeIcon from '@elementor/icons/HomeIcon';
 import HelpIcon from '@elementor/icons/HelpIcon';
 import { TopBarLinks } from './top-bar-links';
-import { TopBarLink } from '../link/top-bar-link';
-
-const home = {
-	label: __( 'Hello+', 'hello-plus' ),
-	hrefStr: '#',
-	children: <HomeIcon />,
-	color: 'primary',
-	aria: 'menu',
-};
+import Stack from '@elementor/ui/Stack';
+import SvgIcon from '@elementor/ui/SvgIcon';
+import { ReactComponent as ElementorNoticeIcon } from '../../../images/elementor-notice-icon.svg';
 
 const adminTopBarLinks = [
 	{
@@ -31,11 +22,13 @@ const adminTopBarLinks = [
 
 export const TopBar = () => {
 	return (
-		<AppBar position="static" elevation={ 6 }>
-			<Toolbar sx={ { alignItems: 'center', backgroundColor: 'background.default', justifyContent: 'space-between' } } padding={ 2 }>
-				<TopBarLink linkData={ home } />
+		<AppBar position="absolute" sx={ { width: 'calc(100% - 160px)', top: 0, right: 0, height: 50, backgroundColor: 'background.default' } }>
+			<Stack direction="row" sx={ { alignItems: 'center', height: 50, px: 2, backgroundColor: 'background.default', justifyContent: 'space-between' } }>
+				<SvgIcon fontSize="medium" color="primary">
+					<ElementorNoticeIcon />
+				</SvgIcon>
 				<TopBarLinks linksData={ adminTopBarLinks } />
-			</Toolbar>
+			</Stack>
 		</AppBar>
 	);
 };

modules/admin/assets/js/hello-plus-admin.js

@@ -1,12 +1,12 @@
 import { createRoot } from 'react-dom/client';
 import { AdminPage } from './pages/admin-page.js';
-import { DashboardProvider } from './providers/dashboard-provider';
+import { AdminProvider } from './providers/admin-provider';
 
 const App = () => {
 	return (
-		<DashboardProvider>
+		<AdminProvider>
 			<AdminPage />
-		</DashboardProvider>
+		</AdminProvider>
 	);
 };
 

modules/admin/assets/js/hello-plus-topbar.js

@@ -0,0 +1,20 @@
+import { AdminProvider } from './providers/admin-provider';
+import { createRoot } from 'react-dom/client';
+import { TopBar } from './components/top-bar/top-bar';
+
+const App = () => {
+	return (
+		<AdminProvider>
+			<TopBar />
+		</AdminProvider>
+	);
+};
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	const container = document.getElementById( 'ehp-admin-top-bar-root' );
+
+	if ( container ) {
+		const root = createRoot( container );
+		root.render( <App /> );
+	}
+} );

modules/admin/assets/js/hooks/use-admin-context.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { AdminContext } from '../providers/admin-provider';
+
+export const useAdminContext = () => {
+	return useContext( AdminContext );
+};

modules/admin/assets/js/layouts/grids/grid-with-action-links.js

@@ -1,16 +1,20 @@
 import Grid from '@elementor/ui/Grid';
 import { PromotionsList } from '../../components/promotions/list';
+import useMediaQuery from '@elementor/ui/useMediaQuery';
 
 export const GridWithActionLinks = ( { children } ) => {
+	const isSmallScreen = useMediaQuery( ( theme ) => theme.breakpoints.down( 'sm' ) );
+
 	return (
-		<Grid container spacing={ 1 }>
-			<Grid item xs={ 12 } lg={ 10 }>
+		<Grid container spacing={ 2 }>
+			<Grid item xs={ 12 } sm={ isSmallScreen ? 12 : true } md={ isSmallScreen ? 12 : true } lg={ isSmallScreen ? 12 : true } xl={ isSmallScreen ? 12 : true }>
 				{ children }
 			</Grid>
-			<Grid item xs={ 12 } lg={ 2 }>
-				<PromotionsList />
-			</Grid>
+			{ ! isSmallScreen && (
+				<Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 3 } xl={ 3 } style={ { maxWidth: 300 } }>
+					<PromotionsList />
+				</Grid>
+			) }
 		</Grid>
-
 	);
 };

modules/admin/assets/js/pages/admin-page.js

@@ -2,22 +2,20 @@ import Box from '@elementor/ui/Box';
 
 import { ThemeProvider } from '@elementor/ui/styles';
 
-import { TopBar } from '../components/top-bar/top-bar';
 import { GridWithActionLinks } from '../layouts/grids/grid-with-action-links';
 import Stack from '@elementor/ui/Stack';
-import { QuickLinks } from '../components/papers/quick-links';
-import { Welcome } from '../components/papers/welcome';
-import { SiteParts } from '../components/papers/site-parts';
+import { QuickLinks } from '../components/paper/quick-links';
+import { Welcome } from '../components/paper/welcome';
+import { SiteParts } from '../components/paper/site-parts';
 
 export const AdminPage = () => {
 	return (
 		<ThemeProvider colorScheme="auto">
 			<Box className="hello_plus__notices" component="div">
 			</Box>
-			<TopBar />
-			<Box p={ 3 }>
+			<Box p={ 1 }>
 				<GridWithActionLinks>
-					<Stack direction="column" gap={ 1 }>
+					<Stack direction="column" gap={ 2 }>
 						<Welcome />
 						<QuickLinks />
 						<SiteParts />

modules/admin/assets/js/providers/admin-provider.js

@@ -0,0 +1,27 @@
+import { createContext, useEffect } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+
+export const AdminContext = createContext();
+
+export const AdminProvider = ( { children } ) => {
+	const [ promotionsLinks, setPromotionsLinks ] = React.useState( [] );
+	const [ adminSettings, setAdminSettings ] = React.useState( {} );
+
+	useEffect( () => {
+		apiFetch( { path: '/elementor-hello-plus/v1/promotions' } ).then( ( links ) => {
+			setPromotionsLinks( links.links );
+		} );
+	}, [] );
+
+	useEffect( () => {
+		apiFetch( { path: '/elementor-hello-plus/v1/admin-settings' } ).then( ( settings ) => {
+			setAdminSettings( settings.config );
+		} );
+	}, [] );
+
+	return (
+		<AdminContext.Provider value={ { promotionsLinks, adminSettings } }>
+			{ children }
+		</AdminContext.Provider>
+	);
+};