Chore: Merge main to next-release/main

src/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import * as links from '../../constants/links';
 import { VisuallyHidden, Flex } from '@aws-amplify/ui-react';
 import {
   IconDiscord,
-  IconTwitter,
+  IconXSocial,
   IconGithub,
   IconAWS
 } from '@/components/Icons';
@@ -53,19 +53,19 @@ export const Footer = ({ hasTOC = false }: FooterProps) => {
         <Flex as="ul" className="footer__links">
           <li>
             <ExternalLink
-              href={links.TWITTER}
+              href={links.X}
               className="footer-link footer-link--social"
             >
-              <IconTwitter aria-hidden="true" />
-              <VisuallyHidden>Twitter</VisuallyHidden>
+              <IconXSocial />
+              <VisuallyHidden>X</VisuallyHidden>
             </ExternalLink>
           </li>
           <li>
             <ExternalLink
               href={links.DISCORD}
               className="footer-link footer-link--social"
             >
-              <IconDiscord aria-hidden="true" />
+              <IconDiscord />
               <VisuallyHidden>Discord</VisuallyHidden>
             </ExternalLink>
           </li>
@@ -74,7 +74,7 @@ export const Footer = ({ hasTOC = false }: FooterProps) => {
               href={links.GITHUB}
               className="footer-link footer-link--social"
             >
-              <IconGithub aria-hidden="true" />
+              <IconGithub />
               <VisuallyHidden>Github</VisuallyHidden>
             </ExternalLink>
           </li>

src/components/Footer/__tests__/Footer.test.tsx

@@ -20,7 +20,7 @@ describe('Footer', () => {
     const footerLinks = await screen.getAllByRole('link');
     const linkUrls = {
       Discord: 'https://discord.gg/amplify',
-      Twitter: 'https://twitter.com/AWSAmplify',
+      X: 'https://x.com/AWSAmplify',
       Github: 'https://github.com/aws-amplify',
       'site terms': 'https://aws.amazon.com/terms/',
       'privacy policy': 'https://aws.amazon.com/privacy/'

src/components/Icons/IconXSocial.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@aws-amplify/ui-react';
+
+export const IconXSocial = ({ ...rest }) => {
+  return (
+    <Icon
+      aria-hidden="true"
+      {...rest}
+      viewBox={{
+        minX: 0,
+        minY: 0,
+        width: 24,
+        height: 24
+      }}
+    >
+      <path
+        d="M13.9761 10.1624L22.7186 0H20.6469L13.0558 8.82384L6.99289 0H0L9.16837 13.3432L0 24H2.07179L10.0881 14.6817L16.4911 24H23.4839L13.9761 10.1624ZM2.81829 1.55962H6.00044L20.6479 22.5113H17.4657L2.81829 1.55962Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+};

src/components/Icons/index.ts

@@ -9,7 +9,6 @@ export { IconDark } from './IconDark';
 export { IconDiscord } from './IconDiscord';
 export { IconDoubleChevron } from './IconDoubleChevron';
 export { IconExpand } from './IconExpand';
-export { IconExternalLink } from './IconExternalLink';
 export { IconFlutter } from './IconFlutter';
 export { IconGithub } from './IconGithub';
 export { IconInfo } from './IconInfo';
@@ -20,16 +19,17 @@ export { IconLight } from './IconLight';
 export { IconMenu } from './IconMenu';
 export { IconNext } from './IconNext';
 export { IconNuxt } from './IconNuxt';
-export { IconPencil } from './IconPencil';
 export { IconReact } from './IconReact';
 export { IconSwift } from './IconSwift';
 export { IconStar } from './IconStar';
 export { IconSystem } from './IconSystem';
-export { IconThumbsDown } from './IconThumbsDown';
-export { IconThumbsUp } from './IconThumbsUp';
 export { IconTOC } from './IconTOC';
 export { IconTS } from './IconTS';
-export { IconTSBoxed } from './IconTSBoxed';
-export { IconTwitter } from './IconTwitter';
 export { IconVue } from './IconVue';
+export { IconXSocial } from './IconXSocial';
+export { IconExternalLink } from './IconExternalLink';
+export { IconThumbsUp } from './IconThumbsUp';
+export { IconThumbsDown } from './IconThumbsDown';
+export { IconPencil } from './IconPencil';
 export { IconX } from './IconX';
+export { IconTSBoxed } from './IconTSBoxed';

src/components/MDXComponents/MDXHeading.tsx

@@ -4,20 +4,28 @@ import slug from './utils/slug';
 
 export const MDXHeading = (props) => {
   const { level, children } = props;
-
   let href = '';
 
+  /* Test if children element is not a string before creating the url slug */
   if (children && typeof children != 'string') {
     let newChildren = '';
-    for (let i = 0; i < children.length; i++) {
-      if (typeof children[i] == 'string') {
-        newChildren = newChildren + children[i];
-      } else if (typeof children[i] != 'string') {
-        newChildren = newChildren + children[i].props.children;
+    /* Test if child element is a single object */
+    if (typeof children == 'object' && children.props?.children) {
+      newChildren = children.props.children;
+    } else {
+      /* If not a single object, we expect an array of
+      elements and loop through them */
+      for (let i = 0; i < children.length; i++) {
+        if (typeof children[i] == 'string') {
+          newChildren = newChildren + children[i];
+        } else {
+          newChildren = newChildren + children[i].props.children;
+        }
       }
     }
     href = `${slug(newChildren)}`;
   } else {
+    /* If children element is a string, use that to create the url slug */
     href = `${slug(children)}`;
   }
 

src/components/MDXComponents/__tests__/MDXHeading.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { MDXHeading } from '../MDXHeading';
+
+describe('MDXHeading', () => {
+  it('should render H2 with string and anchor link', () => {
+    const props = {
+      level: 2,
+      children: 'Test heading'
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 2 });
+    const link = screen.queryByRole('link');
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent(props.children);
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringMatching(/#test-heading/)
+    );
+  });
+
+  it('should render H3 with string and anchor link', () => {
+    const props = {
+      level: 3,
+      children: 'Test heading'
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 3 });
+    const link = screen.queryByRole('link');
+
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent(props.children);
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringMatching(/#test-heading/)
+    );
+  });
+
+  it('should render H4 with string and no anchor link', () => {
+    const props = {
+      level: 4,
+      children: 'Test heading'
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 4 });
+    const link = screen.queryByRole('link');
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent(props.children);
+    expect(link).not.toBeInTheDocument();
+  });
+
+  it('should render H2 with HTML code element and anchor link', () => {
+    const props = {
+      level: 2,
+      children: <code>runtime</code>
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 2 });
+    const link = screen.queryByRole('link', { name: 'runtime' });
+    expect(heading).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', expect.stringMatching(/#runtime/));
+  });
+
+  it('should render H2 with mixed elements and anchor link', () => {
+    render(
+      <MDXHeading level={2}>
+        <code>runtime</code> and <code>test</code>
+      </MDXHeading>
+    );
+
+    const heading = screen.queryByRole('heading', { level: 2 });
+    const link = screen.queryByRole('link', { name: 'runtime and test' });
+    expect(heading).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringMatching(/#runtime-and-test/)
+    );
+  });
+});

src/constants/links.ts

@@ -1,7 +1,7 @@
 export const DISCORD = 'https://discord.gg/amplify';
 export const LEARN = 'https://amplify.aws/learn';
 export const CONTRIBUTE = 'https://docs.amplify.aws/contribute/';
-export const TWITTER = 'https://twitter.com/AWSAmplify';
+export const X = 'https://x.com/AWSAmplify';
 export const GITHUB = 'https://github.com/aws-amplify';
 export const TERMS = 'https://aws.amazon.com/terms/';
 export const PRIVACY = 'https://aws.amazon.com/privacy/';

src/pages/[platform]/build-a-backend/storage/authorization/index.mdx

@@ -252,7 +252,7 @@ export const storage = defineStorage({
   name: 'myProjectFiles',
   access: (allow) => ({
     'public/*': [
-      allow.guest.to(['read'])
+      allow.guest.to(['read']),
       allow.authenticated.to(['read', 'write', 'delete']),
     ],
     'protected/{entity_id}/*': [

src/styles/block-switcher.scss

@@ -50,4 +50,8 @@
       box-shadow: 0 0 0 2px var(--amplify-colors-border-focus) inset;
     }
   }
+  .amplify-tabs__list {
+    overflow: hidden;
+    overflow-x: scroll;
+  }
 }