Update comet-uswds to latest. Update Card use for consistency.

MetroStar · Aug 28, 2024 · fb34926 · fb34926
1 parent fcb00d6
commit fb34926
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@metrostar/comet-data-viz": "1.1.5",
     "@metrostar/comet-extras": "1.4.0",
-    "@metrostar/comet-uswds": "3.0.1",
+    "@metrostar/comet-uswds": "3.2.0",
     "@tanstack/react-query": "5.52.1",
     "@tanstack/react-table": "8.20.5",
     "@uswds/uswds": "3.8.2",

diff --git a/src/pages/details/details.tsx b/src/pages/details/details.tsx
@@ -1,5 +1,5 @@
 import { Spinner } from '@metrostar/comet-extras';
-import { Card } from '@metrostar/comet-uswds';
+import { Card, CardBody } from '@metrostar/comet-uswds';
 import { mockData } from '@src/data/spacecraft';
 import { Spacecraft } from '@src/types/spacecraft';
 import { useQuery } from '@tanstack/react-query';
@@ -52,23 +52,25 @@ export const Details = (): React.ReactElement => {
               />
             ) : data ? (
               <Card id="details-card">
-                <ul>
-                  <li>
-                    <b>Name:</b> {data.name}
-                  </li>
-                  <li>
-                    <b>Description:</b> {data.description}
-                  </li>
-                  <li>
-                    <b>Affiliation:</b> {data.affiliation}
-                  </li>
-                  <li>
-                    <b>Dimensions:</b> {data.dimensions}
-                  </li>
-                  <li>
-                    <b>Appearances:</b> {data.appearances}
-                  </li>
-                </ul>
+                <CardBody>
+                  <ul>
+                    <li>
+                      <b>Name:</b> {data.name}
+                    </li>
+                    <li>
+                      <b>Description:</b> {data.description}
+                    </li>
+                    <li>
+                      <b>Affiliation:</b> {data.affiliation}
+                    </li>
+                    <li>
+                      <b>Dimensions:</b> {data.dimensions}
+                    </li>
+                    <li>
+                      <b>Appearances:</b> {data.appearances}
+                    </li>
+                  </ul>
+                </CardBody>
               </Card>
             ) : (
               <>No items found</>