Merge pull request #388 from mongodb/LG-4420-avatar-and-chat

LG-4420: Adds `Avatar` component and `Chat` to side nav

Author: shaneeza

package-lock.json

@@ -13,6 +13,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@faker-js/faker": "^8.4.1",
+    "@leafygreen-ui/avatar": "^1.0.2",
     "@leafygreen-ui/badge": "^8.1.3",
     "@leafygreen-ui/banner": "^8.0.1",
     "@leafygreen-ui/button": "^21.2.1",

package.json

@@ -56,6 +56,13 @@ export function SideNavigation() {
         }
       />
       <SideNavList key="foundation-list">
+        <SideNavItem
+          key="grid"
+          active={pathname === '/foundations/chat/'}
+          href={'/foundations/chat'}
+        >
+          Chat
+        </SideNavItem>
         <SideNavItem
           key="grid"
           active={pathname === '/foundations/forms/'}

src/components/global/SideNavigation/SideNavigation.tsx

@@ -14,6 +14,7 @@ type Group = (typeof Group)[keyof typeof Group];
 export { Group };
 
 const Component = {
+  Avatar: 'avatar',
   Badge: 'badge',
   Banner: 'banner',
   Button: 'button',
@@ -81,6 +82,11 @@ export interface ComponentMeta {
 }
 
 export const components: Array<ComponentMeta> = [
+  {
+    name: titlecase(Component.Avatar),
+    navPath: generateComponentNavPath(Component.Avatar),
+    group: Group.Display,
+  },
   {
     name: titlecase(Component.Badge),
     navPath: generateComponentNavPath(Component.Badge),