Add story for MakeCode Editor without lang control

Author: microbit-grace

src/react/MakeCodeFrame.tsx

@@ -34,6 +34,7 @@ export interface MakeCodeFrameProps
   version?: string;
   lang?: string;
   controller?: 1 | 2;
+  hideLanguage?: boolean;
   // You can use these to specify query variants or other options not directly supported by this component
   // https://github.com/microsoft/pxt-microbit/blob/master/pxtarget.json#L605C6-L605C14
   queryParams?: Record<string, string>;
@@ -72,6 +73,7 @@ const MakeCodeFrame = forwardRef<MakeCodeFrameDriver, MakeCodeFrameProps>(
       version,
       lang,
       controller,
+      hideLanguage,
       queryParams,
 
       initialProjects,
@@ -136,6 +138,7 @@ const MakeCodeFrame = forwardRef<MakeCodeFrameDriver, MakeCodeFrameProps>(
       version,
       lang,
       controller,
+      hideLanguage,
       queryParams
     );
     return (

src/stories/react/MakeCodeFrame.stories.tsx

@@ -82,6 +82,24 @@ export const MakeCodeEditorWithControlsStory: Story = {
   },
 };
 
+export const MakeCodeEditorWithoutLangPickerStory: Story = {
+  name: 'MakeCode Editor without language picker',
+  args: {
+    version: 'default',
+  },
+  render: (args) => {
+    const { version } = args;
+    return (
+      <StoryWrapper>
+        <MakeCodeEditorWithControls
+          version={version === 'default' ? undefined : version}
+          hideLanguage
+        />
+      </StoryWrapper>
+    );
+  },
+};
+
 export const MakeCodeEditorControllerAppModeStory: Story = {
   name: 'MakeCode Editor with controller=2 mode',
   args: {

src/stories/vanilla/makecode-frame-driver.stories.tsx

@@ -15,6 +15,7 @@ interface StoryArgs {
     version?: string;
     lang?: string;
     controller?: 1 | 2;
+    hideLanguage?: boolean;
     queryParams?: Record<string, string>;
   };
   project?: MakeCodeProject;
@@ -44,6 +45,7 @@ const renderEditor = (args: StoryArgs) => {
       args.options?.version === 'default' ? undefined : args.options?.version,
       args.options?.lang,
       args.options?.controller ?? 1,
+      args.options?.hideLanguage,
       args.options?.queryParams
     );
     iframe.width = '100%';
@@ -92,6 +94,15 @@ export const MakeCodeEditorWithControlsStory: Story = {
   },
 };
 
+export const MakeCodeEditorWithoutLangPickerStory: Story = {
+  name: 'MakeCode Editor without language picker',
+  render: renderEditor,
+  args: {
+    options: { version: 'default', hideLanguage: true },
+    project: defaultMakeCodeProject,
+  },
+};
+
 export const MakeCodeEditorControllerAppModeStory: Story = {
   name: 'MakeCode Editor with controller=2 mode',
   render: renderEditor,

src/vanilla/makecode-frame-driver.ts

@@ -806,6 +806,7 @@ export const createMakeCodeURL = (
   version: string | undefined,
   lang: string | undefined,
   controller: number | undefined,
+  hideLanguage: boolean | undefined,
   queryParams: Record<string, string> | undefined
 ): string => {
   const url = new URL(
@@ -817,6 +818,9 @@ export const createMakeCodeURL = (
   if (controller) {
     url.searchParams.set('controller', controller.toString());
   }
+  if (hideLanguage) {
+    url.searchParams.set('hideLanguage', '1')
+  }
   if (queryParams) {
     for (const [k, v] of Object.entries(queryParams)) {
       url.searchParams.set(k, v);