From e9a1d77f037fafdee5a212d6071f30fdb9439e37 Mon Sep 17 00:00:00 2001 From: Musale Martin Date: Thu, 3 Aug 2023 19:16:56 +0300 Subject: [PATCH] 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 * Order options to start with stories files Signed-off-by: Musale Martin * Update pages that the theme toggle should not appear on Signed-off-by: Musale Martin --------- Signed-off-by: Musale Martin --- .../addons/codeEditorAddon/codeAddon.js | 5 +- .storybook/preview.js | 7 +- .../agenda/{agenda.a.js => agenda.stories.js} | 0 .../file/{file.a.js => file.stories.js} | 0 .../{fileList.a.js => fileList.stories.js} | 0 .../people/{people.a.js => people.stories.js} | 0 ...plePicker.a.js => peoplePicker.stories.js} | 0 ...{personCard.a.js => personCard.stories.js} | 0 .../{searchBox.a.js => searchBox.stories.js} | 0 ...hResults.a.js => searchResults.stories.js} | 0 ...ker.a.js => teamsChannelPicker.stories.js} | 0 stories/samples/general.stories.b.js | 72 ------------------- ...eneral.stories.a.js => general.stories.js} | 51 +++++++++++++ 13 files changed, 60 insertions(+), 75 deletions(-) rename stories/components/agenda/{agenda.a.js => agenda.stories.js} (100%) rename stories/components/file/{file.a.js => file.stories.js} (100%) rename stories/components/fileList/{fileList.a.js => fileList.stories.js} (100%) rename stories/components/people/{people.a.js => people.stories.js} (100%) rename stories/components/peoplePicker/{peoplePicker.a.js => peoplePicker.stories.js} (100%) rename stories/components/personCard/{personCard.a.js => personCard.stories.js} (100%) rename stories/components/preview/searchBox/{searchBox.a.js => searchBox.stories.js} (100%) rename stories/components/preview/searchResults/{searchResults.a.js => searchResults.stories.js} (100%) rename stories/components/teamsChannelPicker/{teamsChannelPicker.a.js => teamsChannelPicker.stories.js} (100%) delete mode 100644 stories/samples/general.stories.b.js rename stories/samples/{general.stories.a.js => general.stories.js} (75%) diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js index 71910320f8..bc81a44f3b 100644 --- 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 index 9518088445..1731b26fd7 100644 --- 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 b/stories/components/agenda/agenda.stories.js similarity index 100% rename from stories/components/agenda/agenda.a.js rename to stories/components/agenda/agenda.stories.js diff --git a/stories/components/file/file.a.js b/stories/components/file/file.stories.js similarity index 100% rename from stories/components/file/file.a.js rename to stories/components/file/file.stories.js diff --git a/stories/components/fileList/fileList.a.js b/stories/components/fileList/fileList.stories.js similarity index 100% rename from stories/components/fileList/fileList.a.js rename to stories/components/fileList/fileList.stories.js diff --git a/stories/components/people/people.a.js b/stories/components/people/people.stories.js similarity index 100% rename from stories/components/people/people.a.js rename to stories/components/people/people.stories.js diff --git a/stories/components/peoplePicker/peoplePicker.a.js b/stories/components/peoplePicker/peoplePicker.stories.js similarity index 100% rename from stories/components/peoplePicker/peoplePicker.a.js rename to stories/components/peoplePicker/peoplePicker.stories.js diff --git a/stories/components/personCard/personCard.a.js b/stories/components/personCard/personCard.stories.js similarity index 100% rename from stories/components/personCard/personCard.a.js rename to stories/components/personCard/personCard.stories.js diff --git a/stories/components/preview/searchBox/searchBox.a.js b/stories/components/preview/searchBox/searchBox.stories.js similarity index 100% rename from stories/components/preview/searchBox/searchBox.a.js rename to stories/components/preview/searchBox/searchBox.stories.js diff --git a/stories/components/preview/searchResults/searchResults.a.js b/stories/components/preview/searchResults/searchResults.stories.js similarity index 100% rename from stories/components/preview/searchResults/searchResults.a.js rename to stories/components/preview/searchResults/searchResults.stories.js diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.a.js b/stories/components/teamsChannelPicker/teamsChannelPicker.stories.js similarity index 100% rename from stories/components/teamsChannelPicker/teamsChannelPicker.a.js rename to stories/components/teamsChannelPicker/teamsChannelPicker.stories.js diff --git a/stories/samples/general.stories.b.js b/stories/samples/general.stories.b.js deleted file mode 100644 index 59c139565a..0000000000 --- a/stories/samples/general.stories.b.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * ------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. - * See License in the project root for license information. - * ------------------------------------------------------------------------------------------- - */ - -import { html } from 'lit'; -import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; - -export default { - title: 'Samples / General', - decorators: [ - withCodeEditor({ - disableThemeToggle: true - }) - ], - parameters: { - viewMode: 'story' - } -}; - -export const theme = () => html` -
-

This demonstrates how to set the theme globally without using a theme toggle and customize styling within specific scopes

-

Please refer to the JS and CSS tabs in the editor for implentation details

- -

This picker shows the custom focus ring color

-
- -
-
-

I use the theme set on the body

- -
-

I am custom themed, take care to ensure that your customizations maintain accessibility standards

- -
- - -`; diff --git a/stories/samples/general.stories.a.js b/stories/samples/general.stories.js similarity index 75% rename from stories/samples/general.stories.a.js rename to stories/samples/general.stories.js index 15e8dbc007..86c011bd3c 100644 --- a/stories/samples/general.stories.a.js +++ b/stories/samples/general.stories.js @@ -172,3 +172,54 @@ clearCacheButton.addEventListener('click', onClearCacheButtonClick); // }; `; + +export const theme = () => html` +
+

This demonstrates how to set the theme globally without using a theme toggle and customize styling within specific scopes

+

Please refer to the JS and CSS tabs in the editor for implentation details

+ +

This picker shows the custom focus ring color

+
+ +
+
+

I use the theme set on the body

+ +
+

I am custom themed, take care to ensure that your customizations maintain accessibility standards

+ +
+ + +`;