diff --git a/.storybook/preview.js b/.storybook/preview.js index 3d0148fd7..ac2324769 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -7,51 +7,6 @@ import '../src/index-with-dependencies.scss'; import './preview.scss'; const breakpoints = tokens.size.breakpoint; -/** - * The parameters for Storybook sorting functions are sparsely documented. - * Including a detailed type definition in lieu of clear documentation to - * link to. - * @see https://github.com/storybookjs/storybook/blob/4f65ccb38dc724a7a9ea15935ef11dbad7cc8657/lib/client-api/src/types.ts#L33-L40 - * @see https://github.com/storybookjs/storybook/blob/b6136e1539c85d253504391a7d3f65e2c1239143/lib/addons/src/types.ts#L49-L53 - * @typedef { [String, import('@storybook/client-api/dist/types').StoreItem] } StoryItem - */ - -/** - * Get the category from a story (StoryItem) - * @param {StoryItem} story - * @returns {string} - Story's category, the first part of the `StoreItem.kind` - * value, which is a string delimited with forward slashes - */ -const getStoryCategory = (story) => story[1].kind.split('/')[0]; - -/** - * Define an ordered list of story categories. These should match the first part - * of the `` component's `title` attribute found in each story (`.mdx` file). - * The order of categories will determine the display order of the top-level - * menu items in Storybook . - */ -const orderedCategories = [ - 'Getting Started', - 'Design', - 'Design Tokens', - 'Objects', - 'Components', - 'Utilities', - 'Vendor', - 'Prototypes', -]; - -/** - * Compares two stories and sorts by category, according to the predefined order - * @param {StoryItem} a - * @param {StoryItem} b - */ -const storySort = (a, b) => { - const indexA = orderedCategories.indexOf(getStoryCategory(a)); - const indexB = orderedCategories.indexOf(getStoryCategory(b)); - return indexA === indexB ? 0 : indexA > indexB ? 1 : -1; -}; - // Padding values from modular scale const paddings = { values: [], default: 'Step 0' }; for (let i = -3; i <= 6; i++) { @@ -86,8 +41,23 @@ export const parameters = { themes: [ { name: 'Dark', class: 't-dark', color: tokens.color.brand.primary.value }, ], - // Sort stories according to preferred top-level settings - options: { storySort }, + options: { + storySort: { + method: 'alphabetical', + order: [ + 'Getting Started', + 'Design', + 'Objects', + 'Components', + 'Utilities', + 'Combos', + 'Compositions', + 'Sass', + 'Vendor', + 'Prototypes', + ], + }, + }, docs: { // Docs support for inlining plain HTML stories // https://github.com/storybookjs/storybook/blob/v6.0.21/addons/docs/docs/docspage.md#inline-stories-vs-iframe-stories