fixing iframes

Author: jhicken

examples/cards.js

@@ -11,37 +11,39 @@ export function buildCards() {
 
   abc.card(<Foo message="yo" />, 'here is  a simple example')
 
-  demo.card(
-    `## markdown doc
-    you can use markdown for card documentation
-    - foo
-    - bar`,
+  demo.card(`
+## markdown doc
+you can use markdown for card documentation
+- foo
+- bar
+    `,
     <Foo message="hello"/>
   )
 
   demo.card(<Foo message="hello world"/>)
 
   demo.card(<Bar/>, {title: 'a bar card'})
 
-  demo.card(
-    `## Counter
+  demo.card(`
+## Counter
 
-    This is a stateful counter. If you change the value prop
-    in the source file it will not update because the new prop will be ignored
-    and instead the component local state is rendered.
+This is a stateful counter. If you change the value prop
+in the source file it will not update because the new prop will be ignored
+and instead the component local state is rendered.
 
-    Implement *componentWillReceiveProps* and override the component local state
-    if you want this to work as expected.`,
+Implement *componentWillReceiveProps* and override the component local state
+if you want this to work as expected.
+    `,
 
     <StatefulCounter value={42}/>
   )
 
-  demo.card(
-    `## Stateless Counter
-    This example shows how to manage state when you have a stateless
-    component. The card can also dump the current state as JSON if
-    you set the *inspect* flag to true.`,
-
+  demo.card(`
+## Stateless Counter
+This example shows how to manage state when you have a stateless
+component. The card can also dump the current state as JSON if
+you set the *inspect* flag to true.
+    `,
     (state) =>
       <StatelessCounter
         value={state.get()}
@@ -53,10 +55,10 @@ export function buildCards() {
     }
   )
 
-  demo.card(
-    `## Undo/Redo
-    Same example as before but with undo/redo controls added by the card.`,
-
+  demo.card(`
+## Undo/Redo
+Same example as before but with undo/redo controls added by the card.
+    `,
     (state) =>
       <StatelessCounter
         value={state.get()}
@@ -68,11 +70,11 @@ export function buildCards() {
     }
   )
 
-  demo.card(
-    `## TodoList
-    A simple todo list showing history and inspect feature
-    with a little more interesting model than just a simple number.`,
-
+  demo.card(`
+## TodoList
+A simple todo list showing history and inspect feature
+with a little more interesting model than just a simple number.
+    `,
     (state) =>
       <TodoList items={state.get()}
         onSubmit={(text) => state.update(items => [...items, {text, done: false}])}
@@ -89,17 +91,18 @@ export function buildCards() {
   )
 
   demo.markdown(`
-  # a markdown card
-  this is a simple markdown card
-  - lorem
-  - ipsum
+# a markdown card
+this is a simple markdown card
+- lorem
+- ipsum
   `)
 
   demo.test(testSimple, {title:'simple tests'})
 
-  demo.test(
-    `## component tests
-    Here you can see the results of some component tests.`,
+  demo.test(`
+## component tests
+Here you can see the results of some component tests.
+    `,
     testComponents
   )
 

package.json

@@ -23,6 +23,7 @@
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "mocha": "^2.4.5",
+    "raw-loader": "^0.5.1",
     "sinon": "^1.17.4",
     "style-loader": "^0.13.1",
     "tape": "^4.5.1",
@@ -35,10 +36,12 @@
     "enzyme": "^2.3.0",
     "history": "^2.1.1",
     "lodash": "^4.12.0",
+    "iframe-resizer": "^3.5.3",
     "myro": "^0.6.2",
     "react": "^15.0.2",
     "react-addons-test-utils": "^15.0.2",
     "react-dom": "^15.0.2",
+    "react-frame-component": "^0.6.1",
     "react-hot-loader": "^3.0.0-alpha.8",
     "showdown": "^1.3.0"
   },

src/TestCard.js

@@ -77,7 +77,7 @@ export default class TestCard extends Component {
   render() {
     const {title, doc} = this.props
     return (
-      <Card {...{title, doc}}>
+      <Card noframe {...{title, doc}}>
       {this.state.results.map(([result, name], index) => (
         result === true
           ? <TestSuccess key={index}>{name}</TestSuccess>

src/style.less

@@ -24,6 +24,10 @@ body {
   border-radius:2px;
   font-family:sans-serif;
   background-color:white;
+  iframe {
+    width: 100%;
+    border: none;
+  }
 }
 
 :local(.cardHeader) {