import { pug, styl } from 'startupjs'
import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
import Popover from './'
import Icon from '../../Icon'
import Button from '../../Button'
import Span from '../../typography/Span'

# Popover
Pop-up window for displaying hidden content, linked in some way to a specific element on the page and becomes visible when you click on this.

```jsx
import { Popover } from '@startupjs/ui'
```

## Initialization
Before use you need to configure [Portal](/docs/components/Portal)

## Simple example
- children (ReactNode): visible part
- renderContent (function: ReactNode): function returns hidden part

```jsx example
function renderContent () {
  return pug`
    Span Content
  `
}

return pug`
  Popover.caption(renderContent=renderContent)
    Icon(icon=faUserCircle size='xl')
`

styl`
  .caption
    width 3u
`
```

## Position
- position (string - 'top', 'bottom', 'left', 'right'): position relative to the visible part
- attachment (string - 'start', 'center', 'end'): optional parameter for offset
- placements (array): what positions can be used for auto-fix

```jsx example
function renderContent () {
  return pug`
    Span Content
  `
}

return pug`
  Popover(
    position='top'
    attachment='center'
    renderContent=renderContent
  )
    Button Open
`
```

## Stylization
- style (CSSProperties): styles for visible part
- attachmentStyle (CSSProperties): styles for hidden part
- arrowStyle (CSSProperties): arrow styles
- arrow (boolean): show an arrow
- matchAnchorWidth (boolean): the width of the hidden part is equal to the width of the visible part

```jsx example
function renderContent () {
  return pug`
    Span.text Content
  `
}

return pug`
  Popover.caption(
    arrow
    renderContent=renderContent
    attachmentStyle={ backgroundColor: '#333' }
    attachment='center'
    matchAnchorWidth
  )
    Button Open
`

styl`
  .caption
    alignSelt flex-start
  .text
    color #fff
    text-align center
`
```

## Extra options
- durationOpen (number): animation time on opening
- durationClose (number): animation time on close
- renderWrapper (function: ReactNode): forms a wrapper for children