Move PreviewFrame to styled components

Author: catarak

client/modules/IDE/components/PreviewFrame.jsx

@@ -1,9 +1,16 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import styled from 'styled-components';
 import getConfig from '../../../utils/getConfig';
 import { registerFrame } from '../../../utils/dispatcher';
 
+const Frame = styled.iframe`
+  min-height: 100%;
+  min-width: 100%;
+  position: ${(props) => (props.fullView ? 'relative' : 'absolute')};
+  border-width: 0;
+`;
+
 function PreviewFrame({ fullView }) {
   const iframe = useRef();
   const previewUrl = getConfig('PREVIEW_URL');
@@ -14,22 +21,17 @@ function PreviewFrame({ fullView }) {
     };
   });
 
-  // TODO move this to styled components
-  const iframeClass = classNames({
-    'preview-frame': true,
-    'preview-frame--full-view': fullView
-  });
   const frameUrl = previewUrl;
   const sandboxAttributes =
     'allow-scripts allow-pointer-lock allow-popups allow-forms allow-modals allow-downloads allow-same-origin';
   return (
-    <iframe
+    <Frame
       title="sketch preview"
       src={frameUrl}
-      className={iframeClass}
       sandbox={sandboxAttributes}
       frameBorder="0"
       ref={iframe}
+      fullView={fullView}
     />
   );
 }

client/styles/components/_preview-frame.scss

@@ -1,14 +1,3 @@
-.preview-frame {
-  min-height: 100%;
-  min-width: 100%;
-  position: absolute;
-  border-width: 0;
-}
-
-.preview-frame--full-view {
-  position: relative;
-}
-
 .preview-frame-holder {
   display: flex;
   flex-direction: column;