Add Gen1 banner to getting started pages (#7839)

* add Gen1 Banner to all gen 1 getting started pages

* update link location and add banner to how amplify works

---------

Co-authored-by: Jacob Logan <[email protected]>

Author: jacoblogan

src/components/Callout/Callout.tsx

@@ -3,12 +3,21 @@ import { Message, View } from '@aws-amplify/ui-react';
 interface CalloutProps {
   info?: boolean;
   warning?: boolean;
+  backgroundColor?: string;
   children?: React.ReactNode;
 }
 
-export const Callout = ({ warning, children }: CalloutProps) => {
+export const Callout = ({
+  warning,
+  backgroundColor,
+  children
+}: CalloutProps) => {
   return (
-    <Message variation="filled" colorTheme={warning ? 'warning' : 'info'}>
+    <Message
+      variation="filled"
+      colorTheme={warning ? 'warning' : 'info'}
+      backgroundColor={backgroundColor}
+    >
       <View>{children}</View>
     </Message>
   );

src/components/Callout/__tests__/Callout.test.tsx

@@ -19,4 +19,17 @@ describe('Callout', () => {
 
     consoleErrorFn.mockRestore();
   });
+
+  it('should pass the backgroundColor through to the Message component', async () => {
+    const child = <div>Callout Child</div>;
+    const ele = render(
+      <Callout info={true} backgroundColor={'red'}>
+        {child}
+      </Callout>
+    );
+
+    const styles = getComputedStyle(ele.container.children[0]);
+    console.log(styles);
+    expect(styles.backgroundColor).toBe('red');
+  });
 });

src/components/Gen1Banner/Gen1Banner.tsx

@@ -0,0 +1,20 @@
+import { Callout } from '@/components/Callout';
+import Link from 'next/link';
+import classNames from 'classnames';
+
+export const Gen1Banner = ({ currentPlatform }) => {
+  return (
+    <Callout backgroundColor="background.error">
+      For new Amplify apps, we recommend using Amplify Gen 2. You can learn more
+      in our{' '}
+      <Link
+        href={`/${currentPlatform}/start/quickstart`}
+        passHref
+        className={classNames('amplify-link')}
+      >
+        Gen 2 Docs
+      </Link>
+      .
+    </Callout>
+  );
+};

src/components/Gen1Banner/index.ts

@@ -0,0 +1 @@
+export { Gen1Banner } from './Gen1Banner';

src/components/Layout/Layout.tsx

@@ -35,6 +35,7 @@ import {
   NEXT_PREVIOUS_SECTIONS
 } from '@/components/NextPrevious';
 import { Modal } from '@/components/Modal';
+import { Gen1Banner } from '@/components/Gen1Banner';
 
 export const Layout = ({
   children,
@@ -127,6 +128,13 @@ export const Layout = ({
     }
   }, 20);
 
+  const isGen1GettingStarted = /\/gen1\/\w+\/start\/getting-started\//.test(
+    asPathWithNoHash
+  );
+  const isGen1HowAmplifyWorks = /\/gen1\/\w+\/how-amplify-works\//.test(
+    asPathWithNoHash
+  );
+
   useEffect(() => {
     const headings: HeadingInterface[] = [];
 
@@ -254,6 +262,9 @@ export const Layout = ({
                   {useCustomTitle ? null : (
                     <Heading level={1}>{pageTitle}</Heading>
                   )}
+                  {(isGen1GettingStarted || isGen1HowAmplifyWorks) && (
+                    <Gen1Banner currentPlatform={currentPlatform} />
+                  )}
                   {children}
                   {showNextPrev && <NextPrevious />}
                 </Flex>