Core 899 add option to remove give button from landing page (#2727)

* Add option, remove links around images

Tests

* Prettier

* Get showGive value from landing page data

Author: RoyEJohnson

src/app/layouts/landing/header/header.scss

@@ -15,7 +15,8 @@
             width: auto;
         }
 
-        menu {
+        menu,
+        .pseudo-menu {
           overflow: hidden;
           height: 8rem;
           margin: 0;
@@ -25,7 +26,8 @@
           letter-spacing: -0.072rem;
           line-height: 2.5rem;
 
-          li {
+          li,
+          > img {
             display: inline-block;
             height: 100%;
             margin: 0 1rem;
@@ -60,7 +62,8 @@
     }
 
     @include width-up-to($tablet-max) {
-        menu {
+        menu,
+        .pseudo-menu {
             width: 100%;
         }
         menu li {

src/app/layouts/landing/header/header.tsx

@@ -1,30 +1,53 @@
 import React from 'react';
 import useOptimizedImage from '~/helpers/use-optimized-image';
-import { LinkFields, Link } from '../../../pages/flex-page/components/Link';
+import {LinkFields, Link} from '../../../pages/flex-page/components/Link';
 import './header.scss';
 
-export default function Header({links}: {links: LinkFields[]}) {
-    const riceLogo = useOptimizedImage('https://openstax.org/dist/images/rice.webp', 150);
+export default function Header({
+    links,
+    showGive = true
+}: {
+    links: LinkFields[];
+    showGive?: boolean;
+}) {
+    const riceLogo = useOptimizedImage(
+        'https://openstax.org/dist/images/rice.webp',
+        150
+    );
 
     return (
         <div className="container" data-analytics-label="Header">
+            <div className="pseudo-menu">
+                <img
+                    src="/dist/images/logo.svg"
+                    alt="OpenStax logo"
+                    width="354"
+                    height="81"
+                />
+                <img
+                    src={riceLogo}
+                    alt="Rice University logo"
+                    height="57"
+                    width="150"
+                />
+            </div>
             <menu data-analytics-nav="Landing Menu">
-                <li>
-                    <a href="/" aria-label="Home Page" data-analytics-link>
-                        <img src="/dist/images/logo.svg" alt="OpenStax logo" width="354" height="81" />
-                    </a>
-                </li>
-                <li>
-                    <a href="http://www.rice.edu">
-                        <img src={riceLogo} alt="Rice University logo" height="57" width="150" />
-                    </a>
-                </li>
-            </menu>
-            <menu data-analytics-nav="Landing Menu">
-                {links.map((link, i) => <li key={i}><Link link={link} /></li>)}
-                <li>
-                    <a href="/give" className="give-button" data-analytics-link>Give</a>
-                </li>
+                {links.map((link, i) => (
+                    <li key={i}>
+                        <Link link={link} />
+                    </li>
+                ))}
+                {showGive && (
+                    <li>
+                        <a
+                            href="/give"
+                            className="give-button"
+                            data-analytics-link
+                        >
+                            Give
+                        </a>
+                    </li>
+                )}
             </menu>
         </div>
     );

src/app/layouts/landing/landing.tsx

@@ -8,7 +8,7 @@ import useMainClassContext, {
 import useLanguageContext from '~/contexts/language';
 import ReactModal from 'react-modal';
 import cn from 'classnames';
-import { LinkFields } from '../../pages/flex-page/components/Link';
+import {LinkFields} from '../../pages/flex-page/components/Link';
 import './landing.scss';
 
 type Props = {
@@ -17,18 +17,26 @@ type Props = {
         layout: Array<{
             value: {
                 navLinks: LinkFields[];
-            }
-        }>
-    }
-}
+                showGive?: boolean;
+            };
+        }>;
+    };
+};
 
-export default function LandingLayout({children, data}: React.PropsWithChildren<Props>) {
-    // BrowserRouter has to include everything that uses useLocation
+export default function LandingLayout({
+    children,
+    data
+}: React.PropsWithChildren<Props>) {
+    const showGive = data.layout[0]?.value.showGive;
 
+    // BrowserRouter has to include everything that uses useLocation
     return (
         <React.Fragment>
             <header className="landing-page-header">
-                <Header links={data.layout[0]?.value.navLinks ?? []} />
+                <Header
+                    links={data.layout[0]?.value.navLinks ?? []}
+                    showGive={showGive}
+                />
             </header>
             <SalesforceContextProvider>
                 <MainClassContextProvider>

test/src/layouts/layouts.test.tsx

@@ -4,25 +4,46 @@ import {describe, it} from '@jest/globals';
 import { MemoryRouter } from 'react-router-dom';
 import LandingLayout from '~/layouts/landing/landing';
 
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
+type Layout = Parameters<typeof LandingLayout>[0]['data']['layout'];
+
 describe('layouts/landing', () => {
-    const data: Parameters<typeof LandingLayout>[0]['data'] = {
-        title: 'the-title',
-        layout: []
-    };
+    function Component({layout}: {layout: Layout}) {
+        const data: Parameters<typeof LandingLayout>[0]['data'] = {
+            title: 'the-title',
+            layout
+        };
 
-    it('renders without layout values', () => {
-        render(
-            <MemoryRouter initialEntries={['']}>
+        return (
+            <MemoryRouter initialEntries={['']} future={routerFuture}>
                 <LandingLayout data={data}>
                     <div>child contents</div>
                 </LandingLayout>
             </MemoryRouter>
         );
+    }
+
+    it('renders without layout values', () => {
+        render(<Component layout={[]} />);
+        expect(screen.getAllByRole('img')).toHaveLength(2);
+        expect(screen.getAllByRole('link')).toHaveLength(1);
+    });
+    it('suppresses the Give link when specified', () => {
+        const layout = [{
+            value: {
+                navLinks: [],
+                showGive: false
+            }
+        }];
+
+        render(<Component layout={layout} />);
         expect(screen.getAllByRole('img')).toHaveLength(2);
-        expect(screen.getAllByRole('link')).toHaveLength(3);
+        expect(screen.queryAllByRole('link')).toHaveLength(0);
     });
     it('renders with layout values', () => {
-        data.layout.push({
+        const layout = [{
             value: {
                 navLinks: [
                     {
@@ -34,14 +55,9 @@ describe('layouts/landing', () => {
                     }
                 ]
             }
-        });
-        render(
-            <MemoryRouter initialEntries={['']}>
-                <LandingLayout data={data}>
-                    <div>child contents</div>
-                </LandingLayout>
-            </MemoryRouter>
-        );
-        expect(screen.getAllByRole('link')).toHaveLength(4);
+        }];
+
+        render(<Component layout={layout} />);
+        expect(screen.getAllByRole('link')).toHaveLength(2);
     });
 });