NPM updates and some changes to component props

Author: dlnr

package-lock.json

@@ -18,68 +18,68 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.2.1",
+    "@storybook/addon-a11y": "^8.5.1",
     "@storybook/addon-actions": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-themes": "^8.2.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-links": "^8.5.1",
+    "@storybook/addon-themes": "^8.5.1",
     "@storybook/blocks": "^8.2.1",
     "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^8.2.1",
+    "@storybook/react-vite": "^8.5.1",
     "@storybook/test": "^8.2.1",
     "@storybook/theming": "^8.2.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.5",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/geojson": "^7946.0.14",
-    "@types/jsdom": "^21.1.6",
-    "@types/leaflet": "^1.9.12",
-    "@types/node": "^20.12.7",
-    "@types/proj4": "^2.5.5",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/geojson": "^7946.0.16",
+    "@types/jsdom": "^21.1.7",
+    "@types/leaflet": "^1.9.16",
+    "@types/node": "^20.17.16",
+    "@types/proj4": "^2.5.6",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/sinon": "^17.0.3",
     "@types/supercluster": "^7.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@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.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-storybook": "^0.8.0",
-    "happy-dom": "^14.11.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "postcss": "^8.4.38",
+    "happy-dom": "^14.12.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "postcss": "^8.5.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
-    "sinon": "^18.0.0",
-    "storybook": "^8.2.1",
-    "stylelint": "^16.4.0",
-    "stylelint-config-recommended": "^14.0.0",
+    "prettier": "^3.4.2",
+    "rimraf": "^5.0.10",
+    "sinon": "^18.0.1",
+    "storybook": "^8.5.1",
+    "stylelint": "^16.14.0",
+    "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-sass-guidelines": "^11.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-prettier": "^5.0.0",
+    "stylelint-prettier": "^5.0.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.7.3",
     "vite": "^5.4.14",
-    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-svgr": "^4.3.0",
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@amsterdam/design-system-assets": "^0.2.1",
-    "@amsterdam/design-system-css": "^0.10.0",
-    "@amsterdam/design-system-react": "^0.10.0",
-    "@amsterdam/design-system-react-icons": "^0.1.12",
-    "@amsterdam/design-system-tokens": "^0.10.0",
+    "@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",
     "geojson": "^0.5.0",
     "leaflet": "^1.9.4",
-    "proj4": "^2.11.0",
+    "proj4": "^2.15.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",

package.json

@@ -1,4 +1,4 @@
-import { Button, Icon } from '@amsterdam/design-system-react';
+import { Button } from '@amsterdam/design-system-react';
 import {
   EnlargeIcon,
   MinimiseIcon,
@@ -22,13 +22,21 @@ const Controls = () => {
 
   return (
     <div className={styles.buttons}>
-      <Button variant="secondary" onClick={handleZoomInClick}>
-        <span className="ams-visually-hidden">Zoom in</span>
-        <Icon svg={EnlargeIcon} size="level-5" />
+      <Button
+        variant="secondary"
+        iconOnly
+        icon={EnlargeIcon}
+        onClick={handleZoomInClick}
+      >
+        Zoom in
       </Button>
-      <Button variant="secondary" onClick={handleZoomOutClick}>
-        <span className="ams-visually-hidden">Zoom out</span>
-        <Icon svg={MinimiseIcon} size="level-5" />
+      <Button
+        variant="secondary"
+        iconOnly
+        icon={MinimiseIcon}
+        onClick={handleZoomOutClick}
+      >
+        Zoom out
       </Button>
     </div>
   );

src/pages/ContextExamples/ZoomControls/Controls.tsx

@@ -1,10 +1,10 @@
 .buttons {
-  bottom: var(--ams-space-inside-lg, 24px);
+  bottom: var(--ams-space-md, 24px);
   display: inline-flex;
   flex-direction: column;
-  gap: var(--ams-space-inside-xs, 8px);
+  gap: var(--ams-space-sm, 8px);
   position: absolute;
-  right: var(--ams-space-inside-lg, 24px);
+  right: var(--ams-space-md, 24px);
   /* This z-index value should ideally come from an application constant that is greater than the Leaflet top z-index */
   z-index: 400;
 }

src/pages/ContextExamples/ZoomControls/controls.module.css

@@ -4,9 +4,7 @@ const Header = () => {
   return (
     <Grid>
       <Grid.Cell span="all">
-        <AmsHeader
-          menu={<button className="ams-header__menu-button">Menu</button>}
-        />
+        <AmsHeader />
       </Grid.Cell>
     </Grid>
   );

src/pages/ContextExamples/ZoomControlsFullScreen/Header.tsx

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { Button, Icon, VisuallyHidden } from '@amsterdam/design-system-react';
+import { Button } from '@amsterdam/design-system-react';
 import {
   EnlargeIcon,
   MinimiseIcon,
@@ -24,13 +24,21 @@ const ZoomControls: FunctionComponent = () => {
 
   return (
     <div className={styles.buttons}>
-      <Button variant="secondary" onClick={handleZoomInClick}>
-        <VisuallyHidden>Zoom in</VisuallyHidden>
-        <Icon svg={EnlargeIcon} size="level-5" />
+      <Button
+        variant="secondary"
+        iconOnly
+        icon={EnlargeIcon}
+        onClick={handleZoomInClick}
+      >
+        Zoom in
       </Button>
-      <Button variant="secondary" onClick={handleZoomOutClick}>
-        <VisuallyHidden>Zoom out</VisuallyHidden>
-        <Icon svg={MinimiseIcon} size="level-5" />
+      <Button
+        variant="secondary"
+        iconOnly
+        icon={MinimiseIcon}
+        onClick={handleZoomOutClick}
+      >
+        Zoom out
       </Button>
     </div>
   );

src/pages/ContextExamples/ZoomControlsFullScreen/ZoomControls.tsx

@@ -1,10 +1,10 @@
 .buttons {
-  bottom: var(--ams-space-inside-lg, 24px);
+  bottom: var(--ams-space-md, 24px);
   display: inline-flex;
   flex-direction: column;
-  gap: var(--ams-space-inside-xs, 8px);
+  gap: var(--ams-space-sm, 8px);
   position: absolute;
-  right: var(--ams-space-inside-lg, 24px);
+  right: var(--ams-space-md, 24px);
   /* This z-index value should ideally come from an application constant that is greater than the Leaflet top z-index */
   z-index: 400;
 }