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

Merge pull request #1066 from datopian/feature/iframe-component

Browse Source 
Created Iframe component
This commit is contained in:
Leonardo Yuri Farias 2024-01-17 22:38:23 -03:00 committed by GitHub
commit 7049917ef7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nervous-pens-chew.md Normal file
View File

@ -0,0 +1,5 @@
---
'@portaljs/components': patch
---
Created Iframe component

14
packages/components/src/components/Iframe.tsx Normal file
View File

@ -0,0 +1,14 @@
import { CSSProperties } from "react";
export interface IframeProps {
url: string;
style?: CSSProperties;
}
export function Iframe({
url, style
}: IframeProps) {
return (
<iframe src={url} style={style ?? { width: `100%`, height: `100%` }}></iframe>
);
}

1
packages/components/src/index.ts
View File

@ -9,3 +9,4 @@ export * from './components/Map';
export * from './components/PdfViewer';
export * from "./components/Excel";
export * from "./components/BucketViewer";
export * from "./components/Iframe";

4
packages/components/stories/BucketViewer.stories.ts
View File

@ -1,6 +1,6 @@
import { raw, type Meta, type StoryObj } from '@storybook/react';
import { type Meta, type StoryObj } from '@storybook/react';
import { BucketViewer, BucketViewerData, BucketViewerProps } from '../src/components/BucketViewer';
import { BucketViewer, BucketViewerProps } from '../src/components/BucketViewer';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta = {

31
packages/components/stories/Iframe.stories.ts Normal file
View File

@ -0,0 +1,31 @@
import { type Meta, type StoryObj } from '@storybook/react';
import { Iframe, IframeProps } from '../src/components/Iframe';
const meta: Meta = {
title: 'Components/Iframe',
component: Iframe,
tags: ['autodocs'],
argTypes: {
url: {
description:
'Page to display inside of the component',
},
style: {
description:
'Style of the component',
},
},
};
export default meta;
type Story = StoryObj<IframeProps>;
export const Normal: Story = {
name: 'Iframe',
args: {
url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
style: {width: `100%`, height: `100%`}
},
};