npm package: @lightspeed/cirrus-dialog
Description: Cirrus Dialog Component
Author: Lightspeed
Latest version: 5.0.2

# Dialog

Reusable and structured dialog box.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-dialog
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-dialog
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-dialog/Dialog.scss';
```

### React Component

#### Props

| Prop          | Type   | Default    | Required | Description                                                                                         |
| ------------- | ------ | ---------- | -------- | --------------------------------------------------------------------------------------------------- |
| `type`        | string | `default`  | no       | One of `default`, `primary`, `secondary`, `danger`                                                  |
| `message`     | string |            | yes      | String shown in the `ModalBody` as the message, `required`                                          |
| `title`       | string |            | no       | String shown in the `ModalHeader` as title                                                          |
| `isOpen`      | bool   | `false`    | no       | State to determine if `<Dialog>` should be displayed                                                |
| `isLoading`   | bool   | `false`    | no       | State to determine if the actions buttons should be disabled while some promise is getting resolved |
| `scroll`      | bool   | `false`    | no       | State to determine if the body of the modal should be scrollable or not                             |
| `onCancel`    | func   |            | yes      | Function called when the `cancel` button is clicked, `required`                                     |
| `onConfirm`   | func   |            | yes      | Function called when the `confirm` button is clicked, `required`                                    |
| `cancelText`  | string | `'Cancel'` | no       | String shown on the `cancel` button                                                                 |
| `confirmText` | string | `'Ok'`     | no       | String shown on the `confirm` button                                                                |
| `cancelRest`  | object |            | no       | Shape with any object pass to the `cancel` button, e.g(`{data-test: 'dialog-cancel-button'}`)       |
| `confirmRest` | object |            | no       | Shape with any object pass to the `confirm` button, e.g(`{data-test: 'dialog-cancel-button'}`)      |

#### Example

```js
import React from 'react';
import Dialog from '@lightspeed/cirrus-dialog';

const MyComponent = () => (
  <Dialog
    title="Title"
    message="Messsage"
    isOpen={this.state.isOpen}
    isLoading={this.state.isLoading}
    onCancel={this.onCancel}
    onConfirm={this.onConfirm}
    cancelText="No"
    confirmText="Yes"
    type="danger"
  />
);

export default MyComponent;
```

### CSS Component

#### Classes

| Type | Class                 |
| ---- | --------------------- |
| base | `.cr-dialog`          |
| base | `.cr-dialog__actions` |

#### Example

```html
<div class="cr-dialog">
    <div class="cr-modal__header">
        <div class="cr-modal__header__content-wrap">Dialog Prompt ''</div>
        <div class="cr-modal__close-wrap"></div>
    </div>
    <div class="cr-modal__body">
        <p class="cr-text-base cr-text--body">Are you sure, are you really really sure? It's your call. </p>
    </div>
    <div class="cr-modal__footer">
        <div class="cr-group cr-dialog__actions">
            <div class="cr-group__item">
                <button type="button" class="cr-button"><span class="cr-button__content">No</span></button>
            </div>
            <div class="cr-group__item">
                <button type="button" class="cr-button cr-button--fill"><span class="cr-button__content">Yes</span></button>
            </div>
        </div>
    </div>
</div>
```