Skip to content

Commit

Permalink
Merge pull request #29628 from storybookjs/docs_additional_polish_sve…
Browse files Browse the repository at this point in the history 
…lte_csf

Docs: Minor fixes to Svelte CSF
  • Loading branch information
@jonniebigodes
jonniebigodes authored Nov 15, 2024
2 parents c7569a6 + 5b10679 commit 2719b7e
Show file tree
Hide file tree
Showing 36 changed files with 98 additions and 156 deletions.
3 changes: 1 addition & 2 deletions docs/_snippets/arg-types-in-story.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const meta = {

export default meta;

type Story = StoryObj<typeof Meta>;
type Story = StoryObj<typeof meta>;

export const Basic = {
argTypes: {
Expand Down Expand Up @@ -126,4 +126,3 @@ export const Basic: Story = {
},
};
```

54 changes: 3 additions & 51 deletions docs/_snippets/button-group-story.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,28 +175,12 @@ export const Pair: Story = {
</script>
<Story
name="Primary"
name="Pair"
args={{
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
}}
/>
<Story
name="Secondary"
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
/>
<Story
name="Tertiary"
args={{
backgroundColor:'#ff0',
label: '📚📕📈🤓',
}}
/>
```

```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
Expand Down Expand Up @@ -232,28 +216,12 @@ export const Pair = {
</script>
<Story
name="Primary"
name="Pair"
args={{
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
}}
/>
<Story
name="Secondary"
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
/>
<Story
name="Tertiary"
args={{
backgroundColor:'#ff0',
label: '📚📕📈🤓',
}}
/>
```

```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
Expand Down Expand Up @@ -294,28 +262,12 @@ export const Pair: Story = {
</script>
<Story
name="Primary"
name="Pair"
args={{
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
}}
/>
<Story
name="Secondary"
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
/>
<Story
name="Tertiary"
args={{
backgroundColor:'#ff0',
label: '📚📕📈🤓',
}}
/>
```

```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
Expand Down
8 changes: 3 additions & 5 deletions docs/_snippets/button-story-component-decorator.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export default meta;
const { Story } = defineMeta({
component: Button,
decorators: [() => MarginDecorators],
decorators: [() => MarginDecorator],
});
</script>
```
Expand All @@ -223,7 +223,7 @@ export default {
const { Story } = defineMeta({
component: Button,
decorators: [() => MarginDecorators],
decorators: [() => MarginDecorator],
});
</script>
```
Expand Down Expand Up @@ -251,9 +251,7 @@ export default meta;
const { Story } = defineMeta({
component: Button,
decorators: [() => ({
Component: MarginDecorator,
})],
decorators: [() => MarginDecorator],
});
</script>
```
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/button-story-using-args.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ export const Tertiary: Story = {
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
}}
/>
<Story
Expand Down Expand Up @@ -401,7 +401,7 @@ export const Tertiary = {
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
}}
/>
<Story
Expand Down Expand Up @@ -471,7 +471,7 @@ export const Tertiary: Story = {
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
}}
/>
<Story
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/button-story-with-emojis.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ export const Tertiary: Story = {

```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
Expand Down Expand Up @@ -344,7 +344,7 @@ export const Tertiary = {

```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
Expand Down Expand Up @@ -416,7 +416,7 @@ export const Tertiary: Story = {

```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/button-story.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ export const Primary: Story = {

```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
Expand All @@ -465,7 +465,7 @@ export const Primary: Story = {

```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
Expand Down Expand Up @@ -507,7 +507,7 @@ export const Primary: Story = {

```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/component-story-custom-args-mapping.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default meta;
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './components/Button.svelte';
import Button from './Button.svelte';
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
Expand Down Expand Up @@ -122,7 +122,7 @@ export default {
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './components/Button.svelte';
import Button from './Button.svelte';
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
Expand Down Expand Up @@ -219,7 +219,7 @@ export default meta;
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './components/Button.svelte';
import Button from './Button.svelte';
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/component-story-static-asset-cdn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const WithAnImage: Story = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down Expand Up @@ -163,7 +163,7 @@ export const WithAnImage = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down Expand Up @@ -205,7 +205,7 @@ export const WithAnImage: Story = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/component-story-static-asset-with-import.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export const WithAnImage: Story = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down Expand Up @@ -209,7 +209,7 @@ export const WithAnImage = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down Expand Up @@ -259,7 +259,7 @@ export const WithAnImage: Story = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down
6 changes: 3 additions & 3 deletions docs/_snippets/component-story-static-asset-without-import.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export const WithAnImage: Story = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down Expand Up @@ -156,7 +156,7 @@ export const WithAnImage = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down Expand Up @@ -196,7 +196,7 @@ export const WithAnImage: Story = {

```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from './MyComponent.svelte';
Expand Down
2 changes: 1 addition & 1 deletion docs/_snippets/list-story-starter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export default {
component: List,
};

//Always an empty list, not super interesting
// Always an empty list, not super interesting
export const Empty = {};
```

Expand Down
8 changes: 4 additions & 4 deletions docs/_snippets/my-component-play-function-alt-queries.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const ExampleWithRole: Story = {
import { userEvent, within } from '@storybook/test';
import MyComponent from './MyComponent.svelte';
import MyComponent from './MyComponent.svelte';
const { Story } = defineMeta({
component: MyComponent,
Expand Down Expand Up @@ -103,7 +103,7 @@ export const ExampleWithRole = {
import { userEvent, within } from '@storybook/test';
import MyComponent from './MyComponent.svelte';
import MyComponent from './MyComponent.svelte';
const { Story } = defineMeta({
component: MyComponent,
Expand Down Expand Up @@ -185,7 +185,7 @@ export const ExampleWithRole: Story = {
import { userEvent, within } from '@storybook/test';
import MyComponent from './MyComponent.svelte';
import MyComponent from './MyComponent.svelte';
const { Story } = defineMeta({
component: MyComponent,
Expand All @@ -211,7 +211,7 @@ import type { Meta, StoryObj } from '@storybook/svelte';

import { userEvent, within } from '@storybook/test';

import { MyComponent } from './MyComponent';
import MyComponent from './MyComponent.svelte';

const meta: Meta<typeof MyComponent> = {
component: MyComponent,
Expand Down
Loading

0 comments on commit 2719b7e

Please sign in to comment.