Added new badge and message for AI kit

mdx-components.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { MDXComponents } from 'mdx/types';
 import ExportedImage from 'next-image-export-optimizer';
+import { Banner } from './src/components/Banner';
 import InlineFilter from './src/components/InlineFilter';
 import { YoutubeEmbed } from './src/components/YoutubeEmbed';
 import { Accordion } from './src/components/Accordion';
@@ -64,6 +65,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     InlineFilter,
     MigrationAlert,
     YoutubeEmbed,
+    Banner,
     Overview,
     ExternalLink,
     ExternalLinkButton,

src/components/Banner/Banner.tsx

@@ -0,0 +1,49 @@
+import { Flex, Message, IconsProvider, Text } from '@aws-amplify/ui-react';
+import { IconStar, IconChevron } from '../Icons';
+import { Button } from '@aws-amplify/ui-react';
+
+interface BannerProps {
+  url?: string;
+}
+
+export const Banner: React.FC<BannerProps> = ({
+  url = '/react/ai/set-up-ai/'
+}) => {
+  return (
+    <IconsProvider
+      icons={{
+        message: {
+          info: <IconStar />
+        }
+      }}
+    >
+      <Message className="message-banner" colorTheme="info">
+        <Flex className="message-banner__inner">
+          <Flex direction="column" gap="xxs">
+            <Text as="span" className="message-banner__heading">
+              Amplify AI kit is now generally available
+            </Text>
+            <Text className="message-banner__content">
+              Create fullstack AI-powered apps with TypeScript, no prior
+              experience in cloud architecture or AI needed.
+            </Text>
+          </Flex>
+
+          <Button
+            as="a"
+            href={url}
+            size="small"
+            gap="small"
+            target="_blank"
+            colorTheme="overlay"
+            rel="noopener noreferrer"
+            className="message-banner__button"
+          >
+            Get started
+            <IconChevron className="icon-rotate-270" fontSize=".875em" />
+          </Button>
+        </Flex>
+      </Message>
+    </IconsProvider>
+  );
+};

src/components/Banner/__tests__/Banner.test.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Banner } from '../index';
+
+describe('Banner', () => {
+  it('should render the Banner component', async () => {
+    const bannerText = 'Amplify AI kit is now generally available';
+    render(<Banner />);
+
+    const component = await screen.findByText(bannerText);
+    expect(component).toBeInTheDocument();
+  });
+});

src/components/Banner/index.tsx

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

src/components/Layout/Layout.tsx

@@ -21,6 +21,7 @@ import {
   PLATFORM_DISPLAY_NAMES,
   Platform
 } from '@/data/platforms';
+import { GEN2BANNER_URLS } from '@/data/gen2Banner-urls';
 import { SpaceShip } from '@/components/SpaceShip';
 import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
 import { LayoutProvider, LayoutHeader } from '@/components/Layout';
@@ -29,6 +30,7 @@ import type { HeadingInterface } from '@/components/TableOfContents/TableOfConte
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { debounce } from '@/utils/debounce';
 import '@docsearch/css';
