Re-arrange Story stories

code/ui/blocks/src/blocks/Story.stories.tsx

@@ -1,15 +1,14 @@
-/// <reference types="vite/client" />
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Story as StoryBlock } from './Story';
 import * as ButtonStories from '../examples/Button.stories';
 import * as StoryComponentStories from '../components/Story.stories';
+import * as StoryParametersStories from '../examples/StoryParameters.stories';
 
 const meta: Meta<typeof StoryBlock> = {
   component: StoryBlock,
   parameters: {
-    relativeCsfPaths: ['../examples/Button.stories', '../blocks/Story.stories'],
+    relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'],
   },
 };
 export default meta;
@@ -29,55 +28,9 @@ export const OfWithMeta: Story = {
   },
 };
 
-const blocksAwareId = `${
-  import.meta.env.STORYBOOK_BLOCKS_ONLY === 'true' ? '' : 'storybook-blocks-'
-}examples-button--primary`;
-
-export const Id: Story = {
-  args: {
-    id: blocksAwareId,
-  },
-};
-
-export const Name: Story = {
-  args: {
-    name: 'Secondary',
-  },
-};
-
-export const SimpleSizeTest: Story = {
-  render: () => {
-    return (
-      <div
-        style={{
-          background: '#fd5c9355',
-          padding: '3rem',
-          height: '500px',
-          width: '800px',
-          // a global decorator is applying a default padding that we want to negate here
-          margin: '-4rem -20px',
-        }}
-      >
-        <p>
-          This story does nothing. Its only purpose is to show how its size renders in different
-          conditions (inline/iframe/fixed height) when used in a <code>{'<Story />'}</code> block.
-        </p>
-        <p>
-          It has a fixed <code>height</code> of <code>500px</code> and a fixed <code>width</code> of{' '}
-          <code>800px</code>
-        </p>
-      </div>
-    );
-  },
-  parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
 export const Inline: Story = {
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: true,
   },
 };
@@ -85,25 +38,16 @@ export const Inline: Story = {
 export const InlineWithHeightProps: Story = {
   ...Inline,
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: true,
     height: '600px',
   },
 };
 
