import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import Portal from './';
import { lightTheme } from '../../../theme/';
import Flex from '../Flex';

<Meta title="UI Components/Portal" />

# Portal

The Portal component is used to render children into any DOM node that exists outside the DOM hierarchy of the portal's container.

## Importing

```javascript
import { Portal } from 'amazon-chime-sdk-component-library-react';
```

## Example

<ThemeProvider theme={lightTheme}>
  <Canvas>
    <Flex layout="fill-space-centered">
      <Flex
        layout="equal-columns"
        style={{ width: '20rem' }}
      >
        <Portal rootId="root-div-1">
          <div
            style={{
              backgroundColor: 'lightgray',
              padding: '1rem',
              borderRadius: '0.5rem',
            }}
          >
            Portal content
          </div>
        </Portal>
        <div
          id="root-div-1"
          style={{
            border: '1px solid lightblue',
            borderRadius: '1rem',
            padding: '1rem',
          }}
        >
          Root Div 1
        </div>
        <div
          id="root-div-2"
          style={{
            border: '1px solid lightgreen',
            borderRadius: '1rem',
            padding: '1rem',
          }}
        >
          Root Div 2
        </div>
      </Flex>
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<Flex layout="equal-columns" justifyContent="space-between">
  <Portal rootId="root-div-1">
    <div>Portal content</div>
  </Portal>
  <div id="root-div-1">Root Div 1</div>
  <div id="root-div-2">Root Div 2</div>
</Flex>
```

## Props

<ArgTypes of={Portal} />