@lightspeed/cirrus-dialog

5.0.2 • Public • Published

Dialog

Reusable and structured dialog box.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-dialog

Or using npm:

npm i -S @lightspeed/cirrus-dialog

Usage

Import required styles in your .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

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

<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>

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-dialog

Weekly Downloads

15

Version

5.0.2

License

MIT

Unpacked Size

30.2 kB

Total Files

11

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen