diff --git a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts b/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts deleted file mode 100644 index 40f34ceafcd..00000000000 --- a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { addParameters } from '@storybook/angular'; -import type { Meta, StoryFn } from '@storybook/angular'; -import { Button } from '../../angular-demo'; - -const globalParameter = 'globalParameter'; -const chapterParameter = 'chapterParameter'; -const storyParameter = 'storyParameter'; - -addParameters({ globalParameter }); - -export default { - title: 'Core / Parameters / All parameters', - parameters: { - chapterParameter, - }, -} as Meta; - -export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({ - component: Button, - props: { - text: `Parameters are ${JSON.stringify(parameters, null, 2)}`, - onClick: () => 0, - }, -}); - -PassedToStory.storyName = 'All parameters passed to story'; -PassedToStory.parameters = { storyParameter }; diff --git a/code/examples/official-storybook/stories/core/parameters.stories.js b/code/examples/official-storybook/stories/core/parameters.stories.js deleted file mode 100644 index f98c478beae..00000000000 --- a/code/examples/official-storybook/stories/core/parameters.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -// We would need to add this in config.js idiomatically however that would make this file a bit confusing -import { addParameters } from '@storybook/react'; - -addParameters({ globalParameter: 'globalParameter' }); - -export default { - title: 'Core/Parameters', - parameters: { - chapterParameter: 'chapterParameter', - }, -}; - -// I'm not sure what we should recommend regarding propTypes? are they a good idea for examples? -// Given we sort of control the props, should we export a prop type? -export const Passed = (_args, { parameters: { options, fileName, ...parameters }, ...rest }) => ( -
- Parameters: -
{JSON.stringify(parameters, null, 2)}
-
-); -Passed.storyName = 'passed to story'; -Passed.parameters = { storyParameter: 'storyParameter' }; diff --git a/code/lib/store/template/stories/parameters.stories.ts b/code/lib/store/template/stories/parameters.stories.ts new file mode 100644 index 00000000000..bdb5422a914 --- /dev/null +++ b/code/lib/store/template/stories/parameters.stories.ts @@ -0,0 +1,51 @@ +import globalThis from 'global'; +import { PlayFunctionContext, StoryContext } from '@storybook/csf'; +import { within } from '@storybook/testing-library'; +import { expect } from '@storybook/jest'; + +// TODO: is there some way to define a project-level annotation in sandboxes? + +export default { + component: globalThis.Components.Code, + parameters: { + componentParameter: 'componentParameter', + storyParameter: 'componentStoryParameter', // Checking this gets overridden + storyObject: { + a: 'component', + b: 'component', + }, + }, +}; + +export const Inheritance = { + parameters: { + storyParameter: 'storyParameter', + storyObject: { + a: 'story', + }, + }, + render: (_: any, context: StoryContext) => { + const { componentParameter, storyParameter, storyObject } = context.parameters; + return globalThis.Components.render( + { code: JSON.stringify({ componentParameter, storyParameter, storyObject }, null, 2) }, + context + ); + }, + play: async ({ canvasElement }: PlayFunctionContext) => { + const canvas = within(canvasElement); + await expect(canvas.getByTestId('code').innerHTML).toEqual( + JSON.stringify( + { + componentParameter: 'componentParameter', + storyParameter: 'storyParameter', + storyObject: { + a: 'story', + b: 'component', + }, + }, + null, + 2 + ) + ); + }, +};