Merge pull request #243 from GSA/sc_update-mobile-menu

Update mobile menu

Author: Courtney Brousseau

config/site/site.json

@@ -129,7 +129,7 @@
         },
         "search_description_heading": "Find Code",
         "search_description_text": "Search for federal open source software projects and usable code",
-        "search_description_text_mobile": "Search projects",
+        "search_description_text_mobile": "Find Code",
         "search_placeholder_text": "e.g. JavaScript, NASA, web standards",
         "browse_by_text": "Browse by Agency",
         "issue_url": "https://github.com/GSA/code-gov-front-end/issues",

src/components/home-banner-search-box/__snapshots__/home-banner-search-box.component.test.js.snap

@@ -11,10 +11,10 @@ exports[`components - HomeBannerSearchBox render should render correctly 1`] = `
       className="search-description-wrapper"
     >
       <div
-        className="search-description-heading"
+        className="search-description-heading show-w-gt-800"
       />
       <div
-        className="show-w-gt-800"
+        className="search-description-text show-w-gt-800"
       >
         test-text
       </div>

src/components/home-banner-search-box/__snapshots__/home-banner-search-box.container.test.js.snap

@@ -6,6 +6,6 @@ Object {
   "query": "test-query",
   "searchDescriptionHeading": "Find Code",
   "searchDescriptionText": "Search for federal open source software projects and usable code",
-  "searchDescriptionTextMobile": "Search projects",
+  "searchDescriptionTextMobile": "Find Code",
 }
 `

src/components/home-banner-search-box/home-banner-search-box.component.js

@@ -65,8 +65,12 @@ export default class HomeBannerSearchBoxComponent extends Component {
       <div className="search-input-container">
         <div className="search-input-wrapper">
           <div className="search-description-wrapper">
-            <div className="search-description-heading">{searchDescriptionHeading}</div>
-            {searchDescriptionText && <div className="show-w-gt-800">{searchDescriptionText}</div>}
+            <div className="search-description-heading show-w-gt-800">
+              {searchDescriptionHeading}
+            </div>
+            {searchDescriptionText && (
+              <div className="search-description-text show-w-gt-800">{searchDescriptionText}</div>
+            )}
             {searchDescriptionTextMobile && (
               <div className="show-w-lte-800">{searchDescriptionTextMobile}</div>
             )}

src/components/home-banner-search-box/home-banner-search-box.component.test.js

@@ -95,7 +95,7 @@ describe('components - HomeBannerSearchBox', () => {
 
     it('should not render `searchDescriptionText` if not provided', () => {
       wrapper.setProps({ searchDescriptionText: undefined })
-      expect(wrapper.find('.show-w-gt-800').length).toBe(0) // TODO: make data-test attributes...
+      expect(wrapper.find('.search-description-text').length).toBe(0) // TODO: make data-test attributes...
     })
 
     it('should not render `searchDescriptionTextMobile` if not provided', () => {

styles/menu.scss

@@ -29,6 +29,7 @@ header.main {
         top: 50%;
         transform: translateY(-50%);
         .icon {
+          color: $brand-blue !important;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);