create extra stories for iframe. Related to #241

theKashey · Feb 16, 2023 · b65f5b8 · b65f5b8
1 parent f1fcbc9
commit b65f5b8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/stories/Iframe.js b/stories/Iframe.js
@@ -21,7 +21,6 @@ class Trap extends Component {
 
   render() {
     const {disabled} = this.state;
-    const {crossFrame} = this.props;
     return (
       <FocusLock disabled={this.state.disabled}>
         {disabled && <div>
@@ -34,9 +33,7 @@ class Trap extends Component {
         }
         You will cycle over this. Never leaving <br/>
         <input placeholder="input1"/>
-
-        <iframe src={`/iframe.html?id=focus-lock--codesandbox-example&crossFrame=${crossFrame}`} style={{width:'100%', height: '400px'}}/>
-
+          {this.props.children}
         <input placeholder="input2"/>
 
         { !disabled && <div>
@@ -50,13 +47,28 @@ class Trap extends Component {
   }
 }
 
-const App = (props) =>
+export const IFrame = (props) =>
   <div style={styles}>
     <input placeholder="input1"/>
     <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
-    <Trap {...props} />
+    <Trap {...props}>
+        <iframe src={`/iframe.html?id=focus-lock--codesandbox-example&crossFrame=${props.crossFrame}`} style={{width:'100%', height: '400px'}}/>
+    </Trap>
     <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
     <input placeholder="input1"/>
   </div>;
 
-export default App;
+export const SandboxedIFrame = (props) =>
+    <div style={styles}>
+        <input placeholder="input1"/>
+        <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
+        <Trap {...props} >
+            <iframe
+                title="test-iframe"
+                src="https://chekrd.github.io/custom-element/index.html"
+                sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts allow-downloads allow-storage-access-by-user-activation"
+            />
+        </Trap>
+        <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
+        <input placeholder="input1"/>
+    </div>;
diff --git a/stories/index.js b/stories/index.js
@@ -6,7 +6,7 @@ import { linkTo } from '@storybook/addon-links';
 
 
 import DefaultAll from './Default';
-import Iframe from './Iframe';
+import {IFrame, SandboxedIFrame} from './Iframe';
 import SideCar from './sideCar';
 import TabIndex from './TabIndex';
 import AutoFocus from './Autofocus';
@@ -79,8 +79,9 @@ storiesOf('Disabled', module)
 
 storiesOf('Exotic', module)
   .add('video', () => <Frame><Video /></Frame>)
-  .add('iframe - crossframe', () => <Frame><Iframe crossFrame /></Frame>)
-  .add('iframe - free', () => <Frame><Iframe crossFrame={false} /></Frame>)
+  .add('iframe - crossframe', () => <Frame><IFrame crossFrame /></Frame>)
+  .add('iframe - free', () => <Frame><IFrame crossFrame={false} /></Frame>)
+  .add('iframe - Sandbox', () => <Frame><SandboxedIFrame /></Frame>)
   .add('sidecar', () => <Frame><SideCar /></Frame>)
   .add('tabbable parent', () => <Frame><TabbableParent /></Frame>)
   .add('form override', () => <Frame><FormOverride /></Frame>);