From 3a1f1a3c28c950a2ffdac4413a518a556220988a Mon Sep 17 00:00:00 2001
From: Sunny Zanchi <sunnyz@hey.com>
Date: Thu, 17 Oct 2024 14:34:26 -0400
Subject: [PATCH] fix: add prop for kbd shortcut display

---
 .../src/components/GlobalSearch.js            |  1 +
 .../src/components/SearchInput.js             | 44 ++++++++++---------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js
index a8dd70a9..3b5a3495 100644
--- a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js
+++ b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js
@@ -130,6 +130,7 @@ const GlobalSearch = ({ onClose }) => {
         placeholder={t('searchInput.placeholder')}
         ref={searchRef}
         setValue={setQuery}
+        showShortcut
         size={SearchInput.SIZE.MEDIUM}
         value={query}
         css={css`
diff --git a/packages/gatsby-theme-newrelic/src/components/SearchInput.js b/packages/gatsby-theme-newrelic/src/components/SearchInput.js
index fb1dac81..27c8e1b9 100644
--- a/packages/gatsby-theme-newrelic/src/components/SearchInput.js
+++ b/packages/gatsby-theme-newrelic/src/components/SearchInput.js
@@ -46,6 +46,7 @@ const SearchInput = forwardRef(
       onMove,
       setValue,
       size = 'medium',
+      showShortcut = false,
       value,
       width,
       ...props
@@ -196,27 +197,29 @@ const SearchInput = forwardRef(
             }
           `}
         />
-        <kbd
-          css={css`
-            border: 1px solid currentColor;
-            border-radius: 4px;
-            display: inline-grid;
-            line-height: 1.1;
-            margin-right: 0.25rem;
-            padding: 2px 4px;
-            place-items: center;
-            position: absolute;
-            right: 0.5rem;
-            top: 50%;
-            transform: translateY(-50%);
+        {showShortcut && (
+          <kbd
+            css={css`
+              border: 1px solid currentColor;
+              border-radius: 4px;
+              display: inline-grid;
+              line-height: 1.1;
+              margin-right: 0.25rem;
+              padding: 2px 4px;
+              place-items: center;
+              position: absolute;
+              right: 0.5rem;
+              top: 50%;
+              transform: translateY(-50%);
 
-            @media (max-width: ${mobileBreakpoint}) {
-              display: none;
-            }
-          `}
-        >
-          /
-        </kbd>
+              @media (max-width: ${mobileBreakpoint}) {
+                display: none;
+              }
+            `}
+          >
+            /
+          </kbd>
+        )}
         {onClear && (
           <button
             onClick={(e) => {
@@ -295,6 +298,7 @@ SearchInput.propTypes = {
   onSubmit: PropTypes.func,
   setValue: PropTypes.func.isRequired,
   size: PropTypes.oneOf(Object.values(SIZES)),
+  showShortcut: PropTypes.bool,
   value: PropTypes.string,
   width: PropTypes.string,
 };