chore(docs): fix the order of stories in the playground (#2645)

* Change the story file name to include stories

When we move to version 7+, this will be updated to mgt-component.js from mgt-component.stories.js

Signed-off-by: Musale Martin <[email protected]>

* Order options to start with stories files

Signed-off-by: Musale Martin <[email protected]>

* Update pages that the theme toggle should not appear on

Signed-off-by: Musale Martin <[email protected]>

---------

Signed-off-by: Musale Martin <[email protected]>

Author: musale

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -70,8 +70,9 @@ export const withCodeEditor = makeDecorator({
   skipIfNoParametersOrOptions: false,
   wrapper: (getStory, context, { options }) => {
     const forOptions = options ? options.disableThemeToggle : false;
-    const forContext =
-      context && (context.name === 'Custom CSS Properties' || context.title.toLowerCase().includes('templating'));
+    const title =
+      ['Custom CSS Properties', 'Theme'].includes(context.name) || context.title.toLowerCase().includes('templating');
+    const forContext = context && title;
     const disableThemeToggle = forOptions || forContext;
     let story = getStory(context);
 

.storybook/preview.js

@@ -47,7 +47,12 @@ addParameters({
     inlineStories: false,
     page: noArgsDocsPage
   },
-  version: versionInfo
+  version: versionInfo,
+  options: {
+    storySort: {
+      order: ['stories']
+    }
+  }
 });
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);