Merge pull request #389 from mongodb/staging

Automated PR: staging to main
mongodb · Aug 2, 2024 · 7f8bf84 · 7f8bf84
2 parents a217551 + 421c96d
commit 7f8bf84
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
@@ -49,7 +50,7 @@
     "@leafygreen-ui/split-button": "^1.1.2",
     "@leafygreen-ui/stepper": "^3.2.13",
     "@leafygreen-ui/table": "^12.6.4",
-    "@leafygreen-ui/tabs": "^12.0.3",
+    "@leafygreen-ui/tabs": "^13.0.0",
     "@leafygreen-ui/text-area": "^9.1.1",
     "@leafygreen-ui/text-input": "^13.1.1",
     "@leafygreen-ui/toast": "^6.1.26",

diff --git a/src/app/component/[component]/layout.tsx b/src/app/component/[component]/layout.tsx
@@ -84,16 +84,7 @@ export default function ComponentLayout({
           margin-bottom: ${spacing[800]}px;
         `}
         inlineChildren={
-          <div
-            className={css`
-              display: flex;
-              gap: ${spacing[200]}px;
-              border-bottom: 1px solid ${color[theme].border.secondary.default};
-              flex: 1;
-              justify-content: flex-end;
-              height: 100%;
-            `}
-          >
+          <>
             {externalLinks.map(
               ({ 'aria-label': ariaLabel, href, icon }, index) => (
                 <IconButton
@@ -108,7 +99,7 @@ export default function ComponentLayout({
                 </IconButton>
               ),
             )}
-          </div>
+          </>
         }
       >
         <Tab

diff --git a/src/components/global/SideNavigation/SideNavItem.tsx b/src/components/global/SideNavigation/SideNavItem.tsx
@@ -87,6 +87,8 @@ export function SideNavItem({
         className={css`
           margin: 0;
           padding: ${spacing[200]}px ${spacing[400]}px;
+          display: flex;
+          align-items: center;
         `}
       >
         {children}

diff --git a/src/components/global/SideNavigation/SideNavigation.tsx b/src/components/global/SideNavigation/SideNavigation.tsx
@@ -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/'}

diff --git a/src/utils/components.ts b/src/utils/components.ts
@@ -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),