diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b443ad83..12d5e71d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed
- Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
+- Updated Design System react to v2.6.2 (#1261)
+
+### Added
+
+- Material symbols font to web component preview page since the Design System depends on this (#1261)
### Fixed
diff --git a/package.json b/package.json
index a1236ca00..ac09c63b5 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
"@hello-pangea/dnd": "^16.2.0",
"@juggle/resize-observer": "^3.3.1",
"@lezer/highlight": "^1.0.0",
- "@raspberrypifoundation/design-system-core": "^1.6.0",
- "@raspberrypifoundation/design-system-react": "^1.6.0",
+ "@raspberrypifoundation/design-system-react": "^2.7.0",
"@react-three/drei": "9.114.3",
"@react-three/fiber": "^8.0.13",
"@reduxjs/toolkit": "^1.6.2",
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 2e780f96b..9b4f218a8 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -1,8 +1,7 @@
+@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
@use "../../../node_modules/react-tabs/style/react-tabs.css";
@use "../../../node_modules/react-toggle/style.css";
@use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
@use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
-@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
-@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/design-system-core.scss";
@use "../../../node_modules/material-symbols/sharp.scss";
@use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;
diff --git a/src/utils/setupTests.js b/src/utils/setupTests.js
index 201443727..0d001b4d4 100644
--- a/src/utils/setupTests.js
+++ b/src/utils/setupTests.js
@@ -6,6 +6,11 @@ import "@testing-library/jest-dom";
import "jest-canvas-mock";
import PyodideWorker from "../components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js";
+// Polyfill TextEncoder/TextDecoder for Jest environment
+// Required by @raspberrypifoundation/design-system-react components
+import { TextEncoder, TextDecoder } from "util";
+Object.assign(global, { TextDecoder, TextEncoder });
+
/* global globalThis */
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
diff --git a/src/web-component.html b/src/web-component.html
index 178c7c623..899e5999c 100644
--- a/src/web-component.html
+++ b/src/web-component.html
@@ -29,6 +29,10 @@
Editor Web component
+
@@ -52,7 +56,7 @@
"download",
"settings",
"info",
- ]),
+ ])
);
// Pre-set the code attribute with an empty string.
@@ -89,7 +93,7 @@
runButton.appendChild(runButtonText);
runButton.onclick = (event) => {
webComp.rerunCode();
- }
+ };
body.append(runButton);
});
diff --git a/yarn.lock b/yarn.lock
index ce20e60f2..296305fca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,28 +2916,31 @@ __metadata:
languageName: node
linkType: hard
-"@raspberrypifoundation/design-system-core@npm:^1.6.0":
- version: 1.6.0
- resolution: "@raspberrypifoundation/design-system-core@npm:1.6.0"
+"@raspberrypifoundation/design-system-core@npm:^2.4.0":
+ version: 2.4.0
+ resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
dependencies:
classnames: ^2.3.2
- checksum: 3eda17c4068e752daf070b6cbce9630b1b51997b911a4753b73f2c3726a40ec6bfba1b751380a4ad6f51e3e2e8e9cac66a7709343a7de9c5c8b074b409742a26
+ checksum: 8db6b71f0675849617ad18e70a35b8faa99a3cb3d4b7dbde15a250de1ca971f09ffeb0d7e4fe6d6cf1645890d6ffe0ca795967e0371e665775de9ff27e5bc4c6
languageName: node
linkType: hard
-"@raspberrypifoundation/design-system-react@npm:^1.6.0":
- version: 1.6.0
- resolution: "@raspberrypifoundation/design-system-react@npm:1.6.0"
+"@raspberrypifoundation/design-system-react@npm:^2.7.0":
+ version: 2.7.0
+ resolution: "@raspberrypifoundation/design-system-react@npm:2.7.0"
dependencies:
- classnames: ^2.3.2
- material-symbols: ^0.14.5
- prop-types: ^15.8.1
- react: ^18.2.0
- react-dom: ^18.2.0
- react-router-dom: ^6.24.0
+ "@raspberrypifoundation/design-system-core": ^2.4.0
+ classnames: ^2.5.1
peerDependencies:
+ react: ">=18.0.0 <20.0.0"
+ react-dom: ">=18.0.0 <20.0.0"
react-router-dom: ^6.24.0
- checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5
+ peerDependenciesMeta:
+ react:
+ optional: false
+ react-dom:
+ optional: false
+ checksum: 992974bfd88e8d470488e62bb67690e3740a85d1c2249b07302f17063791a06f6185048a5fc8f7a07043128d6698015bdc2f27060e581c60872b68816ac2da02
languageName: node
linkType: hard
@@ -2959,8 +2962,7 @@ __metadata:
"@juggle/resize-observer": ^3.3.1
"@lezer/highlight": ^1.0.0
"@pmmmwh/react-refresh-webpack-plugin": 0.4.3
- "@raspberrypifoundation/design-system-core": ^1.6.0
- "@raspberrypifoundation/design-system-react": ^1.6.0
+ "@raspberrypifoundation/design-system-react": ^2.7.0
"@react-three/drei": 9.114.3
"@react-three/fiber": ^8.0.13
"@react-three/test-renderer": 8.2.1
@@ -3301,13 +3303,6 @@ __metadata:
languageName: node
linkType: hard
-"@remix-run/router@npm:1.21.0":
- version: 1.21.0
- resolution: "@remix-run/router@npm:1.21.0"
- checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc
- languageName: node
- linkType: hard
-
"@replit/codemirror-indentation-markers@npm:^6.1.0":
version: 6.5.3
resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
@@ -6598,7 +6593,7 @@ __metadata:
languageName: node
linkType: hard
-"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2":
+"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
version: 2.5.1
resolution: "classnames@npm:2.5.1"
checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -14033,13 +14028,6 @@ __metadata:
languageName: node
linkType: hard
-"material-symbols@npm:^0.14.5":
- version: 0.14.7
- resolution: "material-symbols@npm:0.14.7"
- checksum: 191dea0145eadabd3122b891b965d8568793c3f53a540186a30b459948a8a0c00938642dcca3c4fcca483b08d7480d02722c6de10caeeeae30437306a79f64b6
- languageName: node
- linkType: hard
-
"material-symbols@npm:^0.27.0":
version: 0.27.0
resolution: "material-symbols@npm:0.27.0"
@@ -16987,7 +16975,7 @@ __metadata:
languageName: node
linkType: hard
-"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.1.0":
version: 18.3.1
resolution: "react-dom@npm:18.3.1"
dependencies:
@@ -17186,19 +17174,6 @@ __metadata:
languageName: node
linkType: hard
-"react-router-dom@npm:^6.24.0":
- version: 6.28.0
- resolution: "react-router-dom@npm:6.28.0"
- dependencies:
- "@remix-run/router": 1.21.0
- react-router: 6.28.0
- peerDependencies:
- react: ">=16.8"
- react-dom: ">=16.8"
- checksum: 0cf4658a92bc66f50ec9d8518c36aa5a402bcadce71fb624ed6f900d73a29ea87ff904a4f2c42279107e75e80cc08c6192563fadcc5d4e642e6d476e38e83b21
- languageName: node
- linkType: hard
-
"react-router-dom@npm:^6.7.0":
version: 6.27.0
resolution: "react-router-dom@npm:6.27.0"
@@ -17223,17 +17198,6 @@ __metadata:
languageName: node
linkType: hard
-"react-router@npm:6.28.0":
- version: 6.28.0
- resolution: "react-router@npm:6.28.0"
- dependencies:
- "@remix-run/router": 1.21.0
- peerDependencies:
- react: ">=16.8"
- checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea
- languageName: node
- linkType: hard
-
"react-shallow-renderer@npm:^16.13.1":
version: 16.15.0
resolution: "react-shallow-renderer@npm:16.15.0"
@@ -17316,7 +17280,7 @@ __metadata:
languageName: node
linkType: hard
-"react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.1.0":
version: 18.3.1
resolution: "react@npm:18.3.1"
dependencies: