fix(svelte): controls not rendering in variant > controls slot

histoire-dev · Oct 26, 2022 · c88c5d8 · c88c5d8
1 parent df859a9
commit c88c5d8
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 2 deletions.
diff --git 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
@@ -0,0 +1,32 @@
+<script>
+  import BaseButton from './BaseButton.svelte'
+
+  export let Hst
+
+  let disabled = false
+  let content = 'Hello world'
+</script>
+
+<Hst.Story>
+  <Hst.Variant title="Variant 1">
+    <BaseButton {disabled}>
+      {content} 1
+    </BaseButton>
+
+    <svelte:fragment slot="controls">
+      <Hst.Text bind:value={content} title="Content 1" />
+      <Hst.Checkbox bind:value={disabled} title="Disabled 1" />
+    </svelte:fragment>
+  </Hst.Variant>
+
+  <Hst.Variant title="Variant 2">
+    <BaseButton {disabled}>
+      {content} 2
+    </BaseButton>
+
+    <svelte:fragment slot="controls">
+      <Hst.Text bind:value={content} title="Content 2" />
+      <Hst.Checkbox bind:value={disabled} title="Disabled 2" />
+    </svelte:fragment>
+  </Hst.Variant>
+</Hst.Story>
diff --git 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.
 </script>
 
 {#if story.variants.length === 1 && story.variants[0].id === '_default'}
-  <MountVariant {...inheritedFromStory} {...$$restProps}>
+  <MountVariant {...inheritedFromStory} {...$$restProps} implicit>
     <slot />
     <slot name="controls" slot="controls" />
   </MountVariant>

diff --git 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
@@ -1,6 +1,8 @@
 <script lang="ts">
+import { Story } from '@histoire/shared'
 import { getContext, setContext } from 'svelte'
 
+const story: Story = getContext('__hstStory')
 const slotName: string = getContext('__hstSlot')
 
 let index = { value: 0 }
@@ -10,6 +12,6 @@ setContext('__hstIndex', index)
 {#if slotName === 'controls'}
   <slot name="controls" />
 {/if}
-{#if slotName === 'default'}
+{#if slotName === 'default' || story.meta?.hasVariantChildComponents}
   <slot />
 {/if}
diff --git a/packages/histoire-shared/src/types/story.ts b/packages/histoire-shared/src/types/story.ts
@@ -52,6 +52,7 @@ export interface Story {
   file?: StoryFile
   lastSelectedVariant?: Variant
   slots?: () => any
+  meta?: any
 }
 
 export interface Variant {
@@ -67,6 +68,7 @@ export interface Variant {
   autoPropsDisabled?: boolean
   configReady?: boolean
   previewReady?: boolean
+  meta?: any
 }
 
 export interface PropDefinition {