Adding github and discord in docs header (#2083)

Author: dbanksdesign

docs/src/components/DesignTokenIcon.tsx docs/src/components/Icons.tsxdocs/src/components/DesignTokenIcon.tsx renamed to docs/src/components/Icons.tsx

@@ -1,6 +1,23 @@
 import { Icon } from '@aws-amplify/ui-react';
+import { SiGithub, SiDiscord, SiW3C, SiReact } from 'react-icons/si';
 
-export const DesignTokenIcon = ({ ariaLabel, ...rest }) => (
+export const ReactIcon = ({ ariaLabel = '', ...rest }) => (
+  <Icon {...rest} ariaLabel={ariaLabel} as={SiReact} />
+);
+
+export const W3CIcon = ({ ariaLabel = '', ...rest }) => (
+  <Icon {...rest} ariaLabel={ariaLabel} as={SiW3C} />
+);
+
+export const DiscordIcon = ({ ariaLabel = '', ...rest }) => (
+  <Icon {...rest} ariaLabel={ariaLabel} as={SiDiscord} />
+);
+
+export const GithubIcon = ({ ariaLabel = '', ...rest }) => (
+  <Icon {...rest} ariaLabel={ariaLabel} as={SiGithub} />
+);
+
+export const DesignTokenIcon = ({ ariaLabel = '', ...rest }) => (
   <Icon
     {...rest}
     ariaLabel={ariaLabel}

docs/src/components/Layout/Footer.tsx

@@ -1,11 +1,10 @@
-import { Icon, Link, Text, Flex, View, useTheme } from '@aws-amplify/ui-react';
+import { Link, Text, Flex, View, Button } from '@aws-amplify/ui-react';
 
-import * as links from '@/data/links';
-import * as icons from '@/data/icon';
+import { DISCORD, GITHUB_REPO, TERMS, PRIVACY } from '@/data/links';
 import { Logo } from '@/components/Logo';
+import { DiscordIcon, GithubIcon } from '../Icons';
 
 export const Footer = () => {
-  const { tokens } = useTheme();
   return (
     <Flex as="footer" direction="column" className="docs-footer">
       <Flex direction="row" justifyContent="center">
@@ -15,41 +14,24 @@ export const Footer = () => {
         justifyContent="center"
         alignItems="center"
         direction={{ base: 'column', medium: 'row' }}
-        gap={tokens.space.xs}
+        gap="xs"
       >
-        <Link
-          href="https://github.com/aws-amplify/amplify-ui"
-          isExternal={true}
+        <Button
+          as={Link}
+          variation="link"
+          href={GITHUB_REPO}
+          isExternal
+          gap="xs"
         >
-          <Flex
-            as="span"
-            alignItems="baseline"
-            justifyContent="center"
-            display="flex"
-            gap={tokens.space.xs}
-          >
-            <Icon ariaLabel="Github" pathData={icons.GITHUB} />
-            Contribute on Github
-          </Flex>
-        </Link>
-        <Link href="https://discord.gg/amplify" isExternal={true}>
-          <Flex
-            as="span"
-            alignItems="baseline"
-            justifyContent="center"
-            display="flex"
-            gap={tokens.space.xxs}
-          >
-            <Icon
-              ariaLabel=""
-              viewBox={{ minX: 0, minY: 0, width: 245, height: 240 }}
-              pathData={icons.DISCORD}
-            />
-            Discuss on Discord
-          </Flex>
-        </Link>
+          <GithubIcon ariaLabel="" />
+          Contribute on Github
+        </Button>
+        <Button as={Link} variation="link" href={DISCORD} isExternal gap="xs">
+          <DiscordIcon ariaLabel="" />
+          Discuss on Discord
+        </Button>
       </Flex>
-      <View fontSize={tokens.fontSizes.small}>
+      <View fontSize="small">
         <Text>
           Amplify open source software, documentation and community are
           supported by Amazon Web Services.
@@ -58,16 +40,16 @@ export const Footer = () => {
           {' '}
           © {new Date().getFullYear()} Amazon Web Services, Inc. and its
           affiliates. All rights reserved. View the{' '}
-          <Link isExternal={true} href={links.TERMS}>
+          <Link isExternal href={TERMS}>
             site terms
           </Link>{' '}
           and{' '}
-          <Link isExternal={true} href={links.PRIVACY}>
+          <Link isExternal href={PRIVACY}>
             privacy policy
           </Link>
           .
         </Text>
-        <Text marginBlockStart={tokens.space.medium}>
+        <Text marginBlockStart="medium">
           Flutter and the related logo are trademarks of Google LLC. We are not
           endorsed by or affiliated with Google LLC.
         </Text>

docs/src/components/Layout/Header.tsx

@@ -1,13 +1,22 @@
 import * as React from 'react';
 import { DocSearch } from '@docsearch/react';
-import { Flex, Image } from '@aws-amplify/ui-react';
+import {
+  Button,
+  Flex,
+  Image,
+  Link,
+  View,
+  VisuallyHidden,
+  useBreakpointValue,
+} from '@aws-amplify/ui-react';
 
 import { ColorModeSwitcher } from './ColorModeSwitcher';
 import { Sidebar } from './Sidebar';
 import { LogoLink } from './LogoLink';
 import { MenuButton } from './MenuButton';
-
+import { DISCORD, GITHUB_REPO } from '@/data/links';
 import '@docsearch/css';
+import { DiscordIcon, GithubIcon } from '../Icons';
 
 export const Header = ({
   expanded,
@@ -17,6 +26,11 @@ export const Header = ({
   platform,
 }) => {
   const [showSearch, setShowSearch] = React.useState(false);
+  const hiddenOnMobile = useBreakpointValue({
+    base: false,
+    small: true,
+  });
+
   React.useEffect(() => {
     setShowSearch(true);
   }, [showSearch]);
@@ -51,6 +65,34 @@ export const Header = ({
           />
         )}
         <ColorModeSwitcher colorMode={colorMode} setColorMode={setColorMode} />
+        {hiddenOnMobile ? (
+          <View>
+            <Button
+              variation="link"
+              size="small"
+              as={Link}
+              href={DISCORD}
+              isExternal
+              color="font.tertiary"
+              fontSize="medium"
+            >
+              <VisuallyHidden>Discord</VisuallyHidden>
+              <DiscordIcon />
+            </Button>
+            <Button
+              variation="link"
+              size="small"
+              as={Link}
+              href={GITHUB_REPO}
+              isExternal
+              color="font.tertiary"
+              fontSize="medium"
+            >
+              <VisuallyHidden>Github</VisuallyHidden>
+              <GithubIcon />
+            </Button>
+          </View>
+        ) : null}
       </Flex>
     </Flex>
   );

docs/src/components/Layout/index.tsx

@@ -1,20 +1,11 @@
 import * as React from 'react';
 import debounce from 'lodash/debounce';
-import {
-  Icon,
-  Heading,
-  Link,
-  Text,
-  View,
-  useTheme,
-} from '@aws-amplify/ui-react';
-import { SiW3C, SiReact } from 'react-icons/si';
+import { Heading, Link, Text, View, useTheme } from '@aws-amplify/ui-react';
 
-import { Sidebar } from './Sidebar';
 import { TableOfContents } from '../TableOfContents';
 import { Footer } from './Footer';
 import { GITHUB_REPO_FILE } from '@/data/links';
-import { DesignTokenIcon } from '@/components/DesignTokenIcon';
+import { DesignTokenIcon, ReactIcon, W3CIcon } from '@/components/Icons';
 
 export default function Page({
   children,
@@ -90,11 +81,7 @@ export default function Page({
                   href={ariaPattern}
                   isExternal
                 >
-                  <Icon
-                    ariaLabel="W3C"
-                    as={SiW3C}
-                    marginInlineEnd={tokens.space.xs}
-                  />
+                  <W3CIcon ariaLabel="W3C" marginInlineEnd={tokens.space.xs} />
                   ARIA pattern
                 </Link>
               ) : null}
@@ -117,10 +104,9 @@ export default function Page({
                   href={`${GITHUB_REPO_FILE}${reactSource}`}
                   isExternal
                 >
-                  <Icon
+                  <ReactIcon
                     ariaLabel=""
                     aria-hidden="true"
-                    as={SiReact}
                     marginInlineEnd={tokens.space.xs}
                   />
                   React source