Merge pull request #374 from mongodb/brooke/update-comps

Updates components to latest

package.json

@@ -17,46 +17,46 @@
     "@leafygreen-ui/banner": "^8.0.1",
     "@leafygreen-ui/button": "^21.2.1",
     "@leafygreen-ui/callout": "^9.0.22",
-    "@leafygreen-ui/card": "^10.0.7",
+    "@leafygreen-ui/card": "^11.0.0",
     "@leafygreen-ui/code": "^14.3.3",
-    "@leafygreen-ui/combobox": "^9.1.0",
+    "@leafygreen-ui/combobox": "^9.1.1",
     "@leafygreen-ui/confirmation-modal": "^5.2.0",
-    "@leafygreen-ui/copyable": "^8.0.25",
+    "@leafygreen-ui/copyable": "^8.1.0",
     "@leafygreen-ui/date-picker": "^1.2.0",
     "@leafygreen-ui/empty-state": "^1.0.17",
-    "@leafygreen-ui/expandable-card": "^3.2.2",
+    "@leafygreen-ui/expandable-card": "^3.2.3",
     "@leafygreen-ui/form-footer": "^4.0.0",
     "@leafygreen-ui/guide-cue": "^5.1.0",
-    "@leafygreen-ui/icon": "^12.5.3",
-    "@leafygreen-ui/icon-button": "^15.0.21",
+    "@leafygreen-ui/icon": "^12.5.4",
+    "@leafygreen-ui/icon-button": "^15.0.22",
     "@leafygreen-ui/info-sprinkle": "^1.0.5",
     "@leafygreen-ui/leafygreen-provider": "^3.1.12",
     "@leafygreen-ui/loading-indicator": "^2.0.12",
     "@leafygreen-ui/logo": "^9.1.1",
     "@leafygreen-ui/marketing-modal": "^4.2.3",
-    "@leafygreen-ui/modal": "^16.0.8",
+    "@leafygreen-ui/modal": "^16.0.9",
     "@leafygreen-ui/number-input": "^2.2.0",
     "@leafygreen-ui/pagination": "^1.0.24",
     "@leafygreen-ui/password-input": "^2.0.0",
     "@leafygreen-ui/pipeline": "^5.0.20",
     "@leafygreen-ui/radio-box-group": "^13.0.0",
     "@leafygreen-ui/radio-group": "^11.0.1",
-    "@leafygreen-ui/search-input": "^3.1.0",
+    "@leafygreen-ui/search-input": "^3.1.2",
     "@leafygreen-ui/segmented-control": "^8.2.13",
-    "@leafygreen-ui/select": "^12.1.0",
+    "@leafygreen-ui/select": "^12.1.3",
     "@leafygreen-ui/side-nav": "^14.1.3",
-    "@leafygreen-ui/skeleton-loader": "^1.2.0",
-    "@leafygreen-ui/split-button": "^1.1.0",
+    "@leafygreen-ui/skeleton-loader": "^1.2.1",
+    "@leafygreen-ui/split-button": "^1.1.2",
     "@leafygreen-ui/stepper": "^3.2.13",
-    "@leafygreen-ui/table": "^12.6.3",
-    "@leafygreen-ui/tabs": "^12.0.0",
+    "@leafygreen-ui/table": "^12.6.4",
+    "@leafygreen-ui/tabs": "^12.0.2",
     "@leafygreen-ui/text-area": "^9.1.0",
     "@leafygreen-ui/text-input": "^13.1.0",
-    "@leafygreen-ui/toast": "^6.1.25",
+    "@leafygreen-ui/toast": "^6.1.26",
     "@leafygreen-ui/toggle": "^10.1.1",
-    "@leafygreen-ui/tokens": "^2.8.0",
+    "@leafygreen-ui/tokens": "^2.9.0",
     "@leafygreen-ui/tooltip": "^11.1.0",
-    "@leafygreen-ui/typography": "^19.1.2",
+    "@leafygreen-ui/typography": "^19.2.1",
     "@lg-tools/storybook-utils": "^0.1.1",
     "@next/third-parties": "^14.2.3",
     "@storybook/react": "^8.0.10",

src/components/global/Search/Search.styles.ts

@@ -0,0 +1,16 @@
+import { css } from '@emotion/css';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const searchInputStyle = css`
+  margin: ${spacing[400]}px ${spacing[600]}px;
+`;
+
+export const descriptionStyle = css`
+  text-transform: capitalize;
+`;
+
+export const searchResultStyle = css`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[200]}px;
+`;

src/components/global/Search.tsx → src/components/global/Search/Search.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
-import { css } from '@emotion/css';
 import Fuse, { IFuseOptions } from 'fuse.js';
 import debounce from 'lodash/debounce';
 // @ts-expect-error
 import LockIcon from '@leafygreen-ui/icon/dist/Lock';
 import { SearchInput, SearchResult } from '@leafygreen-ui/search-input';
-import { spacing } from '@leafygreen-ui/tokens';
 import { useSession } from '@/hooks';
 import { components } from '@/utils/components';
 
+import {
+  descriptionStyle,
+  searchInputStyle,
+  searchResultStyle,
+} from './Search.styles';
+
 const fuseOptions = {
   includeScore: true,
   keys: ['name', 'subComponents', 'group'],
@@ -54,34 +58,20 @@ export function Search() {
       size="small"
       value={searchTerm}
       onChange={handleSearchChange}
-      className={css`
-        margin: ${spacing[400]}px ${spacing[600]}px;
-      `}
+      className={searchInputStyle}
     >
       {results.map(item => (
         <SearchResult
           key={item.name}
+          href={item.navPath ?? '/'}
+          as={Link}
           description={
-            <div
-              className={css`
-                text-transform: capitalize;
-              `}
-            >
+            <div className={descriptionStyle}>
               {item.group.split('-').join(' ')}
             </div>
           }
-          href={item.navPath ?? '/'}
-          // @ts-expect-error Polymorphic
-          as={Link}
         >
-          <div
-            className={css`
-              display: flex;
-              align-items: center;
-
-              gap: ${spacing[200]}px;
-            `}
-          >
+          <div className={searchResultStyle}>
             {item.name}
             {item.isPrivate && !session?.user && <LockIcon size="small" />}
           </div>

src/components/global/Search/index.ts

@@ -0,0 +1 @@
+export { Search } from './Search';

src/components/global/SideNavigation/SideNavigation.tsx

@@ -24,7 +24,7 @@ import { color, spacing } from '@leafygreen-ui/tokens';
 import { SIDE_NAV_WIDTH } from '@/constants';
 import { useMediaQuery } from '@/hooks';
 import { ComponentMeta, Group, groupedComponents } from '@/utils/components';
-import { Search } from '../Search';
+import { Search } from '../Search/Search';
 import { Drawer } from './Drawer';
 import { SideNavItem } from './SideNavItem';
 import { SideNavLabel } from './SideNavLabel';

src/components/global/index.ts

@@ -3,6 +3,6 @@ export { Footer } from './Footer';
 export { LogIn } from './LogIn';
 export { NotFound } from './NotFound';
 export { RootStyleRegistry } from './RootStyleRegistry';
-export { Search } from './Search';
+export { Search } from './Search/Search';
 export { SideNavigation } from './SideNavigation';
 export { UserMenu } from './UserMenu';

src/components/home/HomeCard.tsx

@@ -22,6 +22,7 @@ export function HomeCard({ title, description, link, ...rest }: HomeCardProps) {
   const router = useRouter();
 
   return (
+    // @ts-expect-error properties ref incompatible
     <Card
       className={css`
         height: 350px;