diff --git a/examples/svelte3/cypress/e2e/render-story.cy.js b/examples/svelte3/cypress/e2e/render-story.cy.js
index 26040580..c12a0667 100644
--- a/examples/svelte3/cypress/e2e/render-story.cy.js
+++ b/examples/svelte3/cypress/e2e/render-story.cy.js
@@ -29,6 +29,7 @@ describe('Controls render', () => {
cy.get('[data-test-id="story-controls"]').contains('Disabled')
cy.get('[data-test-id="story-controls"] [role="checkbox"]').should('be.visible')
cy.get('[data-test-id="story-controls"]').contains('Size')
+ cy.get('[data-test-id="story-controls"]').should('not.contain', 'Click me!')
})
it('should display the controls content (shared controls slot)', () => {
@@ -39,4 +40,15 @@ describe('Controls render', () => {
cy.get('[data-test-id="story-controls"]').contains('Disabled')
cy.get('[data-test-id="story-controls"] [role="checkbox"]').should('be.visible')
})
+
+ it('should display the controls content (variant controls slot)', () => {
+ cy.visit('/story/src-controlsvariant-story-svelte?variantId=src-controlsvariant-story-svelte-0')
+ cy.get('[data-test-id="story-controls"]').contains('Content 1')
+ cy.get('[data-test-id="story-controls"]').contains('Disabled 1')
+ cy.get('[data-test-id="story-controls"] [role="checkbox"]').should('be.visible')
+ cy.visit('/story/src-controlsvariant-story-svelte?variantId=src-controlsvariant-story-svelte-1')
+ cy.get('[data-test-id="story-controls"]').contains('Content 2')
+ cy.get('[data-test-id="story-controls"]').contains('Disabled 2')
+ cy.get('[data-test-id="story-controls"] [role="checkbox"]').should('be.visible')
+ })
})
diff --git a/examples/svelte3/src/ControlsVariant.story.svelte b/examples/svelte3/src/ControlsVariant.story.svelte
new file mode 100644
index 00000000..df7437d3
--- /dev/null
+++ b/examples/svelte3/src/ControlsVariant.story.svelte
@@ -0,0 +1,32 @@
+
+
+
+
+
+ {content} 1
+
+
+
+
+
+
+
+
+
+
+ {content} 2
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/histoire-plugin-svelte/src/client/MountStory.svelte b/packages/histoire-plugin-svelte/src/client/MountStory.svelte
index f75a4470..7358017c 100644
--- a/packages/histoire-plugin-svelte/src/client/MountStory.svelte
+++ b/packages/histoire-plugin-svelte/src/client/MountStory.svelte
@@ -15,7 +15,7 @@ $: inheritedFromStory = Object.keys(story).filter(key => !omitInheritStoryProps.
{#if story.variants.length === 1 && story.variants[0].id === '_default'}
-
+
diff --git a/packages/histoire-plugin-svelte/src/client/MountVariant.svelte b/packages/histoire-plugin-svelte/src/client/MountVariant.svelte
index 15641344..59d361a6 100644
--- a/packages/histoire-plugin-svelte/src/client/MountVariant.svelte
+++ b/packages/histoire-plugin-svelte/src/client/MountVariant.svelte
@@ -6,6 +6,7 @@ export let source: string = null
export let responsiveDisabled: boolean = false
export let autoPropsDisabled: boolean = false
export let setupApp: Function = null
+export let implicit: boolean = false
const story: Story = getContext('__hstStory')
const index: { value: number } = getContext('__hstIndex')
@@ -26,6 +27,14 @@ function updateVariant () {
setupApp,
configReady: true,
})
+
+ if (!implicit && !story.meta?.hasVariantChildComponents) {
+ Object.assign(story, {
+ meta: {
+ hasVariantChildComponents: true,
+ },
+ })
+ }
}
updateVariant()
diff --git a/packages/histoire-plugin-svelte/src/client/RenderStory.svelte b/packages/histoire-plugin-svelte/src/client/RenderStory.svelte
index 150c97fd..8538bb04 100644
--- a/packages/histoire-plugin-svelte/src/client/RenderStory.svelte
+++ b/packages/histoire-plugin-svelte/src/client/RenderStory.svelte
@@ -1,6 +1,8 @@