feat: Iframe component API and docs improvements

packages/components/src/components/Excel.tsx

@@ -7,7 +7,7 @@ import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { Data } from '../types/properties';
 
 export type ExcelProps = {
-  data: Pick<Data, 'url'>;
+  data: Required<Pick<Data, 'url'>>;
 };
 
 export function Excel({ data }: ExcelProps) {

packages/components/src/components/Iframe.tsx

@@ -1,14 +1,17 @@
-import { CSSProperties } from "react";
+import { CSSProperties } from 'react';
+import { Data } from '../types/properties';
 
 export interface IframeProps {
-  url: string;
+  data: Required<Pick<Data, 'url'>>;
   style?: CSSProperties;
 }
 
-export function Iframe({
+export function Iframe({ data, style }: IframeProps) {
-  url, style
+  const url = data.url;
-}: IframeProps) {
   return (
-    <iframe src={url} style={style ?? { width: `100%`, height: `100%` }}></iframe>
+    <iframe
+      src={url}
+      style={style ?? { width: `100%`, height: `100%` }}
+    ></iframe>
   );
 }

packages/components/stories/Iframe.stories.ts

@@ -7,13 +7,13 @@ const meta: Meta = {
   component: Iframe,
   tags: ['autodocs'],
   argTypes: {
-    url: {
+    data: {
       description:
-        'Page to display inside of the component',
+        'Object with a `url` property pointing to the page to be embeded.',
     },
     style: {
       description:
-        'Style of the component',
+        'Style object of the component. See example at https://react.dev/learn#displaying-data. Defaults to `{ width: "100%", height: "100%" }`',
     },
   },
 };
@@ -25,7 +25,9 @@ type Story = StoryObj<IframeProps>;
 export const Normal: Story = {
   name: 'Iframe',
   args: {
+    data: {
       url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
-    style: {width: `100%`, height: `100%`}
+    },
+    style: { width: `100%`, height: `100%` },
   },
 };