Doc Blocks: Fix styling and parameter bugs

code/frameworks/sveltekit/README.md

@@ -23,20 +23,20 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
 All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
 However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:
 
-| **Module**                                                                         | **Status**                                                                                        | **Note**                                                                                                                |
-| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported                                                                                      | `version` is always empty in Storybook.                                                                                 |
-| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Planned for 7.1                                                                                | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `applyAction` depends on the client singleton having been initialized in SvelteKit's `singletons.js`. |
+| **Module**                                                                         | **Status**                                                                                        | **Note**                                                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported                                                                                      | `version` is always empty in Storybook.                                                                                                                                                                                            |
+| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Planned for 7.1                                                                                | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `applyAction` depends on the client singleton having been initialized in SvelteKit's `singletons.js`.     |
 | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `$app/navigation` depends on the client singleton having been initialized in SvelteKit's `singletons.js`. |
-| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ⏳ Planned for 7.1.                                                                               | These are global variables set in SvelteKit's `runtime/shared.js`                                                                                                                         |
-| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported                                                                                      | Mocks planned for 7.1, so you can set different store values per story.                                                 |
-| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                    |
-| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported                                                                            | Only supported in development mode.                                                                                     |
-| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                    |
-| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | ✅ Supported                                                                                      |                                                                                                                         |
-| [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | ✅ Supported                                                                                      |                                                                                                                         |
-| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker)           | ⛔ Not supported                                                                                  | They are only meant to be used in service workers                                                                       |
-| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit)              | ✅ Supported                                                                                      |                                                                                                                         |
+| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ⏳ Planned for 7.1.                                                                               | These are global variables set in SvelteKit's `runtime/shared.js`                                                                                                                                                                  |
+| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ✅ Supported                                                                                      | Mocks planned for 7.1, so you can set different store values per story.                                                                                                                                                            |
+| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                                                                                                                               |
+| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported                                                                            | Only supported in development mode.                                                                                                                                                                                                |
+| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported                                                                                  | They are meant to only be available server-side, and Storybook renders all components on the client.                                                                                                                               |
+| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | ✅ Supported                                                                                      |                                                                                                                                                                                                                                    |
+| [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | ✅ Supported                                                                                      |                                                                                                                                                                                                                                    |
+| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker)           | ⛔ Not supported                                                                                  | They are only meant to be used in service workers                                                                                                                                                                                  |
+| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit)              | ✅ Supported                                                                                      |                                                                                                                                                                                                                                    |
 
 This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
 

code/ui/blocks/src/blocks/DocsStory.tsx

@@ -10,12 +10,15 @@ import { useOf } from './useOf';
 export const DocsStory: FC<DocsStoryProps> = ({
   of,
   expanded = true,
-  withToolbar = false,
+  withToolbar: withToolbarProp = false,
   __forceInitialArgs = false,
   __primary = false,
 }) => {
   const { story } = useOf(of || 'story', ['story']);
 
+  // use withToolbar from parameters or default to true in autodocs
+  const withToolbar = story.parameters.docs?.canvas?.withToolbar ?? withToolbarProp;
+
   return (
     <Anchor storyId={story.id}>
       {expanded && (

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Primary } from './Primary';
+
+const meta = {
+  component: Primary,
+} satisfies Meta<typeof Primary>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+export const WithoutToolbar: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/StoriesParameters.stories'],
+  },
+};

code/ui/blocks/src/blocks/Primary.tsx

@@ -23,6 +23,6 @@ export const Primary: FC<PrimaryProps> = ({ name }) => {
   const storyId = name && docsContext.storyIdByName(name);
   const story = docsContext.storyById(storyId);
   return story ? (
-    <DocsStory of={story.moduleExport} expanded={false} withToolbar __primary />
+    <DocsStory of={story.moduleExport} expanded={false} __primary withToolbar />
   ) : null;
 };

code/ui/blocks/src/blocks/Source.tsx

@@ -118,8 +118,7 @@ export const useSourceProps = (
       // Always fall back to the primary story for source parameters, even if code is set.
       stories = [docsContext.storyById()];
     } catch (err) {
-      // You are allowed to use <Story code="..." /> unattached.
-      if (!props.code) throw err;
+      // You are allowed to use <Source code="..." /> and <Canvas /> unattached.
     }
   }
 

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Stories } from './Stories';
+
+const meta = {
+  component: Stories,
+} satisfies Meta<typeof Stories>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+export const WithoutPrimary: Story = {
+  args: { includePrimary: false },
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+export const DifferentToolbars: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/StoriesParameters.stories'],
+  },
+};

