Added code snippets for sharing.

docs/sharing/design-integrations.md

@@ -109,6 +109,8 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des
     'svelte/component-story-figma-integration.js.mdx',
     'web-components/component-story-figma-integration.js.mdx',
     'web-components/component-story-figma-integration.ts.mdx',
+    'solid/component-story-figma-integration.js.mdx',
+    'solid/component-story-figma-integration.ts.mdx',
   ]}
   usesCsf3
   csf2Path="sharing/design-integrations#snippet-component-story-figma-integration"

docs/snippets/solid/component-story-figma-integration.js.mdx

@@ -0,0 +1,23 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+export default {
+  title: 'FigmaExample',
+  component: MyComponent,
+  decorators: [withDesign],
+};
+
+export const Example = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```

docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx

@@ -0,0 +1,28 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'FigmaExample',
+  component: MyComponent,
+  decorators: [withDesign],
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```

docs/snippets/solid/component-story-figma-integration.ts.mdx

@@ -0,0 +1,28 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+const meta: Meta<typeof MyComponent> = {
+  title: 'FigmaExample',
+  component: MyComponent,
+  decorators: [withDesign],
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```

docs/snippets/solid/component-story-with-accessibility.js.mdx

@@ -0,0 +1,32 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
+  title: 'Accessibility testing',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// This is an accessible story
+export const Accessible = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```

docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx

@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
+  title: 'Accessibility testing',
+
+  component: Button,
+
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```

docs/snippets/solid/component-story-with-accessibility.ts.mdx

@@ -0,0 +1,37 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
+  title: 'Accessibility testing',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```

docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx

@@ -0,0 +1,39 @@
+```md
+<!-- Badge.stories.mdx -->
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { Badge } from './Badge';
+
+<Meta title="MDX/Badge" component={Badge} />
+
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/solid/api/csf
+  to learn how to use render functions.
+-->
+
+<Canvas>
+  <Story 
+    name="warning"
+    args={{
+      status: 'warning', 
+      label: 'Warning',
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story 
+    name="neutral"
+    args={{
+      status: 'neutral', 
+      label: 'Neutral',
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story 
+    name="error"
+    args={{
+      status: 'error', 
+      label: 'Error',
+    }}
+    render={(args) => <Badge {...args } />} />
+</Canvas>
+```

docs/writing-docs/doc-block-canvas.md

@@ -44,6 +44,7 @@ If you want, you can also group multiple stories and render them inside a single
     'vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx',
     'vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx',
     'svelte/mdx-canvas-multiple-stories.mdx.mdx',
+    'solid/mdx-canvas-multiple-stories.mdx.mdx',
   ]}
   usesCsf3
   csf2Path="writing-docs/doc-block-canvas#snippet-mdx-canvas-multiple-stories"

docs/writing-tests/interaction-testing.md

@@ -67,6 +67,8 @@ The test itself is defined inside a `play` function connected to a story. Here's
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-tests/interaction-testing#snippet-login-form-with-play-function"