Ag 14073 search state improvements (#3687)

* git subrepo pull external/ag-website-shared subrepo: subdir: "external/ag-website-shared" merged: "04eb41134c" upstream: origin: "git@github.com:ag-grid/ag-website-shared.git" branch: "latest" commit: "099c9fc881" git-subrepo: version: "0.4.6" origin: "https://github.com/ingydotnet/git-subrepo" commit: "73a0129" * AG-14073 Add support for library swap out * git subrepo push external/ag-website-shared subrepo: subdir: "external/ag-website-shared" merged: "99be63d758" upstream: origin: "git@github.com:ag-grid/ag-website-shared.git" branch: "latest" commit: "99be63d758" git-subrepo: version: "0.4.6" origin: "https://github.com/ingydotnet/git-subrepo" commit: "73a0129"
ag-grid · Feb 27, 2025 · 37ac24e · 37ac24e
1 parent aa6759c
commit 37ac24e
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 23 deletions.
diff --git a/external/ag-website-shared/.gitrepo b/external/ag-website-shared/.gitrepo
@@ -6,7 +6,7 @@
 [subrepo]
 remote = git@github.com:ag-grid/ag-website-shared.git
 branch = latest
-	commit = 373c49c884e648f4c60770230ea8817b3e082e77
-	parent = e79f0b6e8e45220ed7d826d48efb1d33a218c4db
+	commit = 99be63d7589fd4ddca9e1abfc5f0c507466eb211
+	parent = 4999e397b6f5c5a2c4cdcfda3fb84c897e52217e
 	method = rebase
 	cmdver = 0.4.6
diff --git a/external/ag-website-shared/src/components/getting-started/GettingStarted.tsx b/external/ag-website-shared/src/components/getting-started/GettingStarted.tsx
@@ -69,9 +69,6 @@ const GettingStarted: FunctionComponent<Props> = ({ library }) => {
 
                     <div className={styles.titleIcon}>
                         <h3 className={styles.title}>{feature.title}</h3>
-                        <div>
-                            <Icon name="chevronRight" className={`${styles.icon} ${styles.arrowRight}`}></Icon>
-                        </div>
                     </div>
 
                     <p className={styles.description}>{feature.description}</p>

diff --git a/external/ag-website-shared/src/components/getting-started/getting-started.module.scss b/external/ag-website-shared/src/components/getting-started/getting-started.module.scss
@@ -45,6 +45,7 @@
     flex-direction: row;
     align-items: center;
     gap: 8px;
+    padding-bottom: 8px;
 
     div {
         height: 20px;

diff --git a/external/ag-website-shared/src/components/search/SearchBox.jsx b/external/ag-website-shared/src/components/search/SearchBox.jsx
@@ -1,7 +1,9 @@
 import { Icon } from '@ag-website-shared/components/icon/Icon';
-import React, { useEffect, useRef } from 'react';
+import { LIBRARY } from '@constants';
+import React, { useEffect, useRef, useState } from 'react';
 import { useHits, useSearchBox } from 'react-instantsearch';
 
+import GettingStarted from '../getting-started/GettingStarted';
 import styles from './SearchBox.module.scss';
 
 let timeout;
@@ -10,6 +12,7 @@ export default ({ selectedHit }) => {
     const { refine } = useSearchBox();
     const { hits } = useHits();
     const inputRef = useRef();
+    const [searchValue, setSearchValue] = useState('');
 
     // capture the click of anything above the separator and redirect to the input
     const onContainerClick = () => inputRef.current?.focus();
@@ -18,6 +21,7 @@ export default ({ selectedHit }) => {
 
     // 300ms debounce before updating algolia, not sure if this should be higher
     const onInputChanged = (evt) => {
+        setSearchValue(evt.target.value);
         if (timeout) {
             clearTimeout(timeout);
         }
@@ -29,22 +33,31 @@ export default ({ selectedHit }) => {
     };
 
     return (
-        <div role="presentation" className={styles.searchBox} onClick={onContainerClick}>
-            <Icon name="search" svgClasses={styles.searchIcon} />
-
-            <input
-                ref={inputRef}
-                type="search"
-                placeholder="Search documentation..."
-                className={styles.searchInput}
-                onChange={onInputChanged}
-                role="combobox"
-                aria-activedescendant={`hit-${selectedHit}`}
-                aria-controls="search-hits"
-                aria-haspopup="search-hits"
-                aria-expanded={hits.length > 0}
-                aria-label="Press escape to close."
-            />
+        <div>
+            <div role="presentation" className={styles.searchBox} onClick={onContainerClick}>
+                <Icon name="search" svgClasses={styles.searchIcon} />
+                <input
+                    ref={inputRef}
+                    type="search"
+                    placeholder="Search documentation..."
+                    className={styles.searchInput}
+                    onChange={onInputChanged}
+                    role="combobox"
+                    aria-activedescendant={`hit-${selectedHit}`}
+                    aria-controls="search-hits"
+                    aria-haspopup="search-hits"
+                    aria-expanded={hits.length > 0}
+                    aria-label="Press escape to close."
+                />
+            </div>
+            <div>
+                {!searchValue && (
+                    <div className={styles.gettingStarted}>
+                        <span>Suggested</span>
+                        <GettingStarted library={LIBRARY} />
+                    </div>
+                )}
+            </div>
         </div>
     );
 };
diff --git a/external/ag-website-shared/src/components/search/SearchBox.module.scss b/external/ag-website-shared/src/components/search/SearchBox.module.scss
@@ -47,3 +47,31 @@ input[type='search'].searchInput {
         display: none;
     }
 }
+
+.gettingStarted {
+    padding: $spacing-size-5;
+
+    span {
+        text-transform: uppercase;
+        font-weight: 600;
+        letter-spacing: 1.2pxs;
+        color: var(--color-text-secondary);
+        opacity: 0.6;
+        font-size: 13px;
+    }
+
+    h3 {
+        color: var(--color-link);
+        font-size: 17px;
+    }
+
+    p {
+        font-size: 15px;
+    }
+
+    a {
+        margin-top: 12px;
+        box-shadow: var(--shadow-sm);
+        height: 100px !important;
+    }
+}
diff --git a/external/ag-website-shared/src/components/search/SearchModal.module.scss b/external/ag-website-shared/src/components/search/SearchModal.module.scss
@@ -55,7 +55,7 @@
     top: 50px;
     left: 50%;
     transform: translateX(-50%);
-    width: 750px;
+    width: 850px;
     max-width: calc(100vw - #{$spacing-size-8});
     max-height: var(--container-height);
     background: var(--color-bg-primary);

diff --git a/packages/ag-charts-website/src/constants.ts b/packages/ag-charts-website/src/constants.ts
@@ -112,6 +112,8 @@ export const GALLERY_IMAGE_DPR_ENHANCEMENT = import.meta.env?.PUBLIC_GALLERY_IMA
 export const PRODUCTION_CHARTS_SITE_URL = 'https://www.ag-grid.com/charts';
 export const LEGACY_CHARTS_SITE_URL = 'https://charts.ag-grid.com';
 
+export const LIBRARY = 'charts';
+
 /*
  * Charts URL
  */

diff --git a/packages/ag-charts-website/src/pages-styles/homepage.module.scss b/packages/ag-charts-website/src/pages-styles/homepage.module.scss
@@ -218,6 +218,8 @@ $z-index-debug-panel: $z-index-debug-canvas + 200;
     padding-bottom: $spacing-size-12;
     border-bottom: 1px solid transparent;
 
+    background: var(--color-brand-500);
+
     @media screen and (min-width: 640px) {
         padding-top: $spacing-size-12;
     }