feat(header): L3-4326 updated spacing and search click (#408)

src/components/Link/Link.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import Link from './Link';
 import { runCommonTests } from '../../utils/testUtils';
+import userEvent from '@testing-library/user-event';
 
 const getLinkElement = (text: string) => screen.getByRole('link', { name: text });
 
@@ -41,6 +42,16 @@ describe('Link', () => {
     expect(linkElement).toHaveAttribute('target', '_blank');
     expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
   });
+  it('calls on click', async () => {
+    const onClick = vitest.fn();
+    const { container } = render(<Link onClick={onClick}>Example Link</Link>);
+    const link = container.querySelector('a');
+
+    if (link) {
+      await userEvent.click(link);
+      expect(onClick).toHaveBeenCalledOnce();
+    }
+  });
 
   describe('styling', () => {
     it('applies the provided className to the link', () => {

src/components/Navigation/NavigationItem/_navigationItem.scss

@@ -69,6 +69,12 @@
     margin-bottom: 0;
   }
 
+  a {
+    @include isHeaderMobile {
+      display: block;
+    }
+  }
+
   &--start,
   &--end {
     &__title {

src/components/Navigation/NavigationList/_navigationList.scss

@@ -7,7 +7,6 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   flex-direction: column;
   justify-content: left;
   opacity: 1;
-  padding: $spacing-md 0;
 
   &--offscreen {
     opacity: 0;

src/components/Search/Search.test.tsx

@@ -28,6 +28,13 @@ describe('Search component', () => {
     await userEvent.click(button);
     expect(searchInput).toHaveFocus();
   });
+  it('should open input once clicked on input container', async () => {
+    const { container } = renderWithContext(<Search />);
+    const inputContainer = container.getElementsByClassName('seldon-search__container__inner');
+    const searchInput = screen.getByTestId('search-input');
+    await userEvent.click(inputContainer[0]);
+    expect(searchInput).toHaveFocus();
+  });
   it('should close form when close button is clicked', async () => {
     renderWithContext(<Search />);
     const searchButton = screen.getByTestId('search-button');
@@ -51,10 +58,8 @@ describe('Search component', () => {
     const searchInput = screen.getByTestId('search-input');
     const searchForm = screen.getByTestId('search-form');
     await userEvent.click(searchButton);
-    const closeButton = screen.getByTestId('search-close-button');
-    await userEvent.type(closeButton, '{esc}');
+    await userEvent.type(searchInput, '{Escape}');
     expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
-    expect(searchInput).not.toHaveFocus();
     expect(searchForm).not.toHaveClass(`${px}-search__form--active`);
   });
   it('should reset form when close button is clicked', async () => {
@@ -117,6 +122,17 @@ describe('Search component', () => {
       await userEvent.click(button);
       expect(screen.getByRole('link', { name: 'my custom text: custom' })).toBeInTheDocument();
     });
+    it('should render all results text custom - test', async () => {
+      vi.spyOn(console, 'error').mockImplementation(() => ({}));
+      renderWithContext(<Search defaultValue="custom" getAllResultsText={(value) => `my custom text: ${value}`} />);
+      const button = screen.getByTestId('search-button');
+      await userEvent.click(button);
+      const link = screen.getByRole('link', { name: 'my custom text: custom' });
+      const searchForm = screen.getByTestId('search-form');
+      await userEvent.click(link);
+      expect(screen.getByRole('link', { name: 'my custom text: custom' })).toBeInTheDocument();
+      expect(searchForm).not.toHaveClass(`${px}-search__form--active`);
+    });
   });
   describe('otherCustomText', () => {
     it('should render placeholder', async () => {

src/components/Search/Search.tsx

@@ -123,7 +123,16 @@ const Search = ({
 
   return (
     <div className={`${baseClassName}__container`}>
-      <div className={`${baseClassName}__container__inner`} ref={searchContainerRef}>
+      <div
+        className={`${baseClassName}__container__inner`}
+        ref={searchContainerRef}
+        onClick={(event: React.MouseEvent<HTMLElement>) => {
+          if (!isSearchExpanded) {
+            showSearch(true);
+            event.stopPropagation();
+          }
+        }}
+      >
         <Text variant={TextVariants.heading4} className={`${baseClassName}__container__inner__label`}>
           {searchButtonText}
         </Text>
@@ -192,6 +201,7 @@ const Search = ({
               >
                 <li key="viewAllSearchResults" className={`${baseClassName}__result`}>
                   <Link
+                    onClick={() => showSearch(false)}
                     href={((value: string) => {
                       return encodeURLSearchParams(getAllResultsLink(value));
                     })(value)}

src/site-furniture/Header/_header.scss

@@ -74,7 +74,6 @@
   &__logo {
     align-self: center;
     margin: 0;
-    padding-top: 6px; // small adjustment to center the logo
 
     svg {
       height: 20.58px; // 20.58px is the height of the logo's container to make logo 16px