code/ui/blocks/src/blocks/Unstyled.mdx

@@ -8,11 +8,19 @@ However sometimes you might want some of your content to not have these styles a
 ```md
 import { Unstyled } from '@storybook/blocks';
 
+# This heading will be styled
+
+<h2>So will this subheading</h2>
+
 > This block quote will be styled
 
 ... and so will this paragraph.
 
 <Unstyled>
+  # This heading will not be styled
+
+  <h2>Neither will this subheading</h2>
+
   > This block quote will not be styled
 
   ... neither will this paragraph, nor the following component:
@@ -22,11 +30,19 @@ import { Unstyled } from '@storybook/blocks';
 
 Yields: 
 
+# This heading will be styled
+
+<h2>So will this subheading</h2>
+
 > This block quote will be styled
 
 ... and so will this paragraph.
 
 <Unstyled>
+  # This heading will not be styled
+
+  <h2>Neither will this subheading</h2>
+
   > This block quote will not be styled
 
   ... neither will this paragraph, nor the following component:

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

@@ -50,6 +50,23 @@ export const BasicStoryChildUnattached: Story = {
   parameters: { attached: false },
 };
 
+export const NoStoryChildrenUnattached: Story = {
+  parameters: { attached: false },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <p>This is a plain paragraph, no stories</p>
+      </Canvas>
+    );
+  },
+};
+export const NoStoryChildrenUnattachedWithMDXSource: Story = {
+  ...NoStoryChildrenUnattached,
+  args: {
+    mdxSource: `const customStaticSource = true;`,
+  },
+};
+
 export const WithSourceOpen: Story = {
   args: {
     withSource: SourceState.OPEN,

code/ui/blocks/src/blocks/mdx.tsx

@@ -1,7 +1,7 @@
 import type { FC, SyntheticEvent } from 'react';
 import React, { useContext } from 'react';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { Code, components } from '@storybook/components';
+import { Code, components, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
 import { Source } from '../components';
@@ -120,13 +120,12 @@ export const AnchorMdx: FC<AnchorMdxProps> = (props) => {
   return <A {...props} />;
 };
 
-const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 
 const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
-    // @ts-expect-error (Converted from ts-ignore)
-    [headerType]: styled(components[headerType])({
+    [headerType]: styled(headerType)({
       '& svg': {
         visibility: 'hidden',
       },
@@ -213,12 +212,10 @@ export const HeaderMdx: FC<HeaderMdxProps> = (props) => {
       </HeaderWithOcticonAnchor>
     );
   }
-
-  // @ts-expect-error (Converted from ts-ignore)
-  const Header = components[as];
-
   // Make sure it still work if "remark-slug" plugin is not present.
-  return <Header {...props} />;
+  const Component = as as React.ElementType;
+  const { as: omittedAs, ...withoutAs } = props;
+  return <Component {...nameSpaceClassNames(withoutAs, as)} />;
 };
 
 export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(

code/ui/blocks/src/components/DocsPage.tsx

@@ -70,6 +70,7 @@ export const Subtitle = styled.h2(withReset, ({ theme }) => ({
   color: transparentize(0.25, theme.color.defaultText),
 }));
 
+// @ts-expect-error don't know why it doesn't accept our returned styles. if we add `...{}` anywhere to the returned object it stops erroring
 export const DocsContent = styled.div(({ theme }) => {
   const reset = {
     fontFamily: theme.typography.fonts.base,
@@ -121,8 +122,6 @@ export const DocsContent = styled.div(({ theme }) => {
   return {
     maxWidth: 1000,
     width: '100%',
-
-    ...reset,
     [toGlobalSelector('a')]: {
       ...reset,
       fontSize: 'inherit',

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EmptyExample } from './EmptyExample';
+
+const meta = {
+  title: 'examples/Stories for the Stories and Primary Block',
+  component: EmptyExample,
+} satisfies Meta<typeof EmptyExample>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithoutToolbar: Story = {
+  parameters: { docs: { canvas: { withToolbar: false } } },
+};
+
+export const WithToolbar: Story = {
+  parameters: { docs: { canvas: { withToolbar: true } } },
+};
+export const ThirdStory: Story = {};