From 4b9672a804e487fc548fd10c0c6e57f760d9cad1 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 10:17:58 +0100 Subject: [PATCH 01/32] build: update design system react to 1.7.0 --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index a1236ca00..240b3a09a 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@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": "^1.7.0", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index ce20e60f2..fb05df4d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2925,9 +2925,9 @@ __metadata: 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:^1.7.0": + version: 1.7.1 + resolution: "@raspberrypifoundation/design-system-react@npm:1.7.1" dependencies: classnames: ^2.3.2 material-symbols: ^0.14.5 @@ -2937,7 +2937,7 @@ __metadata: react-router-dom: ^6.24.0 peerDependencies: react-router-dom: ^6.24.0 - checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5 + checksum: 507e75c5ab1e297c66221f3f21eaf0b7a757d82f383a51d7195e80886dcf0f6361905755187cbd0c3b1fdd9ad8fa87441c1550b44ee9384f690b8cbeb7e702cc languageName: node linkType: hard @@ -2960,7 +2960,7 @@ __metadata: "@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": ^1.7.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 From 63dbd43940783db89f7021bf90de6b1fe08ae72d Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 10:53:08 +0100 Subject: [PATCH 02/32] build: update design system react to 2.0.0 - 2.0.0 uses vite and packages core, so that dep can removed. - Link to core style does however need to be added to the app, following the update guide for the design system. - TextEncoder/TextDecoder was not set up in jest and this was causing some design system component to fail tests. --- package.json | 3 +- src/assets/stylesheets/ExternalStyles.scss | 2 +- src/utils/setupTests.js | 5 + yarn.lock | 114 +++++++++++---------- 4 files changed, 69 insertions(+), 55 deletions(-) diff --git a/package.json b/package.json index 240b3a09a..135269be4 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.7.0", + "@raspberrypifoundation/design-system-react": "2.0.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 923ebe18d..d41a856af 100644 --- a/src/assets/stylesheets/ExternalStyles.scss +++ b/src/assets/stylesheets/ExternalStyles.scss @@ -2,6 +2,6 @@ @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/material-symbols/sharp.scss"; @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle; +@forward "@raspberrypifoundation/design-system-react/scss/design-system-core"; 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/yarn.lock b/yarn.lock index fb05df4d3..f5de80942 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2916,28 +2916,28 @@ __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.0.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.7.0": - version: 1.7.1 - resolution: "@raspberrypifoundation/design-system-react@npm:1.7.1" +"@raspberrypifoundation/design-system-react@npm:2.0.0": + version: 2.0.0 + resolution: "@raspberrypifoundation/design-system-react@npm:2.0.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.0.0 + classnames: ^2.5.1 + material-symbols: ^0.27.2 + react: ^18.3.1 + react-dom: ^18.3.1 + react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: 507e75c5ab1e297c66221f3f21eaf0b7a757d82f383a51d7195e80886dcf0f6361905755187cbd0c3b1fdd9ad8fa87441c1550b44ee9384f690b8cbeb7e702cc + checksum: 912a1076f592f9fa9256401b208f860bf3c18e52341d807b5e4c0273ff15793939729d7e2504316073173fcfb6cbf6c4ba5485fe2695178d7e30df54249acbe8 languageName: node linkType: hard @@ -2959,8 +2959,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.7.0 + "@raspberrypifoundation/design-system-react": 2.0.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 @@ -3301,13 +3300,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 +6590,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 @@ -7105,6 +7097,13 @@ __metadata: languageName: node linkType: hard +"cookie@npm:^1.0.1": + version: 1.0.2 + resolution: "cookie@npm:1.0.2" + checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55 + languageName: node + linkType: hard + "copy-descriptor@npm:^0.1.0": version: 0.1.1 resolution: "copy-descriptor@npm:0.1.1" @@ -14033,13 +14032,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" @@ -14047,6 +14039,13 @@ __metadata: languageName: node linkType: hard +"material-symbols@npm:^0.27.2": + version: 0.27.2 + resolution: "material-symbols@npm:0.27.2" + checksum: c1572d86aa69b355dd273ba1a9bea06f09310451a3384e846f6282240097215e8713bc3918a08e0d786be1c0d8405ca15d2bfc0817385fc2ce6f6d747e041344 + languageName: node + linkType: hard + "math-intrinsics@npm:^1.1.0": version: 1.1.0 resolution: "math-intrinsics@npm:1.1.0" @@ -16987,7 +16986,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0": +"react-dom@npm:^18.1.0, react-dom@npm:^18.3.1": version: 18.3.1 resolution: "react-dom@npm:18.3.1" dependencies: @@ -17186,19 +17185,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" @@ -17212,6 +17198,18 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:^7.0.2": + version: 7.9.4 + resolution: "react-router-dom@npm:7.9.4" + dependencies: + react-router: 7.9.4 + peerDependencies: + react: ">=18" + react-dom: ">=18" + checksum: 56d7c10ce8c26d88fd92afb55d90f737ddee0ccd9715105444a62d31687a06f1b0b22c4a6047a4b896cf5f97d297b1036bedece65646b126c40b3e107d19a9a0 + languageName: node + linkType: hard + "react-router@npm:6.27.0": version: 6.27.0 resolution: "react-router@npm:6.27.0" @@ -17223,14 +17221,19 @@ __metadata: languageName: node linkType: hard -"react-router@npm:6.28.0": - version: 6.28.0 - resolution: "react-router@npm:6.28.0" +"react-router@npm:7.9.4": + version: 7.9.4 + resolution: "react-router@npm:7.9.4" dependencies: - "@remix-run/router": 1.21.0 + cookie: ^1.0.1 + set-cookie-parser: ^2.6.0 peerDependencies: - react: ">=16.8" - checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea + react: ">=18" + react-dom: ">=18" + peerDependenciesMeta: + react-dom: + optional: true + checksum: 2a33bc2203f5fe1fd24858d246c5590c4920a429490986e36af19de0580c7a162fbfb0c675bc2be2ee535d965e08f8e9d28009ee9ddf9df2b7a236e6e2dc8a33 languageName: node linkType: hard @@ -17316,7 +17319,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.1.0, react@npm:^18.2.0": +"react@npm:^18.1.0, react@npm:^18.3.1": version: 18.3.1 resolution: "react@npm:18.3.1" dependencies: @@ -18532,6 +18535,13 @@ __metadata: languageName: node linkType: hard +"set-cookie-parser@npm:^2.6.0": + version: 2.7.1 + resolution: "set-cookie-parser@npm:2.7.1" + checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587 + languageName: node + linkType: hard + "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" From b7d593aa06179257ba33d68f897630169a4a0637 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 10:54:55 +0100 Subject: [PATCH 03/32] build: update design system react to 2.1.0 --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 135269be4..0f94d44eb 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-react": "2.0.0", + "@raspberrypifoundation/design-system-react": "2.1.0", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index f5de80942..6c13319ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2925,9 +2925,9 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.0.0": - version: 2.0.0 - resolution: "@raspberrypifoundation/design-system-react@npm:2.0.0" +"@raspberrypifoundation/design-system-react@npm:2.1.0": + version: 2.1.0 + resolution: "@raspberrypifoundation/design-system-react@npm:2.1.0" dependencies: "@raspberrypifoundation/design-system-core": ^2.0.0 classnames: ^2.5.1 @@ -2937,7 +2937,7 @@ __metadata: react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: 912a1076f592f9fa9256401b208f860bf3c18e52341d807b5e4c0273ff15793939729d7e2504316073173fcfb6cbf6c4ba5485fe2695178d7e30df54249acbe8 + checksum: a45991c08dd6e2d23a028be1bc6b9616496a64c1aa5ba95d821f85aaf120c784d06a8e0c3c6559ad4dd8c3dc734f3a77780e5e340d1b9afb8b49d943dfe75826 languageName: node linkType: hard @@ -2959,7 +2959,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.0.0 + "@raspberrypifoundation/design-system-react": 2.1.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 From e4a59b9db0580547eaa89fe49e49f4247aac87cd Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 11:01:27 +0100 Subject: [PATCH 04/32] build: update design system react to 2.2.0 - No buttons using href prop so no changes needed --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0f94d44eb..1740b6210 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-react": "2.1.0", + "@raspberrypifoundation/design-system-react": "2.2.0", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index 6c13319ab..b47483c19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2925,9 +2925,9 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.1.0": - version: 2.1.0 - resolution: "@raspberrypifoundation/design-system-react@npm:2.1.0" +"@raspberrypifoundation/design-system-react@npm:2.2.0": + version: 2.2.0 + resolution: "@raspberrypifoundation/design-system-react@npm:2.2.0" dependencies: "@raspberrypifoundation/design-system-core": ^2.0.0 classnames: ^2.5.1 @@ -2937,7 +2937,7 @@ __metadata: react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: a45991c08dd6e2d23a028be1bc6b9616496a64c1aa5ba95d821f85aaf120c784d06a8e0c3c6559ad4dd8c3dc734f3a77780e5e340d1b9afb8b49d943dfe75826 + checksum: b3d45d964deeaf6ab297416a1099a62747cbb7ab8ca90b1e900141bf7694f551198d7edf605fc029a6f25350d94db41765c1fd454af5eaeb9ef442bb26c224d3 languageName: node linkType: hard @@ -2959,7 +2959,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.1.0 + "@raspberrypifoundation/design-system-react": 2.2.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 From 652d0221084673d2feb172afcc00f35e4f8f46c6 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 11:02:15 +0100 Subject: [PATCH 05/32] build: update design system react to 2.3.0 --- package.json | 2 +- yarn.lock | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 1740b6210..91f0f2fdf 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-react": "2.2.0", + "@raspberrypifoundation/design-system-react": "2.3.0", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index b47483c19..09395573f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2916,7 +2916,7 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-core@npm:^2.0.0": +"@raspberrypifoundation/design-system-core@npm:^2.3.0": version: 2.4.0 resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0" dependencies: @@ -2925,11 +2925,11 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.2.0": - version: 2.2.0 - resolution: "@raspberrypifoundation/design-system-react@npm:2.2.0" +"@raspberrypifoundation/design-system-react@npm:2.3.0": + version: 2.3.0 + resolution: "@raspberrypifoundation/design-system-react@npm:2.3.0" dependencies: - "@raspberrypifoundation/design-system-core": ^2.0.0 + "@raspberrypifoundation/design-system-core": ^2.3.0 classnames: ^2.5.1 material-symbols: ^0.27.2 react: ^18.3.1 @@ -2937,7 +2937,7 @@ __metadata: react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: b3d45d964deeaf6ab297416a1099a62747cbb7ab8ca90b1e900141bf7694f551198d7edf605fc029a6f25350d94db41765c1fd454af5eaeb9ef442bb26c224d3 + checksum: e1c5a18fa18622f487d716d47e0a08e5b17010d8d70ff7094592f5145c09a08ddc8824b44a33b8d2587a4e901cbf281200a32c9f7d8830550efd12ed92a667e6 languageName: node linkType: hard @@ -2959,7 +2959,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.2.0 + "@raspberrypifoundation/design-system-react": 2.3.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 From 881752062ff2268c4227ca187916bf4b8d0a446d Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 11:03:49 +0100 Subject: [PATCH 06/32] build: update design system react to 2.4.2 --- package.json | 2 +- yarn.lock | 22 +++++++--------------- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 91f0f2fdf..62654998e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-react": "2.3.0", + "@raspberrypifoundation/design-system-react": "2.4.1", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index 09395573f..b5c6602a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2916,7 +2916,7 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-core@npm:^2.3.0": +"@raspberrypifoundation/design-system-core@npm:^2.3.1": version: 2.4.0 resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0" dependencies: @@ -2925,19 +2925,18 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.3.0": - version: 2.3.0 - resolution: "@raspberrypifoundation/design-system-react@npm:2.3.0" +"@raspberrypifoundation/design-system-react@npm:2.4.1": + version: 2.4.1 + resolution: "@raspberrypifoundation/design-system-react@npm:2.4.1" dependencies: - "@raspberrypifoundation/design-system-core": ^2.3.0 + "@raspberrypifoundation/design-system-core": ^2.3.1 classnames: ^2.5.1 - material-symbols: ^0.27.2 react: ^18.3.1 react-dom: ^18.3.1 react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: e1c5a18fa18622f487d716d47e0a08e5b17010d8d70ff7094592f5145c09a08ddc8824b44a33b8d2587a4e901cbf281200a32c9f7d8830550efd12ed92a667e6 + checksum: 1ced3ade672e811e5ea897204bf8492a0d05701f619164bc79db48194324c694798ffd639a7e155bc41487928c45bf7085187f9fdfdc49c5995bec99ed19d7c1 languageName: node linkType: hard @@ -2959,7 +2958,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.3.0 + "@raspberrypifoundation/design-system-react": 2.4.1 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 @@ -14039,13 +14038,6 @@ __metadata: languageName: node linkType: hard -"material-symbols@npm:^0.27.2": - version: 0.27.2 - resolution: "material-symbols@npm:0.27.2" - checksum: c1572d86aa69b355dd273ba1a9bea06f09310451a3384e846f6282240097215e8713bc3918a08e0d786be1c0d8405ca15d2bfc0817385fc2ce6f6d747e041344 - languageName: node - linkType: hard - "math-intrinsics@npm:^1.1.0": version: 1.1.0 resolution: "math-intrinsics@npm:1.1.0" From 96507efaae8e17d3b485a9a4b723aacedadfb3a5 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 11:04:39 +0100 Subject: [PATCH 07/32] build: update design system react to 2.5.0 --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 62654998e..8f5565c33 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-react": "2.4.1", + "@raspberrypifoundation/design-system-react": "2.5.0", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index b5c6602a8..8eefefd12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2925,9 +2925,9 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.4.1": - version: 2.4.1 - resolution: "@raspberrypifoundation/design-system-react@npm:2.4.1" +"@raspberrypifoundation/design-system-react@npm:2.5.0": + version: 2.5.0 + resolution: "@raspberrypifoundation/design-system-react@npm:2.5.0" dependencies: "@raspberrypifoundation/design-system-core": ^2.3.1 classnames: ^2.5.1 @@ -2936,7 +2936,7 @@ __metadata: react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: 1ced3ade672e811e5ea897204bf8492a0d05701f619164bc79db48194324c694798ffd639a7e155bc41487928c45bf7085187f9fdfdc49c5995bec99ed19d7c1 + checksum: 7d2baf79ece3b22e7c5300180240c7db0901ba11d9f5f471b3bf0332ddceae0f18989e23118c9caa2dad0a64e7798d292fec7ff8a77324c0c9bbd0bdc9ffe01a languageName: node linkType: hard @@ -2958,7 +2958,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.4.1 + "@raspberrypifoundation/design-system-react": 2.5.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 From 0da9ed7bd3edc57fdf366655ac31fd23cf2d9b45 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 11:05:44 +0100 Subject: [PATCH 08/32] build: update design system react to 2.6.2 --- package.json | 2 +- yarn.lock | 63 +++++++++------------------------------------------- 2 files changed, 11 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 8f5565c33..2928709cb 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-react": "2.5.0", + "@raspberrypifoundation/design-system-react": "2.6.2", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index 8eefefd12..3c3b89fbd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2916,7 +2916,7 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-core@npm:^2.3.1": +"@raspberrypifoundation/design-system-core@npm:^2.4.0": version: 2.4.0 resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0" dependencies: @@ -2925,18 +2925,17 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.5.0": - version: 2.5.0 - resolution: "@raspberrypifoundation/design-system-react@npm:2.5.0" +"@raspberrypifoundation/design-system-react@npm:2.6.2": + version: 2.6.2 + resolution: "@raspberrypifoundation/design-system-react@npm:2.6.2" dependencies: - "@raspberrypifoundation/design-system-core": ^2.3.1 + "@raspberrypifoundation/design-system-core": ^2.4.0 classnames: ^2.5.1 + peerDependencies: react: ^18.3.1 react-dom: ^18.3.1 - react-router-dom: ^7.0.2 - peerDependencies: react-router-dom: ^6.24.0 - checksum: 7d2baf79ece3b22e7c5300180240c7db0901ba11d9f5f471b3bf0332ddceae0f18989e23118c9caa2dad0a64e7798d292fec7ff8a77324c0c9bbd0bdc9ffe01a + checksum: a2b1bf4780ec84ce369dbd456d118d68a5cd72018709fcb19558d873b883aef2505037c8d4929c04c8064108e009a57a749d7a88fa83265472c3f554e7efdb65 languageName: node linkType: hard @@ -2958,7 +2957,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.5.0 + "@raspberrypifoundation/design-system-react": 2.6.2 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 @@ -7096,13 +7095,6 @@ __metadata: languageName: node linkType: hard -"cookie@npm:^1.0.1": - version: 1.0.2 - resolution: "cookie@npm:1.0.2" - checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55 - languageName: node - linkType: hard - "copy-descriptor@npm:^0.1.0": version: 0.1.1 resolution: "copy-descriptor@npm:0.1.1" @@ -16978,7 +16970,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.1.0, react-dom@npm:^18.3.1": +"react-dom@npm:^18.1.0": version: 18.3.1 resolution: "react-dom@npm:18.3.1" dependencies: @@ -17190,18 +17182,6 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:^7.0.2": - version: 7.9.4 - resolution: "react-router-dom@npm:7.9.4" - dependencies: - react-router: 7.9.4 - peerDependencies: - react: ">=18" - react-dom: ">=18" - checksum: 56d7c10ce8c26d88fd92afb55d90f737ddee0ccd9715105444a62d31687a06f1b0b22c4a6047a4b896cf5f97d297b1036bedece65646b126c40b3e107d19a9a0 - languageName: node - linkType: hard - "react-router@npm:6.27.0": version: 6.27.0 resolution: "react-router@npm:6.27.0" @@ -17213,22 +17193,6 @@ __metadata: languageName: node linkType: hard -"react-router@npm:7.9.4": - version: 7.9.4 - resolution: "react-router@npm:7.9.4" - dependencies: - cookie: ^1.0.1 - set-cookie-parser: ^2.6.0 - peerDependencies: - react: ">=18" - react-dom: ">=18" - peerDependenciesMeta: - react-dom: - optional: true - checksum: 2a33bc2203f5fe1fd24858d246c5590c4920a429490986e36af19de0580c7a162fbfb0c675bc2be2ee535d965e08f8e9d28009ee9ddf9df2b7a236e6e2dc8a33 - languageName: node - linkType: hard - "react-shallow-renderer@npm:^16.13.1": version: 16.15.0 resolution: "react-shallow-renderer@npm:16.15.0" @@ -17311,7 +17275,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.1.0, react@npm:^18.3.1": +"react@npm:^18.1.0": version: 18.3.1 resolution: "react@npm:18.3.1" dependencies: @@ -18527,13 +18491,6 @@ __metadata: languageName: node linkType: hard -"set-cookie-parser@npm:^2.6.0": - version: 2.7.1 - resolution: "set-cookie-parser@npm:2.7.1" - checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587 - languageName: node - linkType: hard - "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" From 6c8987cb60edc31e8ae7d637e3f0d6e347ad8963 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 16:36:02 +0100 Subject: [PATCH 09/32] fix: add material symbols font to web component page --- src/web-component.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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); }); From 7b5f8762380d1b92961755ab3138fe1736803bc9 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Fri, 17 Oct 2025 23:42:26 +0100 Subject: [PATCH 10/32] refactor: remove all legacy button styles and components --- src/assets/stylesheets/App.scss | 23 +- src/assets/stylesheets/Button.scss | 265 ------------------ .../stylesheets/DesignSystemButton.scss | 188 ------------- src/assets/stylesheets/InternalStyles.scss | 5 - src/assets/stylesheets/ProjectBar.scss | 34 +-- src/assets/stylesheets/ProjectInfo.scss | 4 - src/assets/stylesheets/ProjectName.scss | 4 - .../DesignSystemButton/DesignSystemButton.jsx | 16 -- 8 files changed, 8 insertions(+), 531 deletions(-) delete mode 100644 src/assets/stylesheets/Button.scss delete mode 100644 src/assets/stylesheets/DesignSystemButton.scss delete mode 100644 src/components/DesignSystemButton/DesignSystemButton.jsx diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss index 914b45073..31a54f481 100644 --- a/src/assets/stylesheets/App.scss +++ b/src/assets/stylesheets/App.scss @@ -1,7 +1,7 @@ -@use './rpf_design_system/font-size' as *; -@use './rpf_design_system/colours' as *; +@use "./rpf_design_system/font-size" as *; +@use "./rpf_design_system/colours" as *; -@use './Tabs' as *; +@use "./Tabs" as *; a { border: 3px solid transparent; @@ -12,17 +12,9 @@ a { } } -button { - all: initial; - border: 3px solid transparent; - cursor: pointer; - - @extend a; -} - input { - font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } @@ -32,7 +24,6 @@ input { caret-color: $rpf-black; color-scheme: light; - .pythonrunner-input { color: rgb(36, 103, 236); } @@ -60,8 +51,8 @@ input { #app { display: flex; flex-flow: column; - font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @include font-size-1(regular); } diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss deleted file mode 100644 index 541ec8fb0..000000000 --- a/src/assets/stylesheets/Button.scss +++ /dev/null @@ -1,265 +0,0 @@ -@use "./rpf_design_system/spacing" as *; -@use "./rpf_design_system/font-weight" as *; -@use "./rpf_design_system/colours" as *; - -.btn { - align-items: center; - border-radius: $space-0-5; - border: 3px solid transparent; - box-sizing: border-box; - color: inherit; - cursor: pointer; - display: inline-flex; - font-family: sans-serif; - font-size: inherit; - font-weight: $font-weight-bold; - gap: $space-0-5; - justify-content: center; - min-block-size: 44px; - min-inline-size: 44px; - padding: 10px; - position: relative; - text-align: center; - text-decoration: none; - - &:disabled { - background-color: $rpf-grey-600; - color: $rpf-white; - cursor: default; - } - - &:focus-visible { - border: 3px solid $rpf-brand-raspberry; - outline: none; - } - - &--primary { - background-color: var(--rpf-button-primary-background-color); - border-radius: $space-0-5; - - color: var(--rpf-button-primary-text-color); - - svg { - fill: var(--rpf-button-primary-text-color); - } - - &:active, - .btn-outer:active & { - background-color: var(--rpf-button-primary-background-color-active); - } - - &:focus-visible, - .btn-outer:focus-visible & { - background-color: var(--rpf-button-primary-background-color-focus); - } - - &:hover, - .btn-outer:hover & { - background-color: var(--rpf-button-primary-background-color-hover); - border-radius: $space-0-5; - } - - &:disabled { - background-color: var(--rpf-button-primary-background-color-disabled); - color: var(--rpf-button-primary-color-disabled); - - svg { - fill: var(--rpf-button-primary-color-disabled); - } - - &:hover, - .btn-outer:hover & { - background-color: var(--rpf-button-primary-background-color-disabled); - } - } - } - - &--secondary { - background-color: inherit; - - color: var(--rpf-button-secondary-text-color); - - svg { - fill: var(--rpf-button-secondary-text-color); - } - - &:active, - .btn-outer:active & { - background-color: inherit; - } - - &:focus-visible, - .btn-outer:focus-visible & { - background-color: inherit; - } - - &:hover, - .btn-outer:hover & { - background-color: inherit; - } - - &:disabled { - background-color: var(--rpf-button-secondary-background-color-disabled); - color: var(--rpf-button-secondary-background-color-active); - - svg { - fill: var(--rpf-button-secondary-background-color-active); - } - - &:hover, - .btn-outer:hover & { - background-color: var(--rpf-button-secondary-background-color-disabled); - } - } - - border: 2px solid var(--rpf-button-primary-background-color); - - &:active { - border: 2px solid var(--rpf-button-secondary-background-color-active); - } - - &:hover { - background-color: var(--rpf-button-secondary-background-color-hover); - color: var(--rpf-button-secondary-text-color-hover); - border-color: var(--rpf-button-secondary-border-color-hover) !important; - - svg { - fill: var(--rpf-button-secondary-text-color-hover); - } - } - - &:focus-visible { - outline: 3px solid var(--rpf-button-secondary-background-color-focus); - } - } - - &--tertiary { - background-color: inherit; - - color: inherit; - - &:active, - .btn-outer:active & { - background-color: inherit; - } - - &:focus-visible, - .btn-outer:focus-visible & { - background-color: inherit; - } - - &:hover, - .btn-outer:hover & { - background-color: inherit; - } - - &:disabled { - background-color: inherit; - color: $rpf-grey-600; - - svg { - fill: $rpf-grey-600; - } - - &:hover, - .btn-outer:hover & { - background-color: inherit; - } - } - - &:active { - color: $rpf-teal-900; - - svg { - fill: $rpf-teal-900; - } - } - - &:hover { - color: var(--rpf-button-tertiary-text-color-hover); - - svg { - fill: var(--rpf-button-tertiary-text-color-hover); - } - } - } - - &--danger { - background-color: $rpf-alert-error; - - color: $rpf-white; - - svg { - fill: $rpf-white; - } - - &:active, - .btn-outer:active & { - background-color: $rpf-alert-error; - } - - &:focus-visible, - .btn-outer:focus-visible & { - background-color: $rpf-alert-error; - } - - &:hover, - .btn-outer:hover & { - background-color: $rpf-alerts-error-tint; - } - - &:disabled { - background-color: $rpf-alert-error; - color: $rpf-white; - - svg { - fill: $rpf-white; - } - - &:hover, - .btn-outer:hover & { - background-color: $rpf-alert-error; - } - } - - &:focus-visible { - background-clip: padding-box; - border: 2px solid transparent; - outline: 3px solid $rpf-brand-raspberry; - } - } - - &--small { - min-block-size: unset; - min-inline-size: unset; - padding: $space-0-25; - } - - &--svg-only { - svg { - margin: 0; - } - } -} - -.btn-outer { - background: transparent; - border-radius: $space-0-5; - cursor: pointer; - padding: $space-0-5 0; - display: flex; - align-items: center; - justify-content: center; - - &:focus-visible { - outline: none; - - .btn { - border: 3px solid $rpf-brand-raspberry; - } - } - - &:has(.btn:disabled) { - cursor: default; - } -} diff --git a/src/assets/stylesheets/DesignSystemButton.scss b/src/assets/stylesheets/DesignSystemButton.scss deleted file mode 100644 index c66fe1f08..000000000 --- a/src/assets/stylesheets/DesignSystemButton.scss +++ /dev/null @@ -1,188 +0,0 @@ -@use "./rpf_design_system/colours" as *; - -.rpf-button--primary * { - svg { - fill: var(--rpf-button-primary-text-color); - } -} - -.rpf-button--tertiary * { - svg { - fill: var(--rpf-button-secondary-text-color) !important; - } -} - -.rpf-button { - flex-direction: row-reverse; -} - -.rpf-button--fit { - inline-size: fit-content; -} - -.rpf-button.rpf-button--fill { - justify-content: center; - inline-size: 100%; - box-sizing: border-box; -} - -.rpf-button--secondary { - justify-content: center; - align-items: center; -} - -.rpf-button--secondary * { - svg { - fill: $rpf-text-secondary; - } -} - -.--dark * { - .rpf-button--secondary { - border-color: $rpf-teal-400; - - span { - color: $rpf-white; - } - - svg { - fill: $rpf-white; - } - - &::before { - background-color: rgba($rpf-grey-700, 1); - } - - &:hover { - &::before { - background-color: rgba($rpf-white, 0.1); - } - - border-color: $rpf-teal-400; - } - - &:active { - &::before { - background-color: rgba($rpf-white, 0.15); - } - } - - &:disabled { - &::before { - background-color: inherit; - } - - span { - color: $rpf-grey-150; - } - - border-color: $rpf-grey-150; - background-color: inherit; - } - } - - .rpf-button--tertiary { - color: $rpf-white; - border: none; - - &:hover { - &::before { - background-color: rgba($rpf-white, 0.1); - } - } - - &:active { - &::before { - background-color: rgba($rpf-white, 0.15); - } - } - - &:disabled { - &::before { - background-color: inherit; - } - - span { - color: $rpf-grey-150; - } - - background-color: inherit; - } - } -} - -.--light * { - .rpf-button--secondary { - span { - color: $rpf-text-primary; - } - - &::before { - background-color: rgba($rpf-white, 1); - } - - &:hover { - &::before { - background-color: rgba(231, 248, 247, 1); - } - - border-color: $rpf-teal-400; - } - - &:active { - &::before { - background-color: rgba(220, 245, 243, 1); - } - } - - &:disabled { - &::before { - background-color: inherit; - } - - span { - color: rgba(213, 215, 220, 1); - } - - border-color: rgba(213, 215, 220, 1); - background-color: inherit; - } - } - - .rpf-button--tertiary { - color: $rpf-text-primary; - border: none; - - &::before { - background-color: rgba($rpf-white, 1); - } - - &:hover { - &::before { - background-color: rgba(231, 248, 247, 1); - } - } - - &:active { - &::before { - background-color: rgba(220, 245, 243, 1); - } - } - - &:disabled { - &::before { - background-color: inherit; - } - - span { - color: rgba(213, 215, 220, 1); - } - - background-color: inherit; - } - } -} - -.rpf-button__icon { - display: flex; -} diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss index 42167d9b3..a8210e368 100644 --- a/src/assets/stylesheets/InternalStyles.scss +++ b/src/assets/stylesheets/InternalStyles.scss @@ -87,11 +87,6 @@ code { monospace; } -button { - all: initial; - font-size: inherit; -} - svg { min-inline-size: fit-content; } diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss index 6041e50cb..06bf157f3 100644 --- a/src/assets/stylesheets/ProjectBar.scss +++ b/src/assets/stylesheets/ProjectBar.scss @@ -28,18 +28,9 @@ } } - .btn--save { - border-radius: $space-0-5; - @container (min-width: 560px) { - .icon { - display: none; - } - } - } - .project-bar__btn-wrapper { display: flex; - block-size: 100%; + block-size: 100%; } .project-bar__btn-wrapper:not(:last-child) { @@ -70,26 +61,3 @@ } } } - -.project-bar__btn { - border-radius: $space-0-5; - justify-content: center; - - margin: $space-0-5; - gap: $space-0-5; - - .text { - display: none; - } - - &:hover & { - border-radius: inherit; - } - - @container (min-width: 560px) { - .text { - min-inline-size: auto; - display: block; - } - } -} diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss index 3406b9cbf..cc649d537 100644 --- a/src/assets/stylesheets/ProjectInfo.scss +++ b/src/assets/stylesheets/ProjectInfo.scss @@ -11,10 +11,6 @@ border-radius: $space-0-5; border: none; background-color: inherit; - - .btn--primary { - margin: 0 $space-0-5; - } } .project-type__label { diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss index a8873be56..f14f4e15f 100644 --- a/src/assets/stylesheets/ProjectName.scss +++ b/src/assets/stylesheets/ProjectName.scss @@ -8,10 +8,6 @@ display: flex; block-size: 100%; padding-inline-start: $space-0-5; - - .btn--primary { - margin: 0 $space-0-5; - } } .project-name__title { diff --git a/src/components/DesignSystemButton/DesignSystemButton.jsx b/src/components/DesignSystemButton/DesignSystemButton.jsx deleted file mode 100644 index 2050f0ded..000000000 --- a/src/components/DesignSystemButton/DesignSystemButton.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { Button } from "@raspberrypifoundation/design-system-react"; -import classNames from "classnames"; -import "../../assets/stylesheets/DesignSystemButton.scss"; - -const DesignSystemButton = ({ className, fill = false, ...props }) => ( - ) : (
-
))} diff --git a/src/components/Menus/Sidebar/SidebarBarOption.jsx b/src/components/Menus/Sidebar/SidebarBarOption.jsx index ca303adb6..0324230d8 100644 --- a/src/components/Menus/Sidebar/SidebarBarOption.jsx +++ b/src/components/Menus/Sidebar/SidebarBarOption.jsx @@ -1,5 +1,4 @@ import React from "react"; -import Button from "../../Button/Button"; import classNames from "classnames"; const SidebarBarOption = (props) => { @@ -18,14 +17,15 @@ const SidebarBarOption = (props) => { "sidebar__bar-option-wrapper--selected": isActive, })} > - ); }; From 3d308a213738a0d8c61541579f4726847a374141 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Mon, 20 Oct 2025 10:10:55 +0100 Subject: [PATCH 32/32] style: linting --- .../Editor/EditorInput/EditorInput.jsx | 14 +++++++------- .../InstructionsPanel/InstructionsPanel.jsx | 16 ++++++++-------- .../ProgressBar/ProgressBar.jsx | 8 ++++---- src/components/Menus/Sidebar/SidebarBar.jsx | 4 ++-- src/components/Modals/GeneralModal.jsx | 2 +- src/components/Modals/NewFileModal.jsx | 6 +++--- src/components/Modals/RenameFileModal.jsx | 12 ++++++------ src/components/ProjectName/ProjectName.jsx | 6 +++--- src/components/RunButton/RunnerControls.jsx | 2 +- src/components/RunButton/StopButton.jsx | 2 +- 10 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/components/Editor/EditorInput/EditorInput.jsx b/src/components/Editor/EditorInput/EditorInput.jsx index 5c3afd4be..ac8c17625 100644 --- a/src/components/Editor/EditorInput/EditorInput.jsx +++ b/src/components/Editor/EditorInput/EditorInput.jsx @@ -25,14 +25,14 @@ const EditorInput = () => { const project = useSelector((state) => state.editor.project); const openFiles = useSelector((state) => state.editor.openFiles); const focussedFileIndices = useSelector( - (state) => state.editor.focussedFileIndices + (state) => state.editor.focussedFileIndices, ); const dispatch = useDispatch(); const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY }); const readOnly = useSelector((state) => state.editor.readOnly); const [numberOfComponents, setNumberOfComponents] = useState( - project?.components?.length + project?.components?.length, ); const [fileNames, setFileNames] = useState(); @@ -44,7 +44,7 @@ const EditorInput = () => { setFocussedFileIndex({ panelIndex: parseInt(source.droppableId), fileIndex: source.index, - }) + }), ); }; @@ -65,14 +65,14 @@ const EditorInput = () => { setFocussedFileIndex({ panelIndex: parseInt(destination.droppableId), fileIndex: destination.index, - }) + }), ); if (destination.droppableId !== source.droppableId) { dispatch( setFocussedFileIndex({ panelIndex: parseInt(source.droppableId), fileIndex: Math.max(source.index - 1, 0), - }) + }), ); } }; @@ -97,7 +97,7 @@ const EditorInput = () => { useEffect(() => { const newFileNames = project.components.map( - (file) => `${file.name}.${file.extension}` + (file) => `${file.name}.${file.extension}`, ); if (newFileNames.join() !== fileNames?.join()) { setFileNames(newFileNames); @@ -152,7 +152,7 @@ const EditorInput = () => { tabRefs.current[ project?.components?.findIndex( (file) => - `${file.name}.${file.extension}` === fileName + `${file.name}.${file.extension}` === fileName, ) ] } diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index 0157b6f49..fa8ba16c8 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx @@ -31,14 +31,14 @@ const InstructionsPanel = () => { }, []); const [showModal, setShowModal] = useState(false); const instructionsEditable = useSelector( - (state) => state.editor?.instructionsEditable + (state) => state.editor?.instructionsEditable, ); const project = useSelector((state) => state.editor?.project); const steps = useSelector((state) => state.instructions.project?.steps); const quiz = useSelector((state) => state.instructions?.quiz); const dispatch = useDispatch(); const currentStepPosition = useSelector( - (state) => state.instructions.currentStepPosition + (state) => state.instructions.currentStepPosition, ); const { t } = useTranslation(); const stepContent = useRef(); @@ -51,7 +51,7 @@ const InstructionsPanel = () => { }, [quiz]); const numberOfSteps = useSelector( - (state) => state.instructions.project?.steps?.length || 0 + (state) => state.instructions.project?.steps?.length || 0, ); const hasInstructions = steps && steps.length > 0; @@ -59,7 +59,7 @@ const InstructionsPanel = () => { const applySyntaxHighlighting = (container) => { const codeElements = container.querySelectorAll( - ".language-python, .language-html, .language-css, .language-javascript" + ".language-python, .language-html, .language-css, .language-javascript", ); codeElements.forEach((element) => { @@ -110,8 +110,8 @@ const InstructionsPanel = () => { if (quizCompleted && isQuiz) { dispatch( setCurrentStepPosition( - Math.min(currentStepPosition + 1, numberOfSteps - 1) - ) + Math.min(currentStepPosition + 1, numberOfSteps - 1), + ), ); } }, [quizCompleted, currentStepPosition, numberOfSteps, dispatch, isQuiz]); @@ -119,7 +119,7 @@ const InstructionsPanel = () => { const addInstructions = () => { const translatedInstructions = populateMarkdownTemplate( demoInstructions, - t + t, ); dispatch(setProjectInstructions(translatedInstructions)); }; @@ -244,7 +244,7 @@ const InstructionsPanel = () => { key="remove" variant="danger" text={t( - "instructionsPanel.removeInstructionsModal.removeInstructions" + "instructionsPanel.removeInstructionsModal.removeInstructions", )} onClick={removeInstructions} />, diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx index 68548269f..5a3857ddb 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx @@ -8,10 +8,10 @@ import { useTranslation } from "react-i18next"; const ProgressBar = () => { const numberOfSteps = useSelector( - (state) => state.instructions.project.steps.length + (state) => state.instructions.project.steps.length, ); const currentStepPosition = useSelector( - (state) => state.instructions.currentStepPosition + (state) => state.instructions.currentStepPosition, ); const dispatch = useDispatch(); @@ -20,8 +20,8 @@ const ProgressBar = () => { const goToNextStep = () => { dispatch( setCurrentStepPosition( - Math.min(currentStepPosition + 1, numberOfSteps - 1) - ) + Math.min(currentStepPosition + 1, numberOfSteps - 1), + ), ); }; diff --git a/src/components/Menus/Sidebar/SidebarBar.jsx b/src/components/Menus/Sidebar/SidebarBar.jsx index 0595cd727..637fa0867 100644 --- a/src/components/Menus/Sidebar/SidebarBar.jsx +++ b/src/components/Menus/Sidebar/SidebarBar.jsx @@ -17,10 +17,10 @@ const SidebarBar = (props) => { const project = useSelector((state) => state.editor.project); const { t } = useTranslation(); const topMenuOptions = menuOptions.filter( - (menuOption) => menuOption.position === "top" + (menuOption) => menuOption.position === "top", ); const bottomMenuOptions = menuOptions.filter( - (menuOption) => menuOption.position === "bottom" + (menuOption) => menuOption.position === "bottom", ); const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY }); diff --git a/src/components/Modals/GeneralModal.jsx b/src/components/Modals/GeneralModal.jsx index 218e02298..8138b2d41 100644 --- a/src/components/Modals/GeneralModal.jsx +++ b/src/components/Modals/GeneralModal.jsx @@ -64,7 +64,7 @@ const GeneralModal = ({

{textItem.content}

- ) + ), )} {children} diff --git a/src/components/Modals/NewFileModal.jsx b/src/components/Modals/NewFileModal.jsx index ab64df1ac..497d3cada 100644 --- a/src/components/Modals/NewFileModal.jsx +++ b/src/components/Modals/NewFileModal.jsx @@ -16,10 +16,10 @@ const NewFileModal = () => { const dispatch = useDispatch(); const projectType = useSelector((state) => state.editor.project.project_type); const projectComponents = useSelector( - (state) => state.editor.project.components + (state) => state.editor.project.components, ); const componentNames = projectComponents.map( - (component) => `${component.name}.${component.extension}` + (component) => `${component.name}.${component.extension}`, ); const isModalOpen = useSelector((state) => state.editor.newFileModalShowing); @@ -48,7 +48,7 @@ const NewFileModal = () => { label: t("filePanel.newFileModal.inputLabel"), helpText: t("filePanel.newFileModal.helpText", { examples: t( - `filePanel.newFileModal.helpTextExample.${projectType}` + `filePanel.newFileModal.helpTextExample.${projectType}`, ), }), value: fileName, diff --git a/src/components/Modals/RenameFileModal.jsx b/src/components/Modals/RenameFileModal.jsx index 84ec21a80..2ab7d307d 100644 --- a/src/components/Modals/RenameFileModal.jsx +++ b/src/components/Modals/RenameFileModal.jsx @@ -15,10 +15,10 @@ const RenameFileModal = () => { const { t } = useTranslation(); const projectType = useSelector((state) => state.editor.project.project_type); const projectComponents = useSelector( - (state) => state.editor.project.components + (state) => state.editor.project.components, ); const isModalOpen = useSelector( - (state) => state.editor.renameFileModalShowing + (state) => state.editor.renameFileModalShowing, ); const { name: currentName, @@ -26,12 +26,12 @@ const RenameFileModal = () => { fileKey, } = useSelector((state) => state.editor.modals.renameFile); const componentNames = projectComponents.map( - (component) => `${component.name}.${component.extension}` + (component) => `${component.name}.${component.extension}`, ); const closeModal = () => dispatch(closeRenameFileModal()); const [fileName, setFileName] = useState( - `${currentName}.${currentExtension}` + `${currentName}.${currentExtension}`, ); const renameComponent = () => { @@ -50,11 +50,11 @@ const RenameFileModal = () => { key: fileKey, extension: extension, name: name, - }) + }), ); closeModal(); }, - `${currentName}.${currentExtension}` + `${currentName}.${currentExtension}`, ); }; diff --git a/src/components/ProjectName/ProjectName.jsx b/src/components/ProjectName/ProjectName.jsx index 388ba823f..6326c762b 100644 --- a/src/components/ProjectName/ProjectName.jsx +++ b/src/components/ProjectName/ProjectName.jsx @@ -61,7 +61,7 @@ const ProjectName = ({ setEditing(false); setName(project.name); }, - [project.name] + [project.name], ); const handleKeyDown = (event) => { @@ -121,10 +121,10 @@ const ProjectName = ({