Add stories for attributes option for create*PortalNode

Author: renatasva

stories/html.stories.js

@@ -260,6 +260,35 @@ storiesOf('Portals', module)
 
         return <ChangeLayoutWithoutUnmounting />;
     })
+    .add('can pass attributes option to createHtmlPortalNode', () => {
+        return React.createElement(() => {
+            const [hasAttrOption, setHasAttrOption] = React.useState(false);
+
+            const portalNode = createHtmlPortalNode( hasAttrOption ? {
+                attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" }
+            } : null);
+
+            return <div>
+                <button onClick={() => setHasAttrOption(!hasAttrOption)}>
+                    Click to pass attributes option to the intermediary div
+                </button>
+
+                <hr/>
+
+                <InPortal node={portalNode}>
+                    <div style={{width: '200px', height: '50px', border: '2px solid purple'}} />
+                </InPortal>
+
+                <OutPortal node={portalNode} />
+
+                <br/>
+                <br/>
+                <br/>
+
+                <text>{!hasAttrOption ? `const portalNode = createHtmlPortalNode();` : `const portalNode = createHtmlPortalNode({ attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" } });`}</text>
+            </div>
+        });
+    })
     .add('Example from README', () => {
         const MyExpensiveComponent = () => 'expensive!';
 

stories/svg.stories.js

@@ -92,4 +92,32 @@ storiesOf('SVG Portals', module)
                 </svg>
             </div>
         })
+    })
+    .add('can pass attributes option to createSvgPortalNode', () => {
+        return React.createElement(() => {
+            const [hasAttrOption, setHasAttrOption] = React.useState(false);
+
+            const portalNode = createSvgPortalNode(hasAttrOption ? {attributes: { stroke: 'blue' }} : null);
+            return <div>
+                <button onClick={() => setHasAttrOption(!hasAttrOption)}>
+                    Click to pass attributes option to the intermediary svg
+                </button>
+
+                <hr/>
+
+                <svg>
+                    <InPortal node={portalNode}>
+                        <circle cx="50" cy="50" r="40"  fill="lightblue" />
+                    </InPortal>
+
+                    <svg x={30} y={10}>
+                      <OutPortal node={portalNode} />
+                    </svg>
+                </svg>
+
+                <br/>
+
+                <text>{!hasAttrOption ? `const portalNode = createSvgPortalNode();` : `const portalNode = createSvgPortalNode({ attributes: { stroke: "blue" } });`}</text>
+            </div>
+        });
     });