AB#9486 Search Box

src/sxastarter/src/Layout.tsx

@@ -39,6 +39,7 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin={'anonymous'} />
         <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
+        <meta property="og:site" content={layoutData?.sitecore?.context?.site?.name} />
         <meta name="description" content="A Verticals demo site."></meta>
         {headLinks.map((headLink) => (
           <link rel={headLink.rel} key={headLink.href} href={headLink.href} />

src/sxastarter/src/assets/sass/components/search/_preview-search-icon.scss

@@ -0,0 +1,3 @@
+.preview-search-content-icon {
+    cursor: pointer;
+}

src/sxastarter/src/assets/sass/components/search/_preview-search.scss

@@ -4,13 +4,21 @@
 .sitecore-preview-search-input {
   width: 800px;
   box-sizing: border-box;
-  padding: var(--sdc-spacing-xs);
+  padding: .6rem 2rem .6rem 3rem;
+  text-align: left !important;
+  color: var(--text-body);
+  background: var(--bg-body);
+  border-width: 1px;
 
   &:focus {
     outline: 1px solid var(--sdc-palette-grey-800);
   }
 }
 
+.search-input-container-hidden {
+  display: none;
+}
+
 /* PreviewSearchContent */
 .sitecore-preview-search-content {
   animation-duration: 500ms;
@@ -107,7 +115,7 @@
 /* PreviewSearchItems */
 .sitecore-preview-search-items {
   flex: 3;
-  background: #fff;
+  background: var(--bg-body);
   overflow-y: auto;
   display: flex;
 
@@ -117,6 +125,7 @@
     list-style: none;
     margin: 0;
     padding: var(--sdc-spacing-s);
+    padding-top: 3rem;
     gap: var(--sdc-spacing-m);
   }
 }
@@ -139,7 +148,10 @@
   cursor: pointer;
   display: block;
   border: solid 1px transparent;
-  text-align: center;
+
+  h2 {
+    text-align: center !important;
+  }
 
   &:focus-within {
     box-shadow: 2px 2px 4px var(--sdc-palette-grey-800);

src/sxastarter/src/assets/sass/components/search/index.scss

@@ -1,2 +1,3 @@
 @import 'components';
 @import 'preview-search';
+@import 'preview-search-icon';

src/sxastarter/src/components/Navigation.tsx

@@ -1,11 +1,16 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import {
   Link,
   LinkField,
   Text,
   TextField,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import PreviewSearchWidget, { ArticleModel } from './Search/PreviewSearch/PreviewSearch';
+import { isSearchSDKEnabled } from 'src/services/SearchSDKService';
+import PreviewSearchIcon from './Search/PreviewSearch/PreviewSearchIcon';
+import ClickOutside from './Search/ClickOutside';
+import { useRouter } from 'next/router';
 
 interface Fields {
   Id: string;
@@ -48,8 +53,37 @@ const getLinkField = (props: NavigationProps): LinkField => ({
 });
 
 export const Default = (props: NavigationProps): JSX.Element => {
+  const [isPreviewSearchOpen, setIsPreviewSearchOpen] = useState(false);
   const [isOpenMenu, openMenu] = useState(false);
   const { sitecoreContext } = useSitecoreContext();
+  const containerRef = useRef(null);
+  const router = useRouter();
+
+  const onSearchIconClick = useCallback(() => {
+    setIsPreviewSearchOpen((isPreviewSearchOpen) => {
+      return !isPreviewSearchOpen;
+    });
+
+    // Focus on element with ID search-input
+    setTimeout(() => {
+      const searchInput = document.getElementById('search-input');
+      if (searchInput) {
+        searchInput.focus();
+      }
+    }, 0);
+  }, []);
+
+  const onClose = useCallback(() => setIsPreviewSearchOpen(false), []);
+  ClickOutside([containerRef], onClose);
+
+  const onRedirect = useCallback(
+    (article: ArticleModel) => {
+      onClose();
+      router.push(new URL(article.url, window.location.origin).pathname);
+    },
+    [onClose, router]
+  );
+
   const styles =
     props.params != null
       ? `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd()
@@ -87,28 +121,52 @@ export const Default = (props: NavigationProps): JSX.Element => {
       />
     ));
 
+  if (isSearchSDKEnabled) {
+    list.push(
+      <li className="	d-none d-lg-block" key="search-icon">
+        <PreviewSearchIcon
+          className="search-play-icon"
+          onClick={onSearchIconClick}
+          keyphrase={''}
+        />
+      </li>
+    );
+  }
+
   return (
     <div className={`component navigation ${styles}`} id={id ? id : undefined}>
-      <label className="menu-mobile-navigate-wrapper">
-        <input
-          type="checkbox"
-          className="menu-mobile-navigate"
-          checked={isOpenMenu}
-          onChange={() => handleToggleMenu()}
-        />
-        {/* DEMO TEAM CUSTOMIZATION */}
-        <div className="menu-humburger">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-        <div className="component-content">
-          <nav>
-            {/* DEMO TEAM CUSTOMIZATION */}
-            <ul>{list}</ul>
-          </nav>
+      {!isPreviewSearchOpen && (
+        <label className="menu-mobile-navigate-wrapper">
+          <input
+            type="checkbox"
+            className="menu-mobile-navigate"
+            checked={isOpenMenu}
+            onChange={() => handleToggleMenu()}
+          />
+          {/* DEMO TEAM CUSTOMIZATION */}
+          <div className="menu-humburger">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+          <div className="component-content">
+            <nav>
+              {/* DEMO TEAM CUSTOMIZATION */}
+              <ul>{list}</ul>
+            </nav>
+          </div>
+        </label>
+      )}
+      {isSearchSDKEnabled && (
+        <div
+          ref={containerRef}
+          className={`search-input-container ${
+            !isPreviewSearchOpen ? 'search-input-container-hidden' : ''
+          }`}
+        >
+          <PreviewSearchWidget rfkId="rfkid_6" itemRedirectionHandler={onRedirect} />
         </div>
-      </label>
+      )}
     </div>
   );
 };

src/sxastarter/src/components/PageContent/ArticleDetails.tsx

@@ -34,6 +34,7 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Excerpt.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.Thumbnail?.value?.src} />
         <meta property="og:type" content="article" />
       </Head>
@@ -95,6 +96,7 @@ export const Simple = (props: PageBackgroundProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Excerpt.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.Thumbnail?.value?.src} />
         <meta property="og:type" content="article" />
       </Head>

src/sxastarter/src/components/PageContent/AuthorDetails.tsx

@@ -10,6 +10,7 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { ParallaxBackgroundImage } from 'components/NonSitecore/ParallaxBackgroundImage';
+import Head from 'next/head';
 
 interface Fields {
   Name: Field<string>;
@@ -26,51 +27,60 @@ export type PageBackgroundProps = ComponentProps & {
 export const Default = (props: PageBackgroundProps): JSX.Element => {
   const id = props.params?.RenderingIdentifier;
   return (
-    <div
-      className={`component author-details page-background col-12 ${props.params?.styles?.trimEnd()}`}
-      id={id ? id : undefined}
-    >
-      <ParallaxBackgroundImage BackgroundImage={props.fields.BackgroundImage} />
+    <>
+      <Head>
+        <meta property="og:description" content={props.fields?.Bio?.value} />
+        <meta property="og:name" content={props.fields?.Name?.value} />
+        <meta property="og:title" content={props.fields?.Name?.value} />
+        <meta property="og:image" content={props.fields?.Photo?.value?.src} />
+        <meta property="og:type" content="author" />
+      </Head>
+      <div
+        className={`component author-details page-background col-12 ${props.params?.styles?.trimEnd()}`}
+        id={id ? id : undefined}
+      >
+        <ParallaxBackgroundImage BackgroundImage={props.fields.BackgroundImage} />
 
-      <div className="container">
-        <Placeholder name="page-navigation" rendering={props.rendering} />
-      </div>
+        <div className="container">
+          <Placeholder name="page-navigation" rendering={props.rendering} />
+        </div>
 
-      <div>
-        <div className="background-content component-spaced container rounded-corners">
-          <div className="p-3 p-sm-5">
-            <div className="">
-              <div className="row row-gap-4 gx-5">
-                <div className="col-12 col-lg-5">
-                  <NextImage
-                    field={props.fields.Photo}
-                    className="author-img"
-                    width={500}
-                    height={500}
-                  />
-                </div>
-                <div className="col-12 col-lg-7">
-                  <h1 className="author-name display-5 fw-bold">
-                    <Text field={props.fields.Name} />
-                  </h1>
-                  <p className="author-position fs-4">
-                    <Text field={props.fields.Position} />
-                  </p>
-                  <hr />
-                  <div className="author-bio">
-                    <RichText field={props.fields.Bio} />
+        <div>
+          <div className="background-content component-spaced container rounded-corners">
+            <div className="p-3 p-sm-5">
+              <div className="">
+                <div className="row row-gap-4 gx-5">
+                  <div className="col-12 col-lg-5">
+                    <NextImage
+                      field={props.fields.Photo}
+                      className="author-img"
+                      width={500}
+                      height={500}
+                    />
+                  </div>
+                  <div className="col-12 col-lg-7">
+                    <h1 className="author-name display-5 fw-bold">
+                      <Text field={props.fields.Name} />
+                    </h1>
+                    <p className="author-position fs-4">
+                      <Text field={props.fields.Position} />
+                    </p>
+                    <hr />
+                    <div className="author-bio">
+                      <RichText field={props.fields.Bio} />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="row">
-              <Placeholder name="background-page-content" rendering={props.rendering} />
+              <div className="row">
+                <Placeholder name="background-page-content" rendering={props.rendering} />
+              </div>
             </div>
           </div>
+          <Placeholder name="page-content" rendering={props.rendering} />
         </div>
-        <Placeholder name="page-content" rendering={props.rendering} />
       </div>
-    </div>
+    </>
   );
 };
 

src/sxastarter/src/components/PageContent/HeadingCta.tsx

@@ -100,6 +100,7 @@ export const PageHeading = (props: HeadingCtaProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Text.value} />
         <meta property="og:name" content={props.fields?.Heading?.value} />
+        <meta property="og:title" content={props.fields?.Heading?.value} />
         <meta property="og:type" content="page" />
       </Head>
       <div

src/sxastarter/src/components/PageContent/PageBackground.tsx

@@ -29,6 +29,7 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Content.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.BackgroundImage?.value?.src} />
         <meta property="og:type" content="page" />
       </Head>

src/sxastarter/src/components/PageContent/ProjectDetails.tsx

@@ -48,6 +48,7 @@ export const Default = (props: ProjectDetailsProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Abstract.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.Thumbnail?.value?.src} />
         <meta property="og:type" content="project" />
       </Head>

src/sxastarter/src/components/Search/ClickOutside.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ClickOutside = (references: any[], handler: () => void): void => {
+  useEffect(() => {
+    const listener = (event: Event) => {
+      let clickWasOnAReference = false;
+
+      // Do nothing if clicking any of the reference element or descendent elements
+      references.forEach((reference) => {
+        if (!reference.current || reference.current.contains(event.target)) {
+          clickWasOnAReference = true;
+        }
+      });
+
+      if (!clickWasOnAReference) {
+        handler();
+      }
+    };
+
+    if (window.PointerEvent) {
+      document.addEventListener('pointerdown', listener);
+    } else {
+      document.addEventListener('mousedown', listener);
+      document.addEventListener('touchstart', listener);
+    }
+
+    return () => {
+      if (window.PointerEvent) {
+        document.removeEventListener('pointerdown', listener);
+      } else {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+      }
+    };
+  }, [references, handler]);
+};
+
+export default ClickOutside;