-export const SimpleSizeTestWithHeightParameter = {
-  ...SimpleSizeTest,
-  parameters: {
-    docs: { story: { height: '600px' } },
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
 export const InlineWithHeightParameter: Story = {
   ...Inline,
   args: {
-    of: SimpleSizeTestWithHeightParameter,
+    of: StoryParametersStories.Height,
   },
 };
 
@@ -111,65 +55,42 @@ export const IFrameProps: Story = {
   ...Inline,
   name: 'IFrame Props',
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: false,
   },
 };
 
-export const SimpleSizeTestWithIFrameParameter = {
-  ...SimpleSizeTest,
-  parameters: { docs: { story: { inline: false } } },
-};
-
-export const IframeWithParameter: Story = {
+export const IFrameWithParameter: Story = {
   ...Inline,
   name: 'IFrame With Parameter',
   args: {
-    of: SimpleSizeTestWithIFrameParameter,
+    of: StoryParametersStories.InlineFalse,
   },
 };
 
-export const IframeWithHeightProps: Story = {
+export const IFrameWithHeightProps: Story = {
   ...Inline,
   name: 'IFrame With Height Props',
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: false,
     height: '300px',
   },
 };
 
-export const SimpleSizeTestWithIFrameAndIFrameHeightParameter = {
-  ...SimpleSizeTest,
-  parameters: {
-    docs: { story: { inline: false, iframeHeight: '300px' } },
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
-export const IFrameWithIFrameHeightParameter: Story = {
-  ...Inline,
-  name: 'IFrame With IFrame Height Parameter',
-  args: {
-    of: SimpleSizeTestWithIFrameAndIFrameHeightParameter,
-  },
-};
-
-export const SimpleSizeTestWithIFrameAndHeightParameter = {
-  ...SimpleSizeTest,
-  parameters: {
-    docs: { story: { inline: false, height: '300px' } },
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
 export const IFrameWithHeightParameter: Story = {
   ...Inline,
   name: 'IFrame With Height Parameter',
   args: {
-    of: SimpleSizeTestWithIFrameAndHeightParameter,
+    of: StoryParametersStories.InlineFalseWithHeight,
+  },
+};
+
+export const IFrameWithIFrameHeightParameter: Story = {
+  ...Inline,
+  name: 'IFrame With IFrame Height Parameter',
+  args: {
+    of: StoryParametersStories.InlineFalseWithIframeHeight,
   },
 };
 
@@ -192,7 +113,7 @@ export const WithInteractionsAutoplayInProps: Story = {
   },
 };
 
-export const WithInteractionsAutoplayInStory: Story = {
+export const WithInteractionsAutoplayInParameters: Story = {
   args: {
     of: ButtonStories.ClickingInDocs,
   },

code/ui/blocks/src/blocks/Story.tsx

@@ -110,11 +110,6 @@ export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryI
   return id || context.storyIdByName(name);
 };
 
-// Find the first option that isn't undefined
-function getProp<T>(...options: (T | undefined)[]) {
-  return options.find((option) => typeof option !== 'undefined');
-}
-
 export const getStoryProps = <TFramework extends Renderer>(
   props: StoryParameters,
   story: PreparedStory<TFramework>,
@@ -139,7 +134,7 @@ export const getStoryProps = <TFramework extends Renderer>(
   };
   if (typeof inlineStories !== 'undefined')
     deprecate('The `docs.inlineStories` parameter is deprecated, use `docs.story.inline` instead');
-  const inline = getProp(props.inline, storyParameters.inline, inlineStories) || false;
+  const inline = props.inline ?? storyParameters.inline ?? inlineStories ?? false;
 
   if (typeof iframeHeight !== 'undefined')
     deprecate(
@@ -147,8 +142,8 @@ export const getStoryProps = <TFramework extends Renderer>(
     );
 
   if (inline) {
-    const height = getProp(props.height, storyParameters.height);
-    const autoplay = getProp(props.autoplay, storyParameters.autoplay) || false;
+    const height = props.height ?? storyParameters.height;
+    const autoplay = props.autoplay ?? storyParameters.autoplay ?? false;
     return {
       story,
       inline: true,
@@ -163,7 +158,10 @@ export const getStoryProps = <TFramework extends Renderer>(
   }
 
   const height =
-    getProp(props.height, storyParameters.height, storyParameters.iframeHeight, iframeHeight) ||
+    props.height ??
+    storyParameters.height ??
+    storyParameters.iframeHeight ??
+    iframeHeight ??
     '100px';
   return {
     story,

code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx

@@ -10,7 +10,6 @@ import * as ButtonStories from '../../examples/Button.stories';
 import * as CanvasParameterStories from '../../examples/CanvasParameters.stories';
 
 const meta: Meta<typeof Canvas> = {
-  title: 'Blocks/Internal/Canvas',
   component: Canvas,
   parameters: {
     theme: 'light',

code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx

@@ -4,7 +4,6 @@ import { Description, DescriptionType } from '../Description';
 import { Button } from '../../examples/Button';
 
 const meta: Meta<typeof Description> = {
-  title: 'Blocks/Internal/Description',
   component: Description,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],

code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Source } from '../Source';
 
 const meta: Meta<typeof Source> = {
-  title: 'Blocks/Internal/Source',
   component: Source,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],

code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Story as StoryBlock } from '../Story';
@@ -18,3 +19,19 @@ export const StoryExport: Story = {
     story: ButtonStories.Primary,
   },
 };
+
+const blocksAwareId = `${
+  import.meta.env.STORYBOOK_BLOCKS_ONLY === 'true' ? '' : 'storybook-blocks-'
+}examples-button--primary`;
+
+export const Id: Story = {
+  args: {
+    id: blocksAwareId,
+  },
+};
+
+export const Name: Story = {
+  args: {
+    name: 'Secondary',
+  },
+};

code/ui/blocks/src/examples/SimpleSizeTest.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const SimpleSizeTest = () => {
+  return (
+    <div
+      style={{
+        background: '#fd5c9355',
+        padding: '3rem',
+        height: '500px',
+        width: '800px',
+        // a global decorator is applying a default padding that we want to negate here
+        margin: '-4rem -20px',
+      }}
+    >
+      <p>
+        This story does nothing. Its only purpose is to show how its size renders in different
+        conditions (inline/iframe/fixed height) when used in a <code>{'<Story />'}</code> block.
+      </p>
+      <p>
+        It has a fixed <code>height</code> of <code>500px</code> and a fixed <code>width</code> of{' '}
+        <code>800px</code>
+      </p>
+    </div>
+  );
+};

code/ui/blocks/src/examples/StoryParameters.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SimpleSizeTest } from './SimpleSizeTest';
+
+const meta = {
+  title: 'examples/Stories for the Story Block',
+  component: SimpleSizeTest,
+  // Stop *this* story from being stacked in Chromatic (we want the caller to stack though)
+  parameters: { theme: 'default' },
+} satisfies Meta<typeof SimpleSizeTest>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NoParameters: Story = {};
+
+export const Height: Story = { parameters: { docs: { story: { height: '600px' } } } };
+
+export const InlineFalse: Story = { parameters: { docs: { story: { inline: false } } } };
+
+export const InlineFalseWithIframeHeight: Story = {
+  parameters: { docs: { story: { inline: false, iframeHeight: '300px' } } },
+};
+
+export const InlineFalseWithHeight: Story = {
+  parameters: { docs: { story: { inline: false, height: '300px' } } },
+};