@elementor/editor-site-navigation 0.7.0 → 0.8.0

package/src/components/panel/pages-list/__tests__/pages-collapsible-list.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Page } from '../../../../types';
+import PagesCollapsibleList from '../pages-collapsible-list';
+
+jest.mock( '@elementor/editor-documents' );
+
+describe( '@elementor/editor-site-navigation - PagesCollapsibleList', () => {
+	const mockPosts: Page[] = [
+		{ id: 1, type: 'page', title: 'Home', status: 'draft' },
+		{ id: 2, type: 'page', title: 'About', status: 'publish' },
+		{ id: 3, type: 'page', title: 'Services', status: 'publish', isHome: true },
+		{ id: 4, type: 'page', title: 'Contact', status: 'draft' },
+		{ id: 5, type: 'page', title: 'FAQ', status: 'publish' },
+	];
+
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render closed list', () => {
+		// Act.
+		const { getByText, queryByText } = render(
+			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ false } />,
+		);
+
+		// Assert.
+		const label = getByText( `Pages (${ mockPosts.length })` );
+		expect( label ).toBeInTheDocument();
+
+		const postInList = queryByText( 'Services' );
+		expect( postInList ).toBeNull();
+	} );
+
+	it( 'should render open list', () => {
+		// Act.
+		const { getByText } = render(
+			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ true } />,
+		);
+
+		// Assert.
+		const label = getByText( `Pages (${ mockPosts.length })` );
+		expect( label ).toBeInTheDocument();
+
+		const postInList = getByText( 'Services' );
+		expect( postInList ).toBeInTheDocument();
+	} );
+} );

package/src/components/panel/pages-list/collapsible-list.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ComponentType, PropsWithChildren, useState } from 'react';
+import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, styled, SvgIconProps } from '@elementor/ui';
+import { ChevronDownIcon } from '@elementor/icons';
+
+type Props = {
+	label: string
+	Icon: ComponentType;
+	isOpenByDefault?: boolean;
+}
+
+interface RotateIconProps extends SvgIconProps {
+	isOpen: boolean;
+}
+
+// TODO 21/06/2023 : Should replace this with future Rotate component that will be implemented in elementor-ui
+const RotateIcon = styled( ChevronDownIcon, {
+	shouldForwardProp: ( prop ) => prop !== 'isOpen',
+} )<RotateIconProps>( ( { theme, isOpen } ) => ( {
+	transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)',
+	transition: theme.transitions.create( 'transform', {
+		duration: theme.transitions.duration.standard,
+	} ),
+} ) );
+
+export default function CollapsibleList(
+	{
+		label,
+		Icon,
+		isOpenByDefault = false,
+		children,
+	}: PropsWithChildren<Props>
+) {
+	const [ isOpen, setIsOpen ] = useState( isOpenByDefault );
+
+	return (
+		<>
+			<ListItem disableGutters>
+				<ListItemIcon>
+					<IconButton
+						onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+						sx={ { color: 'inherit' } }
+						size="small"
+					>
+						<RotateIcon fontSize="small" isOpen={ isOpen } />
+					</IconButton>
+				</ListItemIcon>
+				<ListItemIcon>
+					<Icon />
+				</ListItemIcon>
+				<ListItemText>{ label }</ListItemText>
+			</ListItem>
+			<Collapse
+				in={ isOpen }
+				timeout="auto"
+				unmountOnExit>
+				<List dense>
+					{ children }
+				</List>
+			</Collapse>
+		</>
+	);
+}

package/src/components/panel/pages-list/page-list-item.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+	bindMenu,
+	bindTrigger,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	ToggleButton,
+	usePopupState,
+} from '@elementor/ui';
+import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
+import { Page } from '../../../types';
+import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import PageTitleAndStatus from '../../shared/page-title-and-status';
+import PageActionsMenu from '../actions-menu/page-actions-menu';
+
+export default function PageListItem( { page }: { page: Page } ) {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'page-actions',
+	} );
+
+	const activeDocument = useActiveDocument();
+	const navigateToDocument = useNavigateToDocument();
+
+	const isActive = activeDocument?.id === page.id;
+
+	return (
+		<>
+			<ListItem
+				disablePadding
+				secondaryAction={
+					<ToggleButton
+						value
+						color="secondary"
+						size="small"
+						selected={ popupState.isOpen }
+						{ ...bindTrigger( popupState ) }
+					>
+						<DotsVerticalIcon fontSize="small" />
+					</ToggleButton>
+				}
+			>
+				<ListItemButton
+					selected={ isActive }
+					onClick={ () => navigateToDocument( page.id ) }
+					dense
+				>
+					<ListItemIcon />
+					<ListItemText
+						disableTypography={ true }
+					>
+						<PageTitleAndStatus page={ page } />
+					</ListItemText>
+					{ page.isHome &&
+						<ListItemIcon>
+							<HomeIcon color="disabled" />
+						</ListItemIcon>
+					}
+				</ListItemButton>
+			</ListItem>
+			<PageActionsMenu page={ page } { ...bindMenu( popupState ) } />
+		</>
+	);
+}

