chore(main): replace Twitter logo with X logo (#7295)

* chore(main): replace Twitter logo with X logo

* update tests,snapshots, use x.com link instead of twitter.com

Author: hbuchel

src/components/Footer/Footer.tsx

@@ -1,12 +1,7 @@
 import ExternalLink from '../ExternalLink';
 import * as links from '../../constants/links';
 import { VisuallyHidden, Flex } from '@aws-amplify/ui-react';
-import {
-  IconDiscord,
-  IconTwitter,
-  IconGithub,
-  IconAWS
-} from '@/components/Icons';
+import { IconDiscord, IconX, IconGithub, IconAWS } from '@/components/Icons';
 import { ColorModeSwitcher } from '@/components/ColorModeSwitcher';
 
 interface FooterProps {
@@ -53,19 +48,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>
+              <IconX />
+              <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 +69,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/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -0,0 +1,21 @@
+import { Icon } from '@aws-amplify/ui-react';
+
+export const IconX = ({ ...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/IconTwitter.tsx

@@ -25,8 +25,8 @@ export { IconStar } from './IconStar';
 export { IconSystem } from './IconSystem';
 export { IconTOC } from './IconTOC';
 export { IconTS } from './IconTS';
-export { IconTwitter } from './IconTwitter';
 export { IconVue } from './IconVue';
+export { IconX } from './IconX';
 export { IconExternalLink } from './IconExternalLink';
 export { IconThumbsUp } from './IconThumbsUp';
 export { IconThumbsDown } from './IconThumbsDown';

src/components/Icons/IconX.tsx

@@ -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/';