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

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-dialog

    DownloadsWeekly Downloads

    16

    Version

    5.0.2

    License

    MIT

    Unpacked Size

    30.2 kB

    Total Files

    11

    Last publish

    Collaborators

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