diff --git a/.changeset/nervous-pens-chew.md b/.changeset/nervous-pens-chew.md new file mode 100644 index 000000000..6919db7b3 --- /dev/null +++ b/.changeset/nervous-pens-chew.md @@ -0,0 +1,5 @@ +--- +'@portaljs/components': patch +--- + +Created Iframe component diff --git a/packages/components/src/components/Iframe.tsx b/packages/components/src/components/Iframe.tsx new file mode 100644 index 000000000..9cdb65a56 --- /dev/null +++ b/packages/components/src/components/Iframe.tsx @@ -0,0 +1,14 @@ +import { CSSProperties } from "react"; + +export interface IframeProps { + url: string; + style?: CSSProperties; +} + +export function Iframe({ + url, style +}: IframeProps) { + return ( + + ); +} diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index daf4b688c..11f791ff3 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -9,3 +9,4 @@ export * from './components/Map'; export * from './components/PdfViewer'; export * from "./components/Excel"; export * from "./components/BucketViewer"; +export * from "./components/Iframe"; diff --git a/packages/components/stories/BucketViewer.stories.ts b/packages/components/stories/BucketViewer.stories.ts index c3bf42c2d..1e914d9ac 100644 --- a/packages/components/stories/BucketViewer.stories.ts +++ b/packages/components/stories/BucketViewer.stories.ts @@ -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 = { diff --git a/packages/components/stories/Iframe.stories.ts b/packages/components/stories/Iframe.stories.ts new file mode 100644 index 000000000..6d5884a88 --- /dev/null +++ b/packages/components/stories/Iframe.stories.ts @@ -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; + +export const Normal: Story = { + name: 'Iframe', + args: { + url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9', + style: {width: `100%`, height: `100%`} + }, +};