Skip to content

Commit

Permalink
fix(svelte): controls not rendering in variant > controls slot
Browse files Browse the repository at this point in the history
  • Loading branch information
Akryum committed Oct 26, 2022
1 parent df859a9 commit c88c5d8
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 2 deletions.
12 changes: 12 additions & 0 deletions examples/svelte3/cypress/e2e/render-story.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)', () => {
Expand All @@ -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')
})
})
32 changes: 32 additions & 0 deletions examples/svelte3/src/ControlsVariant.story.svelte
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -26,6 +27,14 @@ function updateVariant () {
setupApp,
configReady: true,
})
if (!implicit && !story.meta?.hasVariantChildComponents) {
Object.assign(story, {
meta: {
hasVariantChildComponents: true,
},
})
}
}
updateVariant()
Expand Down
Original file line number Diff line number Diff line change
@@ -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 }
Expand All @@ -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}
2 changes: 2 additions & 0 deletions packages/histoire-shared/src/types/story.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export interface Story {
file?: StoryFile
lastSelectedVariant?: Variant
slots?: () => any
meta?: any
}

export interface Variant {
Expand All @@ -67,6 +68,7 @@ export interface Variant {
autoPropsDisabled?: boolean
configReady?: boolean
previewReady?: boolean
meta?: any
}

export interface PropDefinition {
Expand Down

0 comments on commit c88c5d8

Please sign in to comment.