chore(docs): update global nav to match main docs (#4749)

* chore(docs): update global nav to match main docs * cleanup * updates * updates * cleaning up fonts --------- Co-authored-by: Scott Rees <[email protected]>
aws-amplify · Nov 16, 2023 · 393c6ea · 393c6ea
1 parent 3bd0093
commit 393c6ea
Show file tree

Hide file tree

Showing 24 changed files with 362 additions and 154 deletions.
diff --git a/docs/public/fonts/AmazonEmber_Bd.ttf b/docs/public/fonts/AmazonEmber_Bd.ttf
diff --git a/docs/public/fonts/AmazonEmber_W_Lt.woff2 b/docs/public/fonts/AmazonEmber_W_Lt.woff2
diff --git a/docs/src/components/Icons.tsx b/docs/src/components/Icons.tsx
@@ -50,14 +50,16 @@ export const DesignTokenIcon = ({ ariaLabel = '', ...rest }) => (
   />
 );
 
-export const AmplifyIcon = ({ ariaLabel = '', ...rest }) => (
+export const AmplifyIcon = (props) => (
   <Icon
-    ariaLabel={ariaLabel}
-    {...rest}
+    {...props}
+    viewBox={{ width: 24, height: 22 }}
     paths={[
       {
-        d: 'M5.22274 17.8571H11.9827L13.7143 20.9048H13.6655H0L4.8154 12.5604L6.83337 9.06616L8.56591 12.0683L5.22274 17.8571ZM7.74389 7.48595L9.40738 4.60353L18.8218 20.9047H15.4878L7.74389 7.48595ZM10.3333 3H13.6628L24 20.9048H20.6662L10.3333 3Z',
-        fillRule: 'evenodd',
+        d: 'M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z',
+      },
+      {
+        d: 'M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z',
       },
     ]}
   />

diff --git a/docs/src/components/Layout/GlobalNav/GlobalNav.module.scss b/docs/src/components/Layout/GlobalNav/GlobalNav.module.scss
@@ -1,5 +1,3 @@
-$breakpoint-small: 480px;
-
 // This class is added to the sites that aren't using the Amplify UI theme provider and is creating the variables that are being used in dark mode of Amplify UI
 .use-ui-theme {
   --amplify-colors-font-primary: #232f3e;
@@ -9,30 +7,43 @@ $breakpoint-small: 480px;
 }
 
 .navbar {
-  background-color: var(--amplify-colors-neutral-90);
-  position: sticky;
+  // Top level navbar element, create all of the variables that will be used throughout the unified navbar
+  --navbar-background-color: var(--amplify-colors-background-primary);
+  --navbar-border-color: var(--amplify-colors-neutral-20);
+  --navbar-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  --navbar-padding-inline: var(--amplify-space-medium);
+  --navbar-current-property-color: var(--amplify-colors-primary-60);
+  --nav-menu-item-border-width: 2px;
+  --nav-menu-item-color: var(--amplify-colors-neutral-100);
+  --nav-menu-item-active-color: var(--amplify-colors-neutral-100);
+  --nav-menu-item-hover-color: var(--amplify-colors-primary-60);
+  --nav-menu-item-mobile-padding-block: var(--amplify-space-xs);
+  --nav-menu-item-mobile-padding-inline: var(--amplify-space-large);
+  --nav-menu-item-padding-inline: var(--amplify-space-xs);
+  --secondary-nav-hover-color: black;
+  --secondary-nav-hover-background-color: var(--amplify-colors-neutral-90);
+  --dev-center-nav-height: 4rem;
+  --logo-color: var(--amplify-colors-neutral-100);
+  --amplify-colors-font-hover: var(--amplify-colors-neutral-10);
+  --navbar-mobile-nav-padding: 12px;
+  --nav-links-spacing: var(--amplify-space-small);
+
+  background-color: var(--navbar-background-color);
+  position: fixed;
   top: 0px;
   z-index: 200;
+  width: 100%;
+
+  border-bottom: var(--amplify-border-widths-small) solid
+    var(--amplify-colors-border-secondary);
 
   a,
   p,
   span {
-    font-family: var(--navbar-font-family);
+    font-family: 'Amazon Ember';
     -webkit-font-smoothing: auto !important;
     -moz-osx-font-smoothing: auto !important;
   }
-
-  // Top level navbar element, create all of the variables that will be used throughout the unified navbar
-  --navbar-font-family: 'Amazon Ember';
-  --navbar-border-color: var(--amplify-colors-neutral-80);
-  --navbar-padding-inline: var(--amplify-space-large);
-  --navbar-current-property-color: #ff9900;
-  --secondary-nav-hover-color: black;
-  --secondary-nav-hover-background-color: var(--amplify-colors-neutral-90);
-  --dev-center-nav-height: 3rem;
-  --amplify-colors-font-hover: var(--amplify-colors-neutral-10);
-  --navbar-mobile-nav-padding: 12px;
-  --nav-links-spacing: 20px;
 }
 
 [data-amplify-theme='amplify-docs'][data-amplify-color-mode='dark'] .navbar {
@@ -46,23 +57,35 @@ $breakpoint-small: 480px;
 }
 
 .dev-center-logo {
-  color: var(--amplify-colors-neutral-10);
-  font-size: var(--amplify-font-sizes-large);
+  color: var(--logo-color);
+  font-size: var(--amplify-font-sizes-medium);
   white-space: nowrap;
 }
 
+.gen2-home {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  gap: var(--amplify-space-xxs);
+  padding: var(--amplify-space-small);
+  &:focus {
+    outline: 2px solid var(--amplify-colors-font-inverse);
+  }
+}
+
 .nav-links-container {
   z-index: 200;
   width: 100%;
-  position: absolute;
+  position: relative;
   top: 0;
   align-items: center;
   justify-content: space-between;
   align-items: stretch;
   height: auto;
   flex-direction: column;
   padding: 0;
-  background-color: var(--amplify-colors-neutral-90);
+  background-color: var(--navbar-background-color);
+
   gap: initial;
   & .left-nav-links,
   .right-nav-links {
@@ -72,49 +95,53 @@ $breakpoint-small: 480px;
 }
 
 .nav-expander {
-  &:hover,
-  :active {
-    border: none;
-    box-shadow: none;
-  }
+  align-self: center;
+  padding: var(--amplify-space-medium);
+}
 
-  &:focus {
-    box-shadow: 0 0 0 2px var(--amplify-colors-neutral-10);
-  }
+.mobile-current-link {
+  border: 2px solid transparent;
+  padding: var(--amplify-space-xxs);
+}
+.mobile-current-link:focus {
+  border-color: var(--amplify-colors-neutral-90);
 }
 
 .nav-menu-item {
   display: flex;
+  border: var(--nav-menu-item-border-width) solid transparent;
   align-items: center;
   height: 100%;
   width: 100%;
+  padding: var(--nav-menu-item-mobile-padding-block)
+    var(--nav-menu-item-mobile-padding-inline);
   font-size: var(--amplify-font-sizes-medium);
   text-decoration: none;
-  color: var(--amplify-colors-neutral-40) !important;
-  font-family: var(--navbar-font-family);
-  font-weight: 400;
-
+  color: var(--nav-menu-item-color);
+  font-family: 'Amazon Ember';
+  font-weight: 700;
   white-space: nowrap;
 
-  &:hover {
-    color: var(--amplify-colors-neutral-10) !important;
+  &:visited {
+    color: var(--nav-menu-item-active-color);
+  }
 
-    .custom-path-stroke {
-      stroke: var(--amplify-colors-neutral-10);
-    }
+  &:hover {
+    color: var(--nav-menu-item-hover-color);
   }
 
   &:focus {
-    box-shadow: 0 0 0 2px var(--amplify-colors-neutral-10);
+    outline: none;
+    border: 2px solid var(--amplify-colors-neutral-90);
   }
 
   .custom-path-stroke {
-    stroke: var(--amplify-colors-neutral-40);
+    stroke: currentColor;
   }
 }
 
 .chevron-icon {
-  fill: var(--amplify-colors-neutral-40);
+  fill: var(--amplify-colors-neutral-100);
 }
 
 .background-overlay {
@@ -132,7 +159,6 @@ $breakpoint-small: 480px;
 }
 
 .mobile-border {
-  padding: var(--navbar-mobile-nav-padding) var(--navbar-padding-inline);
   border-top: 1px solid var(--navbar-border-color);
 }
 
@@ -167,13 +193,42 @@ $breakpoint-small: 480px;
   display: none;
 }
 
+@media (min-width: 500px) {
+  .dev-center-logo {
+    font-size: var(--amplify-font-sizes-large);
+  }
+}
+
 @media (min-width: 975px) {
-  .current-nav-menu-item {
-    border-bottom: 2px solid var(--navbar-current-property-color);
-    color: var(--amplify-colors-neutral-10) !important;
+  .nav-menu-item {
+    padding-inline: var(--nav-menu-item-padding-inline);
     height: var(--dev-center-nav-height);
     line-height: var(--dev-center-nav-height);
   }
+  .right-nav-links .nav-menu-item {
+    padding-inline: 10px;
+  }
+  .current-nav-menu-item {
+    color: var(--amplify-colors-primary-80);
+
+    position: relative;
+  }
+  .current-nav-menu-item:after {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--navbar-current-property-color);
+    content: '';
+    position: absolute;
+    bottom: calc(var(--nav-menu-item-border-width) * -1);
+    left: var(--nav-menu-item-padding-inline);
+    right: var(--nav-menu-item-padding-inline);
+  }
+  .current-nav-menu-item:visited {
+    color: var(--amplify-colors-primary-80);
+  }
+  .current-nav-menu-item:hover {
+    color: var(--nav-menu-item-color);
+  }
 
   .social-links {
     justify-content: normal;
@@ -194,7 +249,7 @@ $breakpoint-small: 480px;
   }
 
   .desktop-only {
-    display: block;
+    display: flex;
   }
 
   .mobile-only {
@@ -207,7 +262,6 @@ $breakpoint-small: 480px;
   }
 
   .nav-links-container {
-    position: inherit;
     flex-direction: row;
     height: var(--dev-center-nav-height);
     gap: var(--nav-links-spacing);
@@ -232,8 +286,52 @@ $breakpoint-small: 480px;
   }
 }
 
-@media (max-width: $breakpoint-small) {
-  .dev-center-logo {
-    font-size: 1.1rem;
+.navbar-badge {
+  background-color: var(--amplify-colors-purple-60);
+  color: var(--amplify-colors-font-inverse);
+}
+
+.navbar--gen2 {
+  --navbar-background-color: var(--amplify-colors-purple-80);
+  --logo-color: var(--amplify-colors-font-inverse);
+  --nav-menu-item-color: var(--amplify-colors-purple-10);
+  --navbar-border-color: var(--amplify-colors-purple-60);
+  .nav-menu-item {
+    &:hover {
+      color: var(--amplify-colors-purple-20);
+    }
+    &:focus {
+      color: var(--nav-menu-item-color);
+      outline: 2px solid var(--amplify-colors-font-inverse);
+    }
+  }
+  .nav-expander {
+    &:hover {
+      background-color: var(--amplify-colors-purple-60);
+    }
+    &:focus {
+      background-color: var(--amplify-colors-purple-60);
+      box-shadow: 0 0 0 2px var(--amplify-colors-font-inverse);
+    }
+  }
+  .chevron-icon {
+    fill: var(--amplify-colors-font-inverse);
+  }
+}
+
+.skip-to-main {
+  position: fixed;
+  z-index: 201; // GlobalNav is set to 200
+  top: var(--amplify-space-small);
+  inset-inline-start: 50%;
+  transform: translate(-50%, 0);
+  &:not(:focus):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 }
diff --git a/docs/src/components/Layout/GlobalNav/GlobalNav.tsx b/docs/src/components/Layout/GlobalNav/GlobalNav.tsx
@@ -1,10 +1,12 @@
+import React from 'react';
 import { View, Flex } from '@aws-amplify/ui-react';
 import { useState } from 'react';
 import styles from './GlobalNav.module.scss';
 import { NavMenuIconType } from './components/icons/IconLink';
 import { RightNavLinks } from './components/RightNavLinks';
 import { AmplifyNavLink } from './components/AmplifyNavLink';
 import { LeftNavLinks } from './components/LeftNavLinks';
+import { SkipToMain } from './components/SkipToMain';
 
 export enum NavMenuItemType {
   DEFAULT = 'DEFAULT',
@@ -23,13 +25,17 @@ export interface NavMenuItem {
 export interface NavProps {
   leftLinks: NavMenuItem[];
   rightLinks: NavMenuItem[];
-  socialLinks: NavMenuItem[];
+  socialLinks?: NavMenuItem[];
   currentSite: string;
+  isGen2?: boolean;
+  mainId: string;
 }
 
 export function GlobalNav({
   currentSite,
+  isGen2,
   leftLinks,
+  mainId,
   rightLinks,
   socialLinks,
 }: NavProps) {
@@ -46,22 +52,28 @@ export function GlobalNav({
   return (
     <View
       as="nav"
-      className={`${styles['navbar']} ${themeClass ? styles[themeClass] : ''}`}
+      className={`${styles['navbar']} ${isGen2 ? styles['navbar--gen2'] : ''} ${
+        themeClass ? styles[themeClass] : ''
+      }`}
       aria-label="Amplify Dev Center - External links to additional Amplify resources"
     >
+      <SkipToMain mainId={mainId} />
       <Flex className={styles['nav-links-container']}>
         <Flex height="100%" id="left-nav" className={styles['left-nav-links']}>
           <AmplifyNavLink
             currentSite={currentSite}
             isCollapsed={isCollapsed}
             setIsCollapsed={setIsCollapsed}
+            isGen2={isGen2}
           />
 
-          <LeftNavLinks
-            isCollapsed={isCollapsed}
-            leftLinks={leftLinks}
-            currentSite={currentSite}
-          />
+          {isGen2 ? null : (
+            <LeftNavLinks
+              isCollapsed={isCollapsed}
+              leftLinks={leftLinks}
+              currentSite={currentSite}
+            />
+          )}
         </Flex>
         <RightNavLinks
           rightLinks={rightLinks}