# pineapple-popup

<sup>This component is designed to be utilized in pineapple.net.au projects only.<br>
It should not be used outside the pineapple.net.au and landing pages of **pineapple.net.au**</sup>

## Install the component

```
yarn add pineapple-popup
```

#### Add with <script> tag
###### (Not recommended)
```
<script src="https://registry.npmjs.org/pineapple-popup"></script>
```

## Import the component and it's styles

###### It'll be the global component Popup

```
import 'pineapple-popup'
import 'pineapple-popup/dist/pineapple-popup.css'
```

### Node.js

```
const Popup = require('pineapple-popup')
const PopupStyles = require('pineapple-popup/dist/pineapple-popup.css')
```

## Usage

###### Success (form has been submitted)
```
<Popup type="success" :opened="popupOpened" />
```
###### Error (contact form error)
```
<Popup type="error" :opened="popupOpened" />
```
###### Disabled (contact form submission is disabled)
```
<Popup type="disabled" :opened="popupOpened" />
```
###### Any other message

You can send any info to component `Popup`:
```
<Popup
  :title="title"
  :text="text"
  :color="color"
  :opened="popupOpened"
/>
```