@wix/design-system
Version:
@wix/design-system
34 lines • 1.75 kB
JavaScript
import { storiesOf } from '@storybook/react';
import React, { useEffect } from 'react';
import Frame, { FrameContextConsumer } from 'react-frame-component';
import WixDesignSystemProvider from '../../../WixDesignSystemProvider';
const CustomIframe = ({ children }) => {
const [bodyClassName, setBodyClassName] = React.useState(document.body.className);
// copy everything in the outer document's head into the inner document to set the styles
// https://github.com/ryanseddon/react-frame-component/issues/37#issuecomment-215271946
const initialContent = `<!DOCTYPE html><html><head>${document.head.innerHTML}</head><body><div></div></body></html>`;
useEffect(() => {
setTimeout(() => {
// because WDS provider classes are immediately available
setBodyClassName(document.body.className);
}, 100);
}, []);
return (React.createElement(Frame, { width: 480, height: 1200, initialContent: initialContent },
React.createElement(FrameContextConsumer, null, ({ document }) => {
if (document) {
document.body.className = bodyClassName;
}
return children;
})));
};
export const addStories = ({ title, describe, it, render, isMobile, }) => {
const story = storiesOf(`${title}${describe ? '/' + describe : ''}`, module);
story.add(it, () => render());
if (isMobile) {
story.add(`${it}-screen-small`, () => (React.createElement(React.Fragment, null,
React.createElement(CustomIframe, null, render()),
React.createElement(CustomIframe, null,
React.createElement(WixDesignSystemProvider, { mobile: true }, render())))));
}
};
//# sourceMappingURL=addStories.js.map