package/src/components/panel/pages-list/pages-collapsible-list.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import CollapsibleList from './collapsible-list';
+import { Page } from '../../../types';
+import { PageTypeIcon } from '@elementor/icons';
+import PageListItem from './page-list-item';
+
+type Props = {
+	pages: Page[];
+	isOpenByDefault?: boolean;
+}
+
+export default function PagesCollapsibleList( { pages, isOpenByDefault = false }: Props ) {
+	const label = `Pages (${ pages.length })`; // TODO 21/06/2023 : This label should come from the backend
+
+	return (
+		<CollapsibleList
+			label={ label }
+			Icon={ PageTypeIcon }
+			isOpenByDefault={ isOpenByDefault }
+		>
+			{ pages.map( ( page ) => <PageListItem key={ page.id } page={ page } /> ) }
+		</CollapsibleList>
+	);
+}

package/src/components/panel/shell.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Box, Button, Divider, Grid, List, Paper, ThemeProvider, Typography } from '@elementor/ui';
+import { PlusIcon } from '@elementor/icons';
+import { Page } from '../../types';
+import PagesCollapsibleList from './pages-list/pages-collapsible-list';
+
+// TODO: Remove once connected to real data fetching.
+const mockPages: Page[] = [
+	{
+		id: 1,
+		type: 'page',
+		title: 'This is a very long title that somebody wrote, a very very long line',
+		status: 'pending approval',
+	},
+	{ id: 2, type: 'page', title: 'About', status: 'publish' },
+	{ id: 3, type: 'page', title: 'Services', status: 'publish', isHome: true },
+	{ id: 4, type: 'page', title: 'Contact', status: 'draft' },
+	{ id: 5, type: 'page', title: 'FAQ', status: 'publish' },
+];
+
+const Shell = () => {
+	return (
+		<ThemeProvider colorScheme="light">
+			<Box sx={ { width: '100%', maxWidth: 360 } }>
+				<Paper>
+					<Grid
+						container
+						justifyContent="center"
+						alignItems="center"
+						sx={ { height: 51 } }>
+						<Typography variant="h6">Pages</Typography>
+					</Grid>
+					<Divider />
+					<Box
+						display="flex"
+						justifyContent="flex-end"
+						alignItems="center"
+					>
+						<Button
+							sx={ { mt: 4, mb: 4, mr: 5 } }
+							startIcon={ <PlusIcon /> }
+						>
+							Add New
+						</Button>
+					</Box>
+					<Box sx={ { width: '100%', maxWidth: 360 } }>
+						<List dense>
+							<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
+						</List>
+					</Box>
+					<Divider />
+				</Paper>
+			</Box>
+		</ThemeProvider>
+	);
+};
+
+export default Shell;

package/src/components/shared/page-title-and-status.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+import { Page } from '../../types';
+import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
+
+const PageStatus = ( { status }: { status: string } ) => {
+	if ( 'publish' === status ) {
+		return null;
+	}
+
+	return (
+		<Typography
+			component="span"
+			variant="body1"
+			sx={ {
+				textTransform: 'capitalize',
+				fontStyle: 'italic',
+				whiteSpace: 'nowrap',
+				flexBasis: 'content',
+			} }
+		>
+			({ status })
+		</Typography>
+	);
+};
+
+const PageTitle = ( { title }: { title: string } ) => {
+	const modifiedTitle = useReverseHtmlEntities( title );
+
+	return (
+		<Typography
+			component="span"
+			variant="body1"
+			noWrap
+			sx={ {
+				flexBasis: 'auto',
+			} }
+		>
+			{ modifiedTitle }
+		</Typography>
+	);
+};
+
+export default function PageTitleAndStatus( { page }: { page: Page } ) {
+	return (
+		<Box display="flex">
+			<PageTitle title={ page.title } />&nbsp;<PageStatus status={ page.status } />
+		</Box>
+	);
+}

package/src/init.ts

@@ -1,8 +1,12 @@
 import RecentlyEdited from './components/top-bar/recently-edited';
 import { injectIntoPageIndication } from '@elementor/editor-app-bar';
+import { injectIntoTop } from '@elementor/editor';
+import Shell from './components/panel/shell';
 
 export default function init() {
 	registerTopBarMenuItems();
+	// TODO 06/06/2023 : uncomment registerPanel() when we are ready to release
+	registerPanel();
 }
 
 function registerTopBarMenuItems() {
@@ -11,3 +15,11 @@ function registerTopBarMenuItems() {
 		filler: RecentlyEdited,
 	} );
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function registerPanel() {
+	injectIntoTop( {
+		id: 'navigation-panel',
+		filler: Shell,
+	} );
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+export type Page = {
+	isHome?: boolean;
+	id: number;
+	title: string;
+	status: string;
+	type: string;
+};