vite and @amsterdam/design-system updated (#85)

Author: thomasm0

package-lock.json

@@ -44,7 +44,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
-    "@vitest/coverage-v8": "^1.6.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
@@ -67,16 +67,16 @@
     "stylelint-prettier": "^5.0.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",
-    "vite": "^5.4.14",
+    "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^1.6.1"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@amsterdam/design-system-assets": "^0.3.0",
-    "@amsterdam/design-system-css": "^0.14.0",
-    "@amsterdam/design-system-react": "^0.14.0",
-    "@amsterdam/design-system-react-icons": "^0.1.13",
-    "@amsterdam/design-system-tokens": "^0.14.0",
+    "@amsterdam/design-system-assets": "^1.0.0",
+    "@amsterdam/design-system-css": "^1.0.0",
+    "@amsterdam/design-system-react": "^1.1.0",
+    "@amsterdam/design-system-react-icons": "^1.0.0",
+    "@amsterdam/design-system-tokens": "^1.0.1",
     "geojson": "^0.5.0",
     "leaflet": "^1.9.4",
     "proj4": "^2.15.0",

package.json

@@ -8,7 +8,7 @@ const Alert: FunctionComponent = () => {
 
   return (
     <div className={styles['alert-wrapper']}>
-      <AmsAlert severity="info">
+      <AmsAlert heading="Coordinates" headingLevel={3} severity="success">
         <Paragraph size="small">
           {position ? `${position[0]}, ${position[1]}` : ''}
         </Paragraph>

src/pages/ContextExamples/Position/Alert.tsx

@@ -62,7 +62,6 @@ const Map: FunctionComponent = () => {
     setMapInstance(map);
 
     map.on('moveend', () => {
-      // setDisplayAlert(true);
       setPosition([map.getCenter().lat, map.getCenter().lng]);
     });
 

src/pages/ContextExamples/SingleMarkerSelect/Map.tsx

@@ -1,8 +1,5 @@
 import { Button } from '@amsterdam/design-system-react';
-import {
-  EnlargeIcon,
-  MinimiseIcon,
-} from '@amsterdam/design-system-react-icons';
+import { PlusIcon, MinusIcon } from '@amsterdam/design-system-react-icons';
 import { useMapInstance } from './MapContext';
 import styles from './controls.module.css';
 
@@ -25,15 +22,15 @@ const Controls = () => {
       <Button
         variant="secondary"
         iconOnly
-        icon={EnlargeIcon}
+        icon={PlusIcon}
         onClick={handleZoomInClick}
       >
         Zoom in
       </Button>
       <Button
         variant="secondary"
         iconOnly
-        icon={MinimiseIcon}
+        icon={MinusIcon}
         onClick={handleZoomOutClick}
       >
         Zoom out

src/pages/ContextExamples/ZoomControls/Controls.tsx

@@ -1,10 +1,10 @@
-import { Grid, Header as AmsHeader } from '@amsterdam/design-system-react';
+import { Grid, PageHeader } from '@amsterdam/design-system-react';
 
 const Header = () => {
   return (
     <Grid>
       <Grid.Cell span="all">
-        <AmsHeader />
+        <PageHeader />
       </Grid.Cell>
     </Grid>
   );

src/pages/ContextExamples/ZoomControlsFullScreen/Header.tsx

@@ -1,9 +1,6 @@
 import type { FunctionComponent } from 'react';
 import { Button } from '@amsterdam/design-system-react';
-import {
-  EnlargeIcon,
-  MinimiseIcon,
-} from '@amsterdam/design-system-react-icons';
+import { PlusIcon, MinusIcon } from '@amsterdam/design-system-react-icons';
 import { useMapInstance } from './MapContext';
 import styles from './styles.module.css';
 
@@ -27,15 +24,15 @@ const ZoomControls: FunctionComponent = () => {
       <Button
         variant="secondary"
         iconOnly
-        icon={EnlargeIcon}
+        icon={PlusIcon}
         onClick={handleZoomInClick}
       >
         Zoom in
       </Button>
       <Button
         variant="secondary"
         iconOnly
-        icon={MinimiseIcon}
+        icon={MinusIcon}
         onClick={handleZoomOutClick}
       >
         Zoom out