diff --git a/package-lock.json b/package-lock.json
index 2b2c9eabb..5f7c663fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,12 +17,13 @@
"@codemirror/view": "^6.26.3",
"@microbit/microbit-connection": "^1.0.0",
"@microbit/microbit-fs": "^0.10.0",
- "@microbit/ui": "^0.2.0",
- "@microbit/ui-patterns": "^0.2.0",
+ "@microbit/ui": "^0.2.2",
+ "@microbit/ui-patterns": "^0.3.0",
"@sanity/block-content-to-react": "^3.0.0",
"@sanity/image-url": "^1.0.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.4.3",
"@types/lodash.debounce": "^4.0.6",
"@types/lodash.sortby": "^4.7.6",
"@types/lunr": "^2.3.4",
@@ -3276,9 +3277,9 @@
}
},
"node_modules/@microbit/ui": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.2.1.tgz",
- "integrity": "sha512-Pg2JPGGySsNX3F1pT40zCDiqFeevHQV0KSuGzkpwG0qyiDV4NuYwdCsstbhOuWYDHQY9iLR5LUPfYGU6V5+nhg==",
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.2.2.tgz",
+ "integrity": "sha512-vQ/JA+oVbNpwyXzB7Fr3JR2IcwiQyzFtbRY5O0YW5RE6Fb8obFaGcFW6OvkZF6PpAZqDbKnKh6WaMx2nsUvawQ==",
"license": "MIT",
"peerDependencies": {
"@pandacss/dev": "^1.11.4",
@@ -3290,9 +3291,9 @@
}
},
"node_modules/@microbit/ui-patterns": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.2.1.tgz",
- "integrity": "sha512-ZiEF+V8kTv+HyIcIg4cXkyUmP1KZT5frSF02r2FUmneM9DQRU05B9da9pGeTrrYNHJMDN8epBTUUC8/wEvhW+g==",
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.3.0.tgz",
+ "integrity": "sha512-5leAKreA9iTYwqGM90J5O7DVxAE5nCHpb6NNMr0tp4nYgemSrCI4stQUhFRKP2dbIqmdCsG7Q0GhLT+8tM2p7A==",
"license": "MIT",
"dependencies": {
"@formatjs/intl-localematcher": "^0.8.0"
diff --git a/package.json b/package.json
index bc291d90f..224118a10 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
"@codemirror/view": "^6.26.3",
"@microbit/microbit-connection": "^1.0.0",
"@microbit/microbit-fs": "^0.10.0",
- "@microbit/ui": "^0.2.0",
- "@microbit/ui-patterns": "^0.2.0",
+ "@microbit/ui": "^0.2.2",
+ "@microbit/ui-patterns": "^0.3.0",
"@sanity/block-content-to-react": "^3.0.0",
"@sanity/image-url": "^1.0.1",
"@testing-library/jest-dom": "^5.14.1",
diff --git a/src/common/YoutubeVideoEmbed.tsx b/src/common/YoutubeVideoEmbed.tsx
deleted file mode 100644
index 08c535523..000000000
--- a/src/common/YoutubeVideoEmbed.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * (c) 2021, Micro:bit Educational Foundation and contributors
- *
- * SPDX-License-Identifier: MIT
- */
-import { AspectRatio } from "styled-system/jsx";
-
-export interface YoutubeVideo {
- alt: string;
- youtubeId: string;
-}
-
-interface YoutubeVideoProps {
- alt: string;
- youtubeId: string;
-}
-
-const YoutubeVideoEmbed = ({ alt, youtubeId }: YoutubeVideoProps) => {
- return (
-
-
-
-
-
- );
-};
-
-export default YoutubeVideoEmbed;
diff --git a/src/messages/ui.ca.json b/src/messages/ui.ca.json
index 536f503f9..e31012eb2 100644
--- a/src/messages/ui.ca.json
+++ b/src/messages/ui.ca.json
@@ -2415,6 +2415,16 @@
"value": "L'idioma no està disponible totalment"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.de.json b/src/messages/ui.de.json
index 72a10e4fc..bfb4f3148 100644
--- a/src/messages/ui.de.json
+++ b/src/messages/ui.de.json
@@ -2505,6 +2505,16 @@
"value": "Sprache nicht vollständig unterstützt"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
index 2d1f376a1..62bcbe9fc 100644
--- a/src/messages/ui.en.json
+++ b/src/messages/ui.en.json
@@ -2457,6 +2457,16 @@
"value": "Language not fully supported"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.es-es.json b/src/messages/ui.es-es.json
index 66e9eda59..c30feea59 100644
--- a/src/messages/ui.es-es.json
+++ b/src/messages/ui.es-es.json
@@ -2418,7 +2418,7 @@
"ui-patterns.language-preview-notice": [
{
"type": 0,
- "value": "* These languages are an early preview of in-progress translations."
+ "value": "Estos idiomas son una vista previa temprana de traducciones en curso."
}
],
"ui-patterns.language-support-checked": [
@@ -2445,6 +2445,16 @@
"value": "Idioma no es totalmente compatible"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.fr.json b/src/messages/ui.fr.json
index 4d4f144fc..d2b69fd04 100644
--- a/src/messages/ui.fr.json
+++ b/src/messages/ui.fr.json
@@ -2445,6 +2445,16 @@
"value": "La langue n'est pas entièrement prise en charge"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.ga-ie.json b/src/messages/ui.ga-ie.json
index 182206527..fc128650b 100644
--- a/src/messages/ui.ga-ie.json
+++ b/src/messages/ui.ga-ie.json
@@ -2556,49 +2556,59 @@
"ui-patterns.language-fully-supported-heading": [
{
"type": 0,
- "value": "Fully supported"
+ "value": "Tacaíocht iomlán"
}
],
"ui-patterns.language-partially-supported-heading": [
{
"type": 0,
- "value": "Partially supported"
+ "value": "Tacaithe go páirteach"
}
],
"ui-patterns.language-preview-notice": [
{
"type": 0,
- "value": "* These languages are an early preview of in-progress translations."
+ "value": "* Is réamhamharc luath ar aistriúcháin atá ar siúl iad na teangacha seo."
}
],
"ui-patterns.language-support-checked": [
{
"type": 0,
- "value": "Supported"
+ "value": "Tacaithe"
}
],
"ui-patterns.language-support-unchecked": [
{
"type": 0,
- "value": "Unsupported"
+ "value": "Gan tacaíocht"
}
],
"ui-patterns.language-supported-for": [
{
"type": 0,
- "value": "Translations supported for:"
+ "value": "Aistriúcháin a dtacaítear leo le haghaidh:"
}
],
"ui-patterns.language-toast-title": [
{
"type": 0,
- "value": "Language not fully supported"
+ "value": "Teanga nach dtacaítear go hiomlán léi"
+ }
+ ],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
}
],
"ui.breadcrumb": [
{
"type": 0,
- "value": "Mionrian"
+ "value": "Grabhróg aráin"
}
],
"ui.close-action": [
@@ -2610,13 +2620,13 @@
"ui.combobox-listbox": [
{
"type": 0,
- "value": "Suggestions"
+ "value": "Moltaí"
}
],
"ui.combobox-trigger": [
{
"type": 0,
- "value": "Show suggestions"
+ "value": "Taispeáin moltaí"
}
],
"ui.loading": [
@@ -2634,7 +2644,7 @@
"ui.numberfield-decrease": [
{
"type": 0,
- "value": "Decrease "
+ "value": "Laghdaigh "
},
{
"type": 1,
@@ -2644,7 +2654,7 @@
"ui.numberfield-increase": [
{
"type": 0,
- "value": "Increase "
+ "value": "Méadaigh "
},
{
"type": 1,
@@ -2654,7 +2664,7 @@
"ui.select-placeholder": [
{
"type": 0,
- "value": "Select an item"
+ "value": "Roghnaigh mír"
}
],
"ui.select-row-action": [
@@ -2675,11 +2685,33 @@
},
{
"type": 0,
- "value": " notification"
+ "value": " fógra"
}
]
},
- "other": {
+ "two": {
+ "value": [
+ {
+ "type": 7
+ },
+ {
+ "type": 0,
+ "value": " fhógra"
+ }
+ ]
+ },
+ "few": {
+ "value": [
+ {
+ "type": 7
+ },
+ {
+ "type": 0,
+ "value": " fógraí"
+ }
+ ]
+ },
+ "many": {
"value": [
{
"type": 7
@@ -2689,6 +2721,17 @@
"value": " notifications"
}
]
+ },
+ "other": {
+ "value": [
+ {
+ "type": 7
+ },
+ {
+ "type": 0,
+ "value": " fógraí"
+ }
+ ]
}
},
"offset": 0,
@@ -2708,13 +2751,13 @@
"ui.toast-status-info": [
{
"type": 0,
- "value": "Information"
+ "value": "Eolas"
}
],
"ui.toast-status-success": [
{
"type": 0,
- "value": "D'éirigh leis"
+ "value": "Rath"
}
],
"ui.toast-status-warning": [
diff --git a/src/messages/ui.ja.json b/src/messages/ui.ja.json
index ffac65c0e..39558137e 100644
--- a/src/messages/ui.ja.json
+++ b/src/messages/ui.ja.json
@@ -2412,7 +2412,7 @@
"ui-patterns.language-preview-notice": [
{
"type": 0,
- "value": "* These languages are an early preview of in-progress translations."
+ "value": "*これらの言語は、翻訳の早期プレビューを実施中です。"
}
],
"ui-patterns.language-support-checked": [
@@ -2439,6 +2439,16 @@
"value": "言語が完全にサポートされていません"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.ko.json b/src/messages/ui.ko.json
index 07aaa44ab..a17e9a3d9 100644
--- a/src/messages/ui.ko.json
+++ b/src/messages/ui.ko.json
@@ -2445,6 +2445,16 @@
"value": "완전히 지원되지 않는 언어"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.lol.json b/src/messages/ui.lol.json
index d3c81018d..b5a932890 100644
--- a/src/messages/ui.lol.json
+++ b/src/messages/ui.lol.json
@@ -1980,85 +1980,95 @@
"ui-patterns.help-translate": [
{
"type": 0,
- "value": "Help translate"
+ "value": "crwdns370126:0crwdne370126:0"
}
],
"ui-patterns.language": [
{
"type": 0,
- "value": "Language"
+ "value": "crwdns370128:0crwdne370128:0"
}
],
"ui-patterns.language-fully-supported-heading": [
{
"type": 0,
- "value": "Fully supported"
+ "value": "crwdns370130:0crwdne370130:0"
}
],
"ui-patterns.language-partially-supported-heading": [
{
"type": 0,
- "value": "Partially supported"
+ "value": "crwdns370132:0crwdne370132:0"
}
],
"ui-patterns.language-preview-notice": [
{
"type": 0,
- "value": "* These languages are an early preview of in-progress translations."
+ "value": "crwdns370134:0crwdne370134:0"
}
],
"ui-patterns.language-support-checked": [
{
"type": 0,
- "value": "Supported"
+ "value": "crwdns370136:0crwdne370136:0"
}
],
"ui-patterns.language-support-unchecked": [
{
"type": 0,
- "value": "Unsupported"
+ "value": "crwdns370138:0crwdne370138:0"
}
],
"ui-patterns.language-supported-for": [
{
"type": 0,
- "value": "Translations supported for:"
+ "value": "crwdns370140:0crwdne370140:0"
}
],
"ui-patterns.language-toast-title": [
{
"type": 0,
- "value": "Language not fully supported"
+ "value": "crwdns370142:0crwdne370142:0"
+ }
+ ],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
}
],
"ui.breadcrumb": [
{
"type": 0,
- "value": "Breadcrumb"
+ "value": "crwdns370036:0crwdne370036:0"
}
],
"ui.close-action": [
{
"type": 0,
- "value": "crwdns362700:0crwdne362700:0"
+ "value": "crwdns370038:0crwdne370038:0"
}
],
"ui.combobox-listbox": [
{
"type": 0,
- "value": "Suggestions"
+ "value": "crwdns370040:0crwdne370040:0"
}
],
"ui.combobox-trigger": [
{
"type": 0,
- "value": "Show suggestions"
+ "value": "crwdns370042:0crwdne370042:0"
}
],
"ui.loading": [
{
"type": 0,
- "value": "Loading"
+ "value": "crwdns370044:0crwdne370044:0"
}
],
"ui.new-tab-notice": [
@@ -2070,93 +2080,79 @@
"ui.numberfield-decrease": [
{
"type": 0,
- "value": "Decrease "
+ "value": "crwdns370046:0"
},
{
"type": 1,
"value": "fieldLabel"
+ },
+ {
+ "type": 0,
+ "value": "crwdne370046:0"
}
],
"ui.numberfield-increase": [
{
"type": 0,
- "value": "Increase "
+ "value": "crwdns370048:0"
},
{
"type": 1,
"value": "fieldLabel"
+ },
+ {
+ "type": 0,
+ "value": "crwdne370048:0"
}
],
"ui.select-placeholder": [
{
"type": 0,
- "value": "Select an item"
+ "value": "crwdns370050:0crwdne370050:0"
}
],
"ui.select-row-action": [
{
"type": 0,
- "value": "Select"
+ "value": "crwdns370052:0crwdne370052:0"
}
],
"ui.toast-region": [
{
- "type": 6,
- "value": "count",
- "options": {
- "one": {
- "value": [
- {
- "type": 7
- },
- {
- "type": 0,
- "value": " notification"
- }
- ]
- },
- "other": {
- "value": [
- {
- "type": 7
- },
- {
- "type": 0,
- "value": " notifications"
- }
- ]
- }
- },
- "offset": 0,
- "pluralType": "cardinal"
- },
- {
- "type": 0,
- "value": "."
+ "type": 0,
+ "value": "crwdns370054:0count="
+ },
+ {
+ "type": 1,
+ "value": "count"
+ },
+ {
+ "type": 0,
+ "value": "crwdne370054:0"
}
],
"ui.toast-status-error": [
{
"type": 0,
- "value": "Error"
+ "value": "crwdns370056:0crwdne370056:0"
}
],
"ui.toast-status-info": [
{
"type": 0,
- "value": "Information"
+ "value": "crwdns370058:0crwdne370058:0"
}
],
"ui.toast-status-success": [
{
"type": 0,
- "value": "Success"
+ "value": "crwdns370060:0crwdne370060:0"
}
],
"ui.toast-status-warning": [
{
"type": 0,
- "value": "Warning"
+ "value": "crwdns370062:0crwdne370062:0"
}
],
"undo": [
diff --git a/src/messages/ui.nl.json b/src/messages/ui.nl.json
index b0f5ff1fe..66d243a7b 100644
--- a/src/messages/ui.nl.json
+++ b/src/messages/ui.nl.json
@@ -2460,7 +2460,7 @@
"ui-patterns.language-preview-notice": [
{
"type": 0,
- "value": "* These languages are an early preview of in-progress translations."
+ "value": "* Deze talen zijn een eerste voorproefje van de vertalingen waaraan momenteel wordt gewerkt."
}
],
"ui-patterns.language-support-checked": [
@@ -2487,6 +2487,16 @@
"value": "Taal niet volledig ondersteund"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.pl.json b/src/messages/ui.pl.json
index 5c0559c61..54206c334 100644
--- a/src/messages/ui.pl.json
+++ b/src/messages/ui.pl.json
@@ -2516,7 +2516,7 @@
"ui-patterns.language-preview-notice": [
{
"type": 0,
- "value": "* These languages are an early preview of in-progress translations."
+ "value": "* Te języki są we wczesnym podglądzie bieżącego tłumaczenia."
}
],
"ui-patterns.language-support-checked": [
@@ -2543,6 +2543,16 @@
"value": "Język nie w pełni obsługiwany"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/messages/ui.zh-cn.json b/src/messages/ui.zh-cn.json
index 088c92975..b5ae913d8 100644
--- a/src/messages/ui.zh-cn.json
+++ b/src/messages/ui.zh-cn.json
@@ -2419,13 +2419,13 @@
"ui-patterns.language-fully-supported-heading": [
{
"type": 0,
- "value": "Fully supported"
+ "value": "完全支持"
}
],
"ui-patterns.language-partially-supported-heading": [
{
"type": 0,
- "value": "Partially supported"
+ "value": "部分支持"
}
],
"ui-patterns.language-preview-notice": [
@@ -2437,25 +2437,35 @@
"ui-patterns.language-support-checked": [
{
"type": 0,
- "value": "Supported"
+ "value": "支持"
}
],
"ui-patterns.language-support-unchecked": [
{
"type": 0,
- "value": "Unsupported"
+ "value": "不支持"
}
],
"ui-patterns.language-supported-for": [
{
"type": 0,
- "value": "Translations supported for:"
+ "value": "翻译支持:"
}
],
"ui-patterns.language-toast-title": [
{
"type": 0,
- "value": "Language not fully supported"
+ "value": "该语言没有完全支持"
+ }
+ ],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
}
],
"ui.breadcrumb": [
diff --git a/src/messages/ui.zh-tw.json b/src/messages/ui.zh-tw.json
index a009a1496..aa5330117 100644
--- a/src/messages/ui.zh-tw.json
+++ b/src/messages/ui.zh-tw.json
@@ -2457,6 +2457,16 @@
"value": "語言未完全支持"
}
],
+ "ui-patterns.play-video": [
+ {
+ "type": 0,
+ "value": "Play video: "
+ },
+ {
+ "type": 1,
+ "value": "title"
+ }
+ ],
"ui.breadcrumb": [
{
"type": 0,
diff --git a/src/workbench/WelcomeDialog.tsx b/src/workbench/WelcomeDialog.tsx
index 6fd04966c..87676171f 100644
--- a/src/workbench/WelcomeDialog.tsx
+++ b/src/workbench/WelcomeDialog.tsx
@@ -13,12 +13,12 @@ import {
ModalFooter,
Text,
} from "@microbit/ui";
+import { YoutubeVideoEmbed } from "@microbit/ui-patterns";
import { ReactNode } from "react";
import { RiExternalLinkLine } from "react-icons/ri";
import { FormattedMessage, useIntl } from "react-intl";
import { HStack, Stack, VStack } from "styled-system/jsx";
import DialogHeading from "../common/DialogHeading";
-import YoutubeVideoEmbed from "../common/YoutubeVideoEmbed";
import { useDeployment } from "../deployment";
interface WelcomeDialogProps {
@@ -30,7 +30,7 @@ interface WelcomeDialogProps {
const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
const { guideLink } = useDeployment();
const intl = useIntl();
- const welcomeVideoAltText = intl.formatMessage({ id: "welcome-video-alt" });
+ const welcomeVideoTitle = intl.formatMessage({ id: "welcome-video-alt" });
return (
@@ -50,7 +50,7 @@ const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {