build: Update @trussworks/react-uswds to latest version (#1215)

* Update react-uswds to latest version * Remove disabled prop and language around the beta
USSF-ORBIT · Feb 27, 2024 · fdb0f40 · fdb0f40
1 parent 66a964b
commit fdb0f40
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@opentelemetry/resources": "1.9.1",
     "@opentelemetry/sdk-trace-node": "1.9.1",
     "@opentelemetry/tracing": "0.24.0",
-    "@trussworks/react-uswds": "6.2.0",
+    "@trussworks/react-uswds": "7.0.0",
     "@uswds/uswds": "3.7.1",
     "apollo-datasource-rest": "3.7.0",
     "axios": "1.6.5",

diff --git a/src/components/Search/Search.module.scss b/src/components/Search/Search.module.scss
@@ -4,16 +4,6 @@
 .search {
   position: relative;
 
-  .disabled {
-    filter: blur(3px);
-    user-select: none;
-    pointer-events: none;
-  }
-
-  .comingSoon {
-    text-align: center;
-  }
-
   :global {
     .usa-select {
       background-image: url('/vendor/img/usa-icons-bg/expand_more--white.svg'),

diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx
@@ -9,21 +9,14 @@ import Search from './Search'
 import { SearchProvider } from 'stores/searchContext'
 
 describe('Search component', () => {
-  // beforeEach(() => {
-  //   render(
-  //     <SearchProvider>
-  //       <Search disabled={false} />
-  //     </SearchProvider>
-  //   )
-  // })
   afterEach(() => {
     cleanup()
   })
 
   test('renders the search form ', () => {
     render(
       <SearchProvider>
-        <Search disabled={false} />
+        <Search />
       </SearchProvider>
     )
 
@@ -38,7 +31,7 @@ describe('Search component', () => {
   test('renders the searchbox', async () => {
     render(
       <SearchProvider>
-        <Search disabled={false} />
+        <Search />
       </SearchProvider>
     )
 
@@ -53,7 +46,7 @@ describe('Search component', () => {
   test('renders the search button', () => {
     render(
       <SearchProvider>
-        <Search disabled={false} />
+        <Search />
       </SearchProvider>
     )
 
@@ -66,7 +59,7 @@ describe('Search component', () => {
 
     render(
       <SearchProvider>
-        <Search disabled={false} />
+        <Search />
       </SearchProvider>
     )
 
@@ -93,7 +86,7 @@ describe('Search component', () => {
 
     render(
       <SearchProvider>
-        <Search disabled={false} />
+        <Search />
       </SearchProvider>
     )
 
@@ -127,15 +120,3 @@ describe('Search component', () => {
     expect(screen.getAllByRole('listitem')).toHaveLength(4)
   })
 })
-
-describe('Search component disabled', () => {
-  test('renders the coming soon message', () => {
-    render(
-      <SearchProvider>
-        <Search disabled={true} />
-      </SearchProvider>
-    )
-
-    expect(screen.getByRole('heading')).toHaveTextContent('Search coming soon!')
-  })
-})
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -1,67 +1,52 @@
 import React from 'react'
-import classnames from 'classnames'
 import styles from './Search.module.scss'
 import { useSearchContext } from 'stores/searchContext'
 
-const Search = ({ disabled }: { disabled?: boolean }) => {
+const Search = () => {
   const { searchQuery, setSearchQuery } = useSearchContext()
 
-  const disableClass = classnames({
-    [styles.disabled]: disabled,
-  })
-
-  // TODO - re-add filter dropdown & suggested terms as future work
-
   return (
     <div className={styles.search}>
-      {disabled && (
-        <div className={styles.comingSoon}>
-          <h4>Search coming soon!</h4>
-        </div>
-      )}
-      <div className={disableClass}>
-        <form
-          id="search-form"
-          className="usa-search usa-search--big"
-          role="search"
-          method="get"
-          action="/search"
-          onSubmit={(e) => {
-            let finalSearchQuery = searchQuery
-
-            // If finalSearchQuery has more than 200 characters, we need to truncate it
-            if (searchQuery.length > 200) {
-              finalSearchQuery = finalSearchQuery.substring(0, 200)
-            }
-
-            // Manually setting the value of the search input instead of waiting for the state to update
-            const searchInput = document.getElementById('q') as HTMLInputElement
-            searchInput.value = finalSearchQuery
-
-            // Submit the form
-            const form = e.target as HTMLFormElement
-            form.submit()
-          }}>
-          <label className="usa-sr-only" htmlFor="q">
-            Search
-          </label>
-          <input
-            className="usa-input"
-            id="q"
-            type="search"
-            name="q"
-            data-testid="search-input"
-            placeholder="What are you looking for today?"
-            disabled={disabled}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-
-          <button className="usa-button" type="submit" disabled={disabled}>
-            <span className="usa-search__submit-text">Search</span>
-          </button>
-        </form>
-      </div>
+      <form
+        id="search-form"
+        className="usa-search usa-search--big"
+        role="search"
+        method="get"
+        action="/search"
+        onSubmit={(e) => {
+          let finalSearchQuery = searchQuery
+
+          // If finalSearchQuery has more than 200 characters, we need to truncate it
+          if (searchQuery.length > 200) {
+            finalSearchQuery = finalSearchQuery.substring(0, 200)
+          }
+
+          // Manually setting the value of the search input instead of waiting for the state to update
+          const searchInput = document.getElementById('q') as HTMLInputElement
+          searchInput.value = finalSearchQuery
+
+          // Submit the form
+          const form = e.target as HTMLFormElement
+          form.submit()
+        }}>
+        <label className="usa-sr-only" htmlFor="q">
+          Search
+        </label>
+        <input
+          className="usa-input"
+          id="q"
+          type="search"
+          name="q"
+          data-testid="search-input"
+          placeholder="What are you looking for today?"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+
+        <button className="usa-button" type="submit">
+          <span className="usa-search__submit-text">Search</span>
+        </button>
+      </form>
     </div>
   )
 }

diff --git a/yarn.lock b/yarn.lock
@@ -5691,10 +5691,10 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@trussworks/react-uswds@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@trussworks/react-uswds/-/react-uswds-6.2.0.tgz#b7f5a307c3c0cd6af7fef8ed2d0fa73b337087ec"
-  integrity sha512-B7Yi9hy+dF4A3XiXUB3BofvcNekhcb/NTldaAIM4Lt+jEd7wIFbTJc03v1inIJHUMLcke0nYFx4gOmixpivPZg==
+"@trussworks/react-uswds@7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@trussworks/react-uswds/-/react-uswds-7.0.0.tgz#03d05f1aec64fbdc4df5621eade9616c7d03a008"
+  integrity sha512-N3O0BRuhyLoZKjYM0Mq+XIXJ3ShvCEh6uhqwRstIde6E9m0Au6JLy1YEv9A8eapBxDvyqZW3jiVTGzW/JqS+eA==
 
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"