knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Iframe component API and docs improvements

Browse Source
This commit is contained in:
Demenech 2024-04-09 16:07:12 -03:00
parent 4b5d549190
commit b7ee5a1869
3 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/components/src/components/Excel.tsx
View File

@ -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) {

15
packages/components/src/components/Iframe.tsx
View File

@ -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({
url, style
}: IframeProps) {
export function Iframe({ data, style }: IframeProps) {
const url = data.url;
return (
<iframe src={url} style={style ?? { width: `100%`, height: `100%` }}></iframe>
<iframe
src={url}
style={style ?? { width: `100%`, height: `100%` }}
></iframe>
);
}

12
packages/components/stories/Iframe.stories.ts
View File

@ -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: {
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%` },
},
};