Addon-docs: Fix Preview scaling with transform instead of zoom

lib/components/src/Zoom/Zoom.stories.tsx

@@ -57,15 +57,14 @@ elementZoomedIn.args = {
 export const elementZoomedOut = TemplateElement.bind({});
 
 elementZoomedOut.args = {
-  scale: 30,
+  scale: 3,
   children: EXAMPLE_ELEMENT,
 };
 const TemplateIFrame = (args) => <Zoom.IFrame {...args} />;
 export const iFrameActualSize = TemplateIFrame.bind({});
 
 iFrameActualSize.args = {
   scale: 1,
-  id: 'iframe',
   active: true,
   children: EXAMPLE_IFRAME,
 };
@@ -74,16 +73,14 @@ export const iFrameZoomedIn = TemplateIFrame.bind({});
 
 iFrameZoomedIn.args = {
   scale: 0.7,
-  id: 'iframe',
   active: true,
   children: EXAMPLE_IFRAME,
 };
 
 export const iFrameZoomedOut = TemplateIFrame.bind({});
 
 iFrameZoomedOut.args = {
-  scale: 30,
-  id: 'iframe',
+  scale: 3,
   active: true,
   children: EXAMPLE_IFRAME,
 };

lib/components/src/Zoom/ZoomIFrame.tsx

@@ -3,19 +3,16 @@ import { Component, ReactElement } from 'react';
 import { browserSupportsCssZoom } from './Zoom';
 
 export type IZoomIFrameProps = {
-  id: string;
   scale: number;
-  active: boolean;
   children: ReactElement<HTMLIFrameElement>;
+  active?: boolean;
 };
 
 export default class ZoomIFrame extends Component<IZoomIFrameProps> {
   iframe: HTMLIFrameElement = null;
 
   componentDidMount() {
-    const { id } = this.props;
-    this.iframe = window.document.getElementById(id);
-    this.iframe.addEventListener('load', this.setAttributeDataIsLoaded);
+    this.iframe = this.validateAndGetIFrame();
   }
 
   shouldComponentUpdate(nextProps: IZoomIFrameProps) {
@@ -34,27 +31,19 @@ export default class ZoomIFrame extends Component<IZoomIFrameProps> {
     return false;
   }
 
-  componentWillUnmount() {
-    this.iframe.removeEventListener('load', this.setAttributeDataIsLoaded);
-  }
-
-  setAttributeDataIsLoaded() {
-    this.iframe.setAttribute('data-is-loaded', 'true');
-  }
-
   setIframeInnerZoom(scale: number) {
     try {
       if (browserSupportsCssZoom()) {
+        Object.assign(this.iframe.contentDocument.body.style, {
+          zoom: 1 / scale,
+        });
+      } else {
         Object.assign(this.iframe.contentDocument.body.style, {
           width: `${scale * 100}%`,
           height: `${scale * 100}%`,
           transform: `scale(${1 / scale})`,
           transformOrigin: 'top left',
         });
-      } else {
-        Object.assign(this.iframe.contentDocument.body.style, {
-          zoom: 1 / scale,
-        });
       }
     } catch (e) {
       this.setIframeZoom(scale);
@@ -70,6 +59,14 @@ export default class ZoomIFrame extends Component<IZoomIFrameProps> {
     });
   }
 
+  validateAndGetIFrame(): HTMLIFrameElement {
+    const { children } = this.props;
+    if (!children.props.id) {
+      throw new Error(`missing id on Iframe given to ZoomIFrame`);
+    }
+    return window.document.getElementById(children.props.id);
+  }
+
   render() {
     const { children } = this.props;
     return children;

lib/ui/src/components/preview/iframe.tsx

@@ -25,9 +25,10 @@ export interface IFrameProps {
 export function IFrame(props: IFrameProps & IframeHTMLAttributes<HTMLIFrameElement>) {
   const { active, id, title, src, allowFullScreen, scale, ...rest } = props;
   return (
-    <Zoom.IFrame id={id} scale={scale} active={active}>
+    <Zoom.IFrame scale={scale} active={active}>
       <StyledIframe
         data-is-storybook={active ? 'true' : 'false'}
+        onLoad={(e) => e.currentTarget.setAttribute('data-is-loaded', 'true')}
         id={id}
         title={title}
         src={src}