diff --git a/packages/components/src/components/Excel.tsx b/packages/components/src/components/Excel.tsx index 0878fc85..f82e0840 100644 --- a/packages/components/src/components/Excel.tsx +++ b/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: Required>; }; export function Excel({ data }: ExcelProps) { diff --git a/packages/components/src/components/Iframe.tsx b/packages/components/src/components/Iframe.tsx index 9cdb65a5..c85bd630 100644 --- a/packages/components/src/components/Iframe.tsx +++ b/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>; style?: CSSProperties; } -export function Iframe({ - url, style -}: IframeProps) { +export function Iframe({ data, style }: IframeProps) { + const url = data.url; return ( - + ); } diff --git a/packages/components/stories/Iframe.stories.ts b/packages/components/stories/Iframe.stories.ts index 759acfe4..04b8ec35 100644 --- a/packages/components/stories/Iframe.stories.ts +++ b/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; export const Normal: Story = { name: 'Iframe', args: { - url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9', - style: {width: `100%`, height: `100%`} + data: { + url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9', + }, + style: { width: `100%`, height: `100%` }, }, };