GCWeb alignment: remove non-exclusive styles to move over

[GormFrank]

This is to align the GC Search UI project with the reference implementation which belongs in GCWeb.

GCWeb will now hold the documentation and visual/semantic reference for the non-exclusive patterns leveraged by the Search UI, such as but not limited to:

• No results
• Error message
• Did you mean
• Pagination

Excludes Query Suggestions (QS) for now since no combo box of that nature currently exists in GCWeb.

Note: This is a Patch change, since all current live search pages are hosted on Canada.ca and leverage GCWeb.

[Garneauma]

Around line 1334 (inside updatePageState), the previous and next page buttons need to always be there in the HTML. If you are the first page, the previous button's <li> needs the class disabled, same for the next button when you are on the last page.

Basically use the if statement to simply add a class "disabled" if there is no next/previous page. Here's my suggested update to the function:

// Update Pagination section
function updatePagerState( newState ) {
	pagerState = newState;
	if ( pagerState.maxPage === 0 ) {
		pagerElement.textContent = "";
		return;
	}
	else if ( pagerElement.textContent === "" ) {
		pagerElement.innerHTML = pagerContainerTemplateHTML;
	}

	let prevLiNode = document.createElement( "li" ),
		nextLiNode = document.createElement( "li" ),
		pagerComponentElement = pagerElement.querySelector( "#pager" );

	pagerComponentElement.textContent = "";
	prevLiNode.innerHTML = previousPageTemplateHTML;
	nextLiNode.innerHTML = nextPageTemplateHTML;

	if ( !pagerState.hasPreviousPage ) {
		prevLiNode.classList.add( "disabled" );
	}

	if ( !pagerState.hasNextPage ) {
		nextLiNode.classList.add( "disabled" );
	}

	prevLiNode.querySelector( "button" ).onclick = () => { 
		pagerController.previousPage();
		
		if ( params.isAdvancedSearch ) {
			updatePagerUrlParam( pagerState.currentPage );
		}
	};

	nextLiNode.querySelector( "button" ).onclick = () => { 
		pagerController.nextPage(); 
		
		if ( params.isAdvancedSearch ) {
			updatePagerUrlParam( pagerState.currentPage );
		}
	};

	pagerComponentElement.appendChild( prevLiNode );

	pagerState.currentPages.forEach( ( page ) => {
		const liNode = document.createElement( "li" );
		const pageNo = page;

		liNode.innerHTML = pageTemplateHTML.replaceAll( '%[page]', stripHtml( pageNo ) );

		if ( pagerState.currentPage - 1 > page || page > pagerState.currentPage + 1 ) {
			liNode.classList.add( 'hidden-xs', 'hidden-sm' );
			if ( pagerState.currentPage - 2 > page || page > pagerState.currentPage + 2 ) {
				liNode.classList.add( 'hidden-md' );
			}
		}

		const buttonNode = liNode.querySelector( 'button' );

		if ( page === pagerState.currentPage ) {
			liNode.classList.add( "active" );
			buttonNode.setAttribute( "aria-current", "page" );
		}

		buttonNode.onclick = () => {
			pagerController.selectPage( pageNo );
			
			if ( params.isAdvancedSearch ) {
				updatePagerUrlParam( pagerState.currentPage );
			}
		};

		pagerComponentElement.appendChild( liNode );
	} );

	pagerComponentElement.appendChild( nextLiNode );
}