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 @@