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

docs/examples/vue3/single-stories.md

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

docs/guide/svelte3/stories.md

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

docs/guide/vue2/stories.md

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

docs/guide/vue3/stories.md

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

docs/reference/svelte3/story.md

@@ -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%'`).
 

docs/reference/vue3/story.md

@@ -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%'`).
 

examples/nuxt3/components/BaseButtonLink.story.vue

@@ -3,7 +3,6 @@
     title="BaseButton with NuxtLink"
     :layout="{
       type: 'single',
-      iframe: false,
     }"
   >
     <Variant>

examples/nuxt3/cypress/e2e/render-story.cy.js

@@ -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', () => {

examples/svelte4/cypress/e2e/render-story.cy.js

@@ -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('🚜')
   })
 })
 

examples/svelte4/cypress/e2e/state-sync.cy.js

@@ -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')
-  })
 })

examples/vue3/cypress/e2e/toolbar-background.cy.js

@@ -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()
     })
   })

examples/vue3/src/LongFile1.story.md

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

examples/vue3/src/components/ComplexParameter.story.vue

@@ -15,7 +15,7 @@ const myParameter = [
 <template>
   <Story
     title="ComplexParameter"
-    :layout="{ type: 'single', iframe: false }"
+    :layout="{ type: 'single' }"
   >
     <ComplexParameter
       :complex-parameter="myParameter"

examples/vue3/src/components/Responsive.story.vue

@@ -6,7 +6,6 @@ import Responsive from './Responsive.vue'
   <Story title="Responsive">
     <Variant
       title="default"
-      iframe
     >
       <Responsive />
     </Variant>