Last variant source overwriting other in grid layout (svelte)

SergeantWeb commented 11 months ago

Describe the bug

Using Histoire with Svelte(kit), when I create a story with variants, and add a source for each variant, the last one is overwriting all other.

Reproduction

Based on the "meow" example :

<script>
    export let Hst
</script>

<Hst.Story title="Meow" layout={{ type: 'grid', width: '100%' }}>
    <Hst.Variant title="Happy" source="😺">
        😺
    </Hst.Variant>
    <Hst.Variant title="Joy" source="😹">
        😹
    </Hst.Variant>
    <Hst.Variant title="Love" source="😻">
        😻
    </Hst.Variant>
</Hst.Story>

For each variant, the source is "😻"

Tested with Firefox & Chrome

System Info

"@histoire/plugin-svelte": "^0.17.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"@sveltejs/package": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"autoprefixer": "^10.4.16",
"daisyui": "^3.8.2",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"histoire": "^0.17.2",
"postcss": "^8.4.31",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"publint": "^0.1.9",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2"

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

Wombosvideo commented 6 months ago

This is not only true for the grid layout. It affects the singe layout as well, making the "source" property useless.

MikhaD commented 4 months ago

I was about to create this issue. I just wrote a Svelte pre-processor to provide dynamic source for my stories / variants only to discover that stories with multiple variants display the source of the last variant for each variant.

histoire-dev / histoire