+import { Banner } from '@/components/Banner';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 import {
   NextPrevious,
@@ -71,6 +73,7 @@ export const Layout = ({
   const basePath = 'docs.amplify.aws';
   const metaUrl = url ? url : basePath + asPathWithNoHash;
   const pathname = router.pathname;
+  const shouldShowGen2Banner = GEN2BANNER_URLS.includes(asPathWithNoHash);
   const isGen1 = asPathWithNoHash.split('/')[1] === 'gen1';
   const isContributor = asPathWithNoHash.split('/')[1] === 'contribute';
   const currentGlobalNavMenuItem = isContributor ? 'Contribute' : 'Docs';
@@ -272,6 +275,7 @@ export const Layout = ({
                         platform={currentPlatform}
                       />
                     ) : null}
+                    {shouldShowGen2Banner ? <Banner /> : null}
                     {useCustomTitle ? null : (
                       <Heading level={1}>{pageTitle}</Heading>
                     )}

src/components/Menu/MenuItem.tsx

@@ -1,6 +1,6 @@
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 import { ReactElement, useContext, useEffect, useState, useMemo } from 'react';
-import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react';
+import { Link as AmplifyUILink, Flex, Badge } from '@aws-amplify/ui-react';
 import { IconExternalLink, IconChevron } from '@/components/Icons';
 import Link from 'next/link';
 import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms';
@@ -200,6 +200,7 @@ export function MenuItem({
             className={`menu__list-item__link__inner ${listItemLinkInnerStyle}`}
           >
             {pageNode.title}
+            {pageNode.isNew && <Badge backgroundColor="purple.20">New</Badge>}
             {children && hasVisibleChildren && level !== Levels.Category && (
               <IconChevron className={open ? '' : 'icon-rotate-90-reverse'} />
             )}

src/data/gen2Banner-urls.ts

@@ -0,0 +1,4 @@
+/**
+ * List of paths that the gen2 <Banner /> should display on
+ */
+export const GEN2BANNER_URLS = ['/'];

src/directory/directory.d.ts

@@ -57,4 +57,9 @@ export type PageNode = {
    * This is being used for categories like Cli - Legacy and SDK
    */
   hideChildrenOnBase?: boolean;
+
+  /**
+   * This flag indicates that the item is new and will display a pill
+   */
+  isNew?: boolean;
 };

src/pages/[platform]/ai/index.mdx

@@ -4,6 +4,7 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
 export const meta = {
   title: 'AI kit',
   description: 'The quickest way for fullstack developers to build web apps with AI capabilities such as chat, conversational search, and summarization',
+  isNew: true,
   route: '/[platform]/ai',
   platforms: [
     'angular',

src/styles/banner.scss

@@ -0,0 +1,22 @@
+.message-banner {
+  align-items: start;
+  /* Specificity to override Amplify UI color theme */
+  &.amplify-message--info {
+    border: 1px solid var(--amplify-colors-purple-20);
+    background-color: var(--amplify-colors-purple-10);
+    @include darkMode {
+      background-color: var(--amplify-colors-purple-20);
+    }
+  }
+  .amplify-message__icon {
+    color: var(--amplify-colors-purple-80);
+  }
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  &__heading {
+    font-weight: 700;
+  }
+}

src/styles/styles.scss

@@ -9,6 +9,7 @@
 @import './accordion.scss';
 @import './block-switcher.scss';
 @import './breadcrumbs.scss';
+@import './banner.scss';
 @import './callout.scss';
 @import './code.scss';
 @import './color-switcher.scss';

yarn.lock

@@ -350,24 +350,44 @@
     fast-xml-parser "^4.4.1"
     tslib "^2.5.0"
 
-"@aws-amplify/[email protected]":
-  version "3.0.22"
-  resolved "https://registry.npmjs.org/@aws-amplify/ui-react-core/-/ui-react-core-3.0.22.tgz"
-  integrity sha512-uL5jspqvTZhpqH1inPV3ifvrzIVgIIriXPgjz4BaceDm+1X03Hc3tfq5TiUKW8PdpuWF6riXXBP3MEFsk29OGw==
+"@aws-amplify/ui-react-ai@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react-ai/-/ui-react-ai-1.0.0.tgz#db6dede6b42685f9c03293374a1aaf195de7f02f"
+  integrity sha512-Y+ezPjjdUajEjN+naWhaBn7TQ4nVEtB0EylGwI8YrLKHFQVJaEGBWvvw9mfiUl3krWv+utP+EhagTM8Zk9cMBg==
+  dependencies:
+    "@aws-amplify/ui" "^6.6.6"
+    "@aws-amplify/ui-react" "^6.6.0"
+    "@aws-amplify/ui-react-core" "^3.0.30"
+
+"@aws-amplify/[email protected]", "@aws-amplify/ui-react-core@^3.0.30":
+  version "3.0.30"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react-core/-/ui-react-core-3.0.30.tgz#e86346d5293bfa7f22aae9832fc0bef94ea64a83"
+  integrity sha512-3AaUSC1Mg+yr7TqHfp34QpP6ICjQl9wUR+x7KxsETc7m5tCv4ANGXOD7qaADCi3CEw2IChBFuVu4NFKsGJbjqQ==
   dependencies:
-    "@aws-amplify/ui" "6.4.1"
+    "@aws-amplify/ui" "6.6.6"
     "@xstate/react" "^3.2.2"
     lodash "4.17.21"
     react-hook-form "^7.43.5"
     xstate "^4.33.6"
 
-"@aws-amplify/ui-react@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.npmjs.org/@aws-amplify/ui-react/-/ui-react-6.3.1.tgz"
-  integrity sha512-n/wTjMYYuAhpgpuQ4o+9+IgvNsdjGqbfaA4bAXE7b1apIOfM8HTaO2zant85x+geDl7rbaa1y/z62T4H9AksMQ==
+"@aws-amplify/ui-react-core@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react-core/-/ui-react-core-3.1.0.tgz#236ecf10194a27dc57fc983c679ab1de19b8a00d"
+  integrity sha512-Nime3qjJRQyfRDDA4bnAaFVzRfEBddZFP8NhVIb13z7Uw0XoPQzX+dXwuRW+Bjt2FJnlIUHh7Cfkt0m4PedRHQ==
   dependencies:
-    "@aws-amplify/ui" "6.4.1"
-    "@aws-amplify/ui-react-core" "3.0.22"
+    "@aws-amplify/ui" "6.7.0"
+    "@xstate/react" "^3.2.2"
+    lodash "4.17.21"
+    react-hook-form "^7.43.5"
+    xstate "^4.33.6"
+
+"@aws-amplify/ui-react@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react/-/ui-react-6.6.0.tgz#1d10f435286fcac5e07330e318a0e30c0c84de94"
+  integrity sha512-BHth+/CBZ8XE0IBpq+L/7mWbvGRIQxjtOmW50593hW7PvtaSXXDzPHZXRQ5nRhWs1anhxNWDiv4BKuiey6YpOw==
+  dependencies:
+    "@aws-amplify/ui" "6.6.6"
+    "@aws-amplify/ui-react-core" "3.0.30"
     "@radix-ui/react-direction" "1.0.0"
     "@radix-ui/react-dropdown-menu" "1.0.0"
     "@radix-ui/react-slider" "1.0.0"
@@ -376,10 +396,34 @@
     qrcode "1.5.0"
     tslib "^2.5.2"
 
-"@aws-amplify/[email protected]":
-  version "6.4.1"
-  resolved "https://registry.npmjs.org/@aws-amplify/ui/-/ui-6.4.1.tgz"
-  integrity sha512-0rGGJjnd60gZNhjqDepk3VpCpzyJDE2+xevVg0iqM8APKpyQ9XRWisNLIvglQy7p/3CauXdw8U0NZVcu29Yhrw==
+"@aws-amplify/ui-react@^6.7.0":
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui-react/-/ui-react-6.7.0.tgz#a3fc28980feee01f319448c360307a5ccc65c7f3"
+  integrity sha512-3H97gz43+iaVNPqkQIiFj4Ko7zJLyMGtZScfNyt6PK4Ntuit5ZP6hc+Z7BtNsNEkfnAiGL1BiNOuD1IBfsnifw==
+  dependencies:
+    "@aws-amplify/ui" "6.7.0"
+    "@aws-amplify/ui-react-core" "3.1.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-dropdown-menu" "1.0.0"
+    "@radix-ui/react-slider" "1.0.0"
+    "@xstate/react" "^3.2.2"
+    lodash "4.17.21"
+    qrcode "1.5.0"
+    tslib "^2.5.2"
+
+"@aws-amplify/[email protected]", "@aws-amplify/ui@^6.6.6":
+  version "6.6.6"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui/-/ui-6.6.6.tgz#adf39ea025ed2f35e46bb01323f8d73142b41f59"
+  integrity sha512-4fBMO5+saXaAgBwhYbQIgudVcK1B9oHuG3WizMpImcYUbB5aL4B6NhFtmSz3DBBqAeqrZHUuUV7gWibU5JxAGQ==
+  dependencies:
+    csstype "^3.1.1"
+    lodash "4.17.21"
+    tslib "^2.5.2"
+
+"@aws-amplify/[email protected]":
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/ui/-/ui-6.7.0.tgz#f31da1515a25c2fac3d9e17c9638e619a988baf8"
+  integrity sha512-6hByYfFBQRjsFMoVGdCWMSdo7rwMgz6rxxdWV0xuHb4j3tsPEI9ZhRXG0Z1ivtQFAM3Uaz0D3hcg1kp6QFdCFg==
   dependencies:
     csstype "^3.1.1"
     lodash "4.17.21"
@@ -4574,7 +4618,7 @@ cross-env@^7.0.3:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-spawn@^6.0.0, "cross-spawn@^6.0.6 || ^7.0.5", cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^6.0.0, cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3, cross-spawn@^7.0.5:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
   integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==