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]>
microsoftgraph · Aug 21, 2023 · e9a1d77 · e9a1d77
1 parent e3628e5
commit e9a1d77
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 75 deletions.
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -71,8 +71,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);
 

diff --git a/.storybook/preview.js b/.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)$/);

diff --git a/stories/components/agenda/agenda.a.js → stories/components/agenda/agenda.stories.js b/stories/components/agenda/agenda.a.js → stories/components/agenda/agenda.stories.js
diff --git a/stories/components/file/file.a.js → stories/components/file/file.stories.js b/stories/components/file/file.a.js → stories/components/file/file.stories.js
diff --git a/stories/components/fileList/fileList.a.js → ...s/components/fileList/fileList.stories.js b/stories/components/fileList/fileList.a.js → ...s/components/fileList/fileList.stories.js
diff --git a/stories/components/people/people.a.js → stories/components/people/people.stories.js b/stories/components/people/people.a.js → stories/components/people/people.stories.js
diff --git a/...components/peoplePicker/peoplePicker.a.js → ...ents/peoplePicker/peoplePicker.stories.js b/...components/peoplePicker/peoplePicker.a.js → ...ents/peoplePicker/peoplePicker.stories.js
diff --git a/...ies/components/personCard/personCard.a.js → ...mponents/personCard/personCard.stories.js b/...ies/components/personCard/personCard.a.js → ...mponents/personCard/personCard.stories.js
diff --git a/...mponents/preview/searchBox/searchBox.a.js → ...ts/preview/searchBox/searchBox.stories.js b/...mponents/preview/searchBox/searchBox.a.js → ...ts/preview/searchBox/searchBox.stories.js
diff --git a/.../preview/searchResults/searchResults.a.js → ...ew/searchResults/searchResults.stories.js b/.../preview/searchResults/searchResults.a.js → ...ew/searchResults/searchResults.stories.js
diff --git a/...eamsChannelPicker/teamsChannelPicker.a.js → ...annelPicker/teamsChannelPicker.stories.js b/...eamsChannelPicker/teamsChannelPicker.a.js → ...annelPicker/teamsChannelPicker.stories.js
diff --git a/stories/samples/general.stories.b.js b/stories/samples/general.stories.b.js
diff --git a/stories/samples/general.stories.a.js → stories/samples/general.stories.js b/stories/samples/general.stories.a.js → stories/samples/general.stories.js
@@ -172,3 +172,54 @@ clearCacheButton.addEventListener('click', onClearCacheButtonClick);
 // };
   </script>
 `;
+
+export const theme = () => html`
+<div>
+  <p>This demonstrates how to set the theme globally without using a theme toggle and customize styling within specific scopes</p>
+  <p>Please refer to the JS and CSS tabs in the editor for implentation details</p>
+  <mgt-login></mgt-login>
+  <p>This picker shows the custom focus ring color</p>
+  <div class="custom-focus">
+    <mgt-people-picker></mgt-people-picker>
+  </div>
+  <article>
+    <p>I use the theme set on the body</p>
+    <mgt-teams-channel-picker></mgt-teams-channel-picker>
+  </article>
+  <p>I am custom themed, take care to ensure that your customizations maintain accessibility standards</p>
+  <mgt-teams-channel-picker class="custom1"></mgt-teams-channel-picker>
+</div>
+<script>
+import { applyTheme } from '@microsoft/mgt';
+const body = document.querySelector('body');
+if(body) applyTheme('dark', body);
+</script>
+<style>
+body {
+  background-color: var(--fill-color);
+  color: var(--neutral-foreground-rest);
+  font-family: var(--body-font);
+}
+.custom-focus {
+  --focus-ring-color: red;
+  --focus-ring-style: solid;
+}
+.custom1 {
+  --channel-picker-input-border: 2px solid teal;
+  --channel-picker-input-background-color: black;
+  --channel-picker-input-background-color-hover: #1a1a1a;
+  --channel-picker-search-icon-color: yellow;
+  --channel-picker-close-icon-color: yellow;
+  --channel-picker-down-chevron-color: yellow;
+  --channel-picker-up-chevron-color: yellow;
+  --channel-picker-input-placeholder-text-color: white;
+  --channel-picker-input-placeholder-text-color-focus: yellow;
+  --channel-picker-input-placeholder-text-color-hover: chartreuse;
+  --channel-picker-dropdown-background-color: #008383;
+  --channel-picker-dropdown-item-background-color-hover: #006363;
+  --channel-picker-font-color: white;
+  --channel-picker-placeholder-default-color: white;
+  --channel-picker-placeholder-focus-color: #441540;
+}
+</style>
+`;