Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: render stories/grid in iframe only, related to #339 #711

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions docs/examples/vue3/single-stories.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Single stories

Here are some pattern examples to test your component without any variant. This is the simplest way to get you started.

## Within an iframe

This will display your component inside an iframe to be able to test the responsiveness correctly. The iframe is needed for CSS media queries to work properly.
The default way to display stories and variants is inside an iframe that renders a single variant. The iframe is needed for CSS media queries to work properly and to isolate your application's styles.

```vue
<script lang="ts" setup>
@@ -18,9 +14,7 @@ import MyComponent from './MyComponent.vue'
</template>
```

## Integrated

This will integrate your component directly in the app. The advantage being that you can pass complex arguments (such as functions or recursive object), but responsiveness won't work for CSS media queries.
This example is equivalent to:

```vue
<script lang="ts" setup>
@@ -30,7 +24,7 @@ import MyComponent from './MyComponent.vue'
<template>
<Story
title="MyStory"
:layout="{ type: 'single', iframe: false }"
:layout="{ type: 'single' }"
>
<MyComponent />
</Story>
7 changes: 2 additions & 5 deletions docs/guide/svelte3/stories.md
Original file line number Diff line number Diff line change
@@ -87,10 +87,7 @@ You can change the layout of the variant by using the `layout` prop with an obje

### Single layout

This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.

Additional `layout` properties:
- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
This is the default layout, displaying one variant at a time. The story is isolated with an iframe.

```svelte{7}
<script>
@@ -99,7 +96,7 @@ Additional `layout` properties:

<Hst.Story
title="Cars"
layout={{ type: 'single', iframe: true }}
layout={{ type: 'single' }}
>
<Hst.Variant title="default">
🚗
7 changes: 2 additions & 5 deletions docs/guide/vue2/stories.md
Original file line number Diff line number Diff line change
@@ -64,16 +64,13 @@ You can change the layout of the variant by using the `layout` prop with an obje

### Single layout

This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.

Additional `layout` properties:
- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
This is the default layout, displaying one variant at a time. The story is isolated with an iframe.

```vue{4}
<template>
<Story
title="Cars"
:layout="{ type: 'single', iframe: true }"
:layout="{ type: 'single' }"
>
<Variant title="default">
🚗
7 changes: 2 additions & 5 deletions docs/guide/vue3/stories.md
Original file line number Diff line number Diff line change
@@ -64,16 +64,13 @@ You can change the layout of the variant by using the `layout` prop with an obje

### Single layout

This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.

Additional `layout` properties:
- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
This is the default layout, displaying one variant at a time. The story is isolated with an iframe.

```vue{4}
<template>
<Story
title="Cars"
:layout="{ type: 'single', iframe: true }"
:layout="{ type: 'single' }"
>
<Variant title="default">
🚗
2 changes: 0 additions & 2 deletions docs/reference/svelte3/story.md
Original file line number Diff line number Diff line change
@@ -26,8 +26,6 @@ Id of the story used in the URL. By default, the id is automatically generated f

Layout of the story. Object with the following properties:
- `type`: `'single'` or `'grid'`
- with `type: 'single'` you can specify:
- `iframe`: Whether to isolate the story in an iframe. You might want to disable it if you want to pass complexe parameters that can't be serialized.
- with `type: 'grid'` you can specify:
- `width`: Column size. Can be number (pixels) or string (like `'100%'`).

2 changes: 0 additions & 2 deletions docs/reference/vue3/story.md
Original file line number Diff line number Diff line change
@@ -30,8 +30,6 @@ Id of the story used in the URL. By default, the id is automatically generated f

Layout of the story. Object with the following properties:
- `type`: `'single'` or `'grid'`
- with `type: 'single'` you can specify:
- `iframe`: Whether to isolate the story in an iframe. You might want to disable it if you want to pass complexe parameters that can't be serialized.
- with `type: 'grid'` you can specify:
- `width`: Column size. Can be number (pixels) or string (like `'100%'`).

1 change: 0 additions & 1 deletion examples/nuxt3/components/BaseButtonLink.story.vue
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@
title="BaseButton with NuxtLink"
:layout="{
type: 'single',
iframe: false,
}"
>
<Variant>
2 changes: 1 addition & 1 deletion examples/nuxt3/cypress/e2e/render-story.cy.js
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ describe('Story render', () => {

it('should render NuxtLink', () => {
cy.visit('/story/components-basebuttonlink-story-vue?variantId=_default')
cy.get('.histoire-generic-render-story a').contains('Hello world')
getIframeBody().find('.histoire-generic-render-story a').contains('Hello world')
})

it('should render the public config populated from Nuxt', () => {
11 changes: 3 additions & 8 deletions examples/svelte4/cypress/e2e/render-story.cy.js
Original file line number Diff line number Diff line change
@@ -10,16 +10,11 @@ describe('Story render', () => {
getIframeBody().contains('😺')
})

it('should display the story content (no iframe)', () => {
cy.visit('/story/src-noiframe-story-svelte?variantId=_default')
cy.get('[data-test-id="story-variant-single-view"]').contains('No iframe story content')
})

it('should display the story content (grid)', () => {
cy.visit('/story/src-cars-story-svelte')
cy.get('[data-test-id="sandbox-render"]').contains('🚗')
cy.get('[data-test-id="sandbox-render"]').contains('🏎️')
cy.get('[data-test-id="sandbox-render"]').contains('🚜')
getIframeBody().find('[data-test-id="sandbox-render"]').contains('🚗')
getIframeBody().find('[data-test-id="sandbox-render"]').contains('🏎️')
getIframeBody().find('[data-test-id="sandbox-render"]').contains('🚜')
})
})

9 changes: 0 additions & 9 deletions examples/svelte4/cypress/e2e/state-sync.cy.js
Original file line number Diff line number Diff line change
@@ -14,13 +14,4 @@ describe('State sync', () => {
getIframeBody().find('input[type="checkbox"]').click()
cy.get('[data-test-id="story-controls"] pre').contains('"disabled": false')
})

it('should display the story content (no iframe)', () => {
cy.visit('/story/src-noiframe-story-svelte?variantId=_default')
cy.get('[data-test-id="sandbox-render"]').find('div').contains('Some content')
cy.get('[data-test-id="story-controls"]').get('input').clear().type('42')
cy.get('[data-test-id="sandbox-render"]').find('div').contains('42')
cy.get('[data-test-id="sandbox-render"]').find('input').clear().type('Meow')
cy.get('[data-test-id="story-controls"]').get('input').should('have.value', 'Meow')
})
})
36 changes: 0 additions & 36 deletions examples/svelte4/src/NoIframe.story.svelte

This file was deleted.

15 changes: 2 additions & 13 deletions examples/vue3/cypress/e2e/toolbar-background.cy.js
Original file line number Diff line number Diff line change
@@ -23,17 +23,6 @@ describe('background color', () => {
'rgb(0, 81, 66)',
]

it('should provide background and contrast color (no iframe)', () => {
cy.visit('/story/src-components-complexparameter-story-vue?variantId=_default')
cy.get('[data-test-id="toolbar-background"]').click()
cy.get('[data-test-id="background-popper"]').should('be.visible').find('button').should('have.length', 6).each(($el, index) => {
cy.wrap($el).click()
cy.get('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
cy.get('[data-test-id="story-variant-single-view"] .native-story').should('have.css', 'color', contrastColorShouldBe[index])
cy.get('[data-test-id="toolbar-background"]').click()
})
})

it('should provide background and contrast color (with iframe)', () => {
cy.visit('story/src-components-contrastcolor-story-vue?variantId=_default')
cy.get('[data-test-id="toolbar-background"]').click()
@@ -49,8 +38,8 @@ describe('background color', () => {
cy.get('[data-test-id="toolbar-background"]').click()
cy.get('[data-test-id="background-popper"]').should('be.visible').find('button').should('have.length', 6).each(($el, index) => {
cy.wrap($el).click()
cy.get('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
cy.get('.histoire-generic-render-story .text').should('have.css', 'color', contrastColorShouldBe[index])
getIframeBody().find('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
getIframeBody().find('.histoire-generic-render-story .text').should('have.css', 'color', contrastColorShouldBe[index])
cy.get('[data-test-id="toolbar-background"]').click()
})
})
5 changes: 1 addition & 4 deletions examples/vue3/src/LongFile1.story.md
Original file line number Diff line number Diff line change
@@ -66,14 +66,11 @@ You can change the layout of the variant by using the `layout` prop with an obje

This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.

Additional `layout` properties:
- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.

```vue{4}
<template>
<Story
title="Cars"
:layout="{ type: 'single', iframe: true }"
:layout="{ type: 'single' }"
>
<Variant title="default">
🚗
2 changes: 1 addition & 1 deletion examples/vue3/src/components/ComplexParameter.story.vue
Original file line number Diff line number Diff line change
@@ -8,14 +8,14 @@
child.parent = parent

const myParameter = [
{ action: () => { console.log('Hello world!') } },

Check warning on line 11 in examples/vue3/src/components/ComplexParameter.story.vue

GitHub Actions / Build and test

Unexpected console statement

Check warning on line 11 in examples/vue3/src/components/ComplexParameter.story.vue

GitHub Actions / Build and test

Unexpected console statement
]
</script>

<template>
<Story
title="ComplexParameter"
:layout="{ type: 'single', iframe: false }"
:layout="{ type: 'single' }"
>
<ComplexParameter
:complex-parameter="myParameter"
1 change: 0 additions & 1 deletion examples/vue3/src/components/Responsive.story.vue
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import Responsive from './Responsive.vue'
<Story title="Responsive">
<Variant
title="default"
iframe
>
<Responsive />
</Variant>
Loading